chore(CommandPalette): improve component

src/runtime/components/navigation/CommandPalette.vue

@@ -91,8 +91,7 @@ const fuse = props.groups.reduce((acc, group) => {
 
 const groups = computed(() => props.groups.map((group) => {
   return {
-    key: group.key,
-    label: group.label,
+    ...group,
     commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit)
   }
 }).filter(group => group.commands.length))

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -13,14 +13,29 @@
         :disabled="command.disabled"
         as="template"
       >
-        <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
-          <div class="flex items-center flex-1 min-w-0 gap-3">
-            <UIcon v-if="command.icon" :name="command.icon" :class="['h-4 w-4', command.iconColor, command.iconClass]" class="flex-shrink-0" aria-hidden="true" />
-            <UAvatar v-else-if="command.avatar" :src="command.avatar" :alt="command.label" :rounded="false" size="xxxs" />
-            <div class="flex items-center flex-1 w-full truncate u-text-gray-400" :class="{ 'opacity-50': command.disabled }">
-              <span class="u-text-gray-700">{{ command.label }}</span>
+        <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400 gap-3', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
+          <div class="flex items-center flex-1 gap-3 min-w-0">
+            <UIcon v-if="command.icon" :name="command.icon" :class="['h-4 w-4', command.iconClass]" class="flex-shrink-0" aria-hidden="true" />
+            <UAvatar
+              v-else-if="command.avatar"
+              :src="command.avatar"
+              :alt="command.label"
+              :rounded="false"
+              size="xxxs"
+              class="flex-shrink-0"
+            />
+            <span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 rounded-full" :style="{ background: `#${command.chip}` }" />
+
+            <div class="flex items-center flex-1 min-w-0 u-text-gray-400 gap-1.5" :class="{ 'opacity-50': command.disabled }">
+              <span v-if="command.prefix">{{ command.prefix }}</span>
+              <span class="u-text-gray-700 truncate">{{ command.label }}</span>
             </div>
           </div>
+
+          <span v-if="active && command.suffix" class="flex-none u-text-gray-500">{{ command.suffix }}</span>
+          <span v-else-if="command.shortcuts?.length" class="flex-none text-xs font-semibold u-text-gray-500">
+            <kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
+          </span>
         </li>
       </ComboboxOption>
     </ul>
@@ -30,11 +45,11 @@
 <script setup lang="ts">
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
-import type { ComputedGroup } from '../../types/command-palette'
+import type { Group } from '../../types/command-palette'
 
 defineProps({
   group: {
-    type: Object as PropType<ComputedGroup>,
+    type: Object as PropType<Group>,
     required: true
   }
 })

src/runtime/types/command-palette.d.ts

@@ -1,23 +1,20 @@
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import Fuse from 'fuse.js'
 
 export interface Command {
-  disabled?: boolean
+  prefix?: string
+  suffix?: string
+  label: string
   icon?: string
-  iconColor?: string
   iconClass?: string
   avatar?: string
-  label: string
-  group?: string
+  chip?: string
+  disabled?: boolean
+  shortcuts?: string[]
 }
 
 export interface Group {
   key: string
   label: string
   commands: Command[]
-  options: Partial<UseFuseOptions<Command>>
-}
-
-export interface ComputedGroup extends Omit<Group, 'options' | 'commands'> {
-  commands: Fuse.FuseResult<Command>[]
+  options?: Partial<UseFuseOptions<Command>>
 }