arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

7
src/runtime/components/InputMenu.vue
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 })" />

8
src/runtime/components/Select.vue
View File

@@ -58,6 +58,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
* @defaultValue true
*/
portal?: boolean
/**
* When `items` is an array of objects, select the field to use as the value.
* @defaultValue 'value'
*/
valueKey?: string
items?: T[] | T[][]
/** Highlight the ring color like a focus state. */
highlight?: boolean
@@ -92,6 +97,7 @@ import { useAppConfig, useComponentIcons, useFormField, useButtonGroup } from '#
import { UIcon, UChip, UAvatar } from '#components'
const props = withDefaults(defineProps<SelectProps<T>>(), {
valueKey: 'value' as any,
portal: true
})
const emits = defineEmits<SelectEmits>()
@@ -175,7 +181,7 @@ function onUpdateOpen(value: boolean) {
{{ item.label }}
</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.value : item">
<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">
<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 })" />

7
src/runtime/components/SelectMenu.vue
View File

@@ -67,6 +67,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
* @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
@@ -246,7 +251,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 SelectMenuItem]) 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 })" />