BaseMoneyInput

Campo de valor em reais. Mostra R$ à esquerda, alinha os números à direita com algarismos de mesma largura e formata em pt-BR enquanto a pessoa digita. O valor do v-model é um número inteiro em centavos: a tela mostra 1.234,56 e o código recebe 123456. Com o campo vazio, o valor é null.

Valor medido no mês (R$) *

R$

Saldo do empenho: R$ 1.735.700,00.

Centavos no modelo: 41290355

Uso

• Use para todo valor em dinheiro: valor do contrato, da medição, do empenho, do aditivo.
• A pessoa digita só os algarismos. Os dois últimos são os centavos: digitar 1, 2, 5, 0 mostra 0,01, 0,12, 1,25 e 12,50.
• Letras e outros símbolos são descartados. Ao colar R$ 1.234,56, o campo fica com 1.234,56. Não há limite de caracteres que corte o texto colado: só se recusa o que passar de R$ 999.999.999.999,99.
• Campo vazio dá null, e apagar até sobrar só zero também esvazia o campo. Para guardar 0 de propósito, a pessoa digita 0 e o campo mostra 0,00. Trate o null antes de gravar numa coluna que não aceita vazio.
• O campo não tem texto de exemplo (placeholder), porque 0,00 cinza se confunde com um valor de verdade. Se precisar de exemplo, coloque no helper-text do BaseField.
• Ao colar um valor sem centavos, como 1.234, o campo lê 12,34. Peça sempre os centavos no texto de ajuda quando o valor vier de outro sistema.
• Guarde e envie o valor em centavos. Nunca converta para number com casas decimais no meio do caminho.
• Coloque o campo dentro de um BaseField. Erro de regra de negócio, como passar do saldo do empenho, vai no invalid-text do campo e diz como corrigir. Passe sempre invalid-text junto com invalid e warn-text junto com warn: sem o texto, o estado aparece só na cor da borda.

Estados

Inválido

R$

Passa o saldo do empenho em R$ 214.300,00. Reforce o empenho ou reduza o valor.

Aviso

R$

Valor 40% acima da média das obras

Somente leitura

R$

Desabilitado

R$

Tamanhos

Pequeno

R$

Médio

R$

Grande

R$

Estilo

Herda tudo do BaseInput. O que muda está abaixo.

Propriedade	Token
Alinhamento	à direita, font-variant-numeric: tabular-nums
Peso do valor	--tj-weight-medium
Prefixo R$	--tj-text-helper; desabilitado --tj-icon-secondary
Tamanho do prefixo	--tj-text-sm, --tj-text-md, --tj-text-lg, junto com o campo
Recuo do prefixo	--tj-space-3; no grande --tj-space-4
Altura	--tj-control-sm/md/lg

Código

<BaseField label="Valor medido no mês (R$)" :invalid="passouDoSaldo" invalid-text="Passa o saldo do empenho. Reforce o empenho ou reduza o valor." required>
  <BaseMoneyInput v-model="measurement.amountCents" name="amountCents" />
</BaseField>

Propriedade	Tipo	Padrão	Descrição
v-model	number | null	null	Centavos inteiros, não negativos; null com o campo vazio. Digitar 0 guarda 0. Valor de fora negativo ou com fração aparece arredondado e sem sinal
size	'sm' | 'md' | 'lg'	'md'	Altura
disabled, readonly, required, invalid	boolean	—	Estados; dentro de um BaseField, required e invalid vêm do campo

Outros atributos (name, aria-label, autocomplete, placeholder) e eventos (blur, change) vão direto para o <input>. class e style ficam no contêiner, como no BaseInput. Dentro de um BaseField, o id vem do campo e o id passado é ignorado.

Evento	Carga	Quando
update:modelValue	number | null	A cada algarismo digitado, colado ou apagado; null quando o campo fica vazio

Acessibilidade

• Segue o padrão de caixa de texto (textbox) do WAI-ARIA: é um <input type="text"> comum, com todo o teclado nativo.
• inputmode="numeric" abre o teclado numérico no celular.
• Dentro de um BaseField, o rótulo, a ajuda e o erro se ligam sozinhos por for e aria-describedby; com erro, o campo recebe aria-invalid="true".
• O R$ é decorativo (aria-hidden), então o leitor de tela lê só o número. Coloque a moeda também no rótulo: "Valor medido no mês (R$)".
• O foco usa o anel --tj-ring. Dentro de um BaseField, erro e aviso têm ícone e texto além da cor, desde que venham com invalid-text e warn-text. Fora do campo, ligue a mensagem de erro por aria-describedby.
• Funciona com teclados de composição (IME): o texto só é formatado quando a composição termina.
• Desfazer e refazer (Ctrl+Z, Cmd+Z) não funcionam, porque o campo reescreve o texto a cada tecla e o navegador perde o histórico.
• Testado com axe em todos os estados e tamanhos, dentro e fora do BaseField.