Cascader

import '@bluui/web/styles.css'

import { createCascader } from "@bluui/web";
export function mount(host: HTMLElement) {
  return createCascader(host, {
  "SelectedKey": "",
  "LeavesOnly": true,
  "IsDisabled": false,
  "Placeholder": "Select an office…",
  "Nodes": [
    {
      "Key": "americas",
      "ParentKey": "",
      "Label": "Americas"
    },
    {
      "Key": "europe",
      "ParentKey": "",
      "Label": "Europe"
    },
    {
      "Key": "asia",
      "ParentKey": "",
      "Label": "Asia Pacific"
    },
    {
      "Key": "usa",
      "ParentKey": "americas",
      "Label": "United States"
    },
    {
      "Key": "canada",
      "ParentKey": "americas",
      "Label": "Canada"
    },
    {
      "Key": "uk",
      "ParentKey": "europe",
      "Label": "United Kingdom"
    },
    {
      "Key": "germany",
      "ParentKey": "europe",
      "Label": "Germany"
    },
    {
      "Key": "japan",
      "ParentKey": "asia",
      "Label": "Japan"
    },
    {
      "Key": "ny",
      "ParentKey": "usa",
      "Label": "New York"
    },
    {
      "Key": "sf",
      "ParentKey": "usa",
      "Label": "San Francisco"
    },
    {
      "Key": "toronto",
      "ParentKey": "canada",
      "Label": "Toronto"
    },
    {
      "Key": "london",
      "ParentKey": "uk",
      "Label": "London"
    },
    {
      "Key": "berlin",
      "ParentKey": "germany",
      "Label": "Berlin"
    },
    {
      "Key": "tokyo",
      "ParentKey": "japan",
      "Label": "Tokyo"
    },
    {
      "Key": "closed",
      "ParentKey": "japan",
      "Label": "Osaka (unavailable)",
      "IsDisabled": true
    }
  ]
}, { SelectionChanged: (key, pathKeys, pathLabels) => { host.dataset.selection = JSON.stringify({ key, pathKeys, pathLabels }); } });
}

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

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