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="Single selection tree"
    />
    <Text size="sm" tone="muted">Selected value：{{ 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="Cascading checks"
    />
    <Inline>
      <Button
        size="sm"
        variant="soft"
        tone="neutral"
        @click="checked = nodes.map(node => node.value)"
      >
        Check all
      </Button>
      <Button size="sm" variant="ghost" tone="neutral" @click="checked = []">Clear</Button>
    </Inline>
    <Text size="sm" tone="muted" class="break-all">
      Bound values：{{ 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']">
        Expand all
      </Button>
      <Button size="sm" variant="ghost" tone="neutral" @click="expanded = []">Collapse all</Button>
    </Inline>
    <Tree
      v-model="checked"
      v-model:expanded="expanded"
      multiple
      :items="nodes"
      aria-label="Controlled expansion"
    />
  </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="Custom nodes"
    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">Partial</Tag>
      <Tag v-else-if="selected" size="sm">Checked</Tag>
    </template>
  </Tree>
</template>

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

  const items: TreeNode[] = [
    {
      value: 'root',
      label: 'Root',
      children: [
        { value: 'available', label: 'Available node' },
        {
          value: 'disabled',
          label: 'Disabled node',
          disabled: true,
          children: [{ value: 'child', label: 'Descendant of disabled node' }],
        },
      ],
    },
  ]
</script>

<template>
  <Stack class="w-80 max-w-full">
    <Text size="sm" tone="muted">Disabled subtree</Text>
    <Tree
      multiple
      :items="items"
      :default-expanded="['root', 'disabled']"
      aria-label="Disabled subtree"
    />
    <Text size="sm" tone="muted">Disabled tree</Text>
    <Tree
      multiple
      disabled
      :items="items"
      :model-value="['available']"
      :default-expanded="['root']"
      aria-label="Disabled tree"
    />
  </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: 'Group',
      children: Array.from({ length: 40 }, (_, index) => ({
        value: index,
        label: `Node ${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="Scrollable tree"
    />
  </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="Default empty state" />
    <Tree :items="[]" aria-label="Custom empty state">
      <template #empty><Text size="sm" tone="muted">No nodes yet</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: `Item ${String(index + 1).padStart(5, '0')}`,
    disabled: index % 97 === 0,
  }))
  const items = [{ value: 'root', label: 'All nodes', 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="Ten thousand items"
    />
    <Text size="sm" tone="muted">Selected: {{ selected.length }}</Text>
  </Stack>
</template>