BbTree

Defines nodes as expandable. It can be a global boolean, or a function that receives the node, its depth, and its parent and returns a boolean.

Without it nothing is expandable: the tree renders fully expanded and static, which is the answer to "my chevrons do nothing". The everyday form is (node) => !!node.children?.length; a per-node expandable field overrides it for that node, and false on a branch renders its children frozen open rather than hiding them.

Live expansion state: the list of expanded node values (see itemValue). Branch nodes not explicitly collapsed via expanded: false seed the list when they first appear in items; from then on this model is the single source of truth.

Tree-like structure of nodes to render.

Use the fixed { meta, children } envelope. Branches disclose children; leaves render navigation or content from your slot.

A node's identity, the field telling nodes apart (e.g. "id"). Required: it decides which nodes expandedItems keeps open and names the per-node slots, a load-bearing id you write, never derived. A string reads that key from meta; a function maps meta to the value.

Required: a key or a function of meta that stays stable across refetches. A node whose identity changes closes and renames its per-node slots. It used to fall back to the whole meta object in the earlier 3.0 betas.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: item, root. States: expanded.

The live state, and the only way to change expansion from code — pushing a value opens that node, and the expanded flag on an item is ignored after the first sighting. Leaves never appear here, so expand-all is exactly the set of branch identities.

Emitted with the new value whenever v-model:expandedItems changes.

Fires with the whole new list on every toggle. Bind the model and treat it as state rather than listening to this directly.

Every node at one depth (0 = root); a numeric value can share this name.

The children container of every node at one depth.

Renders under leaves too, so guard branch-only markup with v-if="item.children?.length".

One node, by its resolved item-value (string or number) through slotKey; beats <depth>, which beats default.

The name is the identity in kebab-case: src/composables is #src-composables, Order History is #order-history. For accents or punctuation write #[slotKey('…')]. A name that does not match raises no warning — the node falls back to <depth> or default.

One node's children container, stopping the recursion there; beats <depth>:children. Renders for leaves too.

Renders every node that no #<value> or #<depth> slot claims. Bind expandProps to a real <button> for branches: it carries aria-expanded and the aria-controls that pairs with the children container, and a button gets focus and Enter/Space for free.