# `LineaUI.Components.Treeview`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/treeview.ex#L1)

LineOne's tree view: a hierarchical list whose branches expand and collapse.

    <.treeview id="files">
      <.tree_item id="app" label="Application" expanded>
        <.tree_item label="Chrome" />
        <.tree_item label="VS Code" />
      </.tree_item>
      <.tree_item id="docs" label="Document">
        <.tree_item label="React App" />
      </.tree_item>
    </.treeview>

An item with children is a branch (a native `<details>`), one without is a leaf. Give an
item an `:icon` slot and it takes LineOne's "advanced" look (folder icons, darker text):

    <.tree_item label="Design">
      <:icon><svg class="size-6 text-warning">…</svg></:icon>
      <.tree_item label="Web Apps"><:icon>…</:icon></.tree_item>
    </.tree_item>

## State

A branch opens from its `expanded` attr, or from the treeview's `expanded` list of item ids,
and toggles in the browser without a round trip. A branch the person toggled stays that way
across patches; when the server changes `expanded` for it, the server wins.

## Events

`on_toggle` runs when the person opens or closes a branch, `on_select` when they click a
leaf (or press Enter on it). See `treeview/1` for the payloads.

## Streams

    <.treeview id="files" rows={@streams.files}>
      <:row :let={{_dom_id, file}}>
        <.tree_item tag="div" id={"file-#{file.id}"} label={file.name} />
      </:row>
    </.treeview>

# `tree_item`

Renders one item: a branch when it has children, a leaf when it does not.

`id` names the item in events and in the treeview's `expanded` list. `tag="div"` renders it
without its own `<li>`, for a treeview `:row` that already sits in one.

    <.tree_item id="design" label="Design" expanded>
      <:icon><svg class="size-6 text-warning">…</svg></:icon>
      <.tree_item id="web" label="Web Apps" />
    </.tree_item>

## Attributes

* `id` (`:string`) - Names the item in events and in `expanded`. Defaults to `nil`.
* `label` (`:string`) - Defaults to `nil`.
* `expanded` (`:boolean`) - Whether the branch is open (server state). Defaults to `false`.
* `tag` (`:string`) - Defaults to `"li"`. Must be one of `"li"`, or `"div"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `icon` - An icon before the label; switches to LineOne's advanced look.
* `inner_block` - The children; makes the item a branch.

# `treeview`

Renders the tree's root list.

`on_toggle` (an event name or a `%JS{}`) is pushed with `%{"id" => item_id, "expanded" => boolean}`
when the person opens or closes a branch. `on_select` is pushed with `%{"id" => item_id}` when a
leaf is clicked or gets Enter. Both go to `target` when given; a `%JS{}` is executed instead.

    <.treeview id="files" expanded={@open_ids} on_toggle="toggled" on_select="opened">
      <.tree_item id="src" label="src">
        <.tree_item id="src/app.ex" label="app.ex" />
      </.tree_item>
    </.treeview>

    def handle_event("toggled", %{"id" => id, "expanded" => open?}, socket), do: ...
    def handle_event("opened", %{"id" => id}, socket), do: ...

## Attributes

* `id` (`:string`) (required)
* `expanded` (`:list`) - Ids of the branches that are open, in addition to each item's own `expanded`. Defaults to `[]`.
* `on_toggle` (`:any`) - Event name or `%JS{}`; pushed with `%{"id" => id, "expanded" => boolean}`. Defaults to `nil`.
* `on_select` (`:any`) - Event name or `%JS{}`; pushed with `%{"id" => id}` when a leaf is picked. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` the events go to. Defaults to `nil`.
* `rows` (`:list`) - A list or a stream (`@streams.x`) rendered by `:row`. Defaults to `nil`.
* `row_id` (`:any`) - A function giving each row's DOM id (streams give it). Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`
* `row` - Renders one row; takes the row (`{dom_id, item}` for a stream).

---

*Consult [api-reference.md](api-reference.md) for complete listing*