stimulus-zag

Appearance

Tree View ​

A file-tree style hierarchy, authored as nested markup. Each node is a branch (has children) or an item (leaf), carrying data-value; a branch's children live in its branch-content. stimulus-zag builds the Zag tree collection from the structure.

▸ src
index.ts
app.ts
README.md
html
<div
  data-controller="zag-tree-view"
  data-part="root"
  data-zag-tree-view-expanded-value='["src"]'
  class="border-border bg-popover max-w-xs rounded-lg border p-2 text-sm"
>
  <div data-part="tree" class="space-y-0.5">
    <div data-part="branch" data-value="src">
      <div
        data-part="branch-control"
        class="hover:bg-accent flex cursor-pointer items-center gap-1 rounded px-2 py-1"
      >
        <span
          data-part="branch-indicator"
          class="text-muted-foreground transition-transform data-[state=open]:rotate-90"
          >▸</span
        >
        <span data-part="branch-text">src</span>
      </div>
      <div data-part="branch-content" class="ml-4 space-y-0.5 data-[state=closed]:hidden">
        <div
          data-part="item"
          data-value="index"
          class="hover:bg-accent data-[selected]:bg-primary/10 data-[selected]:text-primary cursor-pointer rounded px-2 py-1"
        >
          <span data-part="item-text">index.ts</span>
        </div>
        <div
          data-part="item"
          data-value="app"
          class="hover:bg-accent data-[selected]:bg-primary/10 data-[selected]:text-primary cursor-pointer rounded px-2 py-1"
        >
          <span data-part="item-text">app.ts</span>
        </div>
      </div>
    </div>
    <div
      data-part="item"
      data-value="readme"
      class="hover:bg-accent data-[selected]:bg-primary/10 data-[selected]:text-primary cursor-pointer rounded px-2 py-1"
    >
      <span data-part="item-text">README.md</span>
    </div>
  </div>
</div>

Parts ​

root, label, tree, branch, branch-control, branch-trigger, branch-content, branch-text, branch-indicator, branch-indent-guide, item, item-text, item-indicator.

Values ​

AttributeTypeDefaultDescription
data-zag-tree-view-expanded-valueArray[]Branch values expanded by default.
data-zag-tree-view-selected-valueArray[]Node values selected by default.
data-zag-tree-view-selection-mode-valueString"single""single" or "multiple".
data-zag-tree-view-expand-on-click-valueBooleantrueExpand a branch by clicking it.

Events ​

Emits zag-tree-view:expanded-change ({ expandedValue }) and :selection-change ({ selectedValue }).

Programmatic control ​

expanded (getter), selected (getter), expand(values?), collapse(values?), select(values).