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

chore(SelectMenu): add prop for trailingIcon and fix padding when selected

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-11 14:22:15 +02:00
parent 0d83366427
commit 59fc14e93f
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -357,9 +357,10 @@ const selectMenu = {
padding: 'px-2 py-1.5', padding: 'px-2 py-1.5',
size: 'text-sm', size: 'text-sm',
color: 'text-gray-900 dark:text-white', color: 'text-gray-900 dark:text-white',
container: 'flex items-center gap-2', container: 'flex items-center gap-2 min-w-0',
active: 'bg-gray-100 dark:bg-gray-900', active: 'bg-gray-100 dark:bg-gray-900',
inactive: '', inactive: '',
selected: 'pr-7',
disabled: 'cursor-not-allowed opacity-50', disabled: 'cursor-not-allowed opacity-50',
empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5', empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
icon: { icon: {
@@ -367,17 +368,17 @@ const selectMenu = {
active: 'text-gray-900 dark:text-white', active: 'text-gray-900 dark:text-white',
inactive: 'text-gray-400 dark:text-gray-500' inactive: 'text-gray-400 dark:text-gray-500'
}, },
selectedIcon: {
wrapper: 'absolute inset-y-0 right-0 flex items-center',
padding: 'pr-2',
base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
},
avatar: { avatar: {
base: 'flex-shrink-0', base: 'flex-shrink-0',
size: '3xs' size: '3xs'
}, },
chip: { chip: {
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full' base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
},
selected: {
wrapper: 'absolute inset-y-0 right-0 flex items-center',
padding: 'pr-2',
icon: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
} }
}, },
transition: { transition: {
@@ -389,7 +390,8 @@ const selectMenu = {
placement: 'bottom-end' placement: 'bottom-end'
}, },
default: { default: {
selectedIcon: 'i-heroicons-check-20-solid' selectedIcon: 'i-heroicons-check-20-solid',
trailingIcon: 'i-heroicons-chevron-down-20-solid'
} }
} }

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

@@ -31,8 +31,8 @@
<span v-else class="block truncate text-gray-400 dark:text-gray-500">{{ placeholder || '&nbsp;' }}</span> <span v-else class="block truncate text-gray-400 dark:text-gray-500">{{ placeholder || '&nbsp;' }}</span>
</slot> </slot>
<span :class="trailingIconClass"> <span v-if="trailingIcon" :class="trailingIconClass">
<UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" /> <UIcon :name="trailingIcon" :class="iconClass" aria-hidden="true" />
</span> </span>
</button> </button>
</slot> </slot>
@@ -61,7 +61,7 @@
:value="option" :value="option"
:disabled="option.disabled" :disabled="option.disabled"
> >
<li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]"> <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, selected && ui.option.selected, 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" />
@@ -77,8 +77,8 @@
</slot> </slot>
</div> </div>
<span v-if="selected" :class="[ui.option.selected.wrapper, ui.option.selected.padding]"> <span v-if="selected" :class="[ui.option.selectedIcon.wrapper, ui.option.selectedIcon.padding]">
<UIcon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" /> <UIcon :name="selectedIcon" :class="ui.option.selectedIcon.base" aria-hidden="true" />
</span> </span>
</li> </li>
</component> </component>
@@ -159,6 +159,10 @@ export default defineComponent({
type: String, type: String,
default: null default: null
}, },
trailingIcon: {
type: String,
default: () => appConfig.ui.selectMenu.default.trailingIcon
},
selectedIcon: { selectedIcon: {
type: String, type: String,
default: () => appConfig.ui.selectMenu.default.selectedIcon default: () => appConfig.ui.selectMenu.default.selectedIcon