Tree

Nested details tree, role=tree

A hierarchy people expand and browse — files, a category tree, a table of contents. For a small chart of who reports to whom, OrgChart; to pick one value from a hierarchy, TreeSelect.

Basic

• ›src

  • ›components
• ›docs
• README.md

selected: index

<script setup lang="ts">
import { ref } from "vue";
import { BlessTree, type BlessTreeNode } from "blessing-ui";
const nodes: BlessTreeNode[] = [
  {
    label: "src",

    open: true,
    children: [
      {
        label: "components",

        open: true,
        children: [{ label: "BlessTree.vue", id: "tree" }, { label: "BlessTreeItem.vue" }],
      },
      { label: "index.ts", id: "index" },
    ],
  },
  { label: "docs", children: [{ label: "index.md" }] },
  { label: "README.md", href: "#readme" },
  { label: "secret.env", disabled: true },
];
const selected = ref("index");
</script>

<template>
  <div class="col" style="max-width: 320px">
    <BlessTree :nodes v-model:selected="selected" />
    <small>selected: {{ selected }}</small>
  </div>
</template>

• One Tab stop: ↑ / ↓ move through the visible rows, → opens a branch or enters it, ← closes it or goes to the parent, Home / End jump. Enter picks the row (a branch too — Space opens and closes it). Branches say whether they're open.
• Branches are native <details>, so they work before scripts run. href makes a leaf a link; v-model:selected holds the picked id.

Usage

import { BlessTree, BlessTreeItem } from "blessing-ui";

API

BlessTree

Props

Name	Type	Default	Description
nodes*	BlessTreeNode[]	—
label	string	"Tree"
selected	string	—

Events

Name	Payload	Description
select	[node: BlessTreeNode, path: string]
update:selected	[value: string | undefined]

BlessTreeItem

Props

Name	Type	Default	Description
node*	BlessTreeNode	—
path*	string	—
selected	string	—
level*	number	—

Events

Name	Payload	Description
select	[node: BlessTreeNode, path: string]