From ca6bb321e7a6d69d108aec12e786994737987634 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dobromir92@gmail.com>
Date: Wed, 30 Jun 2021 08:58:50 +0300
Subject: [PATCH] feature(core): pass more parameters to `$message` to help
 with i18n support (#881)

* refactor: improve $message to work easier with i18n

* chore: add tests

* docs: add docs about i18n
---
 packages/docs/src/advanced_usage.md           |  62 +++++++++-
 packages/test-project/main.js                 |   2 +
 packages/test-project/package.json            |   1 +
 packages/test-project/src/App.vue             |   1 +
 .../src/components/I18nSimpleForm.vue         | 117 ++++++++++++++++++
 packages/test-project/src/i18n.js             |  23 ++++
 packages/test-project/src/routes.js           |   5 +
 packages/vuelidate/src/core.js                |  19 ++-
 .../test/unit/specs/validation.spec.js        |  48 ++++++-
 yarn.lock                                     |  81 +++++++++++-
 10 files changed, 345 insertions(+), 14 deletions(-)
 create mode 100644 packages/test-project/src/components/I18nSimpleForm.vue
 create mode 100644 packages/test-project/src/i18n.js

diff --git a/packages/docs/src/advanced_usage.md b/packages/docs/src/advanced_usage.md
index 17b8b337..fc25fb06 100644
--- a/packages/docs/src/advanced_usage.md
+++ b/packages/docs/src/advanced_usage.md
@@ -411,9 +411,69 @@ export default {
 To clear out the external results, you can again, use the `$clearExternalResults()` method
 
 ```js
-async function validate() {
+async function validate () {
   this.$v.$clearExternalResults()
   // perform validations
   const result = await this.runAsyncValidators()
 }
 ```
+
+## i18n support
+
+Validator messages are very flexible. You can wrap each validator with your own helper, that returns a translated error message, based on the
+validator name. Let's define a few validators:
+
+```js
+// @/utils/validators.js
+import { withI18nMessage } from '@/utils/withI18nMessage'
+import * as validators from '@vuelidate/validators'
+
+export const required = withI18nMessage(validators.required)
+export const minLength = withI18nMessage(validators.minLength)
+```
+
+Now lets see how that `withI18nMessage` helpers would look like:
+
+```js
+// @/utils/withI18nMessage.js
+import { i18n } from "@/i18n"
+
+const { t } = i18n.global || i18n // this should work for both Vue 2 and Vue 3 versions of vue-i18n
+
+export const withI18nMessage = (validator) => helpers.withMessage((props) => t(`messages.${props.$validator}`, {
+  model: props.$model,
+  property: props.$property,
+  ...props.$params
+}), validator)
+```
+
+We can now use the validators as we normally do
+
+```vue
+
+<script>
+import { required } from '@/utils/validators'
+
+export default {
+  validations () {
+    return {
+      name: { required }
+    }
+  }
+}
+</script>
+```
+
+One drawback is that Vuelidate params passed to `$message` are prefixed with `$`, which Vue-i18n does not allow. So we would have to manually map any
+parameter we need, to a new name parameter without `$`.
+
+We can now define our validator messages, with optional data inside each message.
+
+```json
+{
+  "messages": {
+    "required": "The field {property} is required.",
+    "minLength": "The {property} field has a value of '{model}', but it must have a min length of {min}."
+  }
+}
+```
diff --git a/packages/test-project/main.js b/packages/test-project/main.js
index 2cd9f1cd..f03f8414 100644
--- a/packages/test-project/main.js
+++ b/packages/test-project/main.js
@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import App from './src/App.vue'
 import { router } from './src/router.js'
+import { i18n } from './src/i18n'
 
 const app = createApp(App)
 
 app.use(router)
+app.use(i18n)
 app.mount('#app')
diff --git a/packages/test-project/package.json b/packages/test-project/package.json
index 3656adb6..42852344 100644
--- a/packages/test-project/package.json
+++ b/packages/test-project/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "vue": "^3.0.1",
+    "vue-i18n": "^9.1.6",
     "vue-router": "^4.0.0-beta.6"
   },
   "devDependencies": {
diff --git a/packages/test-project/src/App.vue b/packages/test-project/src/App.vue
index aae744fb..655fe5ad 100644
--- a/packages/test-project/src/App.vue
+++ b/packages/test-project/src/App.vue
@@ -3,6 +3,7 @@
     <div class="navigation">
       <ul>
         <li><router-link to="/">Simple Form</router-link></li>
+        <li><router-link to="/i18n-simple">i18n Simple Form</router-link></li>
         <li><router-link to="/old-api">Old api</router-link></li>
         <li><router-link to="/nested-validations">Nested Validations</router-link></li>
         <li><router-link to="/nested-ref">Nested Ref</router-link></li>
diff --git a/packages/test-project/src/components/I18nSimpleForm.vue b/packages/test-project/src/components/I18nSimpleForm.vue
new file mode 100644
index 00000000..14f12369
--- /dev/null
+++ b/packages/test-project/src/components/I18nSimpleForm.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="SimpleForm">
+    <div class="lang-switcher">
+      Change Language to:
+      <a
+        href="#"
+        @click.prevent="$i18n.locale = 'bg'"
+      >BG</a> |
+      <a
+        href="#"
+        @click.prevent="$i18n.locale = 'en'"
+      >EN</a>
+    </div>
+    <div>
+      <label>name</label>
+      <input
+        v-model="name"
+        type="text"
+      >
+    </div>
+    <div>
+      <label>twitter</label>
+      <input
+        v-model="social.twitter"
+        type="text"
+      >
+    </div>
+    <div>
+      <label>github</label>
+      <input
+        v-model="social.github"
+        type="text"
+      >
+    </div>
+    <button @click="validate">
+      Validate
+    </button>
+    <button @click="v$.$touch">
+      $touch
+    </button>
+    <button @click="v$.$reset">
+      $reset
+    </button>
+    <div style="background: rgba(219, 53, 53, 0.62); color: #ff9090; padding: 10px 15px">
+      <p
+        v-for="(error, index) of v$.$errors"
+        :key="index"
+        style="padding: 0; margin: 5px 0"
+      >
+        {{ error.$message }}
+      </p>
+    </div>
+    <pre>{{ v$ }}</pre>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, computed } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { required, helpers, minLength } from '@vuelidate/validators'
+import { i18n } from '../i18n'
+
+const { global: { t } } = i18n
+const { withAsync } = helpers
+
+const asyncValidator = withAsync((v) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(v === 'aaaa')
+    }, 2000)
+  })
+})
+
+const withI18nMessage = (validator) => helpers.withMessage((props) => t(`messages.${props.$validator}`, {
+  model: props.$model,
+  property: props.$property,
+  ...props.$params
+}), validator)
+
+export default {
+  name: 'I18nForm',
+  setup () {
+    const name = ref('given name')
+    const social = reactive({
+      github: 'hi',
+      twitter: 'hey'
+    })
+
+    let v$ = useVuelidate(
+      {
+        name: {
+          required: withI18nMessage(required),
+          asyncValidator: withI18nMessage(asyncValidator)
+        },
+        social: {
+          github: { minLength: withI18nMessage(minLength(computed(() => social.twitter.length))) },
+          twitter: { minLength: withI18nMessage(minLength(computed(() => name.value.length))) }
+        }
+      },
+      { name, social },
+      { $autoDirty: true }
+    )
+    return { name, v$, social }
+  },
+  methods: {
+    async validate () {
+      const result = await this.v$.$validate()
+      console.log('Result is', result)
+    }
+  }
+}
+</script>
+<style>
+.lang-switcher a {
+  color: white;
+}
+</style>
diff --git a/packages/test-project/src/i18n.js b/packages/test-project/src/i18n.js
new file mode 100644
index 00000000..0681fa03
--- /dev/null
+++ b/packages/test-project/src/i18n.js
@@ -0,0 +1,23 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    messages: {
+      required: '{property} is required',
+      minLength: 'The {property} field has a value of "{model}", but must have a min length of {min}.',
+      asyncValidator: '{property} should equal "aaaa", but it is "{model}".'
+    }
+  },
+  bg: {
+    messages: {
+      required: '{property} e задължително',
+      minLength: 'Полето {property} има стойност "{model}", но трябва да е дълго поне {min} символа.',
+      asyncValidator: '{property} трябва да е "aaaa", но е "{model}".'
+    }
+  }
+}
+
+export const i18n = createI18n({
+  locale: 'en',
+  messages
+})
diff --git a/packages/test-project/src/routes.js b/packages/test-project/src/routes.js
index db83ece9..3c2025b5 100644
--- a/packages/test-project/src/routes.js
+++ b/packages/test-project/src/routes.js
@@ -2,12 +2,17 @@ import SimpleForm from './components/SimpleForm.vue'
 import NestedValidations from './components/NestedValidations.vue'
 import OldApiExample from './components/OldApiExample.vue'
 import ChainOfRefs from './components/ChainOfRefs.vue'
+import I18nSimpleForm from './components/I18nSimpleForm.vue'
 
 export const routes = [
   {
     path: '/',
     component: SimpleForm
   },
+  {
+    path: '/i18n-simple',
+    component: I18nSimpleForm
+  },
   {
     path: '/nested-validations',
     component: NestedValidations
diff --git a/packages/vuelidate/src/core.js b/packages/vuelidate/src/core.js
index 5e304b7c..e4f8e29e 100644
--- a/packages/vuelidate/src/core.js
+++ b/packages/vuelidate/src/core.js
@@ -186,11 +186,14 @@ function createSyncResult (rule, model, $dirty, { $lazy }, $response, instance)
  * @param {NormalizedValidator} rule
  * @param {Ref<*>} model
  * @param {Ref<boolean>} $dirty
- * @param {GlobalConfig} config
- * @param {VueInstance} instance
+ * @param {GlobalConfig} config - Vuelidate config
+ * @param {VueInstance} instance - component instance
+ * @param {string} validatorName - name of the current validator
+ * @param {string} propertyKey - the current property we are validating
+ * @param {string} propertyPath - the deep path to the validated property
  * @return {{ $params: *, $message: Ref<String>, $pending: Ref<Boolean>, $invalid: Ref<Boolean>, $response: Ref<*>, $unwatch: WatchStopHandle }}
  */
-function createValidatorResult (rule, model, $dirty, config, instance) {
+function createValidatorResult (rule, model, $dirty, config, instance, validatorName, propertyKey, propertyPath) {
   const $pending = ref(false)
   const $params = rule.$params || {}
   const $response = ref(null)
@@ -228,7 +231,10 @@ function createValidatorResult (rule, model, $dirty, config, instance) {
           $invalid,
           $params: unwrapObj($params), // $params can hold refs, so we unwrap them for easy access
           $model: model,
-          $response
+          $response,
+          $validator: validatorName,
+          $propertyPath: propertyPath,
+          $property: propertyKey
         })
       ))
     : message || ''
@@ -321,7 +327,10 @@ function createValidationResults (rules, model, key, resultsCache, path, config,
       model,
       result.$dirty,
       config,
-      instance
+      instance,
+      ruleKey,
+      key,
+      path
     )
   })
 
diff --git a/packages/vuelidate/test/unit/specs/validation.spec.js b/packages/vuelidate/test/unit/specs/validation.spec.js
index b343d317..8a509ea1 100644
--- a/packages/vuelidate/test/unit/specs/validation.spec.js
+++ b/packages/vuelidate/test/unit/specs/validation.spec.js
@@ -716,12 +716,54 @@ describe('useVuelidate', () => {
       expect(vm.v.$errors[0]).toHaveProperty('$message', 'Field is not Even')
     })
 
-    it('allows `$message` to be a function', async () => {
-      const isEvenMessage = withMessage(() => `Field is not Even`, isEven)
+    it('allows `$message` to be constructed from a function', async () => {
+      const message = `Field is not Even`
+      const isEvenMessage = withMessage(() => message, isEven)
       const value = ref(1)
       const { vm } = await createSimpleWrapper({ value: { isEvenMessage } }, { value })
       vm.v.$touch()
-      expect(vm.v.$errors[0]).toHaveProperty('$message', 'Field is not Even')
+      expect(vm.v.$errors[0]).toHaveProperty('$message', message)
+    })
+
+    it('passes extra parameters to the `$message` function', async () => {
+      const messageFunc = jest.fn().mockReturnValue('Message')
+      const nestedMessage = jest.fn().mockReturnValue('Nested Message')
+      const isEvenMessage = withMessage(messageFunc, isEven)
+
+      const value = ref(1)
+      const foo = ref('')
+
+      const { vm } = await createSimpleWrapper(
+        {
+          value: { isEvenMessage },
+          child: {
+            foo: { validator: withMessage(nestedMessage, isEven) }
+          }
+        },
+        { value, child: { foo } }
+      )
+
+      vm.v.$touch()
+      expect(messageFunc).toHaveBeenCalledWith({
+        $invalid: true,
+        $model: 1,
+        $params: {},
+        $pending: false,
+        $property: 'value',
+        $propertyPath: 'value',
+        $response: false,
+        $validator: 'isEvenMessage'
+      })
+      expect(nestedMessage).toHaveBeenCalledWith({
+        $invalid: false,
+        $model: '',
+        $params: {},
+        $pending: false,
+        $property: 'foo',
+        $propertyPath: 'child.foo',
+        $response: true,
+        $validator: 'validator'
+      })
     })
 
     it('keeps the `$message` reactive', async () => {
diff --git a/yarn.lock b/yarn.lock
index cfddff20..aeec59cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1334,6 +1334,62 @@
   resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
   integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==
 
+"@intlify/core-base@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.1.6.tgz#887fbeafe37d955bac50318f30ac589839f0d9fb"
+  integrity sha512-d5GDPpsQbqPkisSJA5b6nJFEkalY/IHAd7vOLNd/Sj4YaNRzXtInu2FoqKiOv8e/lQnXGTpurdCZg5Jxq1Gsxw==
+  dependencies:
+    "@intlify/devtools-if" "9.1.6"
+    "@intlify/message-compiler" "9.1.6"
+    "@intlify/message-resolver" "9.1.6"
+    "@intlify/runtime" "9.1.6"
+    "@intlify/shared" "9.1.6"
+    "@intlify/vue-devtools" "9.1.6"
+
+"@intlify/devtools-if@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.1.6.tgz#739b195e430e24fbf8f864ec8a51e243e3347385"
+  integrity sha512-m8Api+kh+BtFa2FZ/JjIdr1ibsGGqBjdKCzWo5BZecEUxBquIeOQZwpokPh/0K5j+/PZleFXkVAMC5mNt+9WdA==
+  dependencies:
+    "@intlify/shared" "9.1.6"
+
+"@intlify/message-compiler@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.1.6.tgz#e3e99165c1e6ecc496211017799ae59e15b05a18"
+  integrity sha512-DR8645VOrVK6x/8tkaCpHnckMAIcoOgeNS5j0wB12RfZoXYQp7vAXMaOP511KMll2mXCREgIB0ojpajiof7yzQ==
+  dependencies:
+    "@intlify/message-resolver" "9.1.6"
+    "@intlify/shared" "9.1.6"
+    source-map "0.6.1"
+
+"@intlify/message-resolver@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.1.6.tgz#d7493c9f326d5feb0cd8538a6735b648a91d8f2f"
+  integrity sha512-UUnbawQa5U9sffd5wRIscqtyY1xWlwJbyfwCLPEWLvBhyAnCwPYlvaHGnnO0CSi0fzJTVwlV9DYzobh3agDeMA==
+
+"@intlify/runtime@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.1.6.tgz#bf1548d9034c80eef92b06b240cb347effb41f71"
+  integrity sha512-U1QZ+TPf3kQQvWo4BA2mj3cHAxMRHXNTBhu2u+deh6ubTqXdZ19XGBTMSasrXG6RE+zSio9oM+ndoLja7JGtPg==
+  dependencies:
+    "@intlify/message-compiler" "9.1.6"
+    "@intlify/message-resolver" "9.1.6"
+    "@intlify/shared" "9.1.6"
+
+"@intlify/shared@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.6.tgz#d03c9301898d6ddffe2a54c03e7664174fbcdfd9"
+  integrity sha512-6MtsKulyfZxdD7OuxjaODjj8QWoHCnLFAk4wkWiHqBCa6UCTC0qXjtEeZ1MxpQihvFmmJZauBUu25EvtngW5qQ==
+
+"@intlify/vue-devtools@9.1.6":
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.1.6.tgz#88faadf203951a2a10107440fa99b58f4637d40d"
+  integrity sha512-UdNovg4OML9rIr1sOGZzTfNr1nUy4UQpDf5ni4dNC93T6FIkVJz0n1Np7Vp7e6gDjcmufRYcV99tEwjQSN9+5A==
+  dependencies:
+    "@intlify/message-resolver" "9.1.6"
+    "@intlify/runtime" "9.1.6"
+    "@intlify/shared" "9.1.6"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2892,6 +2948,11 @@
   dependencies:
     tslib "^2.2.0"
 
+"@vue/devtools-api@^6.0.0-beta.7":
+  version "6.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.12.tgz#693ffc77bfb66b080e5c9576abb5786c85470a32"
+  integrity sha512-PtHmAxFmCyCElV7uTWMrXj+fefwn4lCfTtPo9fPw0SK8/7e3UaFl8IL7lnugJmNFfeKQyuTkSoGvTq1uDaRF6Q==
+
 "@vue/reactivity@3.0.0-rc.5":
   version "3.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.5.tgz#45cff8d839d7ad130b1e499239090050fdecff13"
@@ -11034,16 +11095,16 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@@ -12138,6 +12199,16 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
+vue-i18n@^9.1.6:
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.6.tgz#4cf992e2aec5458bc19369973c96ea7d0f560321"
+  integrity sha512-FEC4HZkTH6QRIu/A0wlo0VS/GH3w/fuCC6xfvoC8IyhhtbG9A+go9NfW+HZ1ZXdAcO4EWcVQi04M+iSwuxgixw==
+  dependencies:
+    "@intlify/core-base" "9.1.6"
+    "@intlify/shared" "9.1.6"
+    "@intlify/vue-devtools" "9.1.6"
+    "@vue/devtools-api" "^6.0.0-beta.7"
+
 vue-router@^4.0.0-beta.6:
   version "4.0.0-beta.13"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-beta.13.tgz#4611d09a9e44f231cc401ecc294a7f2dcb30e6a6"