feat(InputMenu): new component (#86)

src/runtime/components/CommandPalette.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxItemProps } from 'radix-vue'
+import type { FuseResult } from 'fuse.js'
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import _appConfig from '#build/app.config'
@@ -28,12 +29,13 @@ export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'>
 export interface CommandPaletteGroup<T> {
   id: string
   label?: string
+  slot?: string
   items?: T[]
   /** The icon displayed when an item is highlighted. */
   highlightedIcon?: string
 }
 
-export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'as' | 'multiple' | 'disabled' | 'modelValue'>, Omit<UseComponentIconsProps, 'leading' | 'trailing' | 'icon'> {
+export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'as' | 'multiple' | 'disabled' | 'modelValue' | 'defaultValue'>, Omit<UseComponentIconsProps, 'leading' | 'trailing' | 'icon' | 'avatar'> {
   /**
    * The icon displayed in the input.
    * @defaultValue `appConfig.ui.icons.search`
@@ -59,19 +61,19 @@ export type CommandPaletteEmits<T> = {
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
-export type CommandPaletteSlots<T extends { slot?: string }> = {
-  empty(props: { searchTerm: string }): any
-  close(): any
-  leading: SlotProps<T>
-  label: SlotProps<T>
-  trailing: SlotProps<T>
-  item: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+  'empty'(props: { searchTerm?: string }): any
+  'close'(): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
 import { computed } from 'vue'
-import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxViewport, ComboboxGroup, ComboboxLabel, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxViewport, ComboboxGroup, ComboboxLabel, ComboboxItem, ComboboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
@@ -85,12 +87,13 @@ const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   placeholder: 'Type a command or search...'
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
-defineSlots<CommandPaletteSlots<T>>()
+defineSlots<CommandPaletteSlots<G, T>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue'), emits)
+const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon', 'placeholder'))
 
 const ui = computed(() => tv({ extend: commandPalette, slots: props.ui })())
 
@@ -105,14 +108,14 @@ const fuse = computed(() => defu({}, props.fuse, {
 
 const items = computed(() => props.groups?.flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
 
-const { results: fuseResults } = useFuse(searchTerm, items, fuse)
+const { results: fuseResults } = useFuse<T>(searchTerm, items, fuse)
 
 const groups = computed(() => {
   if (!fuseResults.value?.length) {
     return []
   }
 
-  const groups: Record<string, T[]> = fuseResults.value.reduce((acc, result) => {
+  const groups: Record<string, (T & { matches: FuseResult<T>['matches'] })[]> = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result
     if (!item.group) {
       return acc
@@ -126,15 +129,12 @@ const groups = computed(() => {
 
   return Object.entries(groups).map(([id, items]) => {
     const group = props.groups?.find(group => group.id === id)
-    if (!group) {
-      return
-    }
 
     return {
       ...group,
       items: items.slice(0, fuse.value.resultLimit)
     }
-  }).filter(Boolean)
+  })
 })
 </script>
 
@@ -145,10 +145,9 @@ const groups = computed(() => {
       <UInput
         variant="none"
         autofocus
+        size="md"
+        v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
-        :loading="loading"
-        :loading-icon="loadingIcon"
-        :placeholder="placeholder"
         :class="ui.input()"
       >
         <template v-if="close || $slots.close" #trailing>
@@ -179,54 +178,48 @@ const groups = computed(() => {
 
         <ComboboxViewport :class="ui.viewport()">
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group()">
-            <ComboboxLabel v-if="group!.label" :class="ui.label()">
-              {{ group!.label }}
+            <ComboboxLabel v-if="group.label" :class="ui.label()">
+              {{ group.label }}
             </ComboboxLabel>
 
             <ComboboxItem
-              v-for="(item, index) in group!.items"
+              v-for="(item, index) in group.items"
               :key="`group-${groupIndex}-${index}`"
               :value="omit(item, ['matches' as any, 'group' as any, 'select'])"
               :disabled="item.disabled"
               :class="ui.item()"
               @select="item.select"
             >
-              <slot :name="item.slot || 'item'" :item="item" :index="index">
-                <slot :name="`${group.id}-leading`" :item="item" :index="index">
-                  <slot name="leading" :item="item" :index="index">
-                    <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
-                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon()" />
-                    <UChip
-                      v-else-if="item.chip"
-                      size="md"
-                      inset
-                      standalone
-                      v-bind="item.chip"
-                      :class="ui.itemLeadingChip()"
-                    />
-                  </slot>
+              <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+                <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                  <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon()" />
+                  <UChip
+                    v-else-if="item.chip"
+                    size="md"
+                    inset
+                    standalone
+                    v-bind="item.chip"
+                    :class="ui.itemLeadingChip()"
+                  />
                 </slot>
 
-                <span v-if="item.label || $slots.label || $slots[`${group.id}-label`]" :class="ui.itemLabel()">
-                  <slot :name="`${group.id}-label`" :item="item" :index="index">
-                    <slot name="label" :item="item" :index="index">
-                      <span v-if="item.prefix" :class="ui.itemLabelPrefix()">{{ item.prefix }}</span>
+                <span v-if="item.label || $slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel()">
+                  <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                    <span v-if="item.prefix" :class="ui.itemLabelPrefix()">{{ item.prefix }}</span>
 
-                      <span :class="ui.itemLabelBase()" v-html="highlight(item, searchTerm, 'label') || item.label" />
+                    <span :class="ui.itemLabelBase()" v-html="highlight<T>(item, searchTerm, 'label') || item.label" />
 
-                      <span :class="ui.itemLabelSuffix()" v-html="highlight(item, searchTerm, undefined, ['label']) || item.suffix" />
-                    </slot>
+                    <span :class="ui.itemLabelSuffix()" v-html="highlight<T>(item, searchTerm, undefined, ['label']) || item.suffix" />
                   </slot>
                 </span>
 
                 <span :class="ui.itemTrailing()">
-                  <slot :name="`${group.id}-trailing`" :item="item" :index="index">
-                    <slot name="trailing" :item="item" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
-                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-                      </span>
-                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon()" />
-                    </slot>
+                  <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                    <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
+                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                    </span>
+                    <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon()" />
                   </slot>
 
                   <ComboboxItemIndicator as-child>