Tree View

#Basic usage

ink

brush.md

stone.md

paper

tree-view/basic.vue

<script setup lang="ts">
import { createTreeCollection } from "@ark-ui/vue/tree-view";
import { chevron_right } from "@bysages/icons";
import { Icon, TreeView } from "@bysages/vue";

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

const branches: Node[] = [
  {
    id: "ink",
    name: "ink",
    children: [
      { id: "ink/brush", name: "brush.md" },
      { id: "ink/stone", name: "stone.md" },
    ],
  },
  {
    id: "paper",
    name: "paper",
    children: [{ id: "paper/xuan", name: "xuan.md" }],
  },
];

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: { id: "ROOT", name: "", children: branches },
});
</script>

<template>
  <TreeView.Root :collection="collection" :default-expanded-value="['ink']" aria-label="Library">
    <TreeView.Tree>
      <TreeView.NodeProvider
        v-for="(node, i) in branches"
        :key="node.id"
        :node="node"
        :index-path="[i]"
      >
        <TreeView.Branch>
          <TreeView.BranchControl>
            <TreeView.BranchIndicator>
              <Icon :glyph="chevron_right" />
            </TreeView.BranchIndicator>
            <TreeView.BranchText>{{ node.name }}</TreeView.BranchText>
          </TreeView.BranchControl>
          <TreeView.BranchContent>
            <TreeView.NodeProvider
              v-for="(child, j) in node.children"
              :key="child.id"
              :node="child"
              :index-path="[i, j]"
            >
              <TreeView.Item>
                <TreeView.ItemText>{{ child.name }}</TreeView.ItemText>
              </TreeView.Item>
            </TreeView.NodeProvider>
          </TreeView.BranchContent>
        </TreeView.Branch>
      </TreeView.NodeProvider>
    </TreeView.Tree>
  </TreeView.Root>
</template>

#Props

#BranchContent

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchControl

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchIndentGuide

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchText

A styled part — no props of its own; it takes the anatomy's shared styling.

#BranchTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Branch

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeCheckboxIndicator

Prop	Type	Default	Description
`fallback`	`unknown`		—
`indeterminate`	`unknown`		—

#NodeCheckbox

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#NodeProvider

Prop	Type	Description
`indexPath`	`number[]`	The index path of the tree node
`node`	`TreeNode`	The tree node
`node`	`T`	—

#NodeRenameInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the row register: the rows' breathing room follows it.
`canRename`	`(node: T, indexPath: number[]) => boolean`		Function to determine if a node can be renamed
`checkedValue`	`string[]`		The controlled checked node values
`collection`	`TreeCollection<T>`		The collection of tree nodes
`defaultCheckedValue`	`string[]`		The initial checked node values when rendered. Use when you don't need to control the checked node values.
`defaultExpandedValue`	`string[]`		The initial expanded node values when rendered. Use when you don't need to control the expanded node values.
`defaultFocusedValue`	`string`		The initial focused node value when rendered. Use when you don't need to control the focused node value.
`defaultSelectedValue`	`string[]`		The initial selected node values when rendered. Use when you don't need to control the selected node values.
`expandedValue`	`string[]`		The controlled expanded node values
`expandOnClick`	`boolean`	`true`	Whether clicking on a branch should open it or not
`focusedValue`	`string`		The id of the focused node
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; tree: string; label: string; node(value: string): string; }>`		The ids of the tree elements. Useful for composition.
`loadChildren`	`(details: treeView.LoadChildrenDetails<T>) => Promise<T[]>`		A function that loads the children of a node.
`selectedValue`	`string[]`		The controlled selected node values
`selectionMode`	`'single' \| 'multiple'`	`"single"`	Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`translations`	`treeView.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`typeahead`	`boolean`	`true`	Whether the tree supports typeahead search

#Tree

A styled part — no props of its own; it takes the anatomy's shared styling.