Pin Input · API
Set, read, and clear the pin from LiveView, client bindings, or a (Client JS).
Hex doc
Phoenix
Set Value (Client Binding)
<.action phx-click={Corex.PinInput.set_value("pin-api-set-client", ["1", "2", "3", "4"])} class="button button--sm">
Fill
</.action>
<.pin_input count={4} class="pin-input">
<:label>Code</:label>
</.pin_input>
Set Value (Client JS / dispatch)
<.action
phx-click={JS.dispatch("corex:pin-input:set-value",
to: "#pin-api-set-js",
detail: %{value: ["1", "2", "3", "4"]},
bubbles: false
)}
class="button button--sm"
>
Fill via dispatch
</.action>
<.pin_input count={4} class="pin-input">
<:label>Code</:label>
</.pin_input>
const el = document.getElementById("pin-api-set-js");
el?.dispatchEvent(
new CustomEvent("corex:pin-input:set-value", {
bubbles: false,
detail: { value: ["1", "2", "3", "4"] },
})
);
const el: HTMLElement | null = document.getElementById("pin-api-set-js");
el?.dispatchEvent(
new CustomEvent<{ value: string[] }>("corex:pin-input:set-value", {
bubbles: false,
detail: { value: ["1", "2", "3", "4"] },
})
);
Set Value (Server)
<.action phx-click="api_pin_set_value_server" class="button button--sm">
Fill from server
</.action>
<.pin_input count={4} class="pin-input">
<:label>Code</:label>
</.pin_input>
def handle_event("api_pin_set_value_server", _params, socket) do
{:noreply,
Corex.PinInput.set_value(socket, "pin-api-set-server", ["1", "2", "3", "4"])}
end
Value (Client Binding)
<.action phx-click={Corex.PinInput.value("pin-api-val-client")} class="button button--sm">
Read value
</.action>
<.pin_input count={4} class="pin-input" value={["1", "2", "", ""]}>
<:label>Code</:label>
</.pin_input>
Value (Client JS / dispatch)
<.action
phx-click={JS.dispatch("corex:pin-input:value", to: "#pin-api-val-js", detail: %{}, bubbles: false)}
class="button button--sm"
>
Read via dispatch
</.action>
<.pin_input count={4} class="pin-input" value={["1", "0", "0", "0"]}>
<:label>Code</:label>
</.pin_input>
const el = document.getElementById("pin-api-val-js");
el?.dispatchEvent(new CustomEvent("corex:pin-input:value", { bubbles: false, detail: {} }));
const el: HTMLElement | null = document.getElementById("pin-api-val-js");
el?.dispatchEvent(new CustomEvent("corex:pin-input:value", { bubbles: false, detail: {} }));
Value (Server)
<.action phx-click="api_pin_value_server" class="button button--sm">
Read value (server)
</.action>
<.pin_input count={4} class="pin-input" value={["5", "6", "7", "8"]}>
<:label>Code</:label>
</.pin_input>
def handle_event("api_pin_value_server", _params, socket) do
{:noreply, Corex.PinInput.value(socket, "pin-api-val-server")}
end
Clear (Client Binding)
<.action phx-click={Corex.PinInput.clear("pin-api-clear-client")} class="button button--sm">
Clear
</.action>
<.pin_input count={4} class="pin-input" value={["9", "9", "9", "9"]}>
<:label>Code</:label>
</.pin_input>
Clear
<.action phx-click="api_pin_clear_server" class="button button--sm">
Clear from server
</.action>
<.pin_input count={4} class="pin-input" value={["1", "1", "1", "1"]}>
<:label>Code</:label>
</.pin_input>
def handle_event("api_pin_clear_server", _params, socket) do
{:noreply, Corex.PinInput.clear(socket, "pin-api-clear-server")}
end