عرض الشجرة

    <.action phx-click={Corex.TreeView.set_expanded_value("tree-api-set-expanded-client", ["repo-corex", "repo-lib"])}>Expand lib</.action>
<.action phx-click={Corex.TreeView.set_expanded_value("tree-api-set-expanded-client", [])}>Collapse all</.action>
<.tree_view id="tree-api-set-expanded-client" class="tree-view" expanded_value={[]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    <.action phx-click={JS.dispatch("corex:tree-view:set-expanded-value", to: "#tree-api-set-expanded-js", detail: %{value: ["repo-corex", "repo-lib"]}, bubbles: false)}>Expand lib</.action>
<.action phx-click={JS.dispatch("corex:tree-view:set-expanded-value", to: "#tree-api-set-expanded-js", detail: %{value: []}, bubbles: false)}>Collapse all</.action>
<.tree_view id="tree-api-set-expanded-js" class="tree-view" expanded_value={[]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const el = document.getElementById("tree-api-set-expanded-js");
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-expanded-value", {
    bubbles: false,
    detail: { value: ["repo-corex", "repo-lib"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-expanded-value", {
    bubbles: false,
    detail: { value: [] },
  })
);

  

    const el: HTMLElement | null = document.getElementById("tree-api-set-expanded-js");
const setExpanded = (value: string[]) =>
  el?.dispatchEvent(
    new CustomEvent("corex:tree-view:set-expanded-value", {
      bubbles: false,
      detail: { value },
    })
  );
setExpanded(["repo-corex", "repo-lib"]);
setExpanded([]);

  

    <.action phx-click="tree_api_set_expanded" value="repo-corex,repo-lib">Expand lib</.action>
<.action phx-click="tree_api_set_expanded" value="">Collapse all</.action>
<.tree_view id="tree-api-set-expanded-server" class="tree-view" expanded_value={[]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_set_expanded", %{"value" => raw}, socket) do
  list = if raw == "", do: [], else: String.split(raw, ",", trim: true)
  {:noreply, Corex.TreeView.set_expanded_value(socket, "tree-api-set-expanded-server", list)}
end

  

    <.action phx-click={Corex.TreeView.set_selected_value("tree-api-set-selected-client", ["repo-lib-tree-view-ex"])}>Select tree_view.ex</.action>
<.action phx-click={Corex.TreeView.set_selected_value("tree-api-set-selected-client", [])}>Clear</.action>
<.tree_view id="tree-api-set-selected-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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    <.action phx-click={JS.dispatch("corex:tree-view:set-selected-value", to: "#tree-api-set-selected-js", detail: %{value: ["repo-lib-tree-view-ex"]}, bubbles: false)}>Select tree_view.ex</.action>
<.action phx-click={JS.dispatch("corex:tree-view:set-selected-value", to: "#tree-api-set-selected-js", detail: %{value: []}, bubbles: false)}>Clear</.action>
<.tree_view id="tree-api-set-selected-js" 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const el = document.getElementById("tree-api-set-selected-js");
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-selected-value", {
    bubbles: false,
    detail: { value: ["repo-lib-tree-view-ex"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-selected-value", {
    bubbles: false,
    detail: { value: [] },
  })
);

  

    const el: HTMLElement | null = document.getElementById("tree-api-set-selected-js");
const setSelected = (value: string[]) =>
  el?.dispatchEvent(
    new CustomEvent("corex:tree-view:set-selected-value", {
      bubbles: false,
      detail: { value },
    })
  );
setSelected(["repo-lib-tree-view-ex"]);
setSelected([]);

  

    <.action phx-click="tree_api_set_selected" value="repo-lib-tree-view-ex">Select tree_view.ex</.action>
<.action phx-click="tree_api_set_selected" value="">Clear</.action>
<.tree_view id="tree-api-set-selected-server" 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_set_selected", %{"value" => raw}, socket) do
  list = if raw == "", do: [], else: String.split(raw, ",", trim: true)
  {:noreply, Corex.TreeView.set_selected_value(socket, "tree-api-set-selected-server", list)}
end

  

    <.action phx-click={Corex.TreeView.expanded_value("tree-api-expanded-client")}>Expanded</.action>
<.action phx-click={Corex.TreeView.expanded_value("tree-api-expanded-client", respond_to: :client)}>Expanded (client only)</.action>
<.tree_view id="tree-api-expanded-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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-expanded-client");
el?.addEventListener("tree-view-expanded-value", (e) => {
  layoutToast(
    "tree-view-expanded-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-expanded-client");
el?.addEventListener("tree-view-expanded-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-expanded-value", `${d.id}\n${JSON.stringify(d.value)}`);
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    <.action phx-click={JS.dispatch("corex:tree-view:expanded-value", to: "#tree-api-expanded-js", detail: %{}, bubbles: false)}>Expanded</.action>
<.action phx-click={JS.dispatch("corex:tree-view:expanded-value", to: "#tree-api-expanded-js", detail: %{respond_to: "client"}, bubbles: false)}>Expanded (client only)</.action>
<.tree_view id="tree-api-expanded-js" 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-expanded-js");
el?.addEventListener("tree-view-expanded-value", (e) => {
  layoutToast(
    "tree-view-expanded-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-expanded-js");
el?.addEventListener("tree-view-expanded-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-expanded-value", `${d.id}\n${JSON.stringify(d.value)}`);
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:expanded-value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    <.action phx-click="tree_api_get_expanded">Expanded</.action>
<.action phx-click="tree_api_get_expanded_client_only">Expanded (client only)</.action>
<.tree_view id="tree-api-get-expanded-server" 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_get_expanded", _params, socket) do
  {:noreply, Corex.TreeView.expanded_value(socket, "tree-api-get-expanded-server")}
end

def handle_event("tree_api_get_expanded_client_only", _params, socket) do
  {:noreply, Corex.TreeView.expanded_value(socket, "tree-api-get-expanded-server", respond_to: :client)}
end

def handle_event("tree_view_expanded_value_response", %{"id" => id, "value" => value}, socket) do
  desc = "#{id}\n#{inspect(value)}"

  {:noreply,
   Corex.Toast.create(socket, "layout-toast", "tree_view_expanded_value_response", desc, :info,
     duration: 5000
   )}
end

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-get-expanded-server");
el?.addEventListener("tree-view-expanded-value", (e) => {
  layoutToast(
    "tree-view-expanded-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-get-expanded-server");
el?.addEventListener("tree-view-expanded-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-expanded-value", `${d.id}\n${JSON.stringify(d.value)}`);
});

  

    <.action phx-click={Corex.TreeView.value("tree-api-selected-client")}>Selected</.action>
<.action phx-click={Corex.TreeView.value("tree-api-selected-client", respond_to: :client)}>Selected (client only)</.action>
<.tree_view id="tree-api-selected-client" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} value={["repo-lib-tree-view-ex"]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-selected-client");
el?.addEventListener("tree-view-value", (e) => {
  layoutToast(
    "tree-view-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-selected-client");
el?.addEventListener("tree-view-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-value", `${d.id}\n${JSON.stringify(d.value)}`);
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    <.action phx-click={JS.dispatch("corex:tree-view:value", to: "#tree-api-selected-js", detail: %{}, bubbles: false)}>Selected</.action>
<.action phx-click={JS.dispatch("corex:tree-view:value", to: "#tree-api-selected-js", detail: %{respond_to: "client"}, bubbles: false)}>Selected (client only)</.action>
<.tree_view id="tree-api-selected-js" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} value={["repo-lib-tree-view-ex"]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-selected-js");
el?.addEventListener("tree-view-value", (e) => {
  layoutToast(
    "tree-view-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-selected-js");
el?.addEventListener("tree-view-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-value", `${d.id}\n${JSON.stringify(d.value)}`);
});
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", { bubbles: false, detail: {} })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:value", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    <.action phx-click="tree_api_get_selected">Selected</.action>
<.action phx-click="tree_api_get_selected_client_only">Selected (client only)</.action>
<.tree_view id="tree-api-get-selected-server" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} value={["repo-lib-tree-view-ex"]} 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"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_get_selected", _params, socket) do
  {:noreply, Corex.TreeView.value(socket, "tree-api-get-selected-server")}
end

def handle_event("tree_api_get_selected_client_only", _params, socket) do
  {:noreply, Corex.TreeView.value(socket, "tree-api-get-selected-server", respond_to: :client)}
end

def handle_event("tree_view_value_response", %{"id" => id, "value" => value}, socket) do
  desc = "#{id}\n#{inspect(value)}"

  {:noreply,
   Corex.Toast.create(socket, "layout-toast", "tree_view_value_response", desc, :info,
     duration: 5000
   )}
end

  

    const layoutToast = (title, description) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el = document.getElementById("tree-api-get-selected-server");
el?.addEventListener("tree-view-value", (e) => {
  layoutToast(
    "tree-view-value",
    `${e.detail.id}\n${JSON.stringify(e.detail.value)}`
  );
});

  

    const layoutToast = (title: string, description: string) => {
  document.querySelector("#layout-toast")?.dispatchEvent(
    new CustomEvent("corex:toast:create", {
      bubbles: true,
      detail: { group_id: "layout-toast", title, description, type: "info", duration: 5000 },
    })
  );
};
const el: HTMLElement | null = document.getElementById("tree-api-get-selected-server");
el?.addEventListener("tree-view-value", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
  layoutToast("tree-view-value", `${d.id}\n${JSON.stringify(d.value)}`);
});