feat(InputMenu/Select/SelectMenu): introduce valueKey prop

Resolves #108
This commit is contained in:
Benjamin Canac
2024-07-09 17:03:52 +02:00
parent 06e8a9e912
commit eeec9676cd
3 changed files with 19 additions and 3 deletions

View File

@@ -80,6 +80,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
* @defaultValue ['label']
*/
filter?: boolean | string[]
/**
* When `items` is an array of objects, select the field to use as the value instead of the object itself.
* @defaultValue undefined
*/
valueKey?: keyof T
items?: T[] | T[][]
/** Highlight the ring color like a focus state. */
highlight?: boolean
@@ -313,7 +318,7 @@ function onUpdateOpen(value: boolean) {
<ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
<ComboboxItem v-else :class="ui.item({ class: props.ui?.item })" :disabled="item.disabled" :value="item">
<ComboboxItem 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">
<slot name="item" :item="(item as T)" :index="index">
<slot name="item-leading" :item="(item as T)" :index="index">
<UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />