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