LineaUI.Components.Treeview (linea_ui v0.1.1)

Copy Markdown View Source

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>

Summary

Functions

tree_item(assigns)

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

treeview(assigns)

Renders the tree's root list.

Functions

tree_item(assigns)

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(assigns)

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).