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

fix(SelectMenu): revert component is after #1199

Browse Source
This commit is contained in:
Benjamin Canac
2024-02-06 18:15:27 +01:00
parent f8b296fc60
commit d0f4530e85
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/runtime/components/forms/SelectMenu.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<HCombobox <component
:is="searchable ? 'HCombobox' : 'HListbox'"
v-slot="{ open }" v-slot="{ open }"
:by="by" :by="by"
:name="name" :name="name"
@@ -19,7 +20,13 @@
aria-hidden="true" aria-hidden="true"
> >
<HComboboxButton ref="trigger" as="div" role="button" :class="uiMenu.trigger"> <component
:is="searchable ? 'HComboboxButton' : 'HListboxButton'"
ref="trigger"
as="div"
role="button"
:class="uiMenu.trigger"
>
<slot :open="open" :disabled="disabled" :loading="loading"> <slot :open="open" :disabled="disabled" :loading="loading">
<button :id="inputId" :class="selectClass" :disabled="disabled" type="button" v-bind="attrs"> <button :id="inputId" :class="selectClass" :disabled="disabled" type="button" v-bind="attrs">
<span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass"> <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
@@ -40,14 +47,14 @@
</span> </span>
</button> </button>
</slot> </slot>
</HComboboxButton> </component>
<div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]"> <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
<Transition appear v-bind="uiMenu.transition"> <Transition appear v-bind="uiMenu.transition">
<div> <div>
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" /> <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
<HComboboxOptions static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]"> <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
<HComboboxInput <HComboboxInput
v-if="searchable" v-if="searchable"
:display-value="() => query" :display-value="() => query"
@@ -58,7 +65,8 @@
:class="uiMenu.input" :class="uiMenu.input"
@change="onChange" @change="onChange"
/> />
<HComboboxOption <component
:is="searchable ? 'HComboboxOption' : 'HListboxOption'"
v-for="(option, index) in filteredOptions" v-for="(option, index) in filteredOptions"
v-slot="{ active, selected, disabled: optionDisabled }" v-slot="{ active, selected, disabled: optionDisabled }"
:key="index" :key="index"
@@ -86,9 +94,9 @@
<UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" /> <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
</span> </span>
</li> </li>
</HComboboxOption> </component>
<HComboboxOption v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template"> <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template">
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]"> <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
<div :class="uiMenu.option.container"> <div :class="uiMenu.option.container">
<slot name="option-create" :option="createOption" :active="active" :selected="selected"> <slot name="option-create" :option="createOption" :active="active" :selected="selected">
@@ -96,7 +104,7 @@
</slot> </slot>
</div> </div>
</li> </li>
</HComboboxOption> </component>
<p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty"> <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
<slot name="option-empty" :query="query"> <slot name="option-empty" :query="query">
No results for "{{ query }}". No results for "{{ query }}".
@@ -107,11 +115,11 @@
No options. No options.
</slot> </slot>
</p> </p>
</HComboboxOptions> </component>
</div> </div>
</Transition> </Transition>
</div> </div>
</HCombobox> </component>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -123,6 +131,10 @@ import {
ComboboxOptions as HComboboxOptions, ComboboxOptions as HComboboxOptions,
ComboboxOption as HComboboxOption, ComboboxOption as HComboboxOption,
ComboboxInput as HComboboxInput, ComboboxInput as HComboboxInput,
Listbox as HListbox,
ListboxButton as HListboxButton,
ListboxOptions as HListboxOptions,
ListboxOption as HListboxOption,
provideUseId provideUseId
} from '@headlessui/vue' } from '@headlessui/vue'
import { computedAsync, useDebounceFn } from '@vueuse/core' import { computedAsync, useDebounceFn } from '@vueuse/core'
@@ -152,6 +164,10 @@ export default defineComponent({
HComboboxOptions, HComboboxOptions,
HComboboxOption, HComboboxOption,
HComboboxInput, HComboboxInput,
HListbox,
HListboxButton,
HListboxOptions,
HListboxOption,
UIcon, UIcon,
UAvatar UAvatar
}, },