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

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

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