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.

Formato do v-model

⚠️ O v-model é obrigatório (required: true). O tipo da saída depende da prop masked.

masked	Tipo emitido	Exemplo
false (padrão)	Number	1234.56
true	String (formatada)	"1.234,56"

Inicialização:

const preco = ref(null)    // null para campo vazio
const quantidade = ref(0)  // 0 quando o campo não pode ser nulo

Saída:

// masked: false (padrão)
preco.value   // → 1234.56 (Number)

// masked: true
preco.value   // → "1.234,56" (String com máscara)

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
clearable	Adiciona um x no canto direito para apagar o conteúdo do campo quando tiver conteúdo	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

Limpar

Desabilitar Negativo

Permitir Vazio

Arredondar

Foco à Direita