FrappeUIPhx.Components.PinCode (frappe_ui_phx v0.3.1)

Copy Markdown View Source

Código de verificação / PIN: uma caixa por caractere, com avanço automático, Backspace que volta, setas, colar o código inteiro e preenchimento por SMS (autocomplete="one-time-code").

O valor é um único campo (name do field, ou name avulso) com o código completo; as caixas não têm name, então nada parcial é enviado. Aceita field={@form[:codigo]} (valor e erros do changeset) e funciona dentro de um phx-change/phx-submit. Com on_complete="evento" o servidor recebe %{"id" => id, "value" => código} assim que todas as caixas são preenchidas.

<.pin_code id="otp" field={@form[:codigo]} length={6} on_complete="verificar" />

type: :numeric (padrão, teclado numérico) ou :alphanumeric. mask esconde os caracteres (como senha). O que o navegador envia continua sendo entrada de usuário: valide o código no servidor (sanitize/2 aplica a mesma regra do cliente).

Summary

Functions

cells(value, length, type)

Caracteres por caixa: o valor limpo, cortado em length e completado com "".

pin_code(assigns)
sanitize(value, type \\ :numeric)

Mantém só os caracteres aceitos pelo type (:numeric ou :alphanumeric). Mesma regra do hook no cliente; use no servidor para validar o código recebido.

Functions

cells(value, length, type)

@spec cells(term(), pos_integer(), :numeric | :alphanumeric) :: [String.t()]

Caracteres por caixa: o valor limpo, cortado em length e completado com "".

pin_code(assigns)

Attributes

  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • id (:any) - Defaults to nil.
  • name (:any)
  • value (:any)
  • length (:integer) - quantidade de caracteres (3..12). Defaults to 6.
  • type (:atom) - Defaults to :numeric. Must be one of :numeric, or :alphanumeric.
  • mask (:boolean) - esconde os caracteres, como uma senha. Defaults to false.
  • on_complete (:string) - evento enviado ao servidor com o código quando todas as caixas estão preenchidas. Defaults to nil.
  • variant (:atom) - Defaults to :subtle. Must be one of :subtle, :outline, or :ghost.
  • size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, or :lg.
  • errors (:list) - Defaults to [].
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["autofocus", "form"].

sanitize(value, type \\ :numeric)

@spec sanitize(term(), :numeric | :alphanumeric) :: String.t()

Mantém só os caracteres aceitos pelo type (:numeric ou :alphanumeric). Mesma regra do hook no cliente; use no servidor para validar o código recebido.