Tree — Forms

Tree View

The VdTree component renders hierarchical data as an expandable/collapsible tree. Supports checkbox selection with parent-child cascade and initial open state — all driven by the :nodes prop plus the boolean checkbox / cascade props.

Basic File Tree

src

components
- Button.vue
- Card.vue
- Modal.vue
utils
- helpers.js
- api.js
App.vue
main.js

public

index.html
favicon.ico

package.json

README.md

<script setup lang="ts">
import { VdTree } from "@vanduo-oss/vd3";
import type { TreeNode } from "@vanduo-oss/vd3";

const nodes: TreeNode[] = [
  { id: "src", label: "src", icon: "ph ph-folder", children: [
    { id: "btn",  label: "Button.vue", icon: "ph ph-file-vue" },
    { id: "card", label: "Card.vue",   icon: "ph ph-file-vue" },
  ]},
  { id: "pkg", label: "package.json", icon: "ph ph-file" },
];
</script>

<template>
  <VdTree :nodes="nodes" />
</template>

Checkbox Tree with Cascade

<!-- checkbox + cascade: checking a parent checks all descendants -->
<VdTree :nodes="permissions" checkbox cascade />

import { ref } from 'vue';

const treeRef = ref();

// Get all checked node IDs via the exposed method
const checked = treeRef.value?.getChecked();
console.log(checked); // ["users-read", "users-create"]

// VdTree also dispatches a native tree:check event
// ({ checked, node }) on its root — listen via a template ref.

Initially Open Nodes

Set "open": true on any node in the JSON data to expand it on render.

Documentation

Getting Started
- Installation
- Getting Started Guide
- Configuration
API Reference
- Components
- Utilities
- Plugins
Examples
- Basic
- Advanced

<!-- set "open": true on any node to expand it on render -->
<VdTree :nodes="docs" />

Generated HTML Structure

The component generates the following DOM structure from the JSON data. You can style each part using the CSS classes listed in the API reference.

<!-- Rendered structure -->
<div class="vd-tree" role="tree">
  <div class="vd-tree-node" role="treeitem" aria-expanded="true">
    <div class="vd-tree-node-content">
      <span class="vd-tree-toggle">▶</span>
      <input type="checkbox" class="vd-tree-checkbox" />
      <span class="vd-tree-icon"></span>
      <span class="vd-tree-label">Parent Node</span>
    </div>
    <div class="vd-tree-children" role="group">
      <div class="vd-tree-node" role="treeitem">
        <div class="vd-tree-node-content">
          <span class="vd-tree-toggle-placeholder"></span>
          <span class="vd-tree-label">Leaf Node</span>
        </div>
      </div>
    </div>
  </div>
</div>

API Reference

Usage

<script setup lang="ts">
import { VdTree } from "@vanduo-oss/vd3";
const nodes = [
  { id: 'src', label: 'src', icon: 'ph ph-folder', children: [
    { id: 'btn', label: 'Button.vue', icon: 'ph ph-file-vue' },
  ]},
];
</script>

<template>
  <VdTree :nodes="nodes" checkbox cascade />
</template>

CSS Classes

Class	Description
`.vd-tree`	Auto-generated root container for the tree
`.vd-tree-node`	Individual tree node (may contain children)
`.vd-tree-node-content`	The clickable row wrapper (toggle + icon + label)
`.vd-tree-toggle`	Expand/collapse arrow for branch nodes
`.vd-tree-toggle-placeholder`	Spacer that aligns leaf nodes with branch toggles
`.vd-tree-icon`	Optional file/folder icon span before the label
`.vd-tree-label`	Text label of the node
`.vd-tree-checkbox`	Checkbox input rendered next to each node when the checkbox prop is set
`.vd-tree-children`	Wrapper around child nodes (collapsed/expanded via CSS)

Node Object Shape

Property	Type	Description
`id`	`string`	Unique identifier for the node
`label`	`string`	Display text
`icon`	`string?`	CSS class(es) for an icon (e.g. "ph ph-folder")
`open`	`boolean?`	If true, node renders expanded on init
`children`	`Node[]?`	Nested child nodes (makes this a branch node)

Component API

Prop / event / method	Description
`:nodes`	Array of TreeNode objects ({ id, label, icon?, open?, children? }).
`:checkbox / :cascade`	Render checkboxes; cascade a parent check to descendants.
`tree:check / tree:toggle`	Native events on the root (detail shapes as documented below).
`ref.getChecked()`	Exposed method — returns the array of checked node ids.

Events

Event	Description
`tree:check`	Fired on the element when a checkbox changes. event.detail contains { checked: string[], node: string }
`tree:toggle`	Fired when a node is expanded or collapsed. event.detail contains { id: string, open: boolean }

Accessibility

The root container has role="tree"; each node has role="treeitem"
Child groups are wrapped in role="group"
Branch nodes set aria-expanded="true" or "false" to reflect open state
↑ / ↓ navigate between visible nodes; → expands a branch; ← collapses it
Home jumps to the first node; End jumps to the last visible node
Space toggles the checkbox on checkbox trees
Enter activates (selects/expands) the focused node
Type-ahead: pressing a letter key jumps to the next node whose label starts with that character