Vitral 0.2
Formulário

InputNumber

Uma caixa de número com botões de passo, limitada a um intervalo e formatada no locale, como decimal, moeda ou porcentagem.

Testado com WAI-ARIA

Importação

main.ts
import { InputNumber } from '@vitral/vue';

Básico

Value: 3
<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const quantity = ref<number | null>(3);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="in-qty">Quantity</Label>        <InputNumber id="in-qty" v-model="quantity" :min="0" :max="99" placeholder="0" />        <small style="color: var(--vt-text-muted-color)">Value: {{ quantity ?? 'null' }}</small>    </StackPanel></template>

Formatos

Moeda, porcentagem, um sufixo e um número fixo de casas, cada um lido de volta corretamente quando digitado.

Value: 1299.9
Value: 49.99
Value: 0.8
Value: 12.5
<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const price = ref<number | null>(1299.9);const dollars = ref<number | null>(49.99);const opacity = ref<number | null>(0.8);const distance = ref<number | null>(12.5);</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-brl">Preço (pt-BR)</Label>            <InputNumber id="in-brl" v-model="price" mode="currency" currency="BRL" locale="pt-BR" />            <small style="color: var(--vt-text-muted-color)">Value: {{ price ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-usd">Price (en-US)</Label>            <InputNumber id="in-usd" v-model="dollars" mode="currency" currency="USD" locale="en-US" />            <small style="color: var(--vt-text-muted-color)">Value: {{ dollars ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-opacity">Opacity</Label>            <InputNumber id="in-opacity" v-model="opacity" mode="percent" :min="0" :max="1" :step="0.05" />            <small style="color: var(--vt-text-muted-color)">Value: {{ opacity ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-distance">Distance</Label>            <InputNumber id="in-distance" v-model="distance" suffix=" km" :min-fraction-digits="1" :max-fraction-digits="1" :step="0.5" />            <small style="color: var(--vt-text-muted-color)">Value: {{ distance ?? 'null' }}</small>        </StackPanel>    </StackPanel></template>

Botões de incremento

Stacked põe o de subir sobre o de descer no fim do campo; horizontal põe o menos e o mais um de cada lado. Segure um botão para continuar avançando.

<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const rating = ref<number | null>(4);const width = ref<number | null>(320);</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-rating">Rating (stacked)</Label>            <InputNumber id="in-rating" v-model="rating" show-buttons :min="1" :max="5" />        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-width">Width (horizontal)</Label>            <InputNumber id="in-width" v-model="width" show-buttons button-layout="horizontal" :step="10" :min="0" suffix=" px" />        </StackPanel>    </StackPanel></template>

Tamanhos, variantes e estados

<script setup lang="ts">import { InputNumber } from '@vitral/vue';</script> <template>    <InputNumber :model-value="1" show-buttons size="small" aria-label="Small" />    <InputNumber :model-value="2" show-buttons aria-label="Normal" />    <InputNumber :model-value="3" show-buttons size="large" aria-label="Large" />    <InputNumber :model-value="4" variant="filled" aria-label="Filled" />    <InputNumber :model-value="5" invalid aria-label="Invalid" />    <InputNumber :model-value="6" show-buttons disabled aria-label="Disabled" />    <InputNumber :model-value="7" show-buttons readonly aria-label="Read only" /></template>

API

Lido de packages/vue/src/components/InputNumber/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
minnumber—
maxnumber—
stepnumberO que uma seta ou um botão de incremento soma ou subtrai; PageUp/PageDown movem dez vezes isso. O padrão é 1.
mode'decimal' | 'currency' | 'percent'—
currencystringCódigo ISO 4217, como `BRL`; obrigatório com `mode: 'currency'`.
localestringUma tag BCP 47 para o formato do número. O padrão é o `code` do locale do Vitral.
minFractionDigitsnumber—
maxFractionDigitsnumber—
useGroupingbooleanSeparadores de milhar. O padrão é true.
prefixstringTexto antes do número, como `≈ `; faz parte da exibição, não do valor.
suffixstringTexto depois do número, como ` km`.
showButtonsbooleanBotões de incremento.
buttonLayout'stacked' | 'horizontal'`stacked` põe mais sobre menos no fim do campo; `horizontal` põe menos antes do número e mais depois.
allowEmptybooleanSe apagar o texto deixa o valor vazio (`null`). O padrão é true; com false, um campo esvaziado volta ao último valor.
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
inputevent: InputNumberInputEventToda edição, digitada ou incrementada, antes de o valor ser confirmado no blur ou com Enter.
focusevent: FocusEvent—
blurevent: FocusEvent—

Usado nestes templates