DevactionUI.MoneyInput (devaction_ui v0.2.3)

Copy Markdown View Source

A field for an amount of money: the person types digits and the field shows 1.234,56, the last digits being the minor units (cents). It is the Brazilian real by default (prefix R$, decimal ,, group ., precision 2) and any other currency through those attrs:

<MoneyInput.money_input id="usd" name="usd" label="Price" prefix="$" decimal="." group="," />
<MoneyInput.money_input id="eur" name="eur" label="Preis" prefix={nil} suffix="€" group=" " />
<MoneyInput.money_input id="jpy" name="jpy" label="Price" prefix="¥" precision={0} group="," />

DevactionUI.MoneyMask (in assets/js/devaction_ui) formats what is typed, the value the server renders and the one it patches in, and keeps the caret among the same digits; the server renders the same text itself (mask/2), so the field is right before the hook runs. What is sent is the text as shown, and the server reads it with parse/2: the amount in minor units, an integer, so nothing depends on a decimal library. With signed a - anywhere in the text makes the amount negative.

It is an InputGroup with the prefix add-on, so the height, the focus ring and the error, disabled and readonly looks are the ones of the other text fields. The label is the label text, or the label_content slot when it needs markup; the help slot and the error messages sit under the field and the field points at them with aria-describedby, joined to one the caller gives.

Summary

Functions

format(amount, opts \\ [])

An amount in minor units as the text the field shows. The options are :decimal, :group and :precision.

mask(value, opts \\ [])

What the field shows for a typed text, a masked one, or an amount in minor units: the digits as money, and nothing for no digits. A - is kept only with signed: true, and alone it is a sign waiting for its digits.

money_input(assigns)
parse(text, opts \\ [])

The amount of a masked text in minor units (cents), or :error when it holds no digits. The sign is read only with signed: true.

Functions

format(amount, opts \\ [])

@spec format(integer(), keyword()) :: String.t()

An amount in minor units as the text the field shows. The options are :decimal, :group and :precision.

iex> DevactionUI.MoneyInput.format(123_456)
"1.234,56"
iex> DevactionUI.MoneyInput.format(-5, decimal: ".", group: ",")
"-0.05"
iex> DevactionUI.MoneyInput.format(1234, precision: 0, group: ",")
"1,234"

mask(value, opts \\ [])

@spec mask(String.t() | integer() | nil, keyword()) :: String.t()

What the field shows for a typed text, a masked one, or an amount in minor units: the digits as money, and nothing for no digits. A - is kept only with signed: true, and alone it is a sign waiting for its digits.

iex> DevactionUI.MoneyInput.mask("123456")
"1.234,56"
iex> DevactionUI.MoneyInput.mask(123_456)
"1.234,56"
iex> DevactionUI.MoneyInput.mask("-")
""
iex> DevactionUI.MoneyInput.mask("-", signed: true)
"-"

money_input(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • value (:any) - the amount in minor units (an integer) or text, masked or not; formatted on render. Defaults to "".
  • label (:string) - the visible label; or give label_content. Defaults to nil.
  • prefix (:any) - the add-on before the amount; nil for none. Defaults to "R$".
  • suffix (:any) - an add-on after the amount, for 1,23 €. Defaults to nil.
  • decimal (:string) - between the whole part and the minor units. Defaults to ",".
  • group (:string) - between the groups of three digits; "" for none. Defaults to ".".
  • precision (:integer) - digits of minor units: 2 for cents, 0 for yen. Defaults to 2.
  • signed (:boolean) - a - makes the amount negative. Defaults to false.
  • placeholder (:string) - defaults to a zero amount, like 0,00. Defaults to nil.
  • errors (:list) - messages to show under the field. Defaults to [].
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. goes to the <input>. Supports all globals plus: ["disabled", "readonly", "required", "autocomplete", "form"].

Slots

  • label_content - a label with markup, in place of label.
  • help - a line under the field, before the errors.

parse(text, opts \\ [])

@spec parse(String.t() | nil, keyword()) :: {:ok, integer()} | :error

The amount of a masked text in minor units (cents), or :error when it holds no digits. The sign is read only with signed: true.

iex> DevactionUI.MoneyInput.parse("R$ 1.234,56")
{:ok, 123_456}
iex> DevactionUI.MoneyInput.parse("-1,50", signed: true)
{:ok, -150}
iex> DevactionUI.MoneyInput.parse("-1,50")
{:ok, 150}