chore: search by useFuse

Author: liuseen-l

package.json

@@ -49,6 +49,7 @@
     "play": "nr -C playground dev",
     "stub": "unbuild --stub",
     "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish",
     "dep:up": "taze -I major"

src/client/components/AssetPreview.vue

@@ -19,7 +19,7 @@ defineProps<{
     />
     <div v-else-if="asset.type === 'text' && !textContent" i-carbon-document text-3xl op20 />
     <div v-else-if="asset.type === 'text' && textContent" w-full self-start p4>
-      <pre max-h-10rem of-hidden font-mono text-xs v-text="textContent" />
+      <pre max-h-10rem of-hidden text-xs font-mono v-text="textContent" />
     </div>
     <div v-else i-carbon-help text-3xl op20 />
   </div>

src/client/components/RoutePathItem.vue

@@ -48,7 +48,7 @@ function navigate() {
             <div px2 text-sm op50>
               Fill params and navigate:
             </div>
-            <div flex="~" items-center p2 font-mono text-sm>
+            <div flex="~" items-center p2 text-sm font-mono>
               <template v-for="part, idx of parts" :key="idx">
                 <VTextInput
                   v-if="part[0] === ':'"

src/client/components/RoutesTable.vue

@@ -57,7 +57,7 @@ const sorted = computed(() => {
               />
             </div>
           </td>
-          <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op50>
+          <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op50>
             {{ item.name ?? '-' }}
           </td>
         </tr>

src/client/pages/documentations.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useFuse } from '@vueuse/integrations/useFuse'
 import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
@@ -21,9 +22,12 @@ function navigate(data: DocumentInfo) {
 }
 
 const keywords = ref('')
+const { results: filterDocuments } = useFuse(keywords, rawItems.map(i => i.name), {
+  matchAllWhenSearchEmpty: true,
+})
 
-watch(keywords, () => {
-  items.value = rawItems.filter(item => packagesName.includes(item.id) && (item.id.includes(keywords.value) || keywords.value.length === 0))
+watch(filterDocuments, () => {
+  items.value = rawItems.filter(item => (filterDocuments.value.map(i => i.item).includes(item.name) && packagesName.includes(item.id)))
 })
 
 function back() {

src/client/pages/npm.vue

@@ -225,8 +225,8 @@ useInfiniteScroll(
               </td>
               <VDropdown max-w="10" placement="bottom-start" :distance="5">
                 <td
-                  hover="text-primary" h-7 cursor-pointer ws-nowrap pr-1 text-left font-mono text-sm lh-7 underline
-                  op70
+                  hover="text-primary"
+                  h-7 cursor-pointer ws-nowrap pr-1 text-left text-sm lh-7 font-mono underline op70
                 >
                   {{ item.activeVersion ?? item.version }}
                 </td>
@@ -243,12 +243,12 @@ useInfiniteScroll(
                   </ul>
                 </template>
               </VDropdown>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm underline op70 hover="text-primary">
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono underline op70 hover="text-primary">
                 <a :href="item?.owner?.link" target="_blank">
                   {{ item?.owner?.name ?? '-' }}
                 </a>
               </td>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op70>
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op70>
                 {{ item.humanDownloadsLast30Days }}
               </td>
               <td w-30 text-center>

src/client/pages/settings.vue

@@ -113,7 +113,7 @@ const showTabGroup = ref(false)
           <div>
             <VDarkToggle v-slot="{ toggle, isDark }">
               <VButton n="primary" @click="toggle">
-                <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
+                <div carbon-sun translate-y--1px dark:carbon-moon /> {{ isDark.value ? 'Dark' : 'Light' }}
               </VButton>
             </VDarkToggle>
           </div>

src/types.ts

@@ -105,8 +105,8 @@ export interface DocumentInfo {
   website: string
   github: string
   icon: string
-  tips: string
-  openInBlank: boolean
+  tips?: string
+  openInBlank?: boolean
 }
 
 export interface PackageInfo {