feat: add support for passing options to the search component

package.json

@@ -17,6 +17,7 @@
     "release:packages": "pnpm --filter \"./packages/**\" release"
   },
   "devDependencies": {
+    "@halo-dev/api-client": "2.17.0",
     "@rushstack/eslint-patch": "^1.5.1",
     "@types/node": "^18.18.6",
     "@typescript-eslint/eslint-plugin": "^6.9.0",

packages/search-widget/package.json

@@ -23,7 +23,6 @@
     "prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"
   },
   "dependencies": {
-    "@halo-dev/api-client": "2.17.0",
     "lit": "^3.1.4",
     "lodash-es": "^4.17.21"
   },

packages/search-widget/src/search-form.ts

@@ -11,14 +11,12 @@ import varStyles from './styles/var';
 
 @customElement('search-form')
 export class SearchForm extends LitElement {
-  constructor() {
-    super();
-    this.addEventListener('keydown', this.handleKeydown);
-  }
-
   @property({ type: String })
   baseUrl = '';
 
+  @property({ type: Object })
+  options = {};
+
   @state()
   private searchResult?: SearchResult;
 
@@ -30,6 +28,12 @@ export class SearchForm extends LitElement {
 
   inputRef: Ref<HTMLInputElement> = createRef<HTMLInputElement>();
 
+  constructor() {
+    super();
+
+    this.addEventListener('keydown', this.handleKeydown);
+  }
+
   override render() {
     return html`
       <div class="search-form__input">
@@ -117,25 +121,21 @@ export class SearchForm extends LitElement {
 
   fetchHits: DebouncedFunc<(keyword: string) => Promise<void>> = debounce(
     async (keyword: string) => {
-      const options: SearchOption = {
-        annotations: {},
+      const searchOptions: SearchOption = {
+        ...this.options,
         highlightPostTag: '</mark>',
         highlightPreTag: '<mark>',
-        includeCategoryNames: [],
-        includeOwnerNames: [],
-        includeTagNames: [],
-        includeTypes: ['post'],
         keyword,
         limit: 20,
       };
 
       const response = await fetch(
-        `/apis/api.halo.run/v1alpha1/indices/-/search?keyword=${keyword}`,
+        `/apis/api.halo.run/v1alpha1/indices/-/search`,
         {
           headers: {
             'Content-Type': 'application/json',
           },
-          body: JSON.stringify(options),
+          body: JSON.stringify(searchOptions),
           method: 'post',
         }
       );

packages/search-widget/src/search-modal.ts

@@ -15,6 +15,9 @@ export class SearchModal extends LitElement {
   @property({ type: String })
   baseUrl = '';
 
+  @property({ type: Object })
+  options = {};
+
   override render() {
     return html`<div
       class="modal__wrapper"
@@ -23,7 +26,10 @@ export class SearchModal extends LitElement {
       <div class="modal__layer" @click="${this.close}"></div>
       <div class="modal__content">
         ${this.open
-          ? html`<search-form baseUrl=${this.baseUrl}></search-form>`
+          ? html`<search-form
+              .baseUrl=${this.baseUrl}
+              .options=${this.options}
+            ></search-form>`
           : ''}
       </div>
     </div>`;

packages/widget/src/index.ts

@@ -1,5 +1,6 @@
 import { SearchModal } from '@halo-dev/search-widget';
 import '@halo-dev/search-widget/var.css';
+import type { SearchOption } from '@halo-dev/api-client';
 
 export { SearchModal };
 
@@ -9,6 +10,7 @@ const searchModalElement = document.createElement(
 
 document.body.append(searchModalElement);
 
-export function open() {
+export function open(options: SearchOption) {
+  searchModalElement.options = options;
   searchModalElement.open = true;
 }