SNumberField <s-number-field>

Um campo numérico com mínimo, máximo e incremento opcionais. SNumberField é o wrapper de Vue 3 tipado do web component <s-number-field> do Shopify Polaris.

import { SNumberField } from 'polaris-vue-elements'

Boas práticas

• Use apenas para valores puramente numéricos. Recorra a ele para coisas como quantidades, medidas ou porcentagens. Se um valor puder incluir letras ou símbolos, como um código de produto ou um número de telefone, use STextField no lugar.
• Mostre a unidade. Use prefix ou suffix para indicar o que o número mede, para que os lojistas não fiquem tentando adivinhar se estão digitando dólares, quilos ou uma porcentagem.
• Defina limites que correspondam às suas regras de negócio. Atribua a min e max valores que reflitam o que é realmente permitido, o que orienta os lojistas a fazer entradas válidas antes de enviar o formulário.
• Valide e explique os erros. Verifique cada entrada numérica e, quando uma falhar, use error para dizer exatamente o que está errado e como corrigir, em vez de mostrar uma mensagem genérica.

<SNumberField label="Discount" suffix="%" :min="0" :max="100" />

Veja as boas práticas da Shopify para <s-number-field> (em inglês) para todas as recomendações.

Exemplo

Value: 1

<script setup>
import { ref } from 'vue'
import { SNumberField } from 'polaris-vue-elements'

const value = ref('1')
</script>

<template>
  <SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model em <SNumberField> se vincula à propriedade value e escuta o event DOM input.

<SNumberField v-model="value" />

equivale a:

<SNumberField :value="value" @input="value = $event.target.value" />

Props

Prop	Tipo	Descrição
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	Uma indicação sobre o conteúdo esperado do campo. Quando definida como on (o padrão), esta propriedade indica que o campo deve oferecer suporte ao preenchimento automático, mas você não tem mais informações semânticas sobre o conteúdo esperado. Quando definida como off, você indica que este campo contém informações confidenciais ou conteúdo que nunca é salvo, como códigos de uso único. Como alternativa, você pode fornecer um valor que descreva os dados específicos que deseja que sejam inseridos neste campo durante o preenchimento automático.
defaultValue	string	O valor padrão do campo.
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o campo, impedindo qualquer interação.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
id	string	Um identificador exclusivo para o elemento.
inputMode	"decimal" | "numeric"	O tipo de teclado virtual a ser exibido em dispositivos móveis. - decimal: mostra um teclado numérico com separador decimal, adequado para preços ou medidas. - numeric: mostra um teclado numérico sem separador decimal, adequado para números inteiros, como quantidades. Saiba mais sobre o atributo inputmode.
label	any	Conteúdo usado como rótulo do campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
max	number	O maior número decimal ou inteiro aceito pelo campo. Quando usado com step, o valor é arredondado para baixo até o número máximo. Observação: o usuário ainda poderá usar o teclado para inserir um número maior que o máximo. Cabe ao desenvolvedor adicionar a validação adequada.
min	number	O menor número decimal ou inteiro aceito pelo campo. Quando usado com step, o valor é arredondado para cima até o número mínimo. Observação: o usuário ainda poderá usar o teclado para inserir um número menor que o mínimo. Cabe ao desenvolvedor adicionar a validação adequada.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
placeholder	string	Uma breve indicação que descreve o valor esperado do campo.
prefix	string	Um valor exibido logo antes da parte editável do campo. É útil para exibir uma parte implícita do valor, como "https://" ou "+353". O usuário não pode editá-lo, e ele não é incluído no valor do campo. Ele pode não ser exibido até que o usuário interaja com o campo. Por exemplo, um rótulo em linha pode ocupar o lugar do prefixo até que o usuário coloque o foco no campo.
readOnly	boolean	O campo não pode ser editado pelo usuário. Ele pode receber foco e é anunciado pelos leitores de tela.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
step	number	O quanto o valor pode aumentar ou diminuir. Pode ser um número inteiro ou decimal. Se max ou min for especificado junto com step, ao aumentar ou diminuir o valor pelos botões, o valor final sempre será arredondado para max ou min, e não para o valor válido mais próximo.
suffix	string	Um valor exibido logo após a parte editável do campo. É útil para exibir uma parte implícita do valor, como "@shopify.com" ou "%". O usuário não pode editá-lo, e ele não é incluído no valor do campo. Ele pode não ser exibido até que o usuário interaja com o campo. Por exemplo, um rótulo em linha pode ocupar o lugar do sufixo até que o usuário coloque o foco no campo.
value	string

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escute-os com listeners no estilo @blur em <SNumberField>.

Slots

Slot	Descrição
details
error