Improve layouts and use translations

* make sure that the transition is vertical when the vertical option is true
* make vertical option visible when showing the uischema
* make vertical false the default
* remove full-height that adds additional space
* place the contact of the tabs when in horizontal mode to be inside v-col as well
* remove full-height
* check for null values for schema or data
* use specific function from lodash to not bring every function from it
* streamline types
* add vuetify v-bind for v-tab and v-tab-item
* allow more v elements to be customized, including button label translation and ability to override default values like color
* allow default messages with parameters to be translated
* add translations and use available message translations from jsonforms core
* add vuetifyProps configuration

Author: kchobantonov

example/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@jsonforms/core": "3.1.0-alpha.2",
     "@jsonforms/vue2": "3.1.0-alpha.2",
-    "@jsonforms/vue2-vuetify": "^3.1.0-alpha.2",
+    "@jsonforms/vue2-vuetify": "3.1.0-alpha.2",
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.9.1",
     "json-refs": "^3.0.15",

example/src/components/DemoForm.vue

@@ -51,8 +51,8 @@
 
 <script lang="ts">
 import { PropType } from 'vue';
-import { Example, ResolvedSchema } from '@/core/types';
-import { Ajv } from 'ajv';
+import { JsonExample, ResolvedSchema } from '@/core/types';
+import type Ajv from 'ajv';
 import {
   ValidationMode,
   JsonFormsUISchemaRegistryEntry,
@@ -71,7 +71,7 @@ export default {
     JsonForms,
   },
   props: {
-    example: { type: Object as PropType<Example>, required: true },
+    example: { type: Object as PropType<JsonExample>, required: true },
     renderers: {
       required: true,
       type: Array as PropType<JsonFormsRendererRegistryEntry[]>,
@@ -128,7 +128,7 @@ export default {
   watch: {
     example: {
       deep: true,
-      handler(newExample: Example, oldExample: Example): void {
+      handler(newExample: JsonExample, oldExample: JsonExample): void {
         this.resolveSchema(newExample.input.schema);
         this.i18n.translate = createTranslator(
           this.locale,

example/src/core/types.ts

@@ -2,20 +2,34 @@ import {
   UISchemaElement,
   JsonSchema,
   JsonFormsRendererRegistryEntry,
+  JsonFormsUISchemaRegistryEntry,
 } from '@jsonforms/core';
 
 export type Example = {
   id: string;
   title: string;
+  note?: string;
   input: {
     schema?: JsonSchema;
     uischema?: UISchemaElement;
+    uischemas?: JsonFormsUISchemaRegistryEntry[];
     data: string | number | boolean | any[] | Record<string, any>;
     i18n?: Record<string, any>;
     renderers?: JsonFormsRendererRegistryEntry[];
   };
 };
 
+export type JsonExampleInput = Omit<Example['input'], 'uischemas'> & {
+  uischemas?: {
+    tester: string;
+    uischema: UISchemaElement;
+  }[];
+};
+
+export type JsonExample = Omit<Example, 'input'> & {
+  input: JsonExampleInput;
+};
+
 export type ResolvedSchema = {
   schema?: JsonSchema;
   resolved: boolean;

example/src/examples/categorization-stepper-nav/uischema.json

@@ -121,6 +121,7 @@
   ],
   "options": {
     "variant": "stepper",
-    "showNavButtons": true
+    "showNavButtons": true,
+    "vertical": false
   }
-}
+}

example/src/examples/categorization-stepper/uischema.json

@@ -120,6 +120,7 @@
     }
   ],
   "options": {
-    "variant": "stepper"
+    "variant": "stepper",
+    "vertical": false
   }
-}
+}

example/src/examples/categorization/uischema.json

@@ -118,5 +118,8 @@
         }
       }
     }
-  ]
-}
+  ],
+  "options": {
+    "vertical": false
+  }
+}

example/src/examples/index.ts

@@ -46,8 +46,9 @@ import { input as rule } from './rule';
 import { input as verticalLayout } from './vertical-layout';
 import { input as huge } from './huge';
 import { input as ifThenElse } from './if-then-else';
+import { JsonExample } from '@/core/types';
 
-export const examples = [
+export const examples: JsonExample[] = [
   {
     id: 'main',
     title: 'Main',

example/src/i18n/i18n.ts

@@ -20,9 +20,9 @@ export const createTranslator = (
     defaultMessage: string | undefined,
     values?: any
   ): string | undefined => {
-    if (!localeTranslations) return defaultMessage;
-
-    const message = get(localeTranslations, id);
+    const message = localeTranslations
+      ? get(localeTranslations, id)
+      : defaultMessage;
     if (message && values) {
       return translateWithParams(message, values) ?? defaultMessage;
     }

example/src/views/example/Example.vue

@@ -247,7 +247,7 @@
 
 <script lang="ts">
 import { examples } from '@/examples';
-import { find } from 'lodash';
+import find from 'lodash/find';
 import { sync } from 'vuex-pathify';
 
 import DemoForm from '@/components/DemoForm.vue';
@@ -259,7 +259,7 @@ import {
   EditorApi,
   getMonacoModelForUri,
 } from '@/core/jsonSchemaValidation';
-import { Example } from '@/core/types';
+import { JsonExample } from '@/core/types';
 import type { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import { JsonFormsChangeEvent } from '@jsonforms/vue2';
 import {
@@ -286,7 +286,7 @@ export default {
     return {
       activeTab: 0,
       examples,
-      example: undefined,
+      example: undefined as JsonExample | undefined,
       errors: undefined as
         | ErrorObject<string, Record<string, any>, unknown>[]
         | undefined,
@@ -314,34 +314,34 @@ export default {
       return this.$route.query?.view === 'form-only';
     },
   },
-  mounted() {
+  mounted(): void {
     this.setExample(
       find(this.examples, (example) => example.id === this.$route.params.id)
     );
   },
   watch: {
-    '$route.params.id'(id) {
+    '$route.params.id'(id: string): void {
       this.setExample(find(this.examples, (example) => example.id === id));
     },
   },
   methods: {
-    onChange(event: JsonFormsChangeEvent) {
+    onChange(event: JsonFormsChangeEvent): void {
       this.$store.set(
         'app/monaco@dataModel',
         getMonacoModelForUri(
-          monaco.Uri.parse(this.toDataUri(this.example.id)),
+          monaco.Uri.parse(this.toDataUri(this.example!.id)),
           event.data ? JSON.stringify(event.data, null, 2) : ''
         )
       );
       this.errors = event.errors;
     },
-    setExample(example: Example): void {
+    setExample(example?: JsonExample): void {
       if (example) {
         this.example = cloneDeep(example);
         this.updateMonacoModels(this.example);
       }
     },
-    reloadMonacoSchema() {
+    reloadMonacoSchema(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -360,7 +360,7 @@ export default {
         this.toast('Original example schema loaded. Apply it to take effect.');
       }
     },
-    saveMonacoSchema() {
+    saveMonacoSchema(): void {
       const model = this.monacoSchemaModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -384,7 +384,7 @@ export default {
         }
       }
     },
-    reloadMonacoUiSchema() {
+    reloadMonacoUiSchema(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -405,7 +405,7 @@ export default {
         );
       }
     },
-    saveMonacoUiSchema() {
+    saveMonacoUiSchema(): void {
       const model = this.monacoUiSchemaModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -430,7 +430,7 @@ export default {
         }
       }
     },
-    reloadMonacoData() {
+    reloadMonacoData(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -449,7 +449,7 @@ export default {
         this.toast('Original example data loaded. Apply it to take effect.');
       }
     },
-    saveMonacoData() {
+    saveMonacoData(): void {
       const model = this.monacoDataModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -473,7 +473,7 @@ export default {
         }
       }
     },
-    reloadMonacoI18N() {
+    reloadMonacoI18N(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -492,7 +492,7 @@ export default {
         this.toast('Original example i18n loaded. Apply it to take effect.');
       }
     },
-    saveMonacoI18N() {
+    saveMonacoI18N(): void {
       const model = this.monacoI18NModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -517,7 +517,7 @@ export default {
         }
       }
     },
-    registerValidations(editor: EditorApi) {
+    registerValidations(editor: EditorApi): void {
       configureJsonSchemaValidation(editor, ['*.schema.json']);
       configureUISchemaValidation(editor, ['*.uischema.json']);
       for (let example of examples) {
@@ -536,7 +536,7 @@ export default {
         }
       }
     },
-    updateMonacoModels(example) {
+    updateMonacoModels(example: JsonExample): void {
       this.$store.set(
         'app/monaco@schemaModel',
         getMonacoModelForUri(

lerna.json

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