From b39c4d127e0ddf7607e868ecc83930ca49436bad Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 15 Oct 2024 13:10:58 +0200 Subject: [PATCH] fix(components)!: rename `select` to `onSelect` on items --- .../CommandPaletteSelectExample.vue | 12 ++-- .../content/2.composables/define-shortcuts.md | 8 ++- docs/content/3.components/command-palette.md | 2 +- docs/content/3.components/context-menu.md | 14 ++--- docs/content/3.components/dropdown-menu.md | 8 +-- docs/content/3.components/input-menu.md | 2 +- docs/content/3.components/navigation-menu.md | 4 +- docs/content/3.components/select-menu.md | 2 +- .../app/pages/components/context-menu.vue | 12 ++-- .../app/pages/components/dropdown-menu.vue | 20 +++---- src/runtime/components/CommandPalette.vue | 6 +- src/runtime/components/ContextMenu.vue | 2 +- src/runtime/components/ContextMenuContent.vue | 2 +- src/runtime/components/DropdownMenu.vue | 2 +- .../components/DropdownMenuContent.vue | 2 +- src/runtime/components/InputMenu.vue | 4 +- src/runtime/components/NavigationMenu.vue | 8 +-- src/runtime/components/SelectMenu.vue | 4 +- src/runtime/composables/defineShortcuts.ts | 2 +- test/components/ContextMenu.spec.ts | 30 ++-------- test/components/DropdownMenu.spec.ts | 55 ++++--------------- 21 files changed, 76 insertions(+), 125 deletions(-) diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue index 879f9092..47e9ffb1 100644 --- a/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue +++ b/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue @@ -89,7 +89,7 @@ const groups = ref([ 'meta', 'N' ], - select: () => { + onSelect() { console.log('Add new file') } }, @@ -101,7 +101,7 @@ const groups = ref([ 'meta', 'F' ], - select: () => { + onSelect() { console.log('Add new folder') } }, @@ -113,7 +113,7 @@ const groups = ref([ 'meta', 'H' ], - select: () => { + onSelect() { console.log('Add hashtag') } }, @@ -125,7 +125,7 @@ const groups = ref([ 'meta', 'L' ], - select: () => { + onSelect() { console.log('Add label') } } @@ -134,8 +134,8 @@ const groups = ref([ ]) function onSelect(item: any) { - if (item.select) { - item.select() + if (item.onSelect) { + item.onSelect() } else if (item.to) { if (typeof item.to === 'string' && (item.target === '_blank' || item.to.startsWith('http'))) { window.open(item.to, item.target || '_blank') diff --git a/docs/content/2.composables/define-shortcuts.md b/docs/content/2.composables/define-shortcuts.md index 2ef3d8c7..de98d6e1 100644 --- a/docs/content/2.composables/define-shortcuts.md +++ b/docs/content/2.composables/define-shortcuts.md @@ -123,12 +123,16 @@ const items = [{ label: 'Save', icon: 'i-heroicons-document-arrow-down', kbds: ['meta', 'S'], - select: () => save() + onSelect() { + save() + } }, { label: 'Copy', icon: 'i-heroicons-document-duplicate', kbds: ['meta', 'C'], - select: () => copy() + onSelect() { + copy() + } }] defineShortcuts(extractShortcuts(items)) diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md index 7361e76f..a637a35f 100644 --- a/docs/content/3.components/command-palette.md +++ b/docs/content/3.components/command-palette.md @@ -43,7 +43,7 @@ Each group takes some `items` as an array of objects with the following properti - `kbds?: string[] | KbdProps[]`{lang="ts-type"} - `disabled?: boolean`{lang="ts-type"} - [`slot?: string`{lang="ts-type"}](#with-custom-slot) -- `select?(e?: Event): void`{lang="ts-type"} +- `onSelect?(e?: Event): void`{lang="ts-type"} ::component-code --- diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md index 90d32217..b71a06bc 100644 --- a/docs/content/3.components/context-menu.md +++ b/docs/content/3.components/context-menu.md @@ -26,7 +26,7 @@ Use the `items` prop as an array of objects with the following properties: - `disabled?: boolean`{lang="ts-type"} - `class?: any`{lang="ts-type"} - [`slot?: string`{lang="ts-type"}](#with-custom-slot) -- `select?(e: Event): void`{lang="ts-type"} +- `onSelect?(e: Event): void`{lang="ts-type"} You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc. @@ -207,13 +207,13 @@ const items = [ [{ label: 'Show Sidebar', kbds: ['meta', 'S'], - select() { + onSelect() { console.log('Show Sidebar clicked') } }, { label: 'Show Toolbar', kbds: ['shift', 'meta', 'D'], - select() { + onSelect() { console.log('Show Toolbar clicked') } }, { @@ -232,25 +232,25 @@ const items = [ children: [[{ label: 'View Source', kbds: ['option', 'meta', 'U'], - select() { + onSelect() { console.log('View Source clicked') } }, { label: 'Developer Tools', kbds: ['option', 'meta', 'I'], - select() { + onSelect() { console.log('Developer Tools clicked') } }], [{ label: 'Inspect Elements', kbds: ['option', 'meta', 'C'], - select() { + onSelect() { console.log('Inspect Elements clicked') } }], [{ label: 'JavaScript Console', kbds: ['option', 'meta', 'J'], - select() { + onSelect() { console.log('JavaScript Console clicked') } }]] diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md index 9e70153e..7a79e54b 100644 --- a/docs/content/3.components/dropdown-menu.md +++ b/docs/content/3.components/dropdown-menu.md @@ -26,7 +26,7 @@ Use the `items` prop as an array of objects with the following properties: - `disabled?: boolean`{lang="ts-type"} - `class?: any`{lang="ts-type"} - [`slot?: string`{lang="ts-type"}](#with-custom-slot) -- `select?(e: Event): void`{lang="ts-type"} +- `onSelect?(e: Event): void`{lang="ts-type"} You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc. @@ -306,14 +306,14 @@ const items = [{ label: 'Invite by email', icon: 'i-heroicons-paper-airplane', kbds: ['meta', 'e'], - select() { + onSelect() { console.log('Invite by email clicked') } }, { label: 'Invite by link', icon: 'i-heroicons-link', kbds: ['meta', 'i'], - select() { + onSelect() { console.log('Invite by link clicked') } }] @@ -321,7 +321,7 @@ const items = [{ label: 'New team', icon: 'i-heroicons-plus', kbds: ['meta', 'n'], - select() { + onSelect() { console.log('New team clicked') } }] diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md index c76096a6..e43755bf 100644 --- a/docs/content/3.components/input-menu.md +++ b/docs/content/3.components/input-menu.md @@ -53,7 +53,7 @@ You can also pass an array of objects with the following properties: - [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items) - [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items) - `disabled?: boolean`{lang="ts-type"} -- `select?(e: Event): void`{lang="ts-type"} +- `onSelect?(e: Event): void`{lang="ts-type"} ::component-code --- diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md index f9b404f9..7444ac4a 100644 --- a/docs/content/3.components/navigation-menu.md +++ b/docs/content/3.components/navigation-menu.md @@ -25,7 +25,7 @@ Use the `items` prop as an array of objects with the following properties: - `disabled?: boolean`{lang="ts-type"} - `class?: any`{lang="ts-type"} - [`slot?: string`{lang="ts-type"}](#with-custom-slot) -- `select?(e: Event): void`{lang="ts-type"} +- `onSelect?(e: Event): void`{lang="ts-type"} You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc. @@ -130,7 +130,7 @@ Each item can take a `children` array of objects with the following properties t - `description?: string` - `icon?: string` - `class?: any` -- `select?(e: Event): void` +- `onSelect?(e: Event): void` :: ### Orientation diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md index 0ac9bfe5..67ccfce4 100644 --- a/docs/content/3.components/select-menu.md +++ b/docs/content/3.components/select-menu.md @@ -55,7 +55,7 @@ You can also pass an array of objects with the following properties: - [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items) - [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items) - `disabled?: boolean`{lang="ts-type"} -- `select?(e: Event): void`{lang="ts-type"} +- `onSelect?(e: Event): void`{lang="ts-type"} ::component-code --- diff --git a/playground/app/pages/components/context-menu.vue b/playground/app/pages/components/context-menu.vue index 3f7d947c..bd65874c 100644 --- a/playground/app/pages/components/context-menu.vue +++ b/playground/app/pages/components/context-menu.vue @@ -24,13 +24,13 @@ const items = [ [{ label: 'Show Sidebar', kbds: ['meta', 'S'], - select() { + onSelect() { console.log('Show Sidebar clicked') } }, { label: 'Show Toolbar', kbds: ['shift', 'meta', 'D'], - select() { + onSelect() { console.log('Show Toolbar clicked') } }, { @@ -49,25 +49,25 @@ const items = [ children: [[{ label: 'View Source', kbds: ['option', 'meta', 'U'], - select() { + onSelect() { console.log('View Source clicked') } }, { label: 'Developer Tools', kbds: ['option', 'meta', 'I'], - select() { + onSelect() { console.log('Developer Tools clicked') } }], [{ label: 'Inspect Elements', kbds: ['option', 'meta', 'C'], - select() { + onSelect() { console.log('Inspect Elements clicked') } }], [{ label: 'JavaScript Console', kbds: ['option', 'meta', 'J'], - select() { + onSelect() { console.log('JavaScript Console clicked') } }]] diff --git a/playground/app/pages/components/dropdown-menu.vue b/playground/app/pages/components/dropdown-menu.vue index 765bdde3..5964c939 100644 --- a/playground/app/pages/components/dropdown-menu.vue +++ b/playground/app/pages/components/dropdown-menu.vue @@ -13,7 +13,7 @@ const items = [ label: 'Profile', icon: 'i-heroicons-user', slot: 'custom' as const, - select(e: Event) { + onSelect(e: Event) { e.preventDefault() console.log('Profile clicked') } @@ -21,14 +21,14 @@ const items = [ label: 'Billing', icon: 'i-heroicons-credit-card', kbds: ['meta', 'b'], - select() { + onSelect() { console.log('Billing clicked') } }, { label: 'Settings', icon: 'i-heroicons-cog', kbds: ['?'], - select() { + onSelect() { console.log('Settings clicked') } }], [{ @@ -44,7 +44,7 @@ const items = [ label: 'Invite by link', icon: 'i-heroicons-link', kbds: ['meta', 'i'], - select(e: Event) { + onSelect(e: Event) { e?.preventDefault() console.log('Invite by link clicked') } @@ -56,21 +56,21 @@ const items = [ icon: 'i-simple-icons-slack', to: 'https://slack.com', target: '_blank', - select(e: Event) { + onSelect(e: Event) { e.preventDefault() console.log('Import from Slack clicked') } }, { label: 'Import from Trello', icon: 'i-simple-icons-trello', - select(e: Event) { + onSelect(e: Event) { e.preventDefault() console.log('Import from Trello clicked') } }, { label: 'Import from Asana', icon: 'i-simple-icons-asana', - select(e: Event) { + onSelect(e: Event) { e.preventDefault() console.log('Import from Asana clicked') } @@ -80,7 +80,7 @@ const items = [ label: 'New team', icon: 'i-heroicons-plus', kbds: ['meta', 'n'], - select() { + onSelect() { console.log('New team clicked') } }], [{ @@ -88,7 +88,7 @@ const items = [ icon: 'i-simple-icons-github', to: 'https://github.com/nuxt/ui', target: '_blank', - select(e: Event) { + onSelect(e: Event) { e.preventDefault() } }, { @@ -108,7 +108,7 @@ const items = [ label: 'Logout', icon: 'i-heroicons-arrow-right-start-on-rectangle', kbds: ['shift', 'meta', 'q'], - select() { + onSelect() { console.log('Logout clicked') } }] diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue index a71af3b0..2f6642cd 100644 --- a/src/runtime/components/CommandPalette.vue +++ b/src/runtime/components/CommandPalette.vue @@ -24,7 +24,7 @@ export interface CommandPaletteItem extends Pick chip?: ChipProps kbds?: KbdProps['value'][] | KbdProps[] slot?: string - select?(e?: Event): void + onSelect?(e?: Event): void } export interface CommandPaletteGroup { @@ -268,10 +268,10 @@ const groups = computed(() => { diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue index fbed92be..eaddcfbd 100644 --- a/src/runtime/components/ContextMenu.vue +++ b/src/runtime/components/ContextMenu.vue @@ -27,7 +27,7 @@ export interface ContextMenuItem extends Omit diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue index ffc9ec90..6cc61e3d 100644 --- a/src/runtime/components/ContextMenuContent.vue +++ b/src/runtime/components/ContextMenuContent.vue @@ -108,7 +108,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0 - + diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue index 87e288b2..8b25f3a4 100644 --- a/src/runtime/components/DropdownMenu.vue +++ b/src/runtime/components/DropdownMenu.vue @@ -27,7 +27,7 @@ export interface DropdownMenuItem extends Omit diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue index 44e65fac..602e3cdf 100644 --- a/src/runtime/components/DropdownMenuContent.vue +++ b/src/runtime/components/DropdownMenuContent.vue @@ -115,7 +115,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0 - + diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 17289458..f2e6eaec 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -23,7 +23,7 @@ export interface InputMenuItem extends Pick { * @defaultValue 'item' */ type?: 'label' | 'separator' | 'item' - select?(e?: Event): void + onSelect?(e?: Event): void } type InputMenuVariants = VariantProps @@ -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" > diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index 1c2a1184..d87e5919 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -16,7 +16,7 @@ export interface NavigationMenuChildItem extends Omit, Pick { @@ -27,7 +27,7 @@ export interface NavigationMenuItem extends Omit, P trailingIcon?: string slot?: string children?: NavigationMenuChildItem[] - select?(e: Event): void + onSelect?(e: Event): void } type NavigationMenuVariants = VariantProps @@ -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" > @@ -166,7 +166,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
  • - + diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 9061d1dd..7144f4e4 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -22,7 +22,7 @@ export interface SelectMenuItem extends Pick { * @defaultValue 'item' */ type?: 'label' | 'separator' | 'item' - select?(e?: Event): void + onSelect?(e?: Event): void } type SelectMenuVariants = VariantProps @@ -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" > diff --git a/src/runtime/composables/defineShortcuts.ts b/src/runtime/composables/defineShortcuts.ts index e6616c05..dcbf5f3c 100644 --- a/src/runtime/composables/defineShortcuts.ts +++ b/src/runtime/composables/defineShortcuts.ts @@ -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()) diff --git a/test/components/ContextMenu.spec.ts b/test/components/ContextMenu.spec.ts index 86d2e41d..d7659fbd 100644 --- a/test/components/ContextMenu.spec.ts +++ b/test/components/ContextMenu.spec.ts @@ -23,16 +23,10 @@ describe('ContextMenu', () => { }], [{ label: 'Show Sidebar', - kbds: ['meta', 'S'], - select() { - console.log('Show Sidebar clicked') - } + kbds: ['meta', 'S'] }, { label: 'Show Toolbar', - kbds: ['shift', 'meta', 'D'], - select() { - console.log('Show Toolbar clicked') - } + kbds: ['shift', 'meta', 'D'] }, { label: 'Collapse Pinned Tabs', disabled: true @@ -48,29 +42,17 @@ describe('ContextMenu', () => { label: 'Developer', children: [[{ label: 'View Source', - kbds: ['option', 'meta', 'U'], - select() { - console.log('View Source clicked') - } + kbds: ['option', 'meta', 'U'] }, { label: 'Developer Tools', - kbds: ['option', 'meta', 'I'], - select() { - console.log('Developer Tools clicked') - } + kbds: ['option', 'meta', 'I'] }], [{ label: 'Inspect Elements', - kbds: ['option', 'meta', 'C'], - select() { - console.log('Inspect Elements clicked') - } + kbds: ['option', 'meta', 'C'] }], [{ label: 'JavaScript Console', kbds: ['option', 'meta', 'J'], - slot: 'custom', - select() { - console.log('JavaScript Console clicked') - } + slot: 'custom' }]] }] ] diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts index 503af425..be06ced6 100644 --- a/test/components/DropdownMenu.spec.ts +++ b/test/components/DropdownMenu.spec.ts @@ -17,25 +17,15 @@ describe('DropdownMenu', () => { [{ label: 'Profile', icon: 'i-heroicons-user', - slot: 'custom', - select(e: Event) { - e.preventDefault() - console.log('Profile clicked') - } + slot: 'custom' }, { label: 'Billing', icon: 'i-heroicons-credit-card', - kbds: ['meta', 'b'], - select() { - console.log('Billing clicked') - } + kbds: ['meta', 'b'] }, { label: 'Settings', icon: 'i-heroicons-cog', - kbds: ['?'], - select() { - console.log('Settings clicked') - } + kbds: ['?'] }], [{ label: 'Team', icon: 'i-heroicons-users' @@ -48,11 +38,7 @@ describe('DropdownMenu', () => { }, { label: 'Invite by link', icon: 'i-heroicons-link', - kbds: ['meta', 'i'], - select(e: Event) { - e?.preventDefault() - console.log('Invite by link clicked') - } + kbds: ['meta', 'i'] }], [{ label: 'More', icon: 'i-heroicons-plus-circle', @@ -60,42 +46,24 @@ describe('DropdownMenu', () => { label: 'Import from Slack', icon: 'i-simple-icons-slack', to: 'https://slack.com', - target: '_blank', - select(e: Event) { - e.preventDefault() - console.log('Import from Slack clicked') - } + target: '_blank' }, { label: 'Import from Trello', - icon: 'i-simple-icons-trello', - select(e: Event) { - e.preventDefault() - console.log('Import from Trello clicked') - } + icon: 'i-simple-icons-trello' }, { label: 'Import from Asana', - icon: 'i-simple-icons-asana', - select(e: Event) { - e.preventDefault() - console.log('Import from Asana clicked') - } + icon: 'i-simple-icons-asana' }] }]] }, { label: 'New team', icon: 'i-heroicons-plus', - kbds: ['meta', 'n'], - select() { - console.log('New team clicked') - } + kbds: ['meta', 'n'] }], [{ label: 'GitHub', icon: 'i-simple-icons-github', to: 'https://github.com/nuxt/ui', - target: '_blank', - select(e: Event) { - e.preventDefault() - } + target: '_blank' }, { label: 'Support', icon: 'i-heroicons-lifebuoy', @@ -112,10 +80,7 @@ describe('DropdownMenu', () => { }], [{ label: 'Logout', icon: 'i-heroicons-arrow-right-start-on-rectangle', - kbds: ['shift', 'meta', 'q'], - select() { - console.log('Logout clicked') - } + kbds: ['shift', 'meta', 'q'] }] ]