@mamba/input NPM

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; // Valor do campo (com máscara se houver)
  rawValue: string; // Valor sem máscara ou formatação
  isValid: boolean; // Representa o valor da validação (se houver)
}

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; // Valor em centavos
  formatted: string; // Valor formatado na moeda
  isValid: boolean; // Representa o valor da validação (se houver)
}

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ígito
X - Caractér alfanumérico
S - Letra
A - Letra maiúscula
a - 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: ... }).