@mamba/input

O componente `Input` e `MoneyInput` contém funcionalidades de uma caixa de texto com estilos e controles embutidos para facilitar o desenvolvimento.

Stats

StarsIssuesVersionUpdatedCreatedSize
@mamba/input
3.8.46 days ago3 years agoMinified + gzip package size for @mamba/input in KB

Readme

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';

Keyboard

import KeyboardInput from '@mamba/input/Keyboard.html';

NumericKeyboard

import NumericKeyboard from '@mamba/input/NumericKeyboard.html';
Parâmetross 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

Money

Parâmetross Descrição Tipo Padrão
cents 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

Keyboard

Parâmetross Descrição Tipo Padrão
maxLength Limita o número de caracteres do teclado number 30

NumericKeyboard

Parâmetross Descrição Tipo Padrão
type Define qual o tipo de teclado deve ser renderizado string null
isFocused Define se o teclado deve ou não começar aberto 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 = {
  cents: number; // Valor em centavos
  formatted: string; // Valor formatado na moeda
  isValid: boolean; // Representa o valor da validação (se houver)
}

<NumericKeyboard ... on:event="..." />

Eventos Disparado quando ... Tipo
submit Dispara quando o botão de confirmação for selecionado. function(event)
addInput Envia os botões de operação matematica selecionado function(event)

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: ... }).

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.