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

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) {
+  if (item.onSelect) {
-    item.select()
+    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')

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))

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
 ---

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')
       }
     }]]

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')
   }
 }]

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
 ---

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

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
 ---

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')
       }
     }]]

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')
     }
   }]

src/runtime/components/CommandPalette.vue

@@ -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">

src/runtime/components/ContextMenu.vue

@@ -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>

src/runtime/components/ContextMenuContent.vue

@@ -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" />

src/runtime/components/DropdownMenu.vue

@@ -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>

src/runtime/components/DropdownMenuContent.vue

@@ -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" />

src/runtime/components/InputMenu.vue

@@ -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">

src/runtime/components/NavigationMenu.vue

@@ -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 })" />
 

src/runtime/components/SelectMenu.vue

@@ -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">

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())

test/components/ContextMenu.spec.ts

@@ -23,16 +23,10 @@ describe('ContextMenu', () => {
     }],
     [{
       label: 'Show Sidebar',
-      kbds: ['meta', 'S'],
+      kbds: ['meta', 'S']
-      select() {
-        console.log('Show Sidebar clicked')
-      }
     }, {
       label: 'Show Toolbar',
-      kbds: ['shift', 'meta', 'D'],
+      kbds: ['shift', 'meta', 'D']
-      select() {
-        console.log('Show Toolbar clicked')
-      }
     }, {
       label: 'Collapse Pinned Tabs',
       disabled: true
@@ -48,29 +42,17 @@ describe('ContextMenu', () => {
       label: 'Developer',
       children: [[{
         label: 'View Source',
-        kbds: ['option', 'meta', 'U'],
+        kbds: ['option', 'meta', 'U']
-        select() {
-          console.log('View Source clicked')
-        }
       }, {
         label: 'Developer Tools',
-        kbds: ['option', 'meta', 'I'],
+        kbds: ['option', 'meta', 'I']
-        select() {
-          console.log('Developer Tools clicked')
-        }
       }], [{
         label: 'Inspect Elements',
-        kbds: ['option', 'meta', 'C'],
+        kbds: ['option', 'meta', 'C']
-        select() {
-          console.log('Inspect Elements clicked')
-        }
       }], [{
         label: 'JavaScript Console',
         kbds: ['option', 'meta', 'J'],
-        slot: 'custom',
+        slot: 'custom'
-        select() {
-          console.log('JavaScript Console clicked')
-        }
       }]]
     }]
   ]

test/components/DropdownMenu.spec.ts

@@ -17,25 +17,15 @@ describe('DropdownMenu', () => {
     [{
       label: 'Profile',
       icon: 'i-heroicons-user',
-      slot: 'custom',
+      slot: 'custom'
-      select(e: Event) {
-        e.preventDefault()
-        console.log('Profile clicked')
-      }
     }, {
       label: 'Billing',
       icon: 'i-heroicons-credit-card',
-      kbds: ['meta', 'b'],
+      kbds: ['meta', 'b']
-      select() {
-        console.log('Billing clicked')
-      }
     }, {
       label: 'Settings',
       icon: 'i-heroicons-cog',
-      kbds: ['?'],
+      kbds: ['?']
-      select() {
-        console.log('Settings clicked')
-      }
     }], [{
       label: 'Team',
       icon: 'i-heroicons-users'
@@ -48,11 +38,7 @@ describe('DropdownMenu', () => {
       }, {
         label: 'Invite by link',
         icon: 'i-heroicons-link',
-        kbds: ['meta', 'i'],
+        kbds: ['meta', 'i']
-        select(e: Event) {
-          e?.preventDefault()
-          console.log('Invite by link clicked')
-        }
       }], [{
         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',
+          target: '_blank'
-          select(e: Event) {
-            e.preventDefault()
-            console.log('Import from Slack clicked')
-          }
         }, {
           label: 'Import from Trello',
-          icon: 'i-simple-icons-trello',
+          icon: 'i-simple-icons-trello'
-          select(e: Event) {
-            e.preventDefault()
-            console.log('Import from Trello clicked')
-          }
         }, {
           label: 'Import from Asana',
-          icon: 'i-simple-icons-asana',
+          icon: 'i-simple-icons-asana'
-          select(e: Event) {
-            e.preventDefault()
-            console.log('Import from Asana clicked')
-          }
         }]
       }]]
     }, {
       label: 'New team',
       icon: 'i-heroicons-plus',
-      kbds: ['meta', 'n'],
+      kbds: ['meta', 'n']
-      select() {
-        console.log('New team clicked')
-      }
     }], [{
       label: 'GitHub',
       icon: 'i-simple-icons-github',
       to: 'https://github.com/nuxt/ui',
-      target: '_blank',
+      target: '_blank'
-      select(e: Event) {
-        e.preventDefault()
-      }
     }, {
       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'],
+      kbds: ['shift', 'meta', 'q']
-      select() {
-        console.log('Logout clicked')
-      }
     }]
   ]