Tree 树形列表

<script setup lang="ts">
  import { ref } from 'vue'
  import { Stack, Text, Tree, type TreeValue } from '@hina-ui/vue'
  import { nodes } from './data'

  const selected = ref<TreeValue | null>(null)
</script>

<template>
  <Stack class="w-80 max-w-full">
    <Tree v-model="selected" :items="nodes" :default-expanded="['a']" aria-label="单选树" />
    <Text size="sm" tone="muted">选中值：{{ selected ?? '—' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Stack, Text, Tree, type TreeValue } from '@hina-ui/vue'
  import { nodes } from './data'

  const checked = ref<TreeValue[]>(['a-2-1'])
</script>

<template>
  <Stack class="w-96 max-w-full">
    <Tree
      v-model="checked"
      multiple
      :items="nodes"
      :default-expanded="['a', 'a-2', 'b']"
      aria-label="父子联动勾选"
    />
    <Inline>
      <Button
        size="sm"
        variant="soft"
        tone="neutral"
        @click="checked = nodes.map(node => node.value)"
      >
        全选
      </Button>
      <Button size="sm" variant="ghost" tone="neutral" @click="checked = []">清空</Button>
    </Inline>
    <Text size="sm" tone="muted" class="break-all">绑定值：{{ checked.join(', ') || '—' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Stack, Tree, type TreeValue } from '@hina-ui/vue'
  import { nodes } from './data'

  const expanded = ref<TreeValue[]>(['a'])
  const checked = ref<TreeValue[]>(['a-2-1'])
</script>

<template>
  <Stack class="w-80 max-w-full">
    <Inline>
      <Button size="sm" variant="soft" tone="neutral" @click="expanded = ['a', 'a-2', 'b']">
        展开全部
      </Button>
      <Button size="sm" variant="ghost" tone="neutral" @click="expanded = []">收起全部</Button>
    </Inline>
    <Tree
      v-model="checked"
      v-model:expanded="expanded"
      multiple
      :items="nodes"
      aria-label="受控展开"
    />
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { File, Folder, FolderOpen } from '@lucide/vue'
  import { Inline, Tag, Text, Tree, type TreeValue } from '@hina-ui/vue'
  import { nodes } from './data'

  const checked = ref<TreeValue[]>(['a-2-1'])
</script>

<template>
  <Tree
    v-model="checked"
    multiple
    :items="nodes"
    :default-expanded="['a', 'a-2', 'b']"
    aria-label="自定义节点"
    class="w-96 max-w-full"
  >
    <template #node="{ node, expanded }">
      <Inline as="span" :wrap="false" gap="sm">
        <FolderOpen
          v-if="node.children?.length && expanded"
          class="text-muted size-4 shrink-0"
          aria-hidden="true"
        />
        <Folder
          v-else-if="node.children?.length"
          class="text-muted size-4 shrink-0"
          aria-hidden="true"
        />
        <File v-else class="text-muted size-4 shrink-0" aria-hidden="true" />
        <Text as="span" size="sm">{{ node.label }}</Text>
      </Inline>
    </template>
    <template #trailing="{ selected, indeterminate }">
      <Tag v-if="indeterminate" size="sm" tone="neutral">部分选中</Tag>
      <Tag v-else-if="selected" size="sm">已选中</Tag>
    </template>
  </Tree>
</template>

<script setup lang="ts">
  import { Stack, Text, Tree, type TreeNode } from '@hina-ui/vue'

  const items: TreeNode[] = [
    {
      value: 'root',
      label: '根节点',
      children: [
        { value: 'available', label: '可用节点' },
        {
          value: 'disabled',
          label: '禁用节点',
          disabled: true,
          children: [{ value: 'child', label: '禁用子树中的节点' }],
        },
      ],
    },
  ]
</script>

<template>
  <Stack class="w-80 max-w-full">
    <Text size="sm" tone="muted">节点禁用</Text>
    <Tree multiple :items="items" :default-expanded="['root', 'disabled']" aria-label="节点禁用" />
    <Text size="sm" tone="muted">整体禁用</Text>
    <Tree
      multiple
      disabled
      :items="items"
      :model-value="['available']"
      :default-expanded="['root']"
      aria-label="整体禁用"
    />
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { ScrollArea, Tree, type TreeNode, type TreeValue } from '@hina-ui/vue'

  const checked = ref<TreeValue[]>([])
  const items: TreeNode[] = [
    {
      value: 'root',
      label: '分组',
      children: Array.from({ length: 40 }, (_, index) => ({
        value: index,
        label: `节点 ${index + 1}`,
      })),
    },
  ]
</script>

<template>
  <ScrollArea class="h-64 w-80 max-w-full">
    <Tree
      v-model="checked"
      multiple
      :items="items"
      :default-expanded="['root']"
      aria-label="可滚动树"
    />
  </ScrollArea>
</template>

<script setup lang="ts">
  import { Stack, Text, Tree } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-80 max-w-full">
    <Tree :items="[]" aria-label="默认空状态" />
    <Tree :items="[]" aria-label="自定义空状态">
      <template #empty><Text size="sm" tone="muted">还没有节点</Text></template>
    </Tree>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Tree, Stack, Text } from '@hina-ui/vue'

  const selected = ref<Array<string | number>>([7890])
  const options = Array.from({ length: 10000 }, (_, index) => ({
    value: index,
    label: `条目 ${String(index + 1).padStart(5, '0')}`,
    disabled: index % 97 === 0,
  }))
  const items = [{ value: 'root', label: '全部节点', children: options }]
</script>

<template>
  <Stack gap="sm" class="w-80 max-w-full">
    <Tree
      v-model="selected"
      :items="items"
      :default-expanded="['root']"
      :virtualize="{ estimateSize: 36, overscan: 6 }"
      multiple
      :max-height="320"
      aria-label="一万项"
    />
    <Text size="sm" tone="muted">已选: {{ selected.length }}</Text>
  </Stack>
</template>