diff --git a/.changeset/spicy-terms-prove.md b/.changeset/spicy-terms-prove.md new file mode 100644 index 000000000..ac9b3b963 --- /dev/null +++ b/.changeset/spicy-terms-prove.md @@ -0,0 +1,5 @@ +--- +"vue-demo-store": minor +--- + +Move AccountAddressForm to the shareable components folder diff --git a/templates/vue-demo-store/components/account/AccountAddressCard.vue b/templates/vue-demo-store/components/account/AccountAddressCard.vue index 25b88c4c1..fb60c6cf7 100644 --- a/templates/vue-demo-store/components/account/AccountAddressCard.vue +++ b/templates/vue-demo-store/components/account/AccountAddressCard.vue @@ -83,7 +83,7 @@ const addAddressModalController = useModal(); @click.prevent="addAddressModalController.open" /> - import { useVuelidate } from "@vuelidate/core"; -import { required, minLength, sameAs } from "@vuelidate/validators"; +import { customValidators } from "@/i18n/utils/i18n-validators"; +const { required, minLength, sameAs } = customValidators(); const emits = defineEmits<{ (e: "success"): void; }>(); diff --git a/templates/vue-demo-store/components/account/AccountPersonalData.vue b/templates/vue-demo-store/components/account/AccountPersonalData.vue index b4195929a..5ed3bd640 100644 --- a/templates/vue-demo-store/components/account/AccountPersonalData.vue +++ b/templates/vue-demo-store/components/account/AccountPersonalData.vue @@ -1,13 +1,8 @@ + + diff --git a/templates/vue-demo-store/i18n/de-DE/de-DE.ts b/templates/vue-demo-store/i18n/de-DE/de-DE.ts index 46f3c7562..4eadfc660 100644 --- a/templates/vue-demo-store/i18n/de-DE/de-DE.ts +++ b/templates/vue-demo-store/i18n/de-DE/de-DE.ts @@ -8,6 +8,7 @@ import cart from "./cart.json"; import listing from "./listing.json"; import product from "./product.json"; import newsletter from "./newsletter.json"; +import validations from "./validations.json"; export default Object.assign( account, @@ -20,4 +21,5 @@ export default Object.assign( listing, product, newsletter, + validations, ); diff --git a/templates/vue-demo-store/i18n/de-DE/validations.json b/templates/vue-demo-store/i18n/de-DE/validations.json new file mode 100644 index 000000000..f7d593cac --- /dev/null +++ b/templates/vue-demo-store/i18n/de-DE/validations.json @@ -0,0 +1,24 @@ + +{ + "validations": { + "alpha": "Der Wert ist nicht alphabetisch", + "alphaNum": "Der Wert muss alphanumerisch sein", + "between": "Der Wert muss zwischen {min} und {max} liegen", + "decimal": "Der Wert muss dezimal sein", + "email": "Der Wert ist keine gültige E-Mail-Adresse", + "integer": "Der Wert ist keine ganze Zahl", + "ipAddress": "Der Wert ist keine gültige IP-Adresse", + "macAddress": "Der Wert ist keine gültige MAC-Adresse", + "maxLength": "Die maximale Länge beträgt {max}", + "minLength": "Mindestlänge {min}", + "minValue": "Der kleinste erlaubte Wert ist {min}", + "not": "Der Wert entspricht dem angegebenen Validierer nicht", + "numeric": "Der Wert muss numerisch sein", + "or": "Der Wert entspricht keinem der angegebenen Validierer", + "required": "Der Wert ist erforderlich", + "requiredIf": "Der Wert ist erforderlich", + "requiredUnless": "Der Wert ist erforderlich", + "sameAs": "Der Wert muss dem Wert {otherName} entsprechen", + "url": "Der Wert ist keine gültige URL-Adresse" + } +} diff --git a/templates/vue-demo-store/i18n/en-GB/en-GB.ts b/templates/vue-demo-store/i18n/en-GB/en-GB.ts index 46f3c7562..4eadfc660 100644 --- a/templates/vue-demo-store/i18n/en-GB/en-GB.ts +++ b/templates/vue-demo-store/i18n/en-GB/en-GB.ts @@ -8,6 +8,7 @@ import cart from "./cart.json"; import listing from "./listing.json"; import product from "./product.json"; import newsletter from "./newsletter.json"; +import validations from "./validations.json"; export default Object.assign( account, @@ -20,4 +21,5 @@ export default Object.assign( listing, product, newsletter, + validations, ); diff --git a/templates/vue-demo-store/i18n/en-GB/validations.json b/templates/vue-demo-store/i18n/en-GB/validations.json new file mode 100644 index 000000000..bc0239622 --- /dev/null +++ b/templates/vue-demo-store/i18n/en-GB/validations.json @@ -0,0 +1,23 @@ +{ + "validations": { + "alpha": "The value is not alphabetical", + "alphaNum": "The value must be alpha-numeric", + "between": "The value must be between {min} and {max}", + "decimal": "Value must be decimal", + "email": "Value is not a valid email address", + "integer": "Value is not an integer", + "ipAddress": "The value is not a valid IP address", + "macAddress": "The value is not a valid MAC Address", + "maxLength": "The maximum length allowed is {max}", + "minLength": "This minimum length should be at least {min}", + "minValue": "The minimum value allowed is {min}", + "not": "The value does not match the provided validator", + "numeric": "Value must be numeric", + "or": "The value does not match any of the provided validators", + "required": "Value is required", + "requiredIf": "The value is required", + "requiredUnless": "The value is required", + "sameAs": "The value must be equal to the {otherName} value", + "url": "The value is not a valid URL address" + } +} diff --git a/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts b/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts index 7a92b29ef..f05737cc4 100644 --- a/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts +++ b/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts @@ -8,6 +8,7 @@ import cart from "../pl-PL/cart.json"; import listing from "../pl-PL/listing.json"; import product from "../pl-PL/product.json"; import newsletter from "../pl-PL/newsletter.json"; +import validations from "../pl-PL/validations.json"; export default Object.assign( account, @@ -20,4 +21,5 @@ export default Object.assign( listing, product, newsletter, + validations, ); diff --git a/templates/vue-demo-store/i18n/pl-PL/validations.json b/templates/vue-demo-store/i18n/pl-PL/validations.json new file mode 100644 index 000000000..310996d4e --- /dev/null +++ b/templates/vue-demo-store/i18n/pl-PL/validations.json @@ -0,0 +1,23 @@ +{ + "validations": { + "alpha": "Wartość nie jest alfabetyczna", + "alphaNum": "Wartość musi być alfanumeryczna", + "between": "Wartość musi być między {min} a {max}", + "decimal": "Wartość musi być dziesiętna", + "email": "Wartość nie jest prawidłowym adresem e-mail", + "integer": "Wartość nie jest liczbą całkowitą", + "ipAddress": "Wartość nie jest prawidłowym adresem IP", + "macAddress": "Wartość nie jest prawidłowym adresem MAC", + "maxLength": "Maksymalna dozwolona długość to {max}", + "minLength": "Minimalna długość {min}", + "minValue": "Minimalna dozwolona wartość to {min}", + "not": "Wartość nie pasuje do podanego walidatora", + "numeric": "Wartość musi być numeryczna", + "or": "Wartość nie pasuje do żadnego z podanych walidatorów", + "required": "Wartość jest wymagana", + "requiredIf": "Wartość jest wymagana", + "requiredUnless": "Wartość jest wymagana", + "sameAs": "Wartość musi być równa wartości {otherName}", + "url": "Wartość nie jest prawidłowym adresem URL" + } +} diff --git a/templates/vue-demo-store/i18n/utils/i18n-validators.ts b/templates/vue-demo-store/i18n/utils/i18n-validators.ts new file mode 100644 index 000000000..dc42bbf24 --- /dev/null +++ b/templates/vue-demo-store/i18n/utils/i18n-validators.ts @@ -0,0 +1,31 @@ +import * as validators from "@vuelidate/validators"; + +export const customValidators = () => { + const { $i18n } = useNuxtApp(); + const { createI18nMessage } = validators; + const withI18nMessage = createI18nMessage({ t: $i18n.t.bind($i18n) }); + + return { + alpha: withI18nMessage(validators.alpha), + alphaNum: withI18nMessage(validators.alphaNum), + between: withI18nMessage(validators.between, { withArguments: true }), + decimal: withI18nMessage(validators.decimal), + email: withI18nMessage(validators.email), + integer: withI18nMessage(validators.integer), + ipAddress: withI18nMessage(validators.ipAddress), + macAddress: withI18nMessage(validators.macAddress), + maxLength: withI18nMessage(validators.maxLength, { withArguments: true }), + minLength: withI18nMessage(validators.minLength, { withArguments: true }), + minValue: withI18nMessage(validators.minValue, { withArguments: true }), + not: withI18nMessage(validators.not, { withArguments: true }), + numeric: withI18nMessage(validators.numeric), + or: withI18nMessage(validators.or, { withArguments: true }), + required: withI18nMessage(validators.required), + requiredIf: withI18nMessage(validators.requiredIf, { withArguments: true }), + requiredUnless: withI18nMessage(validators.requiredUnless, { + withArguments: true, + }), + sameAs: withI18nMessage(validators.sameAs, { withArguments: true }), + url: withI18nMessage(validators.url), + }; +}; diff --git a/templates/vue-demo-store/pages/account/address.vue b/templates/vue-demo-store/pages/account/address.vue index ea2671f1a..ef3fc1d69 100644 --- a/templates/vue-demo-store/pages/account/address.vue +++ b/templates/vue-demo-store/pages/account/address.vue @@ -72,7 +72,7 @@ onBeforeMount(async () => { {{ $t("account.addressAddNew") }} - + diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue index 379a66b54..a1c289216 100644 --- a/templates/vue-demo-store/pages/checkout/index.vue +++ b/templates/vue-demo-store/pages/checkout/index.vue @@ -5,9 +5,11 @@ export default {