عرض الشجرة · الأحداث

    <.tree_view
  class="tree-view"
  items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}
  on_expanded_change="tree_server_expanded"
  on_selection_change="tree_server_selection"
>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_server_expanded", %{"id" => id, "expandedValue" => expanded} = params, socket) do
  IO.inspect(params, label: "tree_server_expanded")
  {:noreply, socket}
end

def handle_event("tree_server_selection", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "tree_server_selection")
  {:noreply, socket}
end
  

    <.tree_view
  id="tree-events-client"
  class="tree-view"
  expanded_value={["repo-corex", "repo-lib"]}
  items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}
  on_expanded_change_client="tree-view-expanded-client"
  on_selection_change_client="tree-view-selection-client"
>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const el = document.getElementById("tree-events-client");
el?.addEventListener("tree-view-expanded-client", (event) => {
  const d = event.detail;
  console.log("expanded", d.id, d.expandedValue, "added:", d.added, "removed:", d.removed);
});
el?.addEventListener("tree-view-selection-client", (event) => {
  const d = event.detail;
  console.log("selection", d.id, d.selectedValue, "isItem:", d.isItem);
});

  

    import type {
  TreeViewExpandedChangedDetail,
  TreeViewSelectionChangedDetail,
} from "corex";

const el = document.getElementById("tree-events-client");
el?.addEventListener("tree-view-expanded-client", (event: Event) => {
  const d = (event as CustomEvent<TreeViewExpandedChangedDetail>).detail;
  console.log("expanded", d.id, d.expandedValue, "added:", d.added, "removed:", d.removed);
});
el?.addEventListener("tree-view-selection-client", (event: Event) => {
  const d = (event as CustomEvent<TreeViewSelectionChangedDetail>).detail;
  console.log("selection", d.id, d.selectedValue, "isItem:", d.isItem);
});