SMoneyField <s-money-field>

Um campo numérico para valores monetários. SMoneyField é o wrapper de Vue 3 tipado do web component <s-money-field> do Shopify Polaris.

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

Boas práticas

• Defina min e max com limites realistas. Por exemplo, o preço de um produto pode usar um min de 0.01 para não ser zero, um desconto pode ir de 0 até o total do pedido e um reembolso pode ser limitado ao valor pago. Sempre confira os valores também com as suas regras de negócio.
• Informe o limite exato em error. Em vez de "Valor inválido", diga algo como "O preço deve ser de pelo menos $0.01" para que os lojistas saibam qual restrição violaram.
• Não coloque símbolos de moeda em label e placeholder. Adicionar "$" ou algo semelhante pode conflitar com a formatação de moeda que o campo já faz.
• Rotule o valor pela finalidade. "Preço base do produto" ou "Valor do desconto" diz mais aos lojistas do que "Valor" ou "Preço".
• Preencha value ao editar. Mostre o valor atual quando ele já existir; para novas entradas, considere um padrão sensato como 0.00 ou um preço típico.

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

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

Exemplo

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 em <SMoneyField> se vincula à propriedade value e escuta o event DOM input.

<SMoneyField v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
autocomplete	string	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.
currencyCode	"auto" | "USD" | "EUR" | "GBP" | "CAD" | "AFN" | "ALL" | "DZD" … (154 more)	O código de moeda do campo. Quando definido como 'auto', o campo exibe o código de moeda da loja. Se a loja não tiver nenhum código de moeda definido, resolve para 'XXX', o valor explícito de ausência. Este valor corresponde ao código de moeda global da loja, então, se você precisar saber o código de moeda do campo, pode ler o valor nessas APIs.
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.
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.
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.
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 <SMoneyField>.

Slots

Slot	Descrição
details
error