diff --git a/packages/search-widget/package.json b/packages/search-widget/package.json index 39da068..44a589b 100644 --- a/packages/search-widget/package.json +++ b/packages/search-widget/package.json @@ -27,6 +27,8 @@ "lodash-es": "^4.17.21" }, "devDependencies": { + "@iconify/json": "^2.2.234", + "@julr/unocss-preset-forms": "^0.1.0", "@types/lodash-es": "^4.17.12", "@unocss/eslint-config": "^0.61.9", "@unocss/reset": "^0.61.9", diff --git a/packages/search-widget/src/search-form.ts b/packages/search-widget/src/search-form.ts index 8fb48a1..5bc334f 100644 --- a/packages/search-widget/src/search-form.ts +++ b/packages/search-widget/src/search-form.ts @@ -2,7 +2,6 @@ import { HaloDocument, SearchOption, SearchResult } from '@halo-dev/api-client'; import resetStyles from '@unocss/reset/tailwind.css?inline'; import { LitElement, PropertyValueMap, css, html, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; import { Ref, createRef, ref } from 'lit/directives/ref.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import type { DebouncedFunc } from 'lodash-es'; @@ -36,48 +35,70 @@ export class SearchForm extends LitElement { override render() { return html` -
- +
+
+ + + +
-
+
${!this.loading && this.searchResult?.hits?.length === 0 ? html`
没有搜索结果
` : ''} - ${this.loading - ? html`
搜索中...
` - : html` -
    - ${this.searchResult?.hits?.map( - (hit, index) => - html`
  • -
    + ${this.searchResult?.hits?.map( + (hit, index) => + html`
  • (this.selectedIndex = index)} + class="search-form__result-item rounded cursor-pointer space-y-1 p-3 bg-white [&>*>mark]:text-primary [&>*>mark]:font-semibold [&>*>mark]:bg-transparent ${index === + this.selectedIndex + ? '!bg-primary [&>*>mark]:!text-white [&>*>mark]:underline' + : ''}" + > +

    + ${unsafeHTML(hit.title)} +

    + ${hit.description + ? html` +

    -

    - ${unsafeHTML(hit.title)} -

    -

    - ${unsafeHTML(hit.content)} -

    -
- ` - )} - - `} + ${unsafeHTML(hit.description)} +

+ ` + : ''} + ` + )} +
-
+
选择 ↑ @@ -181,37 +202,7 @@ export class SearchForm extends LitElement { css` @unocss-placeholder; - .search-form__input { - border-bottom-width: 1px; - border-color: var(--color-form-divider); - padding: 0.625em 1em; - position: sticky; - top: 0; - background-color: var(--color-form-input-bg); - } - - .search-form__input input { - width: 100%; - padding: 0.25em 0px; - outline: 2px solid transparent; - outline-offset: 2px; - border: none; - font-size: 1em; - line-height: 1.5em; - background-color: var(--color-form-input-bg); - color: var(--color-form-input); - } - - .search-form__input input::placeholder { - color: var(--color-form-input-placeholder); - } - - .search-form__result { - padding: 0.625em 0.5em; - } - - .search-form__empty, - .search-form__loading { + .search-form__empty { display: flex; align-items: center; justify-content: center; @@ -220,61 +211,24 @@ export class SearchForm extends LitElement { color: var(--color-result-empty); } - .search-form__result-wrapper { - box-sizing: border-box; - display: flex; - width: 100%; - height: 100%; - flex-direction: column; - gap: 0.25em; - list-style: none; - margin: 0; - padding: 0; - } - - .search-form__result-wrapper li { - cursor: pointer; - } - .search-form__result-item { - display: flex; - flex-direction: column; - gap: 0.25em; - border-radius: 0.375em; - background-color: var(--color-result-item-bg); - padding: 0.5em 0.625em; } - .search-form__result-item:hover, .search-form__result-item.selected { - background-color: var(--color-result-item-hover-bg); } .search-form__result-item-title { - font-size: 0.875em; - line-height: 1.25em; - font-weight: 600; - padding: 0; - margin: 0; - color: var(--color-result-item-title); } .search-form__result-item-content { - font-size: 0.75em; - line-height: 1em; - color: var(--color-result-item-content); - padding: 0; - margin: 0; } .search-form__result-item-content img { - width: 50%; } .search-form__commands { border-top-width: 1px; border-color: var(--color-form-divider); - padding: 0.625em 1em; display: flex; justify-content: flex-end; } diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts index a47f112..7d4466e 100644 --- a/packages/search-widget/src/search-modal.ts +++ b/packages/search-widget/src/search-modal.ts @@ -1,10 +1,9 @@ +import resetStyles from '@unocss/reset/tailwind.css?inline'; import { LitElement, css, html, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; import './search-form'; import varStyles from './styles/var'; -import baseStyles from './styles/base'; -import resetStyles from '@unocss/reset/tailwind.css?inline'; @customElement('search-modal') export class SearchModal extends LitElement { @@ -25,7 +24,7 @@ export class SearchModal extends LitElement { style="${styleMap({ display: this.open ? 'flex' : 'none' })}" >
-
+
${this.open ? html`=16'} + peerDependencies: + unocss: '>= 0.31.13 < 1' + '@lit-labs/ssr-dom-shim@1.2.0': resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==} @@ -2833,6 +2848,11 @@ snapshots: '@humanwhocodes/object-schema@2.0.2': {} + '@iconify/json@2.2.234': + dependencies: + '@iconify/types': 2.0.0 + pathe: 1.1.2 + '@iconify/types@2.0.0': {} '@iconify/utils@2.1.30': @@ -2864,6 +2884,10 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 + '@julr/unocss-preset-forms@0.1.0(unocss@0.61.9(postcss@8.4.41)(rollup@4.20.0)(vite@5.3.5(@types/node@18.19.43)))': + dependencies: + unocss: 0.61.9(postcss@8.4.41)(rollup@4.20.0)(vite@5.3.5(@types/node@18.19.43)) + '@lit-labs/ssr-dom-shim@1.2.0': {} '@lit/reactive-element@2.0.4':