@kit-ng-ui/tree-select

Single-value tree-style picker. Wraps <kit-tree> in a <kit-popover> dropdown. Implements ControlValueAccessor so it binds to reactive / template-driven forms.

Install

pnpm add @kit-ng-ui/tree-select

@use '@kit-ng-ui/tree/styles' as tree;
@use '@kit-ng-ui/popover/styles' as popover;
@use '@kit-ng-ui/tree-select/styles' as tree-select;

Usage

nodes: KitTreeNode[] = [
  {
    key: 'asia',
    title: 'Asia',
    children: [
      { key: 'vn', title: 'Vietnam' },
      { key: 'jp', title: 'Japan' },
    ],
  },
];

<kit-tree-select [nodes]="nodes" [(value)]="region" placeholder="Region"></kit-tree-select>

<!-- With Reactive Forms -->
<kit-tree-select [nodes]="nodes" [formControl]="regionControl"></kit-tree-select>

API

| Input | Type | Default | Description | | -------------- | --------------------------------- | ------------ | -------------------------- | | nodes | ReadonlyArray<KitTreeNode> | [] | Source tree. | | value | string \| null (two-way) | null | Selected key. | | placeholder | string | 'Select' | Trigger placeholder text. | | disabled | boolean | false | Disable the picker. | | open | boolean (two-way) | false | Programmatic open state. | | expandedKeys | ReadonlyArray<string> (two-way) | [] | Initial expansion. |

v0.1 supports single selection only. Multi-select with tag display is deferred.