Add AJV validation libraries and integrate i18n support in jsonFormRendererApi component

Author: tacxou

package.json

@@ -24,6 +24,9 @@
     "@pinia/nuxt": "^0.5.1",
     "@quasar/extras": "^1.16.9",
     "@vueuse/router": "^10.7.2",
+    "ajv": "^8.17.1",
+    "ajv-errors": "^3.0.0",
+    "ajv-i18n": "^4.2.0",
     "cookie": "^0.6.0",
     "fast-password-entropy": "^1.1.1",
     "hibp": "^14.1.2",

src/components/jsonFormRendererApi.vue

@@ -2,6 +2,8 @@
 div
   //- pre(v-html="JSON.stringify({ data }, null, 2)")
   json-forms(
+    :ajv="customAjv.value"
+    :i18n="i18n"
     :data="data"
     :schema="schema"
     :uischema="uischema"
@@ -20,8 +22,12 @@ import type { JsonFormsChangeEvent } from '@jsonforms/vue'
 import { QuasarJsonformRenderer } from './quasar-jsonform'
 import { computed, provide, ref } from 'vue'
 import { useFetch } from 'nuxt/app'
+import localize from 'ajv-i18n'
 import type { ErrorObject } from 'ajv'
+import ajvErrors from 'ajv-errors'
+import { createAjv } from '@jsonforms/core'
 import type { components, operations } from '#build/types/service-api'
+import def from 'ajv-i18n'
 type Identity = components['schemas']['IdentitiesDto'] & { _id: string }
 
 const customStyle = mergeStyles(defaultStyles, {
@@ -59,6 +65,31 @@ const validations = defineModel('validations', {
   default: {},
 })
 
+const createTranslator = (locale) => (key: string, defaultMessage: string | undefined, context: { error: ErrorObject }) => {
+  const regex = /^(?!.*\s)([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+)*$/
+  if (regex.test(key) || defaultMessage) {
+    return defaultMessage
+  }
+
+  const err = [context.error]
+  localize[locale](err)
+
+  return err[0].message
+}
+
+const i18n = ref({
+  locale: 'fr',
+  translate: computed(() => createTranslator('fr')),
+})
+
+const customAjv = ref(
+  createAjv({
+    allErrors: true,
+    verbose: true,
+    strict: false,
+  }),
+)
+
 const data = defineModel('data', {
   type: Object,
   // required: true,
@@ -88,7 +119,7 @@ const getSchemaValidations = computed(() => {
       instancePath: `/${key}`,
       keyword: 'type',
       params: {},
-    })
+    } as any)
   }
   return errorObject
 })

yarn.lock

@@ -2060,13 +2060,23 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
+ajv-errors@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-3.0.0.tgz#e54f299f3a3d30fe144161e5f0d8d51196c527bc"
+  integrity sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==
+
 ajv-formats@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
   integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
   dependencies:
     ajv "^8.0.0"
 
+ajv-i18n@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/ajv-i18n/-/ajv-i18n-4.2.0.tgz#d48750ba60e283b3dee31e3c22c8c9f7410e326f"
+  integrity sha512-v/ei2UkCEeuKNXh8RToiFsUclmU+G57LO1Oo22OagNMENIw+Yb8eMwvHu7Vn9fmkjJyv6XclhJ8TbuigSglPkg==
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -2087,6 +2097,16 @@ ajv@^8.0.0, ajv@^8.6.1:
     require-from-string "^2.0.2"
     uri-js "^4.4.1"
 
+ajv@^8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
 ansi-colors@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
@@ -3400,6 +3420,11 @@ fast-password-entropy@^1.1.1:
   resolved "https://registry.yarnpkg.com/fast-password-entropy/-/fast-password-entropy-1.1.1.tgz#47ba9933095fd5a32fb184915fc8e76ee19cf429"
   integrity sha512-dxm29/BPFrNgyEDygg/lf9c2xQR0vnQhG7+hZjAI39M/3um9fD4xiqG6F0ZjW6bya5m9CI0u6YryHGRtxCGCiw==
 
+fast-uri@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"