feat: supports filtering documents

Author: liuseen-l

src/client/pages/documentations.vue

@@ -3,11 +3,14 @@ import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
 
+const rawItems = data
 const items = ref(data)
 const iframeViewUrl = ref('')
+let packagesName
+
 rpc.getPackages().then((res) => {
-  const packagesName = Object.keys(res.packages)
-  items.value = items.value.filter(item => packagesName.includes(item.id))
+  packagesName = Object.keys(res.packages)
+  items.value = rawItems.filter(item => packagesName.includes(item.id))
 })
 
 function navigate(data: DocumentInfo) {
@@ -17,24 +20,35 @@ function navigate(data: DocumentInfo) {
     iframeViewUrl.value = data.website
 }
 
+const keywords = ref('')
+
+watch(keywords, () => {
+  items.value = rawItems.filter(item => packagesName.includes(item.id) && (item.id.includes(keywords.value) || keywords.value.length === 0))
+})
+
 function back() {
   iframeViewUrl.value = ''
 }
 </script>
 
 <template>
-  <div v-if="iframeViewUrl" relative h-screen>
-    <IframeView :src="iframeViewUrl" />
-    <teleport to="body">
-      <span
-        fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
-        bg-base hover="text-primary" @click.prevent.stop="back"
-      >
-        <i tabler:arrow-back-up />
-      </span>
-    </teleport>
-  </div>
-  <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
-    <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+  <div class="overflow-y-scroll">
+    <div border="b base" flex="~ col gap1" px4 py3 navbar-glass>
+      <VTextInput v-model="keywords" font-mono icon="carbon:search" placeholder="Filter Documentations" op50 />
+    </div>
+    <div v-if="iframeViewUrl">
+      <IframeView :src="iframeViewUrl" />
+      <teleport to="body">
+        <span
+          fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
+          bg-base hover="text-primary" @click.prevent.stop="back"
+        >
+          <i tabler:arrow-back-up />
+        </span>
+      </teleport>
+    </div>
+    <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
+      <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+    </div>
   </div>
 </template>