show item index status

This commit is contained in:
JesmoDev
2024-04-23 15:30:32 +02:00
parent 5fb669fa35
commit d912f27f2e

View File

@@ -161,8 +161,15 @@ export class UmbSearchModalElement extends UmbLitElement {
async #setSearchItemNavIndex(index: number) {
await this.updateComplete;
const prevElement = this.shadowRoot?.querySelector(
`a[data-item-index="${this.#searchItemNavIndex}"]`,
) as HTMLElement | null;
prevElement?.classList.remove('active');
this.#searchItemNavIndex = index;
const element = this.shadowRoot?.querySelector(`a[data-item-index="${index}"]`) as HTMLElement | null;
element?.classList.add('active');
if (!element) return;
if (!this._searchResults.length) return;
@@ -419,6 +426,11 @@ export class UmbSearchModalElement extends UmbLitElement {
outline-offset: -3px;
display: flex;
}
.search-item.active:not(:focus-within) {
outline: 2px solid var(--uui-color-border);
border-radius: 6px;
outline-offset: -4px;
}
`,
];
}