feat(Tree): implement component

docs/content/3.components/tree.md

@@ -0,0 +1,32 @@
+---
+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
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

playground/app/app.vue

@@ -60,7 +60,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,42 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'Backlog',
+    value: 'backlog',
+    icon: 'i-lucide-circle-help',
+    children: [
+      {
+        label: 'Backlog 1',
+        value: 'backlog-1',
+        icon: 'i-lucide-circle-help'
+      },
+      {
+        label: 'Backlog 2',
+        value: 'backlog-2',
+        icon: 'i-lucide-circle-help'
+      }
+    ]
+  },
+  {
+    label: 'Todo',
+    value: 'todo',
+    icon: 'i-lucide-circle-plus'
+  },
+  {
+    label: 'In Progress',
+    value: 'in_progress',
+    icon: 'i-lucide-circle-arrow-up'
+  },
+  {
+    label: 'Done',
+    value: 'done',
+    icon: 'i-lucide-circle-check'
+  }
+])
+</script>
+
+<template>
+  <div>
+    <UTree :items="items" :get-key="(item) => item.label" />
+  </div>
+</template>

src/runtime/components/Tree.vue

@@ -0,0 +1,99 @@
+<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
+  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 }">
+      <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+
+      <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" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :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 }" />
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <TreeRoot v-slot="{ flattenItems }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TreeItemComponent v-for="item in flattenItems" v-bind="item.bind" :key="item._id" :class="ui.item({ class: [props.ui?.item] })">
+      <ReuseItemTemplate :item="item.value" :index="item.index" :level="item.level" :has-children="item.hasChildren" />
+    </TreeItemComponent>
+  </TreeRoot>
+</template>

src/runtime/types/index.ts

@@ -43,5 +43,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

@@ -43,3 +43,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: '',
+    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-[selected]:text-[var(--ui-text-highlighted)] data-[selected]:before: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()
+  })
+})