diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index fded4b3a..d043e851 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -157,9 +157,11 @@ const slots = defineSlots>() const searchTerm = defineModel('searchTerm', { default: '' }) const appConfig = useAppConfig() -const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits) +const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits) const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps) const arrowProps = toRef(() => props.arrow as ComboboxArrowProps) +// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541) +const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple) const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props) const { orientation, size: buttonGroupSize } = useButtonGroup(props) @@ -175,7 +177,7 @@ const ui = computed(() => inputMenu({ highlight: highlight.value, leading: isLeading.value || !!props.avatar || !!slots.leading, trailing: isTrailing.value || !!slots.trailing, - multiple: props.multiple, + multiple: multiple.value, buttonGroup: orientation.value })) @@ -269,6 +271,7 @@ defineExpose({ v-model:search-term="searchTerm" :name="name" :disabled="disabled" + :multiple="multiple" :display-value="displayValue" :filter-function="filterFunction" :class="ui.root({ class: [props.class, props.ui?.root] })" diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 98da67d9..06335436 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -147,9 +147,11 @@ const slots = defineSlots>() const searchTerm = defineModel('searchTerm', { default: '' }) const appConfig = useAppConfig() -const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits) +const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits) const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps) const arrowProps = toRef(() => props.arrow as ComboboxArrowProps) +// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541) +const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple) const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props) const { orientation, size: buttonGroupSize } = useButtonGroup(props) @@ -169,7 +171,7 @@ const ui = computed(() => selectMenu({ })) function displayValue(value: T | T[]): string { - if (props.multiple && Array.isArray(value)) { + if (multiple.value && Array.isArray(value)) { return value.map(v => displayValue(v)).filter(Boolean).join(', ') } @@ -236,6 +238,7 @@ function onUpdateOpen(value: boolean) { as-child :name="name" :disabled="disabled" + :multiple="multiple" :display-value="() => searchTerm" :filter-function="filterFunction" @update:model-value="onUpdate"