Number Field

Campo numérico com controles de incremento/decremento, formatação PT-BR e hold-to-repeat.

Uso

<script setup lang="ts">
import { NumberField } from '@halfbyte-labs/maka'
import { ref } from 'vue'

const quantidade = ref(1)
</script>

<template>
  <NumberField v-model="quantidade" label="Quantidade" :min="1" :max="100" />
</template>

Exemplos

Padrão (steppers right)

<NumberField label="Padrão" :default-value="5" />
<NumberField label="Com limites" :default-value="3" :min="1" :max="10" />
<NumberField label="Passo 0,5" :default-value="2.5" :step="0.5" />
<NumberField label="Prefixo R$" prefix="R$" :default-value="49.90" :step="0.01" />
<NumberField label="Sufixo %" suffix="%" :default-value="75" :min="0" :max="100" />

Layouts de stepper

<NumberField label="right"   steppers="right"   :default-value="5" />
<NumberField label="split"   steppers="split"   :default-value="3" />
<NumberField label="stacked" steppers="stacked" :default-value="10" />
<NumberField label="none"    steppers="none"    placeholder="Digite um número" />

Tamanhos

<NumberField size="sm" :default-value="1" />
<NumberField size="md" :default-value="1" />
<NumberField size="lg" :default-value="1" />

Cores de stepper

<NumberField stepper-color="black" :default-value="1" />
<NumberField stepper-color="blue"  :default-value="1" />
<NumberField stepper-color="lime"  :default-value="1" />
<NumberField :ghost="true" stepper-color="blue" :default-value="1" />

Estados

<NumberField label="Desabilitado"  :disabled="true" :default-value="5" />
<NumberField label="Somente leitura" :read-only="true" :default-value="42" />
<NumberField label="Erro"   :error="true" error-message="Valor fora do intervalo" />
<NumberField label="Sucesso" :success="true" hint="Código válido" :default-value="7" />

Props

Prop	Tipo	Padrão
modelValue	number | null	—
defaultValue	number | null	null
min	number	-Infinity
max	number	Infinity
step	number	1
precision	number	inferido de step
size	'sm' | 'md' | 'lg'	'md'
steppers	'right' | 'split' | 'stacked' | 'none'	'right'
stepperColor	'black' | 'blue' | 'lime'	'black'
ghost	boolean	false
prefix	string	—
suffix	string	—
label	string	—
hint	string	—
errorMessage	string	—
disabled	boolean	false
readOnly	boolean	false
error	boolean	false
success	boolean	false
placeholder	string	—
inputMode	'numeric' | 'decimal'	inferido
name	string	—
id	string	—
formatValue	(n: number) => string	PT-BR locale
parseValue	(s: string) => number | null	PT-BR parser

Events

Evento	Payload	Descrição
update:modelValue	number | null	Emitido ao alterar o valor
change	(value, { source })	Inclui a origem: 'input', 'stepper', 'keyboard', 'wheel', 'blur'

Teclado

Tecla	Ação
↑ / ↓	±step
PageUp/Down	±step × 10
Home	Vai para min
End	Vai para max
Enter	Confirma e desfoca
Esc	Restaura valor anterior e desfoca