12.2.1 • Published 10 months ago

@mamba/input v12.2.1

Weekly downloads
351
License
Apache-2.0
Repository
-
Last release
10 months ago

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';
PropriedadesDescriçãoTipoPadrão
alignAlinha a entrada de acordo com parâmetro (left, right)string'right'
alphanumericDefine o modo de entrada como alfanuméricobooleanfalse
autofocusInicia o elemento com focobooleanfalse
forceFocusForça o foco no elemento de inputbooleanfalse
isFocusedRetorna se o input está focado ou nãobooleanfalse
bgColorCor de Fundo da Caixa de Entradastring (hex)'#fff'
disabledDesabilita a entrada de textobooleanfalse
errorMessageDefine uma mensagem de erro caso a validação falhebooleanfalse
errorColorCor do Texto da Mensagem de Errostring (hex)#d5000
labelTítulo da Caixa de Entradastringundefined
readablePossibilita esconder o texto de Entradabooleanfalse
typeTipo de texto de entrada (password/text)string'text'
textColorCor do Texto da Caixa de Entradastring (hex)'#4a4a4a'
labelColorCor do título do Inputstring (hex)'#4a4a4a'
valueValor de padrão de entradastringfalse
validationAdiciona um método de validaçãofunctionundefined
validateOnDefine em que momento a validação ocorre (input/submit)string'submit'
maskDefine uma máscara para o textostringnull
compactDefine 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.booleanfalse
showPasswordToggleDefine 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.booleanunknown
keyboardOptionsDefine 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

PropriedadesDescriçãoTipoPadrão
valueValor do input em centavosstring or number0
readonlyOnEnterFaz com que o campo se torne somente leitura no keypress do enter e se o valor em centavos for igual a zerobooleanfalse

Eventos

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

EventosDisparado quando ...Tipo
submitA validação( se houver ) do campo for bem-sucedida, quando o campo for submetido.function(event)
submitValidO campo for inválido no momento do submitfunction(event)
submitInvalidO campo for válido no momento do submitfunction(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: ... }).

12.2.1

10 months ago

12.0.0

1 year ago

12.2.0

11 months ago

12.1.0

12 months ago

11.0.3

1 year ago

11.0.2

1 year ago

11.0.1

2 years ago

11.0.0

2 years ago

10.0.1

2 years ago

10.0.2

2 years ago

10.4.1

2 years ago

10.4.2

2 years ago

10.4.3

2 years ago

10.4.4

2 years ago

10.4.5

2 years ago

10.4.0

2 years ago

10.3.0

2 years ago

9.6.0

2 years ago

9.7.0

2 years ago

9.5.0

2 years ago

9.2.1

2 years ago

9.1.0

2 years ago

9.3.1

2 years ago

9.3.0

2 years ago

9.2.0

2 years ago

9.4.1

2 years ago

9.4.0

2 years ago

9.0.3

2 years ago

6.2.1

3 years ago

6.2.0

3 years ago

9.0.2

2 years ago

9.0.1

2 years ago

9.0.0

2 years ago

6.3.0

3 years ago

8.0.1

3 years ago

8.0.0

3 years ago

8.0.2

2 years ago

6.1.2

3 years ago

6.1.3

3 years ago

6.1.0

3 years ago

6.0.2

3 years ago

5.0.0

3 years ago

6.0.1

3 years ago

6.0.0

3 years ago

4.1.4

3 years ago

4.1.5

3 years ago

4.0.2

3 years ago

4.1.3

3 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.0-rc.1

4 years ago

4.0.0-rc.0

4 years ago

3.8.4

4 years ago

3.8.3

4 years ago

3.8.2

4 years ago

3.8.1

4 years ago

3.8.0

4 years ago

3.7.3

4 years ago

3.7.2

4 years ago

3.7.1

4 years ago

3.7.0

4 years ago

3.6.3

4 years ago

3.6.2

4 years ago

3.6.1

4 years ago

3.6.0

4 years ago

3.5.3

4 years ago

3.5.2

4 years ago

3.5.1

4 years ago

3.5.0

4 years ago

3.4.1

4 years ago

3.4.0

4 years ago

3.3.0

4 years ago

3.2.1

4 years ago

3.2.0

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.8

4 years ago

3.0.7

4 years ago

3.0.6

4 years ago

3.0.5

4 years ago

3.0.4

4 years ago

3.0.3

4 years ago

2.40.1

4 years ago

2.40.0

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.37.2

4 years ago

2.37.1

4 years ago

2.37.0

4 years ago

2.36.1

4 years ago

2.36.0

4 years ago

2.34.3

4 years ago

2.34.2

4 years ago

2.34.1

5 years ago

2.34.0

5 years ago

2.33.3

5 years ago

2.33.2

5 years ago

2.33.1

5 years ago

2.33.0

5 years ago

2.32.4

5 years ago

2.32.5

5 years ago

2.32.3

5 years ago

2.32.2

5 years ago

2.32.1

5 years ago

2.32.0

5 years ago

2.31.1

5 years ago

2.31.0

5 years ago

2.30.0

5 years ago

2.29.6

5 years ago

2.29.5

5 years ago

2.29.4

5 years ago

2.29.3

5 years ago

2.28.0

5 years ago

2.27.4

5 years ago

2.27.3

5 years ago

2.27.2

5 years ago

2.27.1

5 years ago

2.27.0

5 years ago

2.26.3

5 years ago

2.26.2

5 years ago

2.26.1

5 years ago

2.26.0

5 years ago

2.25.0

5 years ago

2.23.5

5 years ago

2.23.4

5 years ago

2.23.2

5 years ago

2.23.3

5 years ago

2.23.1

6 years ago

2.23.0

6 years ago

2.22.1

6 years ago

2.18.0

6 years ago

2.17.0

6 years ago

2.16.0

6 years ago

2.14.0

6 years ago

2.13.0

6 years ago

2.12.0

6 years ago

2.11.0

6 years ago

2.10.0

6 years ago

2.9.1

6 years ago

2.9.0

6 years ago

2.8.3

6 years ago

2.8.2

6 years ago

2.8.1

6 years ago

2.7.1

6 years ago

2.7.0

6 years ago

2.6.4

6 years ago

2.6.3

6 years ago

2.6.2

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.5.3

6 years ago

2.5.2

6 years ago

2.5.1

6 years ago

2.5.0

6 years ago

2.4.0

6 years ago

2.2.3

6 years ago

2.2.2

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.0

7 years ago

1.0.0-rc.29

7 years ago

1.0.0-rc.28

7 years ago

1.0.0-rc.27

7 years ago

1.0.0-rc.26

7 years ago

1.0.0-rc.25

7 years ago

1.0.0-rc.24

7 years ago

1.0.0-rc.23

7 years ago

1.0.0-rc.22

7 years ago

1.0.0-rc.21

7 years ago

1.0.0-rc.20

7 years ago

1.0.0-rc.19

7 years ago

1.0.0-rc.18

7 years ago

1.0.0-rc.17

7 years ago

1.0.0-rc.16

7 years ago

1.0.0-rc.15

7 years ago

1.0.0-rc.14

7 years ago

1.0.0-rc.13

7 years ago

1.0.0-rc.12

7 years ago

1.0.0-rc.11

7 years ago

1.0.0-rc.10

7 years ago

1.0.0-rc.9

7 years ago

1.0.0-rc.8

7 years ago

1.0.0-rc.7

7 years ago

1.0.0-rc.6

7 years ago

1.0.0-rc.5

7 years ago

1.0.0-rc.4

7 years ago

1.0.0-rc.3

7 years ago

1.0.0-rc.2

7 years ago

1.0.0-rc.1

7 years ago

1.0.0-prealpha.9

7 years ago

1.0.0-prealpha.8

7 years ago

1.0.0-prealpha.7

7 years ago

1.0.0-prealpha.6

7 years ago

1.0.0-prealpha.5

7 years ago

1.0.0-prealpha.4

7 years ago

1.0.0-prealpha.3

7 years ago

1.0.0-prealpha.2

7 years ago

1.0.0-prealpha.1

7 years ago

0.0.2-alpha.7

7 years ago

0.0.2-alpha.6

7 years ago

0.0.2-alpha.5

7 years ago

0.0.2-alpha.4

7 years ago

0.0.2-alpha.3

7 years ago

0.0.2-alpha.2

7 years ago

0.0.2-alpha.1

7 years ago

0.0.1

7 years ago