chore(CommandPalette): improve customization options (#71)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/pages/examples.vue

@@ -176,7 +176,7 @@
       </div>
 
       <UCard body-class="">
-        <UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people }]" />
+        <UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people, customQuery, options: { fuseOptions: { useExtendedSearch: true, keys: ['name', 'static'] } } }]" command-attribute="name" />
       </UCard>
     </div>
 
@@ -208,7 +208,7 @@
           </UFormGroup>
 
           <UFormGroup label="People" name="people" required>
-            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="label" searchable />
+            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" searchable />
           </UFormGroup>
 
           <UFormGroup label="Toggle" name="toggle">
@@ -251,11 +251,11 @@
 const isModalOpen = ref(false)
 
 const people = [
-  { id: 1, label: 'Durward Reynolds', disabled: false },
+  { id: 1, name: 'Durward Reynolds', disabled: false },
-  { id: 2, label: 'Kenton Towne', disabled: false },
+  { id: 2, name: 'Kenton Towne', disabled: false },
-  { id: 3, label: 'Therese Wunsch', disabled: false },
+  { id: 3, name: 'Therese Wunsch', disabled: false },
-  { id: 4, label: 'Benedict Kessler', disabled: true },
+  { id: 4, name: 'Benedict Kessler', disabled: true },
-  { id: 5, label: 'Katelyn Rohan', disabled: false }
+  { id: 5, name: 'Katelyn Rohan', disabled: false, static: '1' }
 ]
 const form = reactive({
   email: '',
@@ -271,6 +271,8 @@ const form = reactive({
 
 const { $toast } = useNuxtApp()
 
+const customQuery = query => computed(() => query.value ? `${query.value} | =1` : '')
+
 function toggleModalIsOpen () {
   isModalOpen.value = !isModalOpen.value
 }

src/runtime/components/navigation/CommandPalette.vue

@@ -21,7 +21,11 @@
       </div>
 
       <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
-        <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" />
+        <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute">
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </CommandPaletteGroup>
       </ComboboxOptions>
 
       <div v-else class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
@@ -77,6 +81,14 @@ const props = defineProps({
     type: String,
     default: 'heroicons-outline:search'
   },
+  groupAttribute: {
+    type: String,
+    default: 'label'
+  },
+  commandAttribute: {
+    type: String,
+    default: 'label'
+  },
   options: {
     type: Object as PropType<Partial<UseFuseOptions<Command>>>,
     default: () => ({})
@@ -94,14 +106,14 @@ onMounted(() => {
 
 const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.options, {
   fuseOptions: {
-    keys: ['label']
+    keys: [props.commandAttribute]
   },
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
 }))
 
 const fuse = props.groups.reduce((acc, group) => {
-  const fuse = useFuse(query, group.commands, defu({}, group.options || {}, options.value))
+  const fuse = useFuse(group.customQuery ? group.customQuery(query) : query, group.commands, defu({}, group.options || {}, options.value))
   acc[group.key] = fuse
   return acc
 }, {})
@@ -124,7 +136,7 @@ function activateFirstOption () {
 }
 
 function onSelect (option: Command | Command[]) {
-  emit('update:modelValue', option)
+  emit('update:modelValue', option, { query: query.value })
 
   // Clear input after selection
   if (!props.multiple) {

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <li class="p-2">
-    <h2 v-if="group.label" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
+    <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
-      {{ group.label }}
+      {{ group[groupAttribute] }}
     </h2>
 
     <ul class="text-sm u-text-gray-700">
@@ -13,32 +13,38 @@
         :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 relative', 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 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" />
+            <UIcon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0', active && 'u-text-gray-900', !active && 'u-text-gray-400', command.iconClass]" aria-hidden="true" />
             <UAvatar
               v-else-if="command.avatar"
               :src="command.avatar"
-              :alt="command.label"
+              :alt="command[commandAttribute]"
               :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 }">
+            <div class="flex items-center flex-1 min-w-0 gap-1.5" :class="{ 'opacity-50': command.disabled }">
-              <span v-if="command.prefix">{{ command.prefix }}</span>
+              <slot :name="`${group.key}-command`" :group="group" :command="command">
-              <span class="u-text-gray-700 truncate">{{ command.label }}</span>
+                <span v-if="command.prefix" class="u-text-gray-400">{{ command.prefix }}</span>
+                <span class="truncate">{{ command[commandAttribute] }}</span>
+                <span v-if="command.suffix" class="u-text-gray-400">{{ command.suffix }}</span>
+              </slot>
             </div>
           </div>
 
-          <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 u-text-gray-900">
+          <UIcon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
-            <UIcon name="heroicons-outline:check" class="h-5 w-5" aria-hidden="true" />
+          <span v-else-if="active" class="flex-none u-text-gray-500">
-          </span>
+            <slot :name="`${group.key}-active`" :group="group" :command="command">{{ group.active }}</slot>
-          <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>
+          <slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
+            <span v-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>
+            <span v-else-if="!command.disabled && group.inactive" class="flex-none u-text-gray-500">{{ group.inactive }}</span>
+          </slot>
         </li>
       </ComboboxOption>
     </ul>
@@ -54,6 +60,14 @@ defineProps({
   group: {
     type: Object as PropType<Group>,
     required: true
+  },
+  groupAttribute: {
+    type: String,
+    required: true
+  },
+  commandAttribute: {
+    type: String,
+    required: true
   }
 })
 </script>

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

@@ -1,3 +1,4 @@
+import type { Ref, ComputedRef } from 'vue'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 
 export interface Command {
@@ -15,6 +16,9 @@ export interface Command {
 export interface Group {
   key: string
   label: string
+  active?: string
+  inactive?: string
   commands: Command[]
+  customQuery?: (query: Ref<string>) => ComputedRef<string>
   options?: Partial<UseFuseOptions<Command>>
 }