fix(components)!: rename select to onSelect on items

This commit is contained in:
Benjamin Canac
2024-10-15 13:10:58 +02:00
parent 6af276ef38
commit b39c4d127e
21 changed files with 76 additions and 125 deletions

View File

@@ -24,7 +24,7 @@ export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'>
chip?: ChipProps
kbds?: KbdProps['value'][] | KbdProps[]
slot?: string
select?(e?: Event): void
onSelect?(e?: Event): void
}
export interface CommandPaletteGroup<T> {
@@ -268,10 +268,10 @@ const groups = computed(() => {
<ComboboxItem
v-for="(item, index) in group.items"
:key="`group-${groupIndex}-${index}`"
:value="omit(item, ['matches' as any, 'group' as any, 'select', 'labelHtml', 'suffixHtml'])"
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
:disabled="item.disabled"
:class="ui.item({ class: props.ui?.item })"
@select="item.select"
@select="item.onSelect"
>
<slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
<slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">

View File

@@ -27,7 +27,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
open?: boolean
defaultOpen?: boolean
children?: ContextMenuItem[] | ContextMenuItem[][]
select?(e: Event): void
onSelect?(e: Event): void
}
type ContextMenuVariants = VariantProps<typeof contextMenu>

View File

@@ -108,7 +108,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
</template>
</UContextMenuContent>
</ContextMenu.Sub>
<ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.select">
<ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.onSelect">
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />

View File

@@ -27,7 +27,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
open?: boolean
defaultOpen?: boolean
children?: DropdownMenuItem[] | DropdownMenuItem[][]
select?(e: Event): void
onSelect?(e: Event): void
}
type DropdownMenuVariants = VariantProps<typeof dropdownMenu>

View File

@@ -115,7 +115,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
</template>
</UDropdownMenuContent>
</DropdownMenu.Sub>
<DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.select">
<DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.onSelect">
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />

View File

@@ -23,7 +23,7 @@ export interface InputMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
* @defaultValue 'item'
*/
type?: 'label' | 'separator' | 'item'
select?(e?: Event): void
onSelect?(e?: Event): void
}
type InputMenuVariants = VariantProps<typeof inputMenu>
@@ -341,7 +341,7 @@ defineExpose({
:class="ui.item({ class: props.ui?.item })"
:disabled="item.disabled"
:value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
@select="item.select"
@select="item.onSelect"
>
<slot name="item" :item="(item as T)" :index="index">
<slot name="item-leading" :item="(item as T)" :index="index">

View File

@@ -16,7 +16,7 @@ export interface NavigationMenuChildItem extends Omit<LinkProps, 'raw' | 'custom
label: string
description?: string
icon?: string
select?(e: Event): void
onSelect?(e: Event): void
}
export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<NavigationMenuItemProps, 'value'> {
@@ -27,7 +27,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, P
trailingIcon?: string
slot?: string
children?: NavigationMenuChildItem[]
select?(e: Event): void
onSelect?(e: Event): void
}
type NavigationMenuVariants = VariantProps<typeof navigationMenu>
@@ -128,7 +128,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
as-child
:active="active"
@select="item.select"
@select="item.onSelect"
>
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
<slot :name="item.slot || 'item'" :item="item" :index="index">
@@ -166,7 +166,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<ul :class="ui.childList({ class: props.ui?.childList })">
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
<NavigationMenuLink as-child :active="childActive" @select="childItem.select">
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />

View File

@@ -22,7 +22,7 @@ export interface SelectMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
* @defaultValue 'item'
*/
type?: 'label' | 'separator' | 'item'
select?(e?: Event): void
onSelect?(e?: Event): void
}
type SelectMenuVariants = VariantProps<typeof selectMenu>
@@ -283,7 +283,7 @@ function onUpdateOpen(value: boolean) {
:class="ui.item({ class: props.ui?.item })"
:disabled="item.disabled"
:value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
@select="item.select"
@select="item.onSelect"
>
<slot name="item" :item="(item as T)" :index="index">
<slot name="item-leading" :item="(item as T)" :index="index">

View File

@@ -44,7 +44,7 @@ export function extractShortcuts(items: any[] | any[][]) {
items.forEach((item) => {
if (item.kbds?.length && (item.select || item.click)) {
const shortcutKey = item.kbds.join('_')
shortcuts[shortcutKey] = item.select || item.click
shortcuts[shortcutKey] = item.onSelect || item.onClick
}
if (item.children) {
traverse(item.children.flat())