OrgChart

Node tree with connectors

Who reports to whom, drawn top-down — a team, a cast and crew, a small hierarchy that fits on screen. For a deep or wide hierarchy people browse and expand, use Tree.

Basic

selected: megumi · `href` is reused as the role line in the default node

<script setup lang="ts">
import { ref } from "vue";
import { BlessOrgChart, type BlessTreeNode } from "blessing-ui";
const nodes: BlessTreeNode[] = [
  {
    label: "Tomoya",
    id: "tomoya",
    href: "Director",
    children: [
      { label: "Eriri", id: "eriri", href: "Art" },
      {
        label: "Utaha",
        id: "utaha",
        href: "Scenario",
        children: [{ label: "Izumi", id: "izumi", href: "Assistant" }],
      },
      { label: "Michiru", id: "michiru", href: "Music" },
      { label: "Megumi", id: "megumi", href: "Main heroine" },
    ],
  },
];
const selected = ref("megumi");
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessOrgChart :nodes v-model:selected="selected" label="Blessing Software" />
    <small>selected: {{ selected }} · `href` is reused as the role line in the default node</small>
  </div>
</template>

• Nested lists of buttons: the nesting carries the hierarchy, each person is one Tab stop, and the picked one is pressed (v-model:selected).
• #node renders a node yourself with { node, selected }.

Usage

import { BlessOrgChart, BlessOrgChartNode } from "blessing-ui";

API

BlessOrgChart

Props

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

Events

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

Slots

Name	Scope	Description
node	{ node: BlessTreeNode; selected: boolean; }

BlessOrgChartNode

Props

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

Events

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

Slots

Name	Scope	Description
node	{ node: BlessTreeNode; selected: boolean; }