fix: expose fuse config (#960)

nuxt-themes · Aug 2, 2023 · daf4922 · daf4922
1 parent a92e9e8
commit daf4922
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/.starters/default/content/1.introduction/4.configuration.md b/.starters/default/content/1.introduction/4.configuration.md
@@ -132,6 +132,9 @@ export default defineAppConfig({
 | `github.repo`                | `string`   |                       | Name of the GitHub repo to edit files                                                                |
 | `github.owner`               | `string`   |                       | Owner of the repo                                                                                    |
 | `github.edit`                | `boolean`  |                       | Toggle "Edit this page on Github" component on documentation pages                                   |
+**Search** ||||
+| `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) |
+
 
 ## Customizing the logo
 

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -24,7 +24,9 @@ defineProps({
       </div>
 
       <div class="section right">
-        <AppSearch />
+        <AppSearch
+          :fuse="config.fuse"
+        />
         <ThemeSelect />
         <div class="social-icons">
           <AppSocialIcons />

diff --git a/components/app/AppSearch.vue b/components/app/AppSearch.vue
@@ -1,8 +1,29 @@
 <script setup lang="ts">
-import { useFuse } from '@vueuse/integrations/useFuse'
+import { useFuse, UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useMagicKeys } from '@vueuse/core'
 
+const props = defineProps({
+  fuse: {
+    type: Object as PropType<Partial<UseFuseOptions<DocusSearchResult>>>,
+    default: () => ({
+      fuseOptions: {
+        keys: [
+          'title',
+          'description',
+          'keywords',
+          'body'
+        ],
+        ignoreLocation: true,
+        threshold: 0,
+        includeMatches: true,
+        includeScore: true,
+      },
+      matchAllWhenSearchEmpty: true
+    })
+  },
+})
+
 type DocusSearchResult = {
   id: string
   path: string
@@ -37,21 +58,7 @@ const { data: files } = await useLazyAsyncData<DocusSearchResult[]>(
 const { results } = useFuse<DocusSearchResult>(
   q,
   files as any,
-  {
-    fuseOptions: {
-      keys: [
-        'title',
-        'description',
-        'keywords',
-        'body'
-      ],
-      ignoreLocation: true,
-      threshold: 0,
-      includeMatches: true,
-      includeScore: true,
-    },
-    matchAllWhenSearchEmpty: true
-  }
+  props.fuse
 )
 
 function findNavItem(
@@ -216,13 +223,15 @@ watch(Escape, () => {
   <!-- eslint-disable-next-line vue/no-multiple-template-root -->
   <teleport to="body">
     <div
-      ref="searchContentRef"
       v-if="show"
+      ref="searchContentRef"
       class="search-content"
       @click="show = false"
     >
-      <div @click.stop class="search-window">
-
+      <div
+        class="search-window"
+        @click.stop
+      >
         <div class="search-input">
           <Icon
             name="heroicons-outline:search"