chore(CommandPalette): support selected with modelValue

src/runtime/components/navigation/CommandPalette.vue

@@ -1,5 +1,10 @@
 <template>
-  <Combobox @update:modelValue="onSelect">
+  <Combobox
+    :model-value="modelValue"
+    :multiple="multiple"
+    :nullable="nullable"
+    @update:model-value="onSelect"
+  >
     <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
       <div class="relative flex items-center">
         <UIcon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
@@ -40,6 +45,18 @@ import type { Group, Command } from '../../types/command-palette'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 
 const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object, Array],
+    default: null
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  nullable: {
+    type: Boolean,
+    default: false
+  },
   groups: {
     type: Array as PropType<Group[]>,
     default: () => []
@@ -66,7 +83,9 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['select', 'close'])
+const router = useRouter()
+
+const emit = defineEmits(['update:modelValue', 'close'])
 
 const query = ref('')
 const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
@@ -111,7 +130,13 @@ function onSelect (option) {
     return
   }
 
-  emit('select', option, { query: query.value })
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  }
+
+  emit('update:modelValue', option)
 
   // waiting for modal to be closed
   setTimeout(() => {

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -8,12 +8,12 @@
       <ComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
-        v-slot="{ active }"
+        v-slot="{ active, selected }"
         :value="command"
         :disabled="command.disabled"
         as="template"
       >
-        <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']">
+        <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400 gap-3 relative', 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
@@ -32,7 +32,10 @@
             </div>
           </div>
 
-          <span v-if="active && command.suffix" class="flex-none u-text-gray-500">{{ command.suffix }}</span>
+          <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 u-text-gray-900">
+            <UIcon name="heroicons-outline:check" class="h-5 w-5" aria-hidden="true" />
+          </span>
+          <span v-else-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>