arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(SelectCustom): move wrapper under Listbox

Browse Source
This commit is contained in:
Benjamin Canac
2022-04-28 12:59:43 +02:00
parent cde6b5037d
commit 936d6a5fee
1 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/runtime/components/forms/SelectCustom.vue
View File

@@ -2,46 +2,46 @@
<Listbox <Listbox
:model-value="modelValue" :model-value="modelValue"
:multiple="multiple" :multiple="multiple"
as="div"
:class="wrapperClass"
@update:model-value="$emit('update:modelValue', $event)" @update:model-value="$emit('update:modelValue', $event)"
> >
<input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1"> <div :class="wrapperClass">
<input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1">
<ListboxButton :class="selectCustomClass"> <ListboxButton :class="selectCustomClass">
<slot> <slot>
<span v-if="modelValue" class="block truncate">{{ modelValue[textAttribute] }}</span> <span v-if="modelValue" class="block truncate">{{ modelValue[textAttribute] }}</span>
<span v-else class="block truncate u-text-gray-400">{{ placeholder }}</span> <span v-else class="block truncate u-text-gray-400">{{ placeholder }}</span>
</slot> </slot>
<span :class="iconWrapperClass"> <span :class="iconWrapperClass">
<Icon name="heroicons-solid:selector" :class="iconClass" aria-hidden="true" /> <Icon name="heroicons-solid:selector" :class="iconClass" aria-hidden="true" />
</span> </span>
</ListboxButton> </ListboxButton>
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0"> <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
<ListboxOptions :class="listBaseClass"> <ListboxOptions :class="listBaseClass">
<ListboxOption <ListboxOption
v-for="(option, index) in options" v-for="(option, index) in options"
v-slot="{ active, selected, disabled }" v-slot="{ active, selected, disabled }"
:key="index" :key="index"
as="template" as="template"
:value="option" :value="option"
:disabled="option.disabled" :disabled="option.disabled"
> >
<li :class="resolveOptionClass({ active, disabled })"> <li :class="resolveOptionClass({ active, disabled })">
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']"> <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
<slot name="option" :option="option"> <slot name="option" :option="option">
{{ option[textAttribute] }} {{ option[textAttribute] }}
</slot> </slot>
</span> </span>
<span v-if="selected" :class="resolveOptionIconClass({ active })"> <span v-if="selected" :class="resolveOptionIconClass({ active })">
<Icon name="heroicons-solid:check" :class="listOptionIconSizeClass" aria-hidden="true" /> <Icon name="heroicons-solid:check" :class="listOptionIconSizeClass" aria-hidden="true" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
</ListboxOptions> </ListboxOptions>
</transition> </transition>
</div>
</Listbox> </Listbox>
</template> </template>