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.

Anatomia

1. Prefixo R$: fixo, no começo do campo, decorativo.
2. Valor: os algarismos digitados, com ponto de milhar e vírgula antes dos centavos.

Rótulo, ajuda e erro vêm do BaseField em volta.

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$

Fora do BaseField

Numa planilha de itens, a coluna já nomeia o valor e não cabe um rótulo por linha. Aí o próprio campo recebe required e invalid: dê o nome com aria-label e ligue a mensagem de erro por aria-describedby.

R$

R$

Item 5.1: passa o valor contratado do item em R$ 1.200,00. Reduza o valor medido.

Faça e não faça

Faça	Não faça
Use para todo valor em dinheiro: contrato, medição, empenho.	Use um BaseInput comum para valor em dinheiro.
Guarde e envie o valor em centavos.	Converta para número com casas decimais no meio do caminho.
Diga no erro como corrigir, como "O valor passa do saldo do empenho".	Use invalid sem invalid-text: só a borda fica vermelha.

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="overBalance" invalid-text="Passa o saldo do empenho. Reforce o empenho ou reduza o valor." required>
  <BaseMoneyInput v-model="measurement.amountCents" name="amountCents" />
</BaseField>

Propriedades

Propriedade	Tipo	Padrão	Descrição
size	'sm' | 'md' | 'lg'	'md'	Altura
disabled	boolean	false	Desabilita o campo
readonly	boolean	false	Mostra o valor sem permitir mudança
invalid	boolean	false	Marca o erro; dentro de um BaseField, vale também o do campo. Sem BaseField, ligue a mensagem do erro por aria-describedby
required	boolean	false	Obrigatório no formulário; dentro de um BaseField, vale também o do campo
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

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

• Não há padrão do WAI-ARIA APG para campo de valor. Ele segue o papel textbox da especificação 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.

Teclado:

Tecla	O que faz
Tab	Leva o foco ao campo. Desabilitado, ele sai da ordem do Tab.
Algarismos	Entram pela direita: os dois últimos são os centavos.
Letras e símbolos	São descartados.
Backspace	Apaga um algarismo, e o campo refaz o valor com os que sobram.
Ctrl+Z ou Cmd+Z	Não desfaz, porque o campo reescreve o texto a cada tecla.