diff --git a/docs/app/components/content/examples/form/FormExampleElements.vue b/docs/app/components/content/examples/form/FormExampleElements.vue index 4ab598da..0722a7e1 100644 --- a/docs/app/components/content/examples/form/FormExampleElements.vue +++ b/docs/app/components/content/examples/form/FormExampleElements.vue @@ -15,6 +15,9 @@ const schema = z.object({ select: z.string().refine(value => value === 'option-2', { message: 'Select Option 2' }), + selectMultiple: z.array(z.string()).refine(values => values.includes('option-2'), { + message: 'Include Option 2' + }), selectMenu: z.any().refine(option => option?.value === 'option-2', { message: 'Select Option 2' }), @@ -81,6 +84,10 @@ async function onSubmit(event: FormSubmitEvent) { + + + + diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue index 459cd693..1bccd608 100644 --- a/src/runtime/components/Select.vue +++ b/src/runtime/components/Select.vue @@ -193,9 +193,10 @@ const groups = computed(() => // eslint-disable-next-line vue/no-dupe-keys const items = computed(() => groups.value.flatMap(group => group) as T[]) -function displayValue(value?: GetItemValue | GetItemValue[]): string { +function displayValue(value: GetItemValue | GetItemValue[]): string | undefined { if (props.multiple && Array.isArray(value)) { - return value.map(v => displayValue(v)).filter(Boolean).join(', ') + const values = value.map(v => displayValue(v)).filter(Boolean) + return values?.length ? values.join(', ') : undefined } const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record, props.valueKey as string) : item, value)) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 0885f892..bd695db3 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -225,9 +225,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.selectMenu | buttonGroup: orientation.value })) -function displayValue(value: GetItemValue | GetItemValue[]): string { +function displayValue(value: GetItemValue | GetItemValue[]): string | undefined { if (props.multiple && Array.isArray(value)) { - return value.map(v => displayValue(v)).filter(Boolean).join(', ') + const values = value.map(v => displayValue(v)).filter(Boolean) + return values?.length ? values.join(', ') : undefined } if (!props.valueKey) { diff --git a/test/components/__snapshots__/Select-vue.spec.ts.snap b/test/components/__snapshots__/Select-vue.spec.ts.snap index 0c47b621..cfc0cce0 100644 --- a/test/components/__snapshots__/Select-vue.spec.ts.snap +++ b/test/components/__snapshots__/Select-vue.spec.ts.snap @@ -456,7 +456,7 @@ exports[`Select > renders with modelValue correctly 1`] = ` exports[`Select > renders with multiple and modelValue correctly 1`] = ` " @@ -483,7 +483,7 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = ` exports[`Select > renders with multiple correctly 1`] = ` " diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap index 41d62226..75185931 100644 --- a/test/components/__snapshots__/Select.spec.ts.snap +++ b/test/components/__snapshots__/Select.spec.ts.snap @@ -456,7 +456,7 @@ exports[`Select > renders with modelValue correctly 1`] = ` exports[`Select > renders with multiple and modelValue correctly 1`] = ` " @@ -483,7 +483,7 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = ` exports[`Select > renders with multiple correctly 1`] = ` " diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap index 8a316429..a4b5ee74 100644 --- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap @@ -685,7 +685,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = ` exports[`SelectMenu > renders with multiple correctly 1`] = ` " diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap index 6448528a..d6d10955 100644 --- a/test/components/__snapshots__/SelectMenu.spec.ts.snap +++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap @@ -685,7 +685,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = ` exports[`SelectMenu > renders with multiple correctly 1`] = ` "