feat(InputMenu/RadioGroup/Select/SelectMenu): handle labelKey and use get to support dot notation

benjamincanac · benjamincanac · commit f6f9823b15d8 · 2024-10-11T15:31:47.000+02:00
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
@@ -86,6 +86,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
    * @defaultValue undefined
    */
   valueKey?: keyof T
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: keyof T
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -124,18 +129,19 @@ import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { get, escapeRegExp } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
-import { get, escapeRegExp } from '../utils'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputMenuProps<T>>(), {
   type: 'text',
   autofocusDelay: 0,
   portal: true,
-  filter: () => ['label']
+  filter: () => ['label'],
+  labelKey: 'label' as keyof T
 })
 const emits = defineEmits<InputMenuEmits<T>>()
 const slots = defineSlots<InputMenuSlots<T>>()
@@ -164,17 +170,17 @@ const ui = computed(() => inputMenu({
 }))
 
 function displayValue(value: AcceptableValue): string {
-  const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value))
+  const item = items.value.find(item => props.valueKey ? isEqual(get(item as Record<string, any>, props.valueKey as string), value) : isEqual(item, value))
 
-  return item && (typeof item === 'object' ? item.label : item)
+  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
 function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
   if (props.filter === false) {
     return items
   }
 
-  const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
   const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
@@ -183,7 +189,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     }
 
     return fields.some((field) => {
-      const child = get(item, field)
+      const child = get(item, field as string)
 
       return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
@@ -325,7 +331,7 @@ defineExpose({
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </ComboboxLabel>
 
               <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
@@ -334,7 +340,7 @@ defineExpose({
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof InputMenuItem]) as AcceptableValue : item"
+                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
@@ -353,7 +359,7 @@ defineExpose({
 
                   <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </span>
 
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
@@ -29,6 +29,16 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
    * @defaultValue 'value'
    */
   valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the description.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: string
   items?: T[]
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
@@ -59,9 +69,12 @@ import { computed, useId } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   valueKey: 'value',
+  labelKey: 'label',
+  descriptionKey: 'description',
   orientation: 'vertical'
 })
 const emits = defineEmits<RadioGroupEmits>()
@@ -89,11 +102,15 @@ function normalizeItem(item: any) {
     }
   }
 
-  const value = item[props.valueKey]
+  const value = get(item, props.valueKey as string)
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
 
   return {
     ...item,
     value,
+    label,
+    description,
     id: `${id}:${value}`
   }
 }
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
@@ -63,6 +63,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
    * @defaultValue 'value'
    */
   valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -97,12 +102,14 @@ import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
 
 const props = withDefaults(defineProps<SelectProps<T>>(), {
   valueKey: 'value',
+  labelKey: 'label',
   portal: true
 })
 const emits = defineEmits<SelectEmits>()
@@ -183,14 +190,16 @@ function onUpdateOpen(value: boolean) {
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <SelectLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </SelectLabel>
+
               <SelectSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
+
               <SelectItem
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="typeof item === 'object' ? (item[valueKey as keyof SelectItem] as string) : item"
+                :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
               >
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">
@@ -208,7 +217,7 @@ function onUpdateOpen(value: boolean) {
 
                   <SelectItemText :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </SelectItemText>
 
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
@@ -77,6 +77,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
    * @defaultValue undefined
    */
   valueKey?: keyof T
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: keyof T
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -124,7 +129,8 @@ const props = withDefaults(defineProps<SelectMenuProps<T>>(), {
   portal: true,
   autofocusDelay: 0,
   searchInput: () => ({ placeholder: 'Search...' }),
-  filter: () => ['label']
+  filter: () => ['label'],
+  labelKey: 'label' as keyof T
 })
 const emits = defineEmits<SelectMenuEmits<T>>()
 const slots = defineSlots<SelectMenuSlots<T>>()
@@ -156,17 +162,17 @@ function displayValue(value: T): string {
     return value.map(v => displayValue(v)).join(', ')
   }
 
-  const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value))
+  const item = items.value.find(item => props.valueKey ? isEqual(get(item as Record<string, any>, props.valueKey as string), value) : isEqual(item, value))
 
-  return item && (typeof item === 'object' ? item.label : item)
+  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
 function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
   if (props.filter === false) {
     return items
   }
 
-  const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
   const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
@@ -175,7 +181,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     }
 
     return fields.some((field) => {
-      const child = get(item, field)
+      const child = get(item, field as string)
 
       return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
@@ -267,7 +273,7 @@ function onUpdateOpen(value: boolean) {
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </ComboboxLabel>
 
               <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
@@ -276,7 +282,7 @@ function onUpdateOpen(value: boolean) {
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof SelectMenuItem]) as AcceptableValue : item"
+                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
@@ -295,7 +301,7 @@ function onUpdateOpen(value: boolean) {
 
                   <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </span>
 
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
@@ -12,18 +12,23 @@ describe('InputMenu', () => {
 
   const items = [{
     label: 'Backlog',
+    value: 'backlog',
     icon: 'i-heroicons-question-mark-circle'
   }, {
     label: 'Todo',
+    value: 'todo',
     icon: 'i-heroicons-plus-circle'
   }, {
     label: 'In Progress',
+    value: 'in_progress',
     icon: 'i-heroicons-arrow-up-circle'
   }, {
     label: 'Done',
+    value: 'done',
     icon: 'i-heroicons-check-circle'
   }, {
     label: 'Canceled',
+    value: 'canceled',
     icon: 'i-heroicons-x-circle'
   }]
 
@@ -34,6 +39,8 @@ describe('InputMenu', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'value' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
@@ -20,6 +20,9 @@ describe('RadioGroup', () => {
   it.each([
     ['with items', { props }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
+    ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts
@@ -39,6 +39,8 @@ describe('Select', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts
@@ -39,6 +39,8 @@ describe('SelectMenu', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'value' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with multiple', { props: { ...props, multiple: true } }],
     ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
     ['with id', { props: { ...props, id: 'id' } }],
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
