◇

Tree

2 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  TreeRoot,
  TreeItem,
} from '@robonen/primitives/tree';

<TreeRoot>
  <TreeItem />
</TreeRoot>

Root

Prop	Type	Default	Description
`items`	`readonly U[]`	—	Flat or nested item list — children are resolved via `getChildren`.
`getKey`	`(item: U) => string`	—	Extract a stable unique string key from an item.
`getChildren`?	`(item: U) => readonly U[] \| undefined \| null`	—	Return the children of an item, or `undefined` if it is a leaf.
`modelValue`?	`string \| string[]`	—	Controlled selected key(s). Use `v-model`.
`defaultValue`?	`string \| string[]`	—	Uncontrolled initial selected key(s).
`expanded`?	`string[]`	—	Controlled expanded keys. Use `v-model:expanded`.
`defaultExpanded`?	`string[]`	—	Uncontrolled initial expanded keys.
`multiple`?	`boolean`	`false`	Allow selecting multiple items.
`disabled`?	`boolean`	—	Disable the entire tree.
`dir`?	`'ltr' \| 'rtl'`	`'ltr'`	Writing direction.
`propagateSelect`?	`boolean`	—	When `true`, selecting a parent also selects all of its descendants (requires `multiple`).

Item

Prop	Type	Default	Description
`item`	`FlatItem<U>`	—	Flattened item produced by `TreeRoot` (from its default slot).
`disabled`?	`boolean`	—	Disable this specific item.