arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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
:model-value="modelValue"
:multiple="multiple"
as="div"
:class="wrapperClass"
@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">
<slot>
<span v-if="modelValue" class="block truncate">{{ modelValue[textAttribute] }}</span>
<span v-else class="block truncate u-text-gray-400">{{ placeholder }}</span>
</slot>
<span :class="iconWrapperClass">
<Icon name="heroicons-solid:selector" :class="iconClass" aria-hidden="true" />
</span>
</ListboxButton>
<ListboxButton :class="selectCustomClass">
<slot>
<span v-if="modelValue" class="block truncate">{{ modelValue[textAttribute] }}</span>
<span v-else class="block truncate u-text-gray-400">{{ placeholder }}</span>
</slot>
<span :class="iconWrapperClass">
<Icon name="heroicons-solid:selector" :class="iconClass" aria-hidden="true" />
</span>
</ListboxButton>
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
<ListboxOptions :class="listBaseClass">
<ListboxOption
v-for="(option, index) in options"
v-slot="{ active, selected, disabled }"
:key="index"
as="template"
:value="option"
:disabled="option.disabled"
>
<li :class="resolveOptionClass({ active, disabled })">
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
<slot name="option" :option="option">
{{ option[textAttribute] }}
</slot>
</span>
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
<ListboxOptions :class="listBaseClass">
<ListboxOption
v-for="(option, index) in options"
v-slot="{ active, selected, disabled }"
:key="index"
as="template"
:value="option"
:disabled="option.disabled"
>
<li :class="resolveOptionClass({ active, disabled })">
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
<slot name="option" :option="option">
{{ option[textAttribute] }}
</slot>
</span>
<span v-if="selected" :class="resolveOptionIconClass({ active })">
<Icon name="heroicons-solid:check" :class="listOptionIconSizeClass" aria-hidden="true" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
<span v-if="selected" :class="resolveOptionIconClass({ active })">
<Icon name="heroicons-solid:check" :class="listOptionIconSizeClass" aria-hidden="true" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</template>