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

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

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-11 14:21:03 +02:00
parent 296ae456c9
commit f6f9823b15
12 changed files with 436 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/runtime/components/InputMenu.vue
View File

@@ -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,10 +129,10 @@ 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 })
@@ -135,7 +140,8 @@ 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,9 +170,9 @@ 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> {
@@ -174,7 +180,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
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>