Input
O componente Input
e MoneyInput
contém funcionalidades de uma caixa de texto com estilos e controles embutidos para facilitar o desenvolvimento.
Como utilizar
Input padrão
import Input from '@mamba/input';
MoneyInput
import MoneyInput from '@mamba/input/Money.html';
Propriedades | Descrição | Tipo | Padrão |
---|
align | Alinha a entrada de acordo com parâmetro (left , right ) | string | 'right' |
alphanumeric | Define o modo de entrada como alfanumérico | boolean | false |
autofocus | Inicia o elemento com foco | boolean | false |
forceFocus | Força o foco no elemento de input | boolean | false |
isFocused | Retorna se o input está focado ou não | boolean | false |
bgColor | Cor de Fundo da Caixa de Entrada | string (hex) | '#fff' |
disabled | Desabilita a entrada de texto | boolean | false |
errorMessage | Define uma mensagem de erro caso a validação falhe | boolean | false |
errorColor | Cor do Texto da Mensagem de Erro | string (hex) | #d5000 |
label | Título da Caixa de Entrada | string | undefined |
readable | Possibilita esconder o texto de Entrada | boolean | false |
type | Tipo de texto de entrada (password /text ) | string | 'text' |
textColor | Cor do Texto da Caixa de Entrada | string (hex) | '#4a4a4a' |
labelColor | Cor do título do Input | string (hex) | '#4a4a4a' |
value | Valor de padrão de entrada | string | false |
validation | Adiciona um método de validação | function | undefined |
validateOn | Define em que momento a validação ocorre (input /submit ) | string | 'submit' |
mask | Define uma máscara para o texto | string | null |
compact | Define se o input é levemente compacto. Esta é uma variação pequena na altura do componente, para casos que a tela apresenta muitos elementos e precisa comportar a mensagem de erro de validação que é, dinâmica. Esta propriedade não serve para deixar o componente compatível com POS's de tela muito pequena. | boolean | false |
showPasswordToggle | Define se deve mostrar o símbolo de olho, para alternar entre a exibição de um campo de senha ou não. O valor default vai depender do modelo do POS, se ele possuí touch. | boolean | unknown |
keyboardOptions | Define as propriedades do teclado virtual no momento da criação do componente <Input /> . Tenha cuidado se tiver mais de um campo de entrada na mesma página, pois essas são propriedades globais do teclado (O que se aplicar para um <Input /> , será aplicado para todos) | object | {} |
Money
Propriedades | Descrição | Tipo | Padrão |
---|
value | Valor do input em centavos | string or number | 0 |
readonlyOnEnter | Faz com que o campo se torne somente leitura no keypress do enter e se o valor em centavos for igual a zero | boolean | false |
Eventos
<Input ... on:event="..." />
Eventos | Disparado quando ... | Tipo |
---|
submit | A validação( se houver ) do campo for bem-sucedida, quando o campo for submetido. | function(event) |
submitValid | O campo for inválido no momento do submit | function(event) |
submitInvalid | O campo for válido no momento do submit | function(event) |
Os eventos submit
, submitValid
e submitInvalid
, retornam as seguintes propriedades no objeto event
:
event = {
value: string;
rawValue: string;
isValid: boolean;
}
Além desses eventos, o Input
recebe os eventos focus
, blur
, keydown
, keyup
e input
por padrão.
<MoneyInput ... on:event="..." />
O evento submit
, submitValid
e submitInvalid
retornam as seguintes propriedades no objeto event
para o MoneyInput
:
event = {
value: number;
formatted: string;
isValid: boolean;
}
Métodos
prepend(value)
Adiciona um valor fixo no ínicio do campo de digitação.
append(value)
Adiciona um valor fixo no final do campo de digitação.
focus()
Coloca o foco no componente de input.
blur()
Desfoca o componente de input.
validate()
Força a validação do Input e retorna um booleano representando o resultado da validação.
invalidate(message)
Define que o input está com conteúdo inválido e mostra uma mensagem de erro opcional.
makeReadOnly()
Desabilita o preenchimento do campo
makeWritable()
Habilita o preenchimento do campo
Máscara
O componente padrão Input
suporta máscaras para formatar o seu valor. Para definir uma máscara de input, basta passar um parâmetro mask
com uma ou mais máscaras. Uma máscara é definida por tokens que, por padrão, são:
#
- DígitoX
- Caractér alfanuméricoS
- LetraA
- Letra maiúsculaa
- Letra minúscula!
- Escapa o caractér do token
Exemplo de CPF/CNPJ:
<Input label="CPF/CNPJ" mask={['###.###.###-##', '##.###.###/####-##']} />
mask()
Força uma atualização do conteúdo do Input
para se adequar às máscaras definidas. Use apenas se a prop value
for definida manualmente através de um inputComponent.set({ value: ... })
.