diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 629fdea1..b4d689fc 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -118,6 +118,7 @@ export interface InputMenuSlots { import { computed, ref, toRef, onMounted } from 'vue' import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue' import { defu } from 'defu' +import isEqual from 'fast-deep-equal' import { reactivePick } from '@vueuse/core' import { useAppConfig } from '#imports' import { useButtonGroup } from '../composables/useButtonGroup' @@ -162,12 +163,10 @@ const ui = computed(() => inputMenu({ buttonGroup: orientation.value })) -function displayValue(val: AcceptableValue) { - if (typeof val === 'object') { - return val.label - } +function displayValue(value: AcceptableValue): string { + const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value)) - return val && String(val) + return item && (typeof item === 'object' ? item.label : item) } function filterFunction(items: ArrayOrWrapped, searchTerm: string): ArrayOrWrapped { @@ -191,6 +190,8 @@ function filterFunction(items: ArrayOrWrapped, searchTerm: stri } const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as InputMenuItem[][] : []) +// eslint-disable-next-line vue/no-dupe-keys +const items = computed(() => groups.value.flatMap(group => group) as T[]) const inputRef = ref | null>(null) @@ -264,7 +265,7 @@ defineExpose({ - {{ typeof item === 'object' ? item.label : item }} + {{ displayValue(item as T) }} @@ -351,7 +352,7 @@ defineExpose({ - {{ displayValue(item as T) }} + {{ typeof item === 'object' ? item.label : item }} diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index a6238c31..81f38ae5 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -108,6 +108,7 @@ export interface SelectMenuSlots { import { computed, toRef } from 'vue' import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue' import { defu } from 'defu' +import isEqual from 'fast-deep-equal' import { reactivePick } from '@vueuse/core' import { useAppConfig } from '#imports' import { useButtonGroup } from '../composables/useButtonGroup' @@ -150,16 +151,14 @@ const ui = computed(() => selectMenu({ buttonGroup: orientation.value })) -function displayValue(val: T, multiple?: boolean): string { - if (multiple && Array.isArray(val)) { - return val.map(v => displayValue(v)).join(', ') +function displayValue(value: T): string { + if (props.multiple && Array.isArray(value)) { + return value.map(v => displayValue(v)).join(', ') } - if (typeof val === 'object') { - return val.label - } + const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value)) - return val && String(val) + return item && (typeof item === 'object' ? item.label : item) } function filterFunction(items: ArrayOrWrapped, searchTerm: string): ArrayOrWrapped { @@ -183,6 +182,8 @@ function filterFunction(items: ArrayOrWrapped, searchTerm: stri } const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : []) +// eslint-disable-next-line vue/no-dupe-keys +const items = computed(() => groups.value.flatMap(group => group) as T[]) function onUpdate(value: any) { // @ts-expect-error - 'target' does not exist in type 'EventInit' @@ -227,12 +228,14 @@ function onUpdateOpen(value: boolean) { - - {{ displayValue(modelValue as T, multiple) }} - - - {{ placeholder ?? ' ' }} - + @@ -291,7 +294,7 @@ function onUpdateOpen(value: boolean) { - {{ displayValue(item as T) }} + {{ typeof item === 'object' ? item.label : item }}