الأكورديون · واجهة برمجية

    <.action phx-click={Corex.Accordion.set_value("api-set-value-client", "lorem")}>Open Lorem</.action>
<.action phx-click={Corex.Accordion.set_value("api-set-value-client", ["lorem", "donec"])}>Lorem and Donec</.action>
<.action phx-click={Corex.Accordion.set_value("api-set-value-client", [])}>Close all</.action>
<.accordion id="api-set-value-client" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    <.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: ["lorem"]}, bubbles: false)}>Open Lorem</.action>
<.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: ["lorem", "donec"]}, bubbles: false)}>Lorem and Donec</.action>
<.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: []}, bubbles: false)}>Close all</.action>
<.accordion class="accordion" id="api-set-value-client-js" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    const el = document.getElementById("api-set-value-client-js");
el?.dispatchEvent(
  new CustomEvent("corex:accordion:set-value", {
    bubbles: false,
    detail: { value: ["lorem"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:accordion:set-value", {
    bubbles: false,
    detail: { value: ["lorem", "donec"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:accordion:set-value", {
    bubbles: false,
    detail: { value: [] },
  })
);

  

    const el: HTMLElement | null = document.getElementById("api-set-value-client-js");
const set = (value: string[]) =>
  el?.dispatchEvent(
    new CustomEvent("corex:accordion:set-value", {
      bubbles: false,
      detail: { value },
    })
  );
set(["lorem"]);
set(["lorem", "donec"]);
set([]);

  

    <.action phx-click="api_set_value_server" value="lorem">Open Lorem</.action>
<.action phx-click="api_set_value_server" value="lorem,donec">Lorem and Donec</.action>
<.action phx-click="api_set_value_server" value="">Close all</.action>
<.accordion class="accordion" id="api-set-value-server" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    def handle_event("api_set_value_server", %{"value" => value}, socket) do
  {:noreply, Corex.Accordion.set_value(socket, "api-set-value-server", value)}
end

  

    <.action phx-click={Corex.Accordion.value("api-value-client")}>Value</.action>
<.action phx-click={Corex.Accordion.value("api-value-client", respond_to: :client)}>Value (client only)</.action>
<.accordion class="accordion" id="api-value-client" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    <.action phx-click={JS.dispatch("corex:accordion:value", to: "#api-value-client-js", detail: %{}, bubbles: false)}>Value</.action>
<.action phx-click={JS.dispatch("corex:accordion:value", to: "#api-value-client-js", detail: %{respond_to: "client"}, bubbles: false)}>Value (client only)</.action>
<.accordion class="accordion" id="api-value-client-js" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

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

  

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

  

    <.action phx-click="api_value_server">Value</.action>
<.action phx-click="api_value_server_client_only">Value (client only)</.action>
<.accordion class="accordion" id="api-value-server" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    def handle_event("api_value_server", _params, socket) do
  {:noreply, Corex.Accordion.value(socket, "api-value-server")}
end

def handle_event("api_value_server_client_only", _params, socket) do
  {:noreply, Corex.Accordion.value(socket, "api-value-server", respond_to: :client)}
end

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

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

  

    <.action phx-click="api_focused_client">Focused</.action>
<.action phx-click="api_focused_client_client_only">Focused (client only)</.action>
<.accordion id="api-focused-client" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    <.action phx-click="api_focused_js">Focused</.action>
<.action phx-click="api_focused_js_client_only">Focused (client only)</.action>
<.accordion class="accordion" id="api-focused-client-js" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    const el = document.getElementById("api-focused-client-js");
el?.dispatchEvent(new CustomEvent("corex:accordion:focused", { bubbles: false, detail: {} }));
el?.dispatchEvent(
  new CustomEvent("corex:accordion:focused", {
    bubbles: false,
    detail: { respond_to: "client" },
  })
);

  

    const el: HTMLElement | null = document.getElementById("api-focused-client-js");
const focused = (respond_to?: "client") =>
  el?.dispatchEvent(
    new CustomEvent("corex:accordion:focused", {
      bubbles: false,
      detail: respond_to ? { respond_to } : {},
    })
  );
focused();
focused("client");

  

    <.action phx-click="api_focused_server">Focused</.action>
<.action phx-click="api_focused_server_client_only">Focused (client only)</.action>
<.accordion class="accordion" id="api-focused-server" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    def handle_event("api_focused_client", _params, socket) do
  Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-client", []}, 5_000)
  {:noreply, socket}
end

def handle_event("api_focused_client_client_only", _params, socket) do
  Process.send_after(
    self(),
    {:accordion_api_focused_after_delay, "api-focused-client", [respond_to: :client]},
    5_000
  )

  {:noreply, socket}
end

def handle_event("api_focused_js", _params, socket) do
  Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-client-js", []}, 5_000)
  {:noreply, socket}
end

def handle_event("api_focused_js_client_only", _params, socket) do
  Process.send_after(
    self(),
    {:accordion_api_focused_after_delay, "api-focused-client-js", [respond_to: :client]},
    5_000
  )

  {:noreply, socket}
end

def handle_event("api_focused_server", _params, socket) do
  Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-server", []}, 5_000)
  {:noreply, socket}
end

def handle_event("api_focused_server_client_only", _params, socket) do
  Process.send_after(
    self(),
    {:accordion_api_focused_after_delay, "api-focused-server", [respond_to: :client]},
    5_000
  )

  {:noreply, socket}
end

  

    <.action phx-click={Corex.Accordion.item_state("api-item-client", "lorem")}>lorem</.action>
<.action phx-click={Corex.Accordion.item_state("api-item-client", "duis")}>duis</.action>
<.action phx-click={Corex.Accordion.item_state("api-item-client", "donec")}>donec</.action>
<.accordion class="accordion" id="api-item-client" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    <.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "lorem"}, bubbles: false)}>lorem</.action>
<.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "duis"}, bubbles: false)}>duis</.action>
<.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "donec"}, bubbles: false)}>donec</.action>
<.accordion id="api-item-client-js" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

  

    const el = document.getElementById("api-item-client-js");
const itemState = (value) =>
  el?.dispatchEvent(
    new CustomEvent("corex:accordion:item-state", { bubbles: false, detail: { value } })
  );
itemState("lorem");
itemState("duis");
itemState("donec");

  

    const el: HTMLElement | null = document.getElementById("api-item-client-js");
const itemState = (value: string) =>
  el?.dispatchEvent(
    new CustomEvent("corex:accordion:item-state", { bubbles: false, detail: { value } })
  );
itemState("lorem");
itemState("duis");
itemState("donec");

  

    <.action phx-click="api_item_state_server_lorem">lorem</.action>
<.action phx-click="api_item_state_server_duis">duis</.action>
<.action phx-click="api_item_state_server_donec">donec</.action>
<.accordion class="accordion" id="api-item-server" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus.", disabled: true}
])} />

  

    def handle_event("api_item_state_server_lorem", _params, socket) do
  {:noreply, Corex.Accordion.item_state(socket, "api-item-server", "lorem", disabled: false)}
end

def handle_event("api_item_state_server_duis", _params, socket) do
  {:noreply, Corex.Accordion.item_state(socket, "api-item-server", "duis", disabled: false)}
end

def handle_event("api_item_state_server_donec", _params, socket) do
  {:noreply, Corex.Accordion.item_state(socket, "api-item-server", "donec", disabled: true)}
end