Showcase i18n integration

Update to JSON Forms 3.0.0-alpha.2 which contains the new
i18n customization capatibilities. As AJV is now consumed
on version 8 some additional code changes are necessary.

Adds an example translation function to the example app.

example/package.json

@@ -8,9 +8,9 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@jsonforms/core": "3.0.0-alpha.1",
-    "@jsonforms/vue2": "3.0.0-alpha.1",
-    "@jsonforms/vue2-vuetify": "3.0.0-alpha.1",
+    "@jsonforms/core": "3.0.0-alpha.2",
+    "@jsonforms/vue2": "3.0.0-alpha.2",
+    "@jsonforms/vue2-vuetify": "3.0.0-alpha.2",
     "@vue/composition-api": "1.0.0-rc.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.14",

example/src/components/DemoForm.vue

@@ -12,6 +12,7 @@
       :validationMode="validationMode"
       :ajv="ajv"
       :readonly="readonly"
+      :i18n="i18n"
       @change="onChange"
     />
     <v-container v-else>
@@ -58,9 +59,11 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
   JsonSchema,
+  JsonFormsI18nState,
 } from '@jsonforms/core';
 import { JsonForms, JsonFormsChangeEvent } from '@jsonforms/vue2';
 import JsonRefs from 'json-refs';
+import { createTranslator } from '../i18n';
 
 export default {
   name: 'demo-form',
@@ -103,6 +106,11 @@ export default {
       type: Object as PropType<Ajv>,
       default: undefined,
     },
+    locale: {
+      required: false,
+      type: String,
+      default: 'en',
+    },
   },
   data() {
     return {
@@ -111,15 +119,24 @@ export default {
         resolved: false,
         error: undefined,
       } as ResolvedSchema,
+      i18n: {
+        locale: this.locale,
+        translate: createTranslator(this.locale),
+      } as JsonFormsI18nState,
     };
   },
   watch: {
     example: {
       deep: true,
-      handler(newExample: Example, oldExample: Example) {
+      handler(newExample: Example, oldExample: Example): void {
         this.resolveSchema(newExample.input.schema);
       },
     },
+    locale(newLocale: string): void {
+      console.log('LOCALE SWITCH', newLocale);
+      this.i18n.locale = newLocale;
+      this.i18n.translate = createTranslator(newLocale);
+    },
   },
   mounted() {
     this.resolveSchema(this.example.input.schema);

example/src/components/Settings.vue

@@ -111,6 +111,23 @@
 
       <v-divider />
 
+      <v-container>
+        <v-row><v-col>Locale (Mostly in basic example)</v-col></v-row>
+        <v-row>
+          <v-col>
+            <v-select
+              outlined
+              persistent-hint
+              dense
+              v-model="locale"
+              :items="locales"
+            ></v-select>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-divider />
+
       <v-container>
         <v-row><v-col>Options</v-col></v-row>
         <v-row>
@@ -170,6 +187,20 @@
             </v-tooltip>
           </v-col>
         </v-row>
+        <v-row>
+          <v-col>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on: onTooltip }">
+                <v-switch
+                  v-model="locale"
+                  label="Switch beetwen english and german locale"
+                  v-on="onTooltip"
+                ></v-switch>
+              </template>
+              Only applies to basic example
+            </v-tooltip>
+          </v-col>
+        </v-row>
       </v-container>
 
       <v-divider />
@@ -190,6 +221,7 @@ export default {
     ),
     restrict: sync('app/[email protected]'),
     readonly: sync('app/jsonforms@readonly'),
+    locale: sync('app/jsonforms@locale'),
   },
   data: function () {
     return {
@@ -199,6 +231,10 @@ export default {
         { text: 'Validate And Hide', value: 'ValidateAndHide' },
         { text: 'No Validation', value: 'NoValidation' },
       ],
+      locales: [
+        { text: 'English (en)', value: 'en' },
+        { text: 'German (de)', value: 'de' },
+      ],
     };
   },
 };

example/src/examples/basic/schema.json

@@ -4,58 +4,54 @@
     "name": {
       "type": "string",
       "minLength": 3,
-      "description": "Please enter your name"
+      "description": "Please enter your name",
+      "i18n": "name"
     },
     "vegetarian": {
-      "type": "boolean"
+      "type": "boolean",
+      "i18n": "vegetarian"
     },
     "birthDate": {
       "type": "string",
-      "format": "date"
+      "format": "date",
+      "i18n": "birth"
     },
     "nationality": {
       "type": "string",
-      "enum": [
-        "DE",
-        "IT",
-        "JP",
-        "US",
-        "RU",
-        "Other"
-      ]
+      "enum": ["DE", "IT", "JP", "US", "RU", "Other"],
+      "i18n": "nationality"
     },
     "personalData": {
       "type": "object",
       "properties": {
         "age": {
           "type": "integer",
-          "description": "Please enter your age."
+          "description": "Please enter your age.",
+          "i18n": "personal-data.age"
         },
         "height": {
-          "type": "number"
+          "type": "number",
+          "i18n": "height"
         },
         "drivingSkill": {
           "type": "number",
           "maximum": 10,
           "minimum": 1,
-          "default": 7
+          "default": 7,
+          "i18n": "personal-data.driving"
         }
       },
-      "required": [
-        "age",
-        "height"
-      ]
+      "required": ["age", "height"]
     },
     "occupation": {
-      "type": "string"
+      "type": "string",
+      "i18n": "occupation"
     },
     "postalCode": {
       "type": "string",
-      "maxLength": 5
+      "maxLength": 5,
+      "i18n": "postal-code"
     }
   },
-  "required": [
-    "occupation",
-    "nationality"
-  ]
-}
+  "required": ["occupation", "nationality"]
+}

example/src/i18n/i18n.ts

@@ -0,0 +1,91 @@
+import get from 'lodash/get';
+
+const en = {
+  name: {
+    label: 'Name',
+    description: 'The name of the person',
+  },
+  vegetarian: {
+    label: 'Vegetarian',
+    description: 'Wether the person is a vegetarian',
+  },
+  birth: {
+    label: 'Birth Date',
+    description: '',
+  },
+  nationality: {
+    label: 'Nationality',
+    description: '',
+  },
+  'personal-data': {
+    age: {
+      label: 'Age',
+    },
+    driving: {
+      label: 'Driving Skill',
+      description: 'Indicating experience level',
+    },
+  },
+  height: {
+    label: 'Height',
+  },
+  occupation: {
+    label: 'Occupation',
+    description: '',
+  },
+  'postal-code': {
+    label: 'Postal Code',
+  },
+  error: {
+    required: 'field is required',
+  },
+};
+
+const de = {
+  name: {
+    label: 'Name',
+    description: 'Der Name der Person',
+  },
+  vegetarian: {
+    label: 'Vegetarier',
+    description: 'Isst die Person vegetarisch?',
+  },
+  birth: {
+    label: 'Geburtsdatum',
+    description: '',
+  },
+  nationality: {
+    label: 'Nationalität',
+    description: '',
+    Other: 'Andere',
+  },
+  'personal-data': {
+    age: {
+      label: 'Alter',
+    },
+    driving: {
+      label: 'Fahrkenntnisse',
+      description: 'Fahrerfahrung der Person',
+    },
+  },
+  height: {
+    label: 'Größe',
+  },
+  occupation: {
+    label: 'Beruf',
+    description: '',
+  },
+  'postal-code': {
+    label: 'Postleitzahl',
+  },
+  error: {
+    required: 'Pflichtfeld',
+  },
+  'Additional Information': 'Zusätzliche Informationen',
+};
+
+export const createTranslator =
+  (locale: 'en' | 'de') =>
+  (key: string, defaultMessage: string | undefined): string | undefined => {
+    return get(locale === 'en' ? en : de, key) ?? defaultMessage;
+  };

example/src/i18n/index.ts

@@ -0,0 +1 @@
+export * from './i18n';

example/src/store/modules/app.ts

@@ -22,6 +22,7 @@ const state: AppState = {
     renderers: extendedVuetifyRenderers,
     cells: extendedVuetifyRenderers,
     ajv,
+    locale: 'en',
   },
   monaco: {
     schemaModel: undefined,

example/src/store/modules/types.ts

@@ -3,7 +3,7 @@ import {
   JsonFormsCellRendererRegistryEntry,
 } from '@jsonforms/core';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import AJV from 'ajv';
+import Ajv from 'ajv';
 
 // declare your own store states
 export interface AppState {
@@ -19,7 +19,8 @@ export interface AppState {
     };
     renderers: JsonFormsRendererRegistryEntry[];
     cells: JsonFormsCellRendererRegistryEntry[];
-    ajv: AJV.Ajv;
+    ajv: Ajv;
+    locale: string;
   };
   monaco: {
     schemaModel: monaco.editor.ITextModel | undefined;

example/src/views/example/Example.vue

@@ -20,6 +20,7 @@
                 :validationMode="validationMode"
                 :ajv="ajv"
                 :readonly="readonly"
+                :locale="locale"
                 @change="onChange"
               />
             </v-tab-item>
@@ -200,6 +201,7 @@ export default {
     monacoSchemaModel: sync('app/monaco@schemaModel'),
     monacoUiSchemaModel: sync('app/monaco@uischemaModel'),
     monacoDataModel: sync('app/monaco@dataModel'),
+    locale: sync('app/jsonforms@locale'),
   },
   mounted() {
     this.setExample(

lerna.json

@@ -1,4 +1,4 @@
 {
   "packages": ["vue2-vuetify", "example"],
-  "version": "3.0.0-alpha.1"
+  "version": "3.0.0-alpha.2"
 }