Number Input · API
Machine API: set, clear, step, bounds, focus, and read state from LiveView or the client.
Hex doc
Phoenix
Set value (client binding)
<.action phx-click={Corex.NumberInput.set_value("number-input-api-set-client", 42)} class="button button--sm">
Set 42
</.action>
<.number_input class="number-input" value="1">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
Set value (server)
<.action phx-click="api_number_set_value_server" class="button button--sm">
Set 99
</.action>
<.number_input class="number-input" value="1">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
def handle_event("api_number_set_value_server", _params, socket) do
{:noreply, Corex.NumberInput.set_value(socket, "number-input-api-set-server", 99)}
end
Set value (client JS)
<.action
phx-click={JS.dispatch("corex:number-input:set-value",
to: "#number-input-api-set-js",
detail: %{value: 7},
bubbles: false
)}
class="button button--sm"
>
Set 7
</.action>
<.number_input class="number-input" value="1">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
const el = document.getElementById("number-input-api-set-js");
el?.dispatchEvent(
new CustomEvent("corex:number-input:set-value", {
bubbles: false,
detail: { value: 7 },
})
);
const el: HTMLElement | null = document.getElementById("number-input-api-set-js");
el?.dispatchEvent(
new CustomEvent<{ value: number }>("corex:number-input:set-value", {
bubbles: false,
detail: { value: 7 },
})
);
Clear value (client binding)
<.action phx-click={Corex.NumberInput.clear_value("number-input-api-clear-client")} class="button button--sm">
Clear
</.action>
<.number_input class="number-input" value="10">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
Clear value (server)
<.action phx-click="api_number_clear_server" class="button button--sm">
Clear
</.action>
<.number_input class="number-input" value="10">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
def handle_event("api_number_clear_server", _params, socket) do
{:noreply, Corex.NumberInput.clear_value(socket, "number-input-api-clear-server")}
end
Increment, decrement, min, max, focus
<.action phx-click={Corex.NumberInput.increment("number-input-api-cmd-client")} class="button button--sm">+</.action>
<.action phx-click={Corex.NumberInput.decrement("number-input-api-cmd-client")} class="button button--sm">−</.action>
<.action phx-click={Corex.NumberInput.set_to_min("number-input-api-cmd-client")} class="button button--sm">Min</.action>
<.action phx-click={Corex.NumberInput.set_to_max("number-input-api-cmd-client")} class="button button--sm">Max</.action>
<.action phx-click={Corex.NumberInput.focus("number-input-api-cmd-client")} class="button button--sm">Focus</.action>
<.number_input class="number-input" min={0.0} max={10.0} step={1.0} value="5">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
State (client binding)
<.action phx-click={Corex.NumberInput.state("number-input-api-state-client")} class="button button--sm">
Read state
</.action>
<.number_input class="number-input" value="3">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
State (server)
<.action phx-click="api_number_state_server" class="button button--sm">
Read state
</.action>
<.number_input class="number-input" value="8">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
def handle_event("api_number_state_server", _params, socket) do
{:noreply, Corex.NumberInput.state(socket, "number-input-api-state-server")}
end
State (client JS / TS)
<.action
phx-click={JS.dispatch("corex:number-input:state", to: "#number-input-api-state-js", detail: %{}, bubbles: false)}
class="button button--sm"
>
Read state
</.action>
<.number_input class="number-input" value="4">
<:label>Quantity</:label>
<:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
<:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>
const el = document.getElementById("number-input-api-state-js");
el?.dispatchEvent(new CustomEvent("corex:number-input:state", { bubbles: false, detail: {} }));
const el = document.getElementById("number-input-api-state-js");
el?.addEventListener("number-input-state", (event: Event) => {
const d = (event as CustomEvent<{
focused?: boolean;
invalid?: boolean;
empty?: boolean;
value?: string;
valueAsNumber?: number;
}>).detail;
console.log(d);
});
el?.dispatchEvent(new CustomEvent("corex:number-input:state", { bubbles: false, detail: {} }));