feat(Tree): implement component

docs/content/3.components/tree.md

@@ -0,0 +1,58 @@
+---
+description:
+links: 
+  - label: Tree
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/tree.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tree.vue
+---
+
+## Usage
+
+### Items
+
+::component-code
+---
+ignore:
+  - items
+external:
+  - items
+props:
+  items:
+    - label: Node 1
+      children:
+        - label: Node 1.1
+        - label: Node 1.2
+        - label: Node 1.3
+          children:
+            - label: Node 1.3.1
+            - label: Node 1.3.2
+    - label: Node 2
+      children:
+        - label: Node 2.1
+        - label: Node 2.2
+    - label: Node 3
+---
+::
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

playground/app/app.vue

@@ -61,7 +61,8 @@ const components = [
   'table',
   'textarea',
   'toast',
-  'tooltip'
+  'tooltip',
+  'tree'
 ]
 
 const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))

playground/app/pages/components/tree.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const items = ref([{
+  id: 1,
+  label: 'Level one 1',
+  children: [
+    {
+      id: 4,
+      label: 'Level two 1-1',
+      children: [
+        {
+          id: 9,
+          label: 'Level three 1-1-1'
+        },
+        {
+          id: 10,
+          label: 'Level three 1-1-2'
+        }
+      ]
+    }
+  ]
+},
+{
+  id: 2,
+  label: 'Level one 2',
+  children: [
+    {
+      id: 5,
+      label: 'Level two 2-1'
+    },
+    {
+      id: 6,
+      label: 'Level two 2-2'
+    }
+  ]
+},
+{
+  id: 3,
+  label: 'Level one 3',
+  disabled: true,
+  children: [
+    {
+      id: 7,
+      label: 'Level two 3-1'
+    },
+    {
+      id: 8,
+      label: 'Level two 3-2'
+    }
+  ]
+}
+])
+</script>
+
+<template>
+  <div>
+    <UTree :items="items" :get-key="(item) => item.label" />
+  </div>
+</template>

src/runtime/components/Tree.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { TreeRootProps, TreeRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tree'
+import type { AvatarProps, ChipProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tree: Partial<typeof theme> } }
+
+const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
+
+type TreeVariants = VariantProps<typeof tree>
+
+export interface TreeItem {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  disabled?: boolean
+  slot?: string
+  children?: TreeItem[]
+}
+
+export interface TreeProps<T> extends Omit<TreeRootProps<T>, 'dir'> {
+  size?: TreeVariants['size']
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof tree.slots>
+}
+
+export interface TreeEmits extends TreeRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, level: number, hasChildren: boolean }) => any
+
+export type TreeSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends TreeItem">
+import { computed } from 'vue'
+import { TreeRoot, TreeItem as TreeItemComponent, useForwardPropsEmits } from 'radix-vue'
+import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+const props = withDefaults(defineProps<TreeProps<T>>(), {
+  labelKey: 'label'
+})
+const emits = defineEmits<TreeEmits>()
+const slots = defineSlots<TreeSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'class', 'ui'), emits)
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: TreeItem, index: number, level: number, hasChildren: boolean }>()
+
+const ui = computed(() => tree({
+  size: props.size,
+}))
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, index, level, hasChildren }">
+    <slot :name="item.slot || 'item'" v-bind="{ item: item as T, index, level, hasChildren }">
+      <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item: item as T, index, level, hasChildren }">
+        <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
+        <UAvatar v-else-if="item.avatar" v-bind="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+      </slot>
+
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+        <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item: item as T, index, level, hasChildren }">
+          {{ get(item, props.labelKey) }}
+        </slot>
+      </span>
+
+      <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item: item as T, index, level, hasChildren }" />
+<!--        <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />-->
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <TreeRoot v-slot="{ flattenItems }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" :get-key="(item) => item.label">
+    <TreeItemComponent
+      v-for="item in flattenItems"
+      v-bind="item.bind"
+      :key="item._id"
+      :class="ui.item({ class: [props.ui?.item] })"
+      :style="{ 'padding-left': `${item.level - 0.5}rem` }"
+      :data-disabled="item.value.disabled ? 'true' : undefined"
+    >
+      <ReuseItemTemplate :item="item.value" :index="item.index" :level="item.level" :has-children="item.hasChildren" />
+    </TreeItemComponent>
+  </TreeRoot>
+</template>

src/runtime/types/index.ts

@@ -46,5 +46,6 @@ export * from '../components/Textarea.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
 export * from '../components/Tooltip.vue'
+export * from '../components/Tree.vue'
 export * from './form'
 export * from './locale'

src/theme/index.ts

@@ -46,3 +46,4 @@ export { default as textarea } from './textarea'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
+export { default as tree } from './tree'

src/theme/tree.ts

@@ -0,0 +1,56 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'list-none min-w-32',
+    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)]/50 focus:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+    itemLeadingIcon: 'shrink-0',
+    itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '',
+    itemTrailing: 'ms-auto inline-flex',
+    itemTrailingIcon: 'shrink-0',
+    itemLabel: 'truncate'
+  },
+  variants: {
+    size: {
+      xs: {
+        label: 'p-1 text-xs gap-1',
+        item: 'p-1 text-xs gap-1',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemTrailingIcon: 'size-4'
+      },
+      sm: {
+        label: 'p-1.5 text-xs gap-1.5',
+        item: 'p-1.5 text-xs gap-1.5',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemTrailingIcon: 'size-4'
+      },
+      md: {
+        label: 'p-1.5 text-sm gap-1.5',
+        item: 'p-1.5 text-sm gap-1.5',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemTrailingIcon: 'size-5'
+      },
+      lg: {
+        label: 'p-2 text-sm gap-2',
+        item: 'p-2 text-sm gap-2',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemTrailingIcon: 'size-5'
+      },
+      xl: {
+        item: 'p-2 text-base gap-2',
+        itemLeadingIcon: 'size-6',
+        itemLeadingAvatarSize: 'xs',
+        itemTrailingIcon: 'size-6'
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: 'md'
+  }
+})

test/components/Tree.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import Tree, { type TreeProps, type TreeSlots } from '../../src/runtime/components/Tree.vue'
+import ComponentRender from '../component-render'
+
+describe('Tree', () => {
+  it.each([
+    // Props
+    ['with as', { props: { as: 'div' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TreeProps, slots?: Partial<TreeSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Tree)
+    expect(html).toMatchSnapshot()
+  })
+})