LxInputNumber

Visão geral

O componente LxInputNumber é utilizado para exibir um campo de entrada de números com diversas opções de personalização, incluindo rótulo, mensagens de erro, texto de ajuda, e validações. Ele também suporta slots para customização do conteúdo do rótulo, mensagem de erro e texto de ajuda.

O LxInputNumber utiliza a biblioteca Vue Money 3, para mais informações consulte a documentação.

Number

Decimal

Money

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxInputNumber } from '@lde/lxcomponents';
import { LxInputDecimal } from '@lde/lxcomponents';
import { LxInputMoney } from '@lde/lxcomponents';

const numberValue = ref(5);
const moneyValue = ref(5.5);
const decimalValue = ref(5.5);
</script>

<template>
	<div class="container">
		<LxInputNumber id="input-number-example" label="Number" v-model="numberValue" />
		<LxInputDecimal id="input-decimal-example" label="Decimal" v-model="decimalValue" />
		<LxInputMoney id="input-money-example" label="Money" v-model="moneyValue" />
	</div>
</template>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0;
}
</style>

Variações

Variação	Descrição
LxInputMoney	Variação do LxInputNumber pré configurada para lidar com moedas.
LxInputDecimal	Variação do LxInputNumber pré configurada para lidar com decimais.

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do campo de entrada.	String	Required
modelValue	Valor do campo de entrada. . Nota: Utilizar a implementação padrão com o v-model.	String ou Number	Required
label	Rótulo do campo de entrada.	String	''
errorText	Texto de erro exibido quando o campo é inválido.	String	''
isInvalid	Indica se o campo está em estado inválido.	Boolean	false
helpText	Texto de ajuda exibido abaixo do campo de entrada.	String	''
required	Indica se o campo é obrigatório.	Boolean	false
size	Tamanho do campo de entrada ('sm', 'md', 'lg').	String	'md'
fluid	Determina se o componente deve ocupar toda a largura disponível.	Boolean	true
precision	Número de casas decimais para o valor.	Number	0
prefix	Texto exibido antes do valor numérico.	String	''
suffix	Texto exibido depois do valor numérico.	String	''
masked	Define se o valor com máscara deve ser salvo no modelValue.	Boolean	false
allowNegative	Permite a inserção de valores negativos.	Boolean	false
min	Valor mínimo permitido.	Number	null
max	Valor máximo permitido.	Number	null
allowBlank	Permite que o campo fique em branco.	Boolean	true
minLength	Número mínimo de caracteres exigidos.	Number	0
shouldRound	Determina se o valor inicial do modelValue deve ser arredondado.	Boolean	false
focusOnRight	Posiciona o cursor à direita quando o campo recebe foco.	Boolean	false

Eventos

Nome	Descrição
update:modelValue	Emitido quando o valor do campo de entrada é atualizado. Nota: Utilizar a implementação padrão com o v-model.

Slots

Nome	Descrição
label-content	Conteúdo personalizado para o rótulo do campo de entrada.
error-content	Conteúdo personalizado para a mensagem de erro.
help-content	Conteúdo personalizado para o texto de ajuda.

Atributos

O componente LxInputNumber permite que você passe atributos personalizados para o campo de entrada utilizando fallthrough attributes do Vue. Isso é feito através do uso de useAttrs para herdar atributos não definidos nas propriedades.

Todos os atributos herdados por padrão serão passados diretamente para o input, com excessão dos atributos disponíveis definidos abaixo.

Atributos Disponíveis

Atributo	Descrição
attrs-wrapper	Atributos personalizados para o wrapper do componente.
attrs-label	Atributos personalizados para a label.
attrs-invalid	Atributos personalizados para a mensagem de erro.
attrs-help	Atributos personalizados para o texto de ajuda.

Exemplo de Uso

Você pode passar atributos personalizados os elementos que compoe o InputNumber. Veja um exemplo abaixo:

Clique para visualizar o código

<template>
	<!-- As propriedades { id: 'custom-id', class: 'custom-class', disabled: true } seriam inseridas como atributos do botão de help.  -->
	<LxInputNumber :attrs-help="{ id: 'custom-id', class: 'custom-class', disabled: true }" />

	<!-- O atributo "aria-label" não é uma propriedade explicitamente declarada no componente. Logo a mesma seria inserida no elemento do input  -->
	<LxInputNumber aria-label="false" />
</template>

Classes Padrão

O componente LxInputNumber utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do campo de entrada usando :deep com a classe desejada.

Nome	Descrição
lx-input-number-wrapper	Conteúdo personalizado para o container.
lx-input-number-label	Conteúdo personalizado para o rótulo.
lx-input-number	Conteúdo personalizado para o input.
lx-input-number-invalid-message	Conteúdo personalizado para a mensagem de erro.
lx-input-number-help-message	Conteúdo personalizado para o texto de ajuda.

Exemplo de Personalização

Você pode personalizar o estilo do campo de entrada utilizando as classes padrão com o seletor :deep. Veja um exemplo de como alterar o estilo do rótulo do campo de entrada:

Clique para visualizar o código

<style scoped>
:deep(.lx-input-number-label) {
  color: #007bff;
  font-weight: bold;
}
</style>

Playground

Exemplo de Rótulo Texto de ajuda

---

ID:

Valor:

Rótulo:

Tamanho:SmallMediumLarge

Texto de Erro:

Texto de Ajuda:

Mínimo de Caracteres:

Casas Decimais:

Prefixo:

Sufixo:

Valor Mínimo:

Valor Máximo:

Obrigatório

Inválido

Usar Máscara

Fluido

Desabilitar Negativo

Permitir Vazio

Arredondar

Foco à Direita