feat(client): improve Vue api icon on CommandPalette (#501)

vuejs · Jul 2, 2024 · 0e780f7 · 0e780f7
1 parent 5a4f729
commit 0e780f7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/packages/client/data/vue-apis.json b/packages/client/data/vue-apis.json
@@ -281,7 +281,6 @@
     "description": "compile-time-flags",
     "url": "https:/vuejs.org/api/compile-time-flags#VUE_PROD_HYDRATION_MISMATCH_DETAILS"
   },
-  null,
   {
     "id": "doc:component-instance:$data",
     "title": "$data",

diff --git a/packages/client/src/components/CommandPalette.vue b/packages/client/src/components/CommandPalette.vue
@@ -113,7 +113,7 @@ useEventListener('keydown', (e) => {
         >
           <div
             flex="~ gap-2 items-center justify-between" rounded px3 py2
-            :class="selectedIndex === idx ? 'op100 bg-primary/10 text-primary saturate-100 bg-active' : 'op80'"
+            :class="selectedIndex === idx ? 'op100 saturate-100 bg-active' : 'op80'"
           >
             <TabIcon :icon="item.icon" :title="item.title" flex-none text-xl />
             <span flex flex-auto items-center gap2 of-hidden>
@@ -136,10 +136,10 @@ useEventListener('keydown', (e) => {
       <footer border="t base" flex="~ none justify-between items-center gap-4" pointer-events-none px4 py2>
         <div text-xs flex="~ items-center gap2">
           <button px1>
-            <VueIcon icon="carbon-arrow-down" />
+            <VueIcon icon="i-carbon-arrow-down" />
           </button>
           <button px1>
-            <VueIcon icon="carbon-arrow-up" />
+            <VueIcon icon="i-carbon-arrow-up" />
           </button>
           <span op75>to navigate</span>
         </div>

diff --git a/packages/client/src/composables/state-commands.ts b/packages/client/src/composables/state-commands.ts
@@ -130,14 +130,33 @@ export function registerCommands(getter: MaybeRefOrGetter<CommandItem[]>) {
 
 let _vueDocsCommands: CommandItem[] | undefined
 
+const apiIconMapping = {
+  'utility-types': 'i-mdi-language-typescript',
+  'ssr': 'i-codicon-server-process',
+  'custom-renderer': 'i-codicon-server-process',
+  'sfc-script-setup': 'i-material-symbols:magic-button',
+  'sfc-css-features': 'i-material-symbols-css',
+  'built-in-directives': 'i-material-symbols-code',
+  'built-in-special-attributes': 'i-material-symbols-code',
+  'component-instance': 'i-material-symbols-code',
+  'composition-api-dependency-injection': 'i-material-symbols-code',
+  'composition-api-lifecycle': 'i-material-symbols-code',
+  'general': 'i-material-symbols-code',
+  'compile-time-flags': 'i-material-symbols-toggle-on',
+  'reactivity-utilities': 'i-mdi-api',
+  'reactivity-advanced': 'i-mdi-api',
+  'render-function': 'i-mdi-api',
+  '...others': 'i-uim-vuejs',
+}
+
 export async function getVueDocsCommands() {
   if (!_vueDocsCommands) {
     const list = await import('../../data/vue-apis.json').then(i => i.default)
     _vueDocsCommands = list.map(i => ({
-      ...i!,
-      icon: 'i-carbon-api-1',
+      ...i,
+      icon: apiIconMapping[i.description] ?? apiIconMapping['...others'],
       action: () => {
-        window.open(i!.url, '_blank')
+        window.open(i.url, '_blank')
       },
     }))
   }

diff --git a/scripts/vue-api-manifest.ts b/scripts/vue-api-manifest.ts
@@ -59,11 +59,11 @@ const manifest = await Promise.all(files.map(async (file) => {
       url: `https:/vuejs.org/api${parentPath}#${path}`,
     }
   })
-})).then(r => r.filter(Boolean))
+})).then(r => r.flat(1).filter(Boolean))
 
 const targetDir = fileURLToPath(new URL('../packages/client/data', import.meta.url))
 
 if (!fse.existsSync(targetDir))
   fse.mkdirSync(targetDir)
 
-await fse.writeFile(`${targetDir}/vue-apis.json`, JSON.stringify(manifest.flat(1), null, 2))
+await fse.writeFile(`${targetDir}/vue-apis.json`, JSON.stringify(manifest, null, 2))