feat(Tree): add global event handlers and checkbox example

docs/app/components/content/examples/table/TableColumnVisibilityExample.vue

@@ -109,8 +109,8 @@ const columnVisibility = ref({
           onUpdateChecked(checked: boolean) {
             table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
-          onSelect(e?: Event) {
-            e?.preventDefault()
+          onSelect(e: Event) {
+            e.preventDefault()
           }
         }))"
         :content="{ align: 'end' }"

docs/app/components/content/examples/table/TableExample.vue

@@ -286,8 +286,8 @@ function randomize() {
           onUpdateChecked(checked: boolean) {
             table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
-          onSelect(e?: Event) {
-            e?.preventDefault()
+          onSelect(e: Event) {
+            e.preventDefault()
           }
         }))"
         :content="{ align: 'end' }"

docs/app/components/content/examples/tree/TreeCheckboxItemsExample.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { TreeItemSelectEvent } from 'reka-ui'
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    children: [
+      {
+        label: 'composables/',
+        children: [
+          { label: 'useAuth.ts' },
+          { label: 'useUser.ts' }
+        ]
+      },
+      {
+        label: 'components/',
+        defaultExpanded: true,
+        children: [
+          { label: 'Card.vue' },
+          { label: 'Button.vue' }
+        ]
+      }
+    ]
+  },
+  { label: 'app.vue' },
+  { label: 'nuxt.config.ts' }
+]
+
+const value = ref<(typeof items)>([])
+
+function onSelect(e: TreeItemSelectEvent<TreeItem>) {
+  if (e.detail.originalEvent.type === 'click') {
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UTree
+    v-model="value"
+    :as="{ link: 'div' }"
+    :items="items"
+    multiple
+    propagate-select
+    bubble-select
+    @select="onSelect"
+  >
+    <template #item-leading="{ selected, indeterminate, handleSelect }">
+      <UCheckbox
+        :model-value="indeterminate ? 'indeterminate' : selected"
+        tabindex="-1"
+        @change="handleSelect"
+        @click.stop
+      />
+    </template>
+  </UTree>
+</template>

docs/app/components/content/examples/tree/TreeOnSelectExample.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TreeItemSelectEvent } from 'reka-ui'
 import type { TreeItem } from '@nuxt/ui'
 
 const items: TreeItem[] = [
@@ -29,8 +30,14 @@ const items: TreeItem[] = [
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
 ]
+
+function onSelect(e: TreeItemSelectEvent<TreeItem>) {
+  if (e.detail.originalEvent.type === 'click') {
+    e.preventDefault()
+  }
+}
 </script>
 
 <template>
-  <UTree :items="items" />
+  <UTree :items="items" @select="onSelect" />
 </template>

docs/app/components/content/examples/tree/TreeOnToggleExample.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TreeItemToggleEvent } from 'reka-ui'
 import type { TreeItem } from '@nuxt/ui'
 
 const items: TreeItem[] = [
@@ -29,8 +30,14 @@ const items: TreeItem[] = [
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
 ]
+
+function onToggle(e: TreeItemToggleEvent<TreeItem>) {
+  if (e.detail.originalEvent.type === 'keydown') {
+    e.preventDefault()
+  }
+}
 </script>
 
 <template>
-  <UTree :items="items" />
+  <UTree :items="items" @toggle="onToggle" />
 </template>

docs/content/docs/2.components/command-palette.md

@@ -110,7 +110,7 @@ Each group contains an `items` array of objects that define the commands. Each i
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `placeholder?: string`{lang="ts-type"}
 - `children?: CommandPaletteItem[]`{lang="ts-type"}
-- `onSelect?(e?: Event): void`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
 

docs/content/docs/2.components/context-menu.md

@@ -95,8 +95,8 @@ Use the `items` prop as an array of objects with the following properties:
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
-- `onSelect?(e: Event): void`{lang="ts-type"}
-- [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- [`onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}](#with-checkbox-items)
 - `children?: ContextMenuItem[] | ContextMenuItem[][]`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}

docs/content/docs/2.components/dropdown-menu.md

@@ -94,8 +94,8 @@ Use the `items` prop as an array of objects with the following properties:
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
-- `onSelect?(e: Event): void`{lang="ts-type"}
-- [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- [`onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}](#with-checkbox-items)
 - `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}

docs/content/docs/2.components/input-menu.md

@@ -73,7 +73,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"}
-- `onSelect?(e: Event): void`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
 

docs/content/docs/2.components/navigation-menu.md

@@ -118,7 +118,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
-- `onSelect?(e: Event): void`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
 - `children?: NavigationMenuChildItem[]`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
@@ -223,7 +223,7 @@ Each item can take a `children` array of objects with the following properties t
 - `label: string`
 - `description?: string`
 - `icon?: string`
-- `onSelect?(e: Event): void`
+- `onSelect?: (e: Event) => void`
 - `class?: any`
 
 ::

docs/content/docs/2.components/select-menu.md

@@ -79,7 +79,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"}
-- `onSelect?(e: Event): void`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
 

docs/content/docs/2.components/tree.md

@@ -60,8 +60,8 @@ Use the `items` prop as an array of objects with the following properties:
 - `disabled?: boolean`{lang="ts-type"}
 - `slot?: string`{lang="ts-type"}
 - `children?: TreeItem[]`{lang="ts-type"}
-- `onToggle?(e: Event): void`{lang="ts-type"}
-- `onSelect?(e?: Event): void`{lang="ts-type"}
+- `onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void`{lang="ts-type"}
+- `onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, itemWithChildren?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingIcon?: ClassNameValue, listWithChildren?: ClassNameValue }`{lang="ts-type"}
 
@@ -458,7 +458,7 @@ props:
 ---
 ::
 
-If you want to prevent an item from being selected, you can use the `item.onSelect()`{lang="ts-type"} property:
+If you want to prevent an item from being selected, you can use the `item.onSelect()`{lang="ts-type"} property or the global `select` event:
 
 ::component-example
 ---
@@ -486,7 +486,7 @@ props:
 ---
 ::
 
-If you want to prevent an item from being expanded, you can use the `item.onToggle()`{lang="ts-type"} property:
+If you want to prevent an item from being expanded, you can use the `item.onToggle()`{lang="ts-type"} property or the global `toggle` event:
 
 ::component-example
 ---
@@ -501,6 +501,23 @@ props:
 This lets you select a parent item without expanding or collapsing its children.
 ::
 
+### With checkbox in items :badge{label="Soon"}
+
+You can use the `item-leading` slot to add a [Checkbox](/docs/components/checkbox) to the items. Use the `multiple`, `propagate-select` and `bubble-select` props to enable multi-selection with parent-child relationship and the `select` and `toggle` events to control the selected and expanded state of the items.
+
+::component-example
+---
+name: 'tree-checkbox-items-example'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+::note
+This example uses the `as` prop to change the items from `button` to `div` as the [`Checkbox`](/docs/components/checkbox) is also rendered as a `button`.
+::
+
 ### With virtualization :badge{label="Soon"}
 
 Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

playgrounds/nuxt/app/pages/components/table.vue

@@ -384,8 +384,8 @@ onMounted(() => {
         onUpdateChecked(checked: boolean) {
           table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
         },
-        onSelect(e?: Event) {
-          e?.preventDefault()
+        onSelect(e: Event) {
+          e.preventDefault()
         }
       }))"
       :content="{ align: 'end' }"

src/runtime/components/CommandPalette.vue

@@ -32,7 +32,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   placeholder?: string
   children?: CommandPaletteItem[]
-  onSelect?(e?: Event): void
+  onSelect?: (e: Event) => void
   class?: any
   ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
   [key: string]: any

src/runtime/components/ContextMenu.vue

@@ -31,8 +31,8 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
   open?: boolean
   defaultOpen?: boolean
   children?: ArrayOrNested<ContextMenuItem>
-  onSelect?(e: Event): void
-  onUpdateChecked?(checked: boolean): void
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
   class?: any
   ui?: Pick<ContextMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>
   [key: string]: any

src/runtime/components/DropdownMenu.vue

@@ -31,8 +31,8 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   open?: boolean
   defaultOpen?: boolean
   children?: ArrayOrNested<DropdownMenuItem>
-  onSelect?(e: Event): void
-  onUpdateChecked?(checked: boolean): void
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
   class?: any
   ui?: Pick<DropdownMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>
   [key: string]: any

src/runtime/components/InputMenu.vue

@@ -25,7 +25,7 @@ export type InputMenuItem = InputMenuValue | {
    */
   type?: 'label' | 'separator' | 'item'
   disabled?: boolean
-  onSelect?(e?: Event): void
+  onSelect?: (e: Event) => void
   class?: any
   ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>
   [key: string]: any

src/runtime/components/NavigationMenu.vue

@@ -57,7 +57,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   children?: NavigationMenuChildItem[]
   defaultOpen?: boolean
   open?: boolean
-  onSelect?(e: Event): void
+  onSelect?: (e: Event) => void
   class?: any
   ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>
   [key: string]: any

src/runtime/components/Select.vue

@@ -25,7 +25,7 @@ export type SelectItem = SelectValue | {
   type?: 'label' | 'separator' | 'item'
   value?: SelectValue
   disabled?: boolean
-  onSelect?(e?: Event): void
+  onSelect?: (e: Event) => void
   class?: any
   ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>
   [key: string]: any

src/runtime/components/SelectMenu.vue

@@ -24,7 +24,7 @@ export type SelectMenuItem = SelectMenuValue | {
    */
   type?: 'label' | 'separator' | 'item'
   disabled?: boolean
-  onSelect?(e?: Event): void
+  onSelect?: (e: Event) => void
   class?: any
   ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>
   [key: string]: any