TreeView

import '@bluui/web/styles.css'

import { createTreeView } from "@bluui/web";
export function mount(host: HTMLElement) {
  const output = document.createElement("p");
  output.setAttribute("role", "status");
  output.textContent = "Select a team to view its key.";
  const tree = createTreeView(host, {
    AccessibleLabel: "Teams",
    InitialExpandedKeys: ["company"],
    Nodes: [
      { Key: "company", Label: "Company" },
      { Key: "design", ParentKey: "company", Label: "Design" },
      { Key: "engineering", ParentKey: "company", Label: "Engineering" },
      { Key: "frontend", ParentKey: "engineering", Label: "Frontend" },
      { Key: "platform", ParentKey: "engineering", Label: "Platform" },
      { Key: "archive", Label: "Archive", IsDisabled: true },
    ],
  }, { SelectionChanged: key => { output.textContent = `Selected team: ${key}`; } });
  host.append(output);
  return { destroy() { tree.destroy(); output.remove(); } };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()