SMoneyField <s-money-field>

Un campo numérico para importes monetarios. SMoneyField es el wrapper de Vue 3 tipado del web component <s-money-field> de Shopify Polaris.

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

Buenas prácticas

• Define min y max con límites realistas. Por ejemplo, el precio de un producto puede usar un min de 0.01 para que no pueda ser cero, un descuento puede ir de 0 al total del pedido y un reembolso puede limitarse al importe pagado. Comprueba siempre también los valores con tus reglas de negocio.
• Indica el límite exacto en error. En lugar de "Invalid amount", escribe algo como "Price must be at least $0.01" para que los comerciantes sepan qué restricción no han cumplido.
• No incluyas símbolos de moneda en label ni en placeholder. Añadir "$" o un símbolo similar puede entrar en conflicto con el formato de moneda que el campo ya gestiona.
• Nombra el importe según su propósito. "Product base price" o "Discount amount" dicen más a los comerciantes que "Amount" o "Price".
• Rellena previamente value al editar. Muestra el importe actual para los valores existentes; para las entradas nuevas, considera un valor predeterminado razonable como 0.00 o un precio habitual.

<SMoneyField label="Product base price" :min="0.01" />

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

Ejemplo

Value: (empty)

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

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

<template>
  <SMoneyField label="Price" currencyCode="USD" placeholder="0.00" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model en <SMoneyField> se vincula a la propiedad value y escucha el event DOM input.

<SMoneyField v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
autocomplete	string	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.
currencyCode	"auto" | "USD" | "EUR" | "GBP" | "CAD" | "AFN" | "ALL" | "DZD" … (154 more)	El código de moneda del campo. Cuando se establece en 'auto', el campo muestra el código de moneda de la tienda. Si la tienda no tiene ningún código de moneda establecido, se resuelve como 'XXX', el valor explícito de ausencia. Este valor coincide con el código de moneda global de la tienda, así que si necesitas conocer el código de moneda del campo, puedes leer el valor desde esas API.
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.
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.
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.
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 <SMoneyField>.

Slots

Slot	Descripción
details
error