feat(CommandPalette/InputMenu/Select/SelectMenu): unite object matching options

docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const items = ref([
+import type { CommandPaletteItem } from '@nuxt/ui'
+
+const items = ref<CommandPaletteItem[]>([
   {
     label: 'bug',
     value: 'bug',
@@ -22,7 +24,7 @@ const items = ref([
     }
   }
 ])
-const label = ref([])
+const label = ref<CommandPaletteItem[]>([])
 </script>
 
 <template>

playgrounds/nuxt/app/pages/components/command-palette.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // import { createReusableTemplate, refDebounced } from '@vueuse/core'
 import { createReusableTemplate } from '@vueuse/core'
+import type { CommandPaletteItem } from '@nuxt/ui'
+
 import type { User } from '~/types'
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
@@ -9,7 +11,7 @@ const toast = useToast()
 const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
-const selected = ref([])
+const selected = ref<CommandPaletteItem[]>([])
 const virtualize = ref(false)
 const preserveGroupOrder = ref(false)
 

src/runtime/components/CommandPalette.vue

@@ -7,7 +7,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types'
-import type { GetItemKeys } from '../types/utils'
+import type { GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>
@@ -59,7 +59,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
   highlightedIcon?: IconProps['name']
 }
 
-export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ListboxRootProps, 'disabled' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -125,6 +125,10 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    */
   backIcon?: IconProps['name']
   groups?: G[]
+  /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
+  defaultValue?: GetModelValue<T, VK, M>
+  /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
+  modelValue?: GetModelValue<T, VK, M>
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
    * @defaultValue {
@@ -165,6 +169,18 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue 'description'
    */
   descriptionKey?: GetItemKeys<T>
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'undefined'
+   */
+  valueKey?: VK
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   /**
    * Whether to preserve the order of groups as defined in the `groups` prop when filtering.
    * When `false`, groups will appear based on item matches.
@@ -175,13 +191,13 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
   ui?: CommandPalette['slots']
 }
 
-export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> = ListboxRootEmits<T> & {
   'update:open': [value: boolean]
-}
+} & GetModelValueEmits<T, VK, M>
 
 type SlotProps<T> = (props: { item: T, index: number, ui: CommandPalette['ui'] }) => any
 
-export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
   'empty'(props: { searchTerm?: string }): any
   'footer'(props: { ui: CommandPalette['ui'] }): any
   'back'(props: { ui: CommandPalette['ui'] }): any
@@ -195,7 +211,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
 
 </script>
 
-<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
+<script setup lang="ts" generic="T extends CommandPaletteItem, G extends CommandPaletteGroup<T>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
 import { computed, ref, useTemplateRef, toRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
@@ -216,8 +232,7 @@ import ULink from './Link.vue'
 import UInput from './Input.vue'
 import UKbd from './Kbd.vue'
 
-const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
-  modelValue: '',
+const props = withDefaults(defineProps<CommandPaletteProps<T, G, VK, M>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   autofocus: true,
@@ -226,8 +241,8 @@ const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   virtualize: false,
   highlightOnHover: true
 })
-const emits = defineEmits<CommandPaletteEmits<T>>()
-const slots = defineSlots<CommandPaletteSlots<G, T>>()
+const emits = defineEmits<CommandPaletteEmits<T, VK, M>>()
+const slots = defineSlots<CommandPaletteSlots<T, G>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
@@ -413,15 +428,15 @@ function onSelect(e: Event, item: T) {
 <template>
   <DefineItemTemplate v-slot="{ item, index, group }">
     <ListboxItem
-      :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+      :value="props.valueKey ? get(item, props.valueKey as string) : omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
       :disabled="item.disabled"
       as-child
       @select="onSelect($event, item as T)"
     >
       <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
         <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
-          <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
-            <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+          <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
+            <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
               <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
               <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
               <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
@@ -435,9 +450,9 @@ function onSelect(e: Event, item: T) {
               />
             </slot>
 
-            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T, G>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T, G>])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
               <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
-                <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                   <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
                   <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
@@ -447,14 +462,14 @@ function onSelect(e: Event, item: T) {
               </span>
 
               <span v-if="get(item, props.descriptionKey as string)" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
-                <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey as string) }}
                 </slot>
               </span>
             </span>
 
             <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
-              <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+              <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="childrenIcon || appConfig.ui.icons.chevronRight"
@@ -478,7 +493,13 @@ function onSelect(e: Event, item: T) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot
+    v-bind="rootProps"
+    ref="listboxRootRef"
+    :by="(by as any)"
+    :selection-behavior="selectionBehavior"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"

src/runtime/components/DashboardSearch.vue

@@ -63,10 +63,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    */
   colorMode?: boolean
   class?: any
-  ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui']
+  ui?: DashboardSearch['slots'] & CommandPaletteProps<T>['ui']
 }
 
-export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
+export type DashboardSearchSlots<T extends CommandPaletteItem = CommandPaletteItem> = CommandPaletteSlots<T> & {
   content(props: { close: () => void }): any
 }
 

src/runtime/components/InputMenu.vue

@@ -147,6 +147,11 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
    * @defaultValue false
    */
   ignoreFilter?: boolean
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: InputMenu['slots']
 }
@@ -513,6 +518,7 @@ defineExpose({
     :disabled="disabled"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :as-child="!!multiple"
+    :by="(by as any)"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"

src/runtime/components/Select.vue

@@ -101,6 +101,11 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
   highlight?: boolean
   autofocus?: boolean
   autofocusDelay?: number
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: Select['slots']
 }
@@ -267,6 +272,7 @@ defineExpose({
     :disabled="disabled"
     :default-value="(defaultValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
     :model-value="(modelValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
+    :by="(by as any)"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >

src/runtime/components/SelectMenu.vue

@@ -141,6 +141,11 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
   ignoreFilter?: boolean
   autofocus?: boolean
   autofocusDelay?: number
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: SelectMenu['slots']
 }
@@ -495,6 +500,7 @@ defineExpose({
     as-child
     :name="name"
     :disabled="disabled"
+    :by="(by as any)"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >

src/runtime/components/content/ContentSearch.vue

@@ -95,10 +95,10 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    */
   colorMode?: boolean
   class?: any
-  ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui']
+  ui?: ContentSearch['slots'] & CommandPaletteProps<ContentSearchItem>['ui']
 }
 
-export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
+export type ContentSearchSlots = CommandPaletteSlots<ContentSearchItem> & {
   content(props: { close: () => void }): any
 }
 

test/components/CommandPalette.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import CommandPalette from '../../src/runtime/components/CommandPalette.vue'
-import type { CommandPaletteProps, CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
+import type { CommandPaletteGroup, CommandPaletteProps, CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
 import ComponentRender from '../component-render'
 
 describe('CommandPalette', () => {
@@ -63,7 +63,7 @@ describe('CommandPalette', () => {
       to: 'https://github.com/benjamincanac',
       target: '_blank'
     }]
-  }]
+  }] satisfies CommandPaletteGroup[]
 
   const groupsWithDescription = [{
     id: 'actions',
@@ -108,6 +108,7 @@ describe('CommandPalette', () => {
     ['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items[0] } }],
     ['with searchTerm', { props: { ...props, searchTerm: 'f' } }],
     ['with searchTerm and preserveGroupOrder', { props: { ...props, searchTerm: 'f', preserveGroupOrder: true } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' as any } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with descriptionKey', { props: { groups: groupsWithDescription, descriptionKey: 'label' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],