Editable

API

Set text from client bindings, client JS, or a server event.

Hex doc

Phoenix

Set value (Client binding)

Label

Start

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Editable.set_value("editable-api-cb", "Lorem")} class="button ui-size-sm">Lorem</.action>
  <.action phx-click={Corex.Editable.set_value("editable-api-cb", "Duis")} class="button ui-size-sm">Duis</.action>
  <.action phx-click={Corex.Editable.set_value("editable-api-cb", "Donec")} class="button ui-size-sm">Donec</.action>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

Set value (Client JS)

Label

Start

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={JS.dispatch("corex:editable:set-value", to: "#editable-api-cjs", bubbles: false, detail: %{value: "Lorem"})}
    class="button ui-size-sm"
  >
    Lorem
  </.action>
  <.action
    phx-click={JS.dispatch("corex:editable:set-value", to: "#editable-api-cjs", bubbles: false, detail: %{value: "Duis"})}
    class="button ui-size-sm"
  >
    Duis
  </.action>
  <.action
    phx-click={JS.dispatch("corex:editable:set-value", to: "#editable-api-cjs", bubbles: false, detail: %{value: "Donec"})}
    class="button ui-size-sm"
  >
    Donec
  </.action>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

    const el = document.getElementById("editable-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:editable:set-value", { bubbles: false, detail: { value: "Lorem" } })
);

    const el: HTMLElement | null = document.getElementById("editable-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:editable:set-value", { bubbles: false, detail: { value: "Lorem" } })
);

Set value (Server)

Label

Start

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="editable_api_lorem" class="button ui-size-sm">Lorem</.action>
  <.action phx-click="editable_api_duis" class="button ui-size-sm">Duis</.action>
  <.action phx-click="editable_api_donec" class="button ui-size-sm">Donec</.action>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

    def handle_event("editable_api_lorem", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "editable-api-srv", "Lorem")}
end

def handle_event("editable_api_duis", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "editable-api-srv", "Duis")}
end

def handle_event("editable_api_donec", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "editable-api-srv", "Donec")}
end