+ ${
+ this.historyHits.length
+ ? html`
${msg('Recent')}
@@ -161,7 +173,8 @@ export class SearchForm extends LitElement {
this.renderListItem(hit, index, 'i-lucide-history')
)}
`
- : this.renderEmpty()}
+ : this.renderEmpty()
+ }
`;
}
@@ -170,43 +183,49 @@ export class SearchForm extends LitElement {
return html`
(this.selectedIndex = index)}
- class="shadow-sm flex items-center space-x-3 rounded-base cursor-pointer p-3 bg-hit [&_mark]:text-primary [&_mark]:font-semibold [&_mark]:bg-transparent ${index ===
- this.selectedIndex
- ? '!bg-primary [&_mark]:!text-white [&_mark]:underline'
- : ''}"
+ @mouseenter=${() => {
+ this.selectedIndex = index;
+ }}
+ class="shadow-sm flex items-center space-x-3 rounded-base cursor-pointer p-3 bg-hit [&_mark]:text-primary [&_mark]:font-semibold [&_mark]:bg-transparent ${
+ index === this.selectedIndex
+ ? '!bg-primary [&_mark]:!text-white [&_mark]:underline'
+ : ''
+ }"
data-index=${index}
>
${unsafeHTML(hit.title)}
- ${hit.description
- ? html`
+ ${
+ hit.description
+ ? html`
${unsafeHTML(hit.description)}
`
- : ''}
+ : ''
+ }
`;
@@ -234,7 +253,7 @@ export class SearchForm extends LitElement {
this.historyHits = [];
}
- fetchHits: DebouncedFunc<(keyword: string) => Promise
> = debounce(
+ fetchHits: DebouncedFunction<(keyword: string) => Promise> = debounce(
async (keyword: string) => {
const searchOptions: SearchOption = {
...this.options,
diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
index b0edb61..b06d9ce 100644
--- a/packages/search-widget/src/search-modal.ts
+++ b/packages/search-widget/src/search-modal.ts
@@ -1,5 +1,5 @@
import resetStyles from '@unocss/reset/tailwind.css?inline';
-import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit';
+import { css, html, LitElement, type PropertyValues, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { OverlayScrollbars } from 'overlayscrollbars';
@@ -60,12 +60,14 @@ export class SearchModal extends LitElement {
data-overlayscrollbars-initialize
class="modal__content shadow-xl bg-modal"
>
- ${this.open
- ? html``
- : ''}
+ : ''
+ }