SMoneyField `<s-money-field>`

金額を入力するための数値入力。 SMoneyField は、Shopify Polaris の <s-money-field> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

min と max を現実的な範囲に設定する。 たとえば、商品価格は 0 にならないよう min を 0.01 にし、割引は 0 から注文合計までの範囲にし、返金は支払額を上限にできます。値は必ずビジネスルールとも照らし合わせて確認してください。
error では具体的な制限を示す。 「Invalid amount」ではなく、「Price must be at least $0.01」のように伝え、どの制約に違反したのかをマーチャントがわかるようにします。
label と placeholder に通貨記号を入れない。 「$」などを追加すると、フィールドがすでに行っている通貨の書式設定と競合することがあります。
金額の用途をラベルにする。 「Product base price」や「Discount amount」は、「Amount」や「Price」よりも多くをマーチャントに伝えます。
編集時は value をあらかじめ入れておく。 既存の値には現在の金額を表示し、新規入力では 0.00 や一般的な価格など、妥当なデフォルト値を検討します。

vue

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

詳しいガイダンスについては、<s-money-field> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Value: (empty)

vue

<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

<SMoneyField> の v-model は value プロパティにバインドされ、input DOM イベントを監視します。

template

<SMoneyField v-model="value" />

これは次と同等です：

template

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

Props

Prop	型	説明
`autocomplete`	`string`	フィールドに入力される内容のヒントです。`on`（デフォルト）に設定すると、フィールドがオートフィルをサポートすべきであることを示しますが、想定される内容についてそれ以上の意味的な情報はありません。`off` に設定すると、このフィールドに機密情報、またはワンタイムコードのように保存されることのない内容が含まれることを示します。あるいは、オートフィル時にこのフィールドに入力してほしい具体的なデータを表す値を指定することもできます。
`currencyCode`	`"auto" \| "USD" \| "EUR" \| "GBP" \| "CAD" \| "AFN" \| "ALL" \| "DZD" … (154 more)`	フィールドの通貨コードです。'auto' に設定すると、フィールドにはストアの通貨コードが表示されます。ストアに通貨コードが設定されていない場合は、明示的な「値なし」を表す 'XXX' になります。この値はストアのグローバル通貨コードと一致するため、フィールドの通貨コードを知る必要がある場合は、それらの API から値を読み取ることができます。
`defaultValue`	`string`	フィールドのデフォルト値です。
`details`	`any`	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
`disabled`	`boolean`	フィールドを無効にし、あらゆる操作を受け付けないようにします。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`id`	`string`	要素の一意な識別子です。
`label`	`any`	フィールドのラベルとして使用するコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`max`	`number`	フィールドで受け付ける最大の小数または整数です。`step` と併用すると、値は max の数値に切り下げられます。注意: ユーザーはキーボードを使って max より大きい数値を入力することもできます。適切なバリデーションを追加するのは開発者の責任です。
`min`	`number`	フィールドで受け付ける最小の小数または整数です。`step` と併用すると、値は min の数値に切り上げられます。注意: ユーザーはキーボードを使って min より小さい数値を入力することもできます。適切なバリデーションを追加するのは開発者の責任です。
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`placeholder`	`string`	フィールドに期待される値を説明する短いヒントです。
`readOnly`	`boolean`	ユーザーはフィールドを編集できません。フォーカスは可能で、スクリーンリーダーによって読み上げられます。
`required`	`boolean`	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、`error` プロパティを使用してください。
`value`	`string`

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Events

Event	型
`blur`	`FocusEvent`
`change`	`Event`
`focus`	`FocusEvent`
`input`	`Event`

これらのイベントは <SMoneyField> 上で @blur 形式のリスナーで受け取れます。

Slots

Slot	説明
`details`
`error`

SMoneyField <s-money-field> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​