SNumberField <s-number-field>

Un campo numérico con mínimo, máximo y paso opcionales. SNumberField es el wrapper de Vue 3 tipado del web component <s-number-field> de Shopify Polaris.

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

Buenas prácticas

• Úsalo solo para valores puramente numéricos. Recurre a él para cosas como cantidades, medidas o porcentajes. Si un valor puede incluir letras o símbolos, como un código de producto o un número de teléfono, usa STextField en su lugar.
• Muestra la unidad. Usa prefix o suffix para indicar qué mide el número, de modo que los comerciantes no tengan que adivinar si están escribiendo dólares, kilogramos o un porcentaje.
• Define límites acordes con tus reglas de negocio. Asigna a min y max valores que reflejen lo que realmente está permitido, lo que orienta a los comerciantes hacia entradas válidas antes de enviar el formulario.
• Valida y explica los errores. Comprueba cada entrada numérica y, cuando una falle, usa error para indicar exactamente qué está mal y cómo corregirlo en lugar de mostrar un mensaje genérico.

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

Consulta las buenas prácticas de Shopify para <s-number-field> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SNumberField> se vincula a la propiedad value y escucha el event DOM input.

<SNumberField v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	Una indicación sobre el contenido previsto del campo. Cuando se establece en on (el valor predeterminado), esta propiedad indica que el campo debe admitir el autocompletado, pero no tienes más información semántica sobre el contenido previsto. Cuando se establece en off, indicas que este campo contiene información confidencial o contenido que nunca se guarda, como los códigos de un solo uso. Como alternativa, puedes proporcionar un valor que describa los datos concretos que quieres que se introduzcan en este campo durante el autocompletado.
defaultValue	string	El valor predeterminado del campo.
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Desactiva el campo e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
id	string	Un identificador único para el elemento.
inputMode	"decimal" | "numeric"	El tipo de teclado virtual que se muestra en dispositivos móviles. - decimal: muestra un teclado numérico con separador decimal, adecuado para precios o medidas. - numeric: muestra un teclado numérico sin separador decimal, adecuado para números enteros como cantidades. Más información sobre el atributo inputmode.
label	any	Contenido que se usa como etiqueta del campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
max	number	El número decimal o entero más alto que acepta el campo. Cuando se usa con step, el valor se redondea hacia abajo hasta el número máximo. Nota: el usuario aún podrá usar el teclado para introducir un número mayor que el máximo. Corresponde al desarrollador añadir la validación adecuada.
min	number	El número decimal o entero más bajo que acepta el campo. Cuando se usa con step, el valor se redondea hacia arriba hasta el número mínimo. Nota: el usuario aún podrá usar el teclado para introducir un número inferior al mínimo. Es responsabilidad del desarrollador añadir la validación adecuada.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
placeholder	string	Una breve indicación que describe el valor esperado del campo.
prefix	string	Un valor que se muestra justo antes de la parte editable del campo. Es útil para mostrar una parte implícita del valor, como "https://" o "+353". El usuario no puede editarlo y no se incluye en el valor del campo. Es posible que no se muestre hasta que el usuario haya interactuado con el campo. Por ejemplo, una etiqueta en línea puede ocupar el lugar del prefijo hasta que el usuario enfoque el campo.
readOnly	boolean	El usuario no puede editar el campo. Puede recibir el foco y los lectores de pantalla lo anuncian.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
step	number	La cantidad en la que el valor puede aumentar o disminuir. Puede ser un número entero o decimal. Si se especifica max o min junto con step, al aumentar o disminuir el valor con los botones, el valor final siempre se redondeará a max o min en lugar de a la cantidad válida más cercana.
suffix	string	Un valor que se muestra justo después de la parte editable del campo. Es útil para mostrar una parte implícita del valor, como "@shopify.com" o "%". El usuario no puede editarlo y no se incluye en el valor del campo. Es posible que no se muestre hasta que el usuario haya interactuado con el campo. Por ejemplo, una etiqueta en línea puede ocupar el lugar del sufijo hasta que el usuario enfoque el campo.
value	string

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escúchalos con listeners del estilo @blur en <SNumberField>.

Slots

Slot	Descripción
details
error