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(InputMenu/SelectMenu): prevent disabled items to be selected

Browse Source 
Resolves #3474
This commit is contained in:
Benjamin Canac
2025-04-08 14:43:58 +02:00
parent d339dcbfb8
commit 8435a0fe16
10 changed files with 1200 additions and 1175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/runtime/components/InputMenu.vue
View File

@@ -364,10 +364,22 @@ function onRemoveTag(event: any) {
}
}
function onSelect(e: Event, item: InputMenuItem) {
if (!isInputItem(item)) {
return
}
if (item.disabled) {
e.preventDefault()
return
}
item.onSelect?.(e)
}
function isInputItem(item: InputMenuItem): item is _InputMenuItem {
return typeof item === 'object' && item !== null
}
defineExpose({
inputRef
})
@@ -493,7 +505,7 @@ defineExpose({
:class="ui.item({ class: props.ui?.item })"
:disabled="isInputItem(item) && item.disabled"
:value="props.valueKey && isInputItem(item) ? get(item, String(props.valueKey)) : item"
@select="isInputItem(item) && item.onSelect?.($event)"
@select="onSelect($event, item)"
>
<slot name="item" :item="(item as NestedItem<T>)" :index="index">
<slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">

15
src/runtime/components/SelectMenu.vue
View File

@@ -326,6 +326,19 @@ function onUpdateOpen(value: boolean) {
}
}
function onSelect(e: Event, item: SelectMenuItem) {
if (!isSelectItem(item)) {
return
}
if (item.disabled) {
e.preventDefault()
return
}
item.onSelect?.(e)
}
function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
return typeof item === 'object' && item !== null
}
@@ -417,7 +430,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
:class="ui.item({ class: props.ui?.item })"
:disabled="isSelectItem(item) && item.disabled"
:value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey as string) : item"
@select="isSelectItem(item) && item.onSelect?.($event)"
@select="onSelect($event, item)"
>
<slot name="item" :item="(item as NestedItem<T>)" :index="index">
<slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">

4
src/theme/input-menu.ts
View File

@@ -14,8 +14,8 @@ export default (options: Required<ModuleOptions>) => {
empty: 'py-2 text-center text-sm text-(--ui-text-muted)',
label: 'font-semibold text-(--ui-text-highlighted)',
separator: '-mx-1 my-1 h-px bg-(--ui-border)',
item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:not-group-data-disabled:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',

4
src/theme/select.ts
View File

@@ -17,8 +17,8 @@ export default (options: Required<ModuleOptions>) => {
empty: 'py-2 text-center text-sm text-(--ui-text-muted)',
label: 'font-semibold text-(--ui-text-highlighted)',
separator: '-mx-1 my-1 h-px bg-(--ui-border)',
item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:not-group-data-disabled:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',