chore(SelectMenu): handle multiple default display + specific placeholder

This commit is contained in:
Benjamin Canac
2023-05-29 11:52:02 +02:00
parent 360084af7c
commit cb43548305
7 changed files with 56 additions and 19 deletions

View File

@@ -207,7 +207,6 @@ export default defineComponent({
return classNames(
ui.value.base,
ui.value.rounded,
ui.value.placeholder,
ui.value.size[props.size],
props.padded && ui.value.padding[props.size],
variant?.replaceAll('{color}', props.color),

View File

@@ -34,8 +34,9 @@
</span>
<slot name="label">
<span v-if="modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
<span v-else class="block truncate text-gray-400 dark:text-gray-500">{{ placeholder || '&nbsp;' }}</span>
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
<span v-else-if="!multiple && modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
<span v-else class="block truncate" :class="ui.placeholder">{{ placeholder || '&nbsp;' }}</span>
</slot>
<span v-if="trailingIcon" :class="trailingIconClass">
@@ -268,7 +269,6 @@ export default defineComponent({
return classNames(
uiSelect.value.base,
uiSelect.value.rounded,
uiSelect.value.placeholder,
'text-left cursor-default',
uiSelect.value.size[props.size],
uiSelect.value.gap[props.size],