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

chore(SelectMenu): move resolve class logic into template

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-09 11:51:38 +02:00
parent 6de57aa1a0
commit fc11612a49
2 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/app.config.ts
View File

@@ -322,7 +322,11 @@ const selectMenu = {
ring: 'ring-1 ring-gray-200 dark:ring-gray-700', ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 u-text-gray-700 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500', input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 u-text-gray-700 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500',
option: { option: {
base: 'cursor-default select-none relative px-2 py-1.5 rounded-md text-sm text-gray-900 dark:text-white flex items-center justify-between gap-1', base: 'cursor-default select-none relative flex items-center justify-between gap-1',
rounded: 'rounded-md',
spacing: 'px-2 py-1.5',
size: 'text-sm',
color: 'text-gray-900 dark:text-white',
container: 'flex items-center gap-2', container: 'flex items-center gap-2',
active: 'bg-gray-100 dark:bg-gray-900', active: 'bg-gray-100 dark:bg-gray-900',
inactive: '', inactive: '',

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

@@ -62,7 +62,7 @@
:value="option" :value="option"
:disabled="option.disabled" :disabled="option.disabled"
> >
<li :class="resolveOptionClass({ active, disabled: optionDisabled })"> <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
<div :class="ui.option.container"> <div :class="ui.option.container">
<slot name="option" :option="option" :active="active" :selected="selected"> <slot name="option" :option="option" :active="active" :selected="selected">
<UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" /> <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
@@ -85,7 +85,7 @@
</component> </component>
<component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template"> <component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
<li :class="resolveOptionClass({ active })"> <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
<div :class="ui.option.container"> <div :class="ui.option.container">
<slot name="option-create" :option="queryOption" :active="active" :selected="selected"> <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
<span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span> <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
@@ -292,14 +292,6 @@ export default defineComponent({
} }
}) })
function resolveOptionClass ({ active, disabled }: { active: boolean, disabled?: boolean }) {
return classNames(
ui.value.option.base,
active ? ui.value.option.active : ui.value.option.inactive,
disabled && ui.value.option.disabled
)
}
function onUpdate (event: any) { function onUpdate (event: any) {
if (query.value && searchInput.value?.$el) { if (query.value && searchInput.value?.$el) {
query.value = '' query.value = ''
@@ -321,7 +313,6 @@ export default defineComponent({
filteredOptions, filteredOptions,
queryOption, queryOption,
query, query,
resolveOptionClass,
onUpdate onUpdate
} }
} }