mad-money-field
Monetário com reverse-mask estilo calculadora.
Campo de entrada monetaria com mascara reversa estilo calculadora de caixa: os digitos entram pela direita empurrando as casas decimais (digitar 1, 2, 3, 4, 5 produz 1,23 → 12,34 → 123,45). O input visivel (type="text") mostra o display formatado, e um <input type="hidden" name="..."> carrega o rawValue (float cru) — esse hidden e o que vai pro POST e o que o mad:model coleta.
| Componente | Mascara | Quando usar |
|---|---|---|
<mad-number-field> |
nenhuma (UX nativa do browser) | Quantidade, ordem, percentual com step — ver number-field.md |
<mad-numeric-field> |
pt-BR no blur (1.234,56) |
Decimal formatado nao-monetario (peso, cotacao, fator) — ver numeric-field.md |
<mad-money-field> |
reverse-mask tipo calculadora de caixa | Valor monetario (preco, total, desconto) — esta pagina |
Props
| Prop | Tipo | Default | Descricao |
|---|---|---|---|
| name | string | '' | Nome do campo (obrigatorio) |
| label | string | '' | Label |
| width | string | '' | Largura inline do input/wrapper (100px, 50%) |
| max-width | string | '' | Largura maxima inline |
| prefix | string | 'R$' | Addon esquerdo (default ja monetario) |
| suffix | string | '' | Addon direito |
| placeholder | string | '' | Placeholder. Vazio = auto-calculado a partir de decimals (ex: 0,00 p/ decimals=2) |
| decimals | int | 2 | Casas decimais |
| min | string | '' | Valor minimo (clamp) |
| max | string | '' | Valor maximo (clamp) |
| decimal-sep | string | , |
Separador decimal (, pt-BR, . en-US) |
| thousand-sep | string | . |
Separador de milhar (. pt-BR, , en-US, europeu, '' desliga) |
| fill-direction | string | right |
right (reverse-fill calculadora) ou left (digitacao normal, formata no blur) |
| allow-negative | bool | false | Permite valores negativos. Sinal - no inicio |
| hint | string | '' | Texto de ajuda |
| error | string | '' | Mensagem de erro |
| required | bool | false | |
| disabled | bool | false | |
| readonly | bool | false | |
| align | string | '' | Alinhamento do valor digitado: left (padrao), center ou right (comum em valores) |
| attrs | string | '' | Atributos HTML extras |
Como funciona o rawValue/display
<mad-money-field> e um componente Alpine x-data. O input visivel mostra o display formatado; o hidden name="..." carrega o rawValue (float cru), que e o que o mad:model e o submit do form coletam.
Com fill-direction="right" (default), a cada tecla digitada o componente extrai so os digitos e reconstroi o valor a partir de centavos (12345 → 123,45; 1234567 → 12.345,67) — nao e possivel digitar ponto/virgula diretamente, comportamento de calculadora de caixa. Com fill-direction="left", o usuario digita normalmente (1234,56) e o componente so reformata ao sair do campo (blur).
O sync do MadDetailForm (_syncFormInputs) detecta o componente via Alpine.$data(wrap) e atualiza rawValue, display e _intVal para refletir o valor da linha ao editar um item de field-list.
Exemplos
{{-- Padrao R$ --}}
<mad-money-field name="preco_venda" label="Preco de venda" />
{{-- Outra moeda --}}
<mad-money-field name="valor_usd" label="Valor em USD" prefix="US$" />
{{-- Com limites --}}
<mad-money-field name="desconto" label="Desconto" min="0" max="9999" />
{{-- Sem casas decimais (valor inteiro em reais) --}}
<mad-money-field name="valor_meta" label="Meta" decimals="0" />
{{-- en-US (1,234.56) --}}
<mad-money-field name="usd" prefix="US$" decimal-sep="." thousand-sep="," />
{{-- Europeu (1 234,56) --}}
<mad-money-field name="eur" prefix="EUR" decimal-sep="," thousand-sep=" " />
{{-- Sem separador de milhar --}}
<mad-money-field name="valor_simples" thousand-sep="" />
{{-- Crypto 8 casas --}}
<mad-money-field name="btc" prefix="" suffix="BTC" :decimals="8" />
{{-- Modo digitacao normal (usuario digita "1234,56" e blur formata) --}}
<mad-money-field name="taxa" prefix="%" fill-direction="left" :decimals="4" />
{{-- Permite negativo (ajuste de saldo) --}}
<mad-money-field name="ajuste" label="Ajuste" allow-negative />
{{-- Combinacao: balanco com sinal e digitacao normal --}}
<mad-money-field name="saldo" prefix="R$" allow-negative fill-direction="left" />
{{-- Largura fixa dentro de um form-grid --}}
<mad-money-field name="frete" label="Frete" width="160px" />
NUNCA fazer
{{-- ERRADO: usar input nativo para dinheiro --}}
<input type="number" name="preco" step="0.01">
{{-- ERRADO: number-field para dinheiro — UX ruim, sem mascara, browser mostra setinhas --}}
<mad-number-field name="preco" label="Preco" prefix="R$" step="0.01" />
{{-- ERRADO: input-field type=text para valor monetario --}}
<mad-input-field name="preco" label="Preco" />
{{-- CERTO: money-field tem mascara reversa e hidden com rawValue --}}
<mad-money-field name="preco" label="Preco" />
{{-- ERRADO: tentar setar via JS direto no input visivel — Alpine sobrescreve no proximo render --}}
document.querySelector('[name=preco]').value = '123.45';
{{-- CERTO: usar form->set() no PHP --}}
$this->form->set('preco', 123.45);