arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +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>

19
src/runtime/components/RadioGroup.vue
View File

@@ -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}`
}
}

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

@@ -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>

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

@@ -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,9 +162,9 @@ 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> {
@@ -166,7 +172,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) => {
@@ -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>