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

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,22 +306,22 @@ 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')
     }
   }]
 }, {
   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,22 +13,22 @@ const items = [
     label: 'Profile',
     icon: 'i-heroicons-user',
     slot: 'custom' as const,
-    select(e: Event) {
+    onSelect(e: Event) {
       e.preventDefault()
       console.log('Profile clicked')
     }
   }, {
     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,15 +80,15 @@ const items = [
     label: 'New team',
     icon: 'i-heroicons-plus',
     kbds: ['meta', 'n'],
-    select() {
+    onSelect() {
       console.log('New team clicked')
     }
   }], [{
     label: 'GitHub',
     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" />