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