DevactionUI.NumberInput (devaction_ui v0.1.0)

A number field with a minus and a plus, for a quantity that is changed a step at a time (hours, seats, days): the buttons are disabled at the limits, the field is a spinbutton that says its value and its limits, and typing in it works as well. The LiveView keeps the value: it learns of a press in event (with phx-value-step -1 or 1) and of typing in the field's own phx-change.

step/4 and clamp/3 are the arithmetic, so the server applies the same rule the buttons suggest.

Summary

Functions

clamp(value, min, max)

value inside min and max; a limit that is nil does not apply.

number_input(assigns)

step(value, delta, min, max)

value moved by direction (-1 or 1) steps, and kept inside min and max.

Functions

clamp(value, min, max)

@spec clamp(number(), number() | nil, number() | nil) :: number()

value inside min and max; a limit that is nil does not apply.

number_input(assigns)

Attributes

id (:string) (required)
name (:string) (required)
value (:integer) (required)
label (:string) (required) - what is counted, for assistive technology.
min (:integer) - Defaults to nil.
max (:integer) - Defaults to nil.
step (:integer) - Defaults to 1.
event (:string) (required) - sent by the buttons, with phx-value-step.
decrease_label (:string) (required)
increase_label (:string) (required)
disabled (:boolean) - Defaults to false.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

minus_icon (required)
plus_icon (required)

step(value, delta, min, max)

@spec step(number(), number(), number() | nil, number() | nil) :: number()

value moved by direction (-1 or 1) steps, and kept inside min and max.