feat(Tree): new component (#3180)

Co-authored-by: hywax <me@hywax.space>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app/components/content/ComponentCode.vue

@@ -316,7 +316,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 <template>
   <div class="my-5">
     <div>
-      <div v-if="options.length" class="flex items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+      <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    slot: 'app',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items">
+    <template #app="{ item }">
+      <p class="italic font-bold">
+        {{ item.label }}
+      </p>
+    </template>
+  </UTree>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    value: 'app',
+    children: [{
+      label: 'composables/',
+      value: 'composables',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      value: 'components',
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const expanded = ref(['app', 'composables'])
+</script>
+
+<template>
+  <UTree v-model:expanded="expanded" :items="items" />
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const value = ref(items[items.length - 1])
+</script>
+
+<template>
+  <UTree v-model="value" :items="items" />
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onSelect: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onToggle: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>