Select · API

    <.action phx-click={Corex.Select.set_value("select-api-cb", ["fra"])}>France</.action>
<.action phx-click={Corex.Select.set_value("select-api-cb", [])}>Clear</.action>
<.select
  id="select-api-cb"
  class="select select--accent"
  items={Corex.List.new(items_minimal())}
  translation={%Corex.Select.Translation{placeholder: "Select"}}
>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    <.action phx-click="select_api_set_value">France</.action>
<.action phx-click="select_api_clear">Clear</.action>
<.select
  id="select-api-srv"
  class="select select--accent"
  items={Corex.List.new(items_minimal())}
  translation={%Corex.Select.Translation{placeholder: "Select"}}
>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    def handle_event("select_api_set_value", _params, socket) do
  {:noreply, Corex.Select.set_value(socket, "select-api-srv", ["fra"])}
end

def handle_event("select_api_clear", _params, socket) do
  {:noreply, Corex.Select.set_value(socket, "select-api-srv", [])}
end

  

    const el = document.getElementById("select-api-cjs");

el?.dispatchEvent(
  new CustomEvent("corex:select:set-value", {
    bubbles: false,
    detail: { value: ["fra"] },
  })
);

el?.dispatchEvent(
  new CustomEvent("corex:select:set-value", {
    bubbles: false,
    detail: { value: [] },
  })
);