From 100c4629a663c4c32532d5024eebc84c50d41d55 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:13:16 -0400
Subject: [PATCH 01/19] make sure that the transition is vertical when the
 vertical option is true

---
 vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 58bb38b8..63596a62 100644
--- a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -5,6 +5,7 @@
       non-linear
       v-model="activeCategory"
       v-bind="vuetifyProps('v-stepper')"
+      vertical
     >
       <template v-for="(element, index) in visibleCategories">
         <v-stepper-step

From 32e01da84eeee1f0d3337677c3b939bf75c52b37 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:13:47 -0400
Subject: [PATCH 02/19] make vertical option visible when showing the uischema

---
 .../src/examples/categorization-stepper-nav/uischema.json  | 5 +++--
 example/src/examples/categorization-stepper/uischema.json  | 5 +++--
 example/src/examples/categorization/uischema.json          | 7 +++++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/example/src/examples/categorization-stepper-nav/uischema.json b/example/src/examples/categorization-stepper-nav/uischema.json
index 1509ace5..a7735ac4 100644
--- a/example/src/examples/categorization-stepper-nav/uischema.json
+++ b/example/src/examples/categorization-stepper-nav/uischema.json
@@ -121,6 +121,7 @@
   ],
   "options": {
     "variant": "stepper",
-    "showNavButtons": true
+    "showNavButtons": true,
+    "vertical": false
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization-stepper/uischema.json b/example/src/examples/categorization-stepper/uischema.json
index ba7bd947..5af9cc38 100644
--- a/example/src/examples/categorization-stepper/uischema.json
+++ b/example/src/examples/categorization-stepper/uischema.json
@@ -120,6 +120,7 @@
     }
   ],
   "options": {
-    "variant": "stepper"
+    "variant": "stepper",
+    "vertical": false
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization/uischema.json b/example/src/examples/categorization/uischema.json
index 17eaeeb4..40811084 100644
--- a/example/src/examples/categorization/uischema.json
+++ b/example/src/examples/categorization/uischema.json
@@ -118,5 +118,8 @@
         }
       }
     }
-  ]
-}
\ No newline at end of file
+  ],
+  "options": {
+    "vertical": true
+  }
+}

From a15d0f8bf1140fc94a66b6b81a3a333924894414 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:15:06 -0400
Subject: [PATCH 03/19] make vertical false the default

---
 example/src/examples/categorization/uischema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/examples/categorization/uischema.json b/example/src/examples/categorization/uischema.json
index 40811084..8e8365c6 100644
--- a/example/src/examples/categorization/uischema.json
+++ b/example/src/examples/categorization/uischema.json
@@ -120,6 +120,6 @@
     }
   ],
   "options": {
-    "vertical": true
+    "vertical": false
   }
 }

From 712f02a25a02282383a955d68541c40b2296bd2f Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:15:22 -0400
Subject: [PATCH 04/19] remove full-height that adds additional space

---
 vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue b/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
index 4be8e16b..1150ae9c 100644
--- a/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -1,7 +1,6 @@
 <template>
   <v-container
     v-if="layout.visible"
-    fill-height
     :class="`${styles.verticalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >

From 82be7b57f73973ce0ba93ea3d08bbb6c19faec69 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:15:57 -0400
Subject: [PATCH 05/19] place the contact of the tabs when in horizontail mode
 to be inside v-col as well

---
 .../src/layouts/CategorizationRenderer.vue    | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/vue2-vuetify/src/layouts/CategorizationRenderer.vue b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
index f422bcd8..ae6d2479 100644
--- a/vue2-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
@@ -41,33 +41,35 @@
       </v-col>
     </v-row>
     <v-row v-else v-bind="vuetifyProps('v-row')">
-      <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
-        <v-tab
-          v-for="(_, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
-        >
-          {{ visibleCategoryLabels[index] }}
-        </v-tab>
-      </v-tabs>
+      <v-col v-bind="vuetifyProps('v-col.v-tabs')">
+        <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
+          <v-tab
+            v-for="(_, index) in visibleCategories"
+            :key="`${layout.path}-${index}`"
+          >
+            {{ visibleCategoryLabels[index] }}
+          </v-tab>
+        </v-tabs>
 
-      <v-tabs-items
-        v-model="activeCategory"
-        v-bind="vuetifyProps('v-tabs-items')"
-      >
-        <v-tab-item
-          v-for="(element, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+        <v-tabs-items
+          v-model="activeCategory"
+          v-bind="vuetifyProps('v-tabs-items')"
         >
-          <dispatch-renderer
-            :schema="layout.schema"
-            :uischema="element"
-            :path="layout.path"
-            :enabled="layout.enabled"
-            :renderers="layout.renderers"
-            :cells="layout.cells"
-          />
-        </v-tab-item>
-      </v-tabs-items>
+          <v-tab-item
+            v-for="(element, index) in visibleCategories"
+            :key="`${layout.path}-${index}`"
+          >
+            <dispatch-renderer
+              :schema="layout.schema"
+              :uischema="element"
+              :path="layout.path"
+              :enabled="layout.enabled"
+              :renderers="layout.renderers"
+              :cells="layout.cells"
+            />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-col>
     </v-row>
   </v-container>
 </template>

From 5a0cebd50a89849723d3ddb6f965b82b627b7e23 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 12:17:16 -0400
Subject: [PATCH 06/19] remove full-height

---
 vue2-vuetify/src/additional/ListWithDetailRenderer.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
index 057865ae..4d29b471 100644
--- a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-container
-    v-if="control.visible"
-    fill-height
-    :class="styles.listWithDetail.root"
-  >
+  <v-container v-if="control.visible" :class="styles.listWithDetail.root">
     <v-row>
       <v-col class="pa-0">
         <v-toolbar flat :class="styles.listWithDetail.toolbar">

From 03cb282ac008d21fe53dc1c30c0d5bf6ec19e101 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 17:16:55 -0400
Subject: [PATCH 07/19] check for null values for schema or data

---
 .../components/AdditionalProperties.vue       | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/vue2-vuetify/src/complex/components/AdditionalProperties.vue b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
index ab87a3d9..c3331547 100644
--- a/vue2-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
@@ -169,12 +169,15 @@ export default defineComponent({
       typeof props.input.control
     >;
     const reservedPropertyNames = Object.keys(
-      control.value.schema.properties || {}
+      (control.value.schema && control.value.schema.properties) || {}
     );
 
-    const additionalKeys = Object.keys(control.value.data).filter(
-      (k) => !reservedPropertyNames.includes(k)
-    );
+    const additionalKeys =
+      control.value.data && isPlainObject(control.value.data)
+        ? Object.keys(control.value.data).filter(
+            (k) => !reservedPropertyNames.includes(k)
+          )
+        : [];
 
     const toAdditionalPropertyType = (
       propName: string,
@@ -183,7 +186,11 @@ export default defineComponent({
       let propSchema: JsonSchema | undefined = undefined;
       let propUiSchema: UISchemaElement | undefined = undefined;
 
-      if (control.value.schema.patternProperties) {
+      if (
+        control.value.schema &&
+        control.value.schema.patternProperties &&
+        typeof control.value.schema.patternProperties === 'object'
+      ) {
         const matchedPattern = Object.keys(
           control.value.schema.patternProperties
         ).find((pattern) => new RegExp(pattern).test(propName));
@@ -194,6 +201,8 @@ export default defineComponent({
 
       if (
         !propSchema &&
+        control.value.schema &&
+        control.value.schema.additionalProperties &&
         typeof control.value.schema.additionalProperties === 'object'
       ) {
         propSchema = control.value.schema.additionalProperties;
@@ -237,7 +246,7 @@ export default defineComponent({
     additionalKeys.forEach((propName) => {
       const additionalProperty = toAdditionalPropertyType(
         propName,
-        control.value.data[propName]
+        control.value.data?.[propName]
       );
       additionalPropertyItems.value.push(additionalProperty);
     });
@@ -252,11 +261,17 @@ export default defineComponent({
 
     // TODO: create issue against jsonforms to add propertyNames into the JsonSchema interface
     // propertyNames exist in draft-6 but not defined in the JsonSchema
-    if (typeof (control.value.schema as any).propertyNames === 'object') {
+    if (
+      control.value.schema &&
+      (control.value.schema as any).propertyNames &&
+      typeof (control.value.schema as any).propertyNames === 'object'
+    ) {
       propertyNameSchema = (control.value.schema as any).propertyNames;
     }
 
     if (
+      control.value.schema &&
+      control.value.schema.patternProperties &&
       typeof control.value.schema.additionalProperties !== 'object' &&
       typeof control.value.schema.patternProperties === 'object'
     ) {
@@ -311,6 +326,7 @@ export default defineComponent({
     },
     maxPropertiesReached(): boolean {
       return (
+        this.control.schema &&
         this.control.schema.maxProperties !== undefined && // we have maxProperties constraint
         this.control.data && // we have data to check
         // the current number of properties in the object is greater or equals to the maxProperties
@@ -328,6 +344,7 @@ export default defineComponent({
     },
     minPropertiesReached(): boolean {
       return (
+        this.control.schema &&
         this.control.schema.minProperties !== undefined && // we have minProperties constraint
         this.control.data && // we have data to check
         // the current number of properties in the object is less or equals to the minProperties
@@ -380,9 +397,10 @@ export default defineComponent({
       const additionalProperties = this.control.schema.additionalProperties;
 
       const label =
+        additionalProperties &&
         typeof additionalProperties === 'object' &&
-        Object.prototype.hasOwnProperty.call(additionalProperties, 'title')
-          ? additionalProperties.title ?? 'Additional Properties'
+        additionalProperties.title
+          ? additionalProperties.title
           : 'Additional Properties';
 
       return this.t(this.i18nKey('title'), label);
@@ -415,7 +433,7 @@ export default defineComponent({
       handler(newData) {
         // revert back any undefined values back to the default value when the key is part of the addtional properties since we want to preserved the key
         // for example when we have a string additonal property then when we clear the text component the componet by default sets the value to undefined to remove the property from the object - for additional properties we do not want that behaviour
-        if (typeof this.control.data === 'object') {
+        if (this.control.data && typeof this.control.data === 'object') {
           const keys = Object.keys(newData);
           let hasChanges = false;
           this.additionalPropertyItems.forEach((ap) => {
@@ -463,6 +481,7 @@ export default defineComponent({
         }
 
         if (
+          this.control.data &&
           typeof this.control.data === 'object' &&
           additionalProperty.schema
         ) {
@@ -479,7 +498,7 @@ export default defineComponent({
       this.additionalPropertyItems = this.additionalPropertyItems.filter(
         (d) => d.propertyName !== propName
       );
-      if (typeof this.control.data === 'object') {
+      if (this.control.data && typeof this.control.data === 'object') {
         delete this.control.data[propName];
         this.input.handleChange(this.control.path, this.control.data);
       }

From 2d1799785a81ce822f170556a902fd10d02260ad Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 17:17:31 -0400
Subject: [PATCH 08/19] use specific function from lodash to not bring every
 function from it

---
 example/src/views/example/Example.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/views/example/Example.vue b/example/src/views/example/Example.vue
index 00e0f602..e4a259f8 100644
--- a/example/src/views/example/Example.vue
+++ b/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';

From 8159553634966a9bc9ac3cbff77c60fc870ecef8 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 17:52:04 -0400
Subject: [PATCH 09/19] stremline types

---
 example/src/components/DemoForm.vue   |  8 +++----
 example/src/core/types.ts             | 14 +++++++++++
 example/src/examples/index.ts         |  3 ++-
 example/src/views/example/Example.vue | 34 +++++++++++++--------------
 4 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/example/src/components/DemoForm.vue b/example/src/components/DemoForm.vue
index e8d2de47..7288ea7e 100644
--- a/example/src/components/DemoForm.vue
+++ b/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,
diff --git a/example/src/core/types.ts b/example/src/core/types.ts
index 95b1d294..1596d586 100644
--- a/example/src/core/types.ts
+++ b/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;
diff --git a/example/src/examples/index.ts b/example/src/examples/index.ts
index d887864d..964a7420 100644
--- a/example/src/examples/index.ts
+++ b/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',
diff --git a/example/src/views/example/Example.vue b/example/src/views/example/Example.vue
index e4a259f8..e0800f8c 100644
--- a/example/src/views/example/Example.vue
+++ b/example/src/views/example/Example.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(

From 77ca55ffa65c866bbeba65370289cd30c49b8d6b Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 18:26:21 -0400
Subject: [PATCH 10/19] add vuetify v-bind for v-tab and v-tab-item

---
 vue2-vuetify/src/layouts/CategorizationRenderer.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/vue2-vuetify/src/layouts/CategorizationRenderer.vue b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
index ae6d2479..b60240a6 100644
--- a/vue2-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
@@ -13,6 +13,7 @@
           <v-tab
             v-for="(_, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab')"
           >
             {{ visibleCategoryLabels[index] }}
           </v-tab>
@@ -27,6 +28,7 @@
           <v-tab-item
             v-for="(element, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab-item')"
           >
             <dispatch-renderer
               :schema="layout.schema"
@@ -46,6 +48,7 @@
           <v-tab
             v-for="(_, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab')"
           >
             {{ visibleCategoryLabels[index] }}
           </v-tab>
@@ -58,6 +61,7 @@
           <v-tab-item
             v-for="(element, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab-item')"
           >
             <dispatch-renderer
               :schema="layout.schema"

From 54058bcdc2fc9c252fa1824bdc86cd737f580017 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 19:33:46 -0400
Subject: [PATCH 11/19] allow more v elements to be customized, including
 button label translation and ability to override default values like color

---
 .../layouts/CategorizationStepperRenderer.vue | 63 ++++++++++++++-----
 vue2-vuetify/src/util/composition.ts          | 11 +++-
 2 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 63596a62..05a09a85 100644
--- a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -2,22 +2,26 @@
   <div v-if="layout.visible" :class="styles.categorization.root">
     <v-stepper
       v-if="appliedOptions.vertical == true"
-      non-linear
       v-model="activeCategory"
-      v-bind="vuetifyProps('v-stepper')"
       vertical
+      v-bind="vuetifyProps('v-stepper')"
     >
       <template v-for="(element, index) in visibleCategories">
         <v-stepper-step
           :key="`${layout.path}-${index}`"
           :step="index + 1"
           editable
+          v-bind="vuetifyProps('v-stepper-step')"
         >
           {{ visibleCategoryLabels[index] }}
         </v-stepper-step>
 
-        <v-stepper-content :key="`${layout.path}-${index}`" :step="index + 1">
-          <v-card elevation="0">
+        <v-stepper-content
+          :key="`${layout.path}-${index}`"
+          :step="index + 1"
+          v-bind="vuetifyProps('v-stepper-content')"
+        >
+          <v-card v-bind="vuetifyProps('v-card')">
             <dispatch-renderer
               :schema="layout.schema"
               :uischema="element"
@@ -30,24 +34,33 @@
             <div v-if="!!appliedOptions.showNavButtons">
               <v-divider></v-divider>
 
-              <v-card-actions>
+              <v-card-actions v-bind="vuetifyProps('v-card-actions')">
                 <v-btn
                   text
                   left
                   :disabled="activeCategory - 1 <= 0"
                   @click="activeCategory--"
+                  v-bind="vuetifyProps('v-btn.back')"
                 >
-                  Back
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.back', { label: 'Back' }).label
+                    )
+                  }}
                 </v-btn>
                 <v-spacer></v-spacer>
                 <v-btn
                   text
                   right
-                  color="primary"
                   :disabled="activeCategory - 1 >= visibleCategories.length - 1"
                   @click="activeCategory++"
+                  v-bind="vuetifyProps('v-btn.next', { color: 'primary' })"
                 >
-                  Next
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.next', { label: 'Next' }).label
+                    )
+                  }}
                 </v-btn>
               </v-card-actions>
             </div>
@@ -57,16 +70,16 @@
     </v-stepper>
     <v-stepper
       v-else
-      non-linear
       v-model="activeCategory"
       v-bind="vuetifyProps('v-stepper')"
     >
-      <v-stepper-header>
+      <v-stepper-header v-bind="vuetifyProps('v-stepper-header')">
         <template v-for="(_, index) in visibleCategories">
           <v-stepper-step
             :key="`${layout.path}-${index}`"
             :step="index + 1"
             editable
+            v-bind="vuetifyProps('v-stepper-step')"
           >
             {{ visibleCategoryLabels[index] }}
           </v-stepper-step>
@@ -77,13 +90,14 @@
         </template>
       </v-stepper-header>
 
-      <v-stepper-items>
+      <v-stepper-items v-bind="vuetifyProps('v-stepper-items')">
         <v-stepper-content
           v-for="(element, index) in visibleCategories"
           :key="`${layout.path}-${index}`"
           :step="index + 1"
+          v-bind="vuetifyProps('v-stepper-content')"
         >
-          <v-card elevation="0">
+          <v-card v-bind="vuetifyProps('v-card')">
             <dispatch-renderer
               :schema="layout.schema"
               :uischema="element"
@@ -96,24 +110,34 @@
             <div v-if="!!appliedOptions.showNavButtons">
               <v-divider></v-divider>
 
-              <v-card-actions>
+              <v-card-actions v-bind="vuetifyProps('v-card-actions')">
                 <v-btn
                   text
                   left
                   :disabled="activeCategory - 1 <= 0"
                   @click="activeCategory--"
+                  v-bind="vuetifyProps('v-btn.back')"
                 >
-                  Back
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.back', { label: 'Back' }).label
+                    )
+                  }}
                 </v-btn>
                 <v-spacer></v-spacer>
                 <v-btn
-                  text
                   right
-                  color="primary"
                   :disabled="activeCategory - 1 >= visibleCategories.length - 1"
                   @click="activeCategory++"
+                  v-bind="
+                    vuetifyProps('v-btn.next', { color: 'primary', text: true })
+                  "
                 >
-                  Next
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.next', { label: 'Next' }).label
+                    )
+                  }}
                 </v-btn>
               </v-card-actions>
             </div>
@@ -203,6 +227,11 @@ const layoutRenderer = defineComponent({
       });
     },
   },
+  methods: {
+    translateByText(text: string): string {
+      return this.t(text, text);
+    },
+  },
 });
 
 export default layoutRenderer;
diff --git a/vue2-vuetify/src/util/composition.ts b/vue2-vuetify/src/util/composition.ts
index 140c6d78..73fcb8e7 100644
--- a/vue2-vuetify/src/util/composition.ts
+++ b/vue2-vuetify/src/util/composition.ts
@@ -160,10 +160,15 @@ export const useVuetifyLayout = <I extends { layout: any }>(input: I) => {
     );
   });
 
-  const vuetifyProps = (path: string) => {
+  const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
     const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
+    if (props && isPlainObject(props)) {
+      return defaultProps
+        ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
+        : props;
+    } else {
+      return defaultProps ?? {};
+    }
   };
 
   return {

From 2c84b1ddae5f7e2afce18f0ba0e604f4c7e2112f Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 20:18:49 -0400
Subject: [PATCH 12/19] allow default messages with parameters to be translated

---
 example/src/i18n/i18n.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/example/src/i18n/i18n.ts b/example/src/i18n/i18n.ts
index f7af747e..59d327b6 100644
--- a/example/src/i18n/i18n.ts
+++ b/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;
     }
@@ -38,6 +38,7 @@ function templateToMessage(
   templateMessage: string,
   params: Record<string, string | number> = {}
 ): string {
+  console.log('HERE');
   const compiled = template(templateMessage, {
     interpolate: /\${([\s\S]+?)}/g, // ${myVar}
   });

From 49a1966e24102ca5111519b5d617cdf92e2b852d Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 22:44:58 -0400
Subject: [PATCH 13/19] remove console log

---
 example/src/i18n/i18n.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/example/src/i18n/i18n.ts b/example/src/i18n/i18n.ts
index 59d327b6..6a3e70c8 100644
--- a/example/src/i18n/i18n.ts
+++ b/example/src/i18n/i18n.ts
@@ -38,7 +38,6 @@ function templateToMessage(
   templateMessage: string,
   params: Record<string, string | number> = {}
 ): string {
-  console.log('HERE');
   const compiled = template(templateMessage, {
     interpolate: /\${([\s\S]+?)}/g, // ${myVar}
   });

From b696b82399fa46026c84ca31c197352b2e97c796 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 23:06:09 -0400
Subject: [PATCH 14/19] add translations

---
 .../src/additional/ListWithDetailRenderer.vue | 22 +++++++++++------
 .../src/complex/ArrayControlRenderer.vue      | 20 ++++++++++------
 vue2-vuetify/src/complex/OneOfRenderer.vue    | 20 ++++++++++++----
 vue2-vuetify/src/complex/OneOfTabRenderer.vue | 24 ++++++++++++++-----
 .../components/AdditionalProperties.vue       | 21 ++++++++++++----
 .../src/controls/IntegerControlRenderer.vue   |  2 +-
 .../src/controls/NumberControlRenderer.vue    |  2 +-
 .../controls/components/ValidationBadge.vue   |  6 ++++-
 vue2-vuetify/src/util/composition.ts          | 10 ++++++--
 9 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
index 4d29b471..a5b2eee2 100644
--- a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -34,13 +34,17 @@
                 <v-icon>mdi-plus</v-icon>
               </v-btn>
             </template>
-            {{ `Add to ${control.label}` }}
+            {{
+              t('array.btn.add.tooltip', 'Add to ${label}', {
+                label: `${control.label}`,
+              })
+            }}
           </v-tooltip>
         </v-toolbar>
       </v-col>
     </v-row>
     <v-row v-if="dataLength === 0" :class="styles.listWithDetail.noData">
-      <v-col>No data</v-col>
+      <v-col> {{ t('Array.noData', 'No data') }} </v-col>
     </v-row>
     <v-row v-else>
       <v-col class="shrink pa-0">
@@ -112,7 +116,7 @@
                         <v-icon class="notranslate">mdi-arrow-up</v-icon>
                       </v-btn>
                     </template>
-                    Move Up
+                    {{ t('array.btn.moveUp.tooltip', 'Move Up') }}
                   </v-tooltip>
                 </v-list-item-action>
                 <v-list-item-action v-if="appliedOptions.showSortButtons">
@@ -133,7 +137,7 @@
                         <v-icon class="notranslate">mdi-arrow-down</v-icon>
                       </v-btn>
                     </template>
-                    Move Down
+                    {{ t('array.btn.moveDown.tooltip', 'Move Down') }}
                   </v-tooltip>
                 </v-list-item-action>
                 <v-list-item-action>
@@ -160,7 +164,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    Delete
+                    {{ t('array.btn.delete.tooltip', 'Delete') }}
                   </v-tooltip>
                 </v-list-item-action>
               </v-list-item>
@@ -169,7 +173,9 @@
         </v-list-item-group>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="grow">
-        <span class="text-h6">No Selection</span>
+        <span class="text-h6">{{
+          t('Array.noSelection', 'No Selection')
+        }}</span>
       </v-col>
       <v-col v-else :class="`grow ${styles.listWithDetail.itemContent}`">
         <dispatch-renderer
@@ -207,7 +213,7 @@ import {
   RendererProps,
   useJsonFormsArrayControl,
 } from '@jsonforms/vue2';
-import { useVuetifyArrayControl } from '../util';
+import { useTranslator, useVuetifyArrayControl } from '../util';
 import {
   VList,
   VListItemGroup,
@@ -269,10 +275,12 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const selectedIndex = ref<number | undefined>(undefined);
+    const t = useTranslator();
 
     return {
       ...useVuetifyArrayControl(useJsonFormsArrayControl(props)),
       selectedIndex,
+      t,
     };
   },
   computed: {
diff --git a/vue2-vuetify/src/complex/ArrayControlRenderer.vue b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
index 89effc71..9018095f 100644
--- a/vue2-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
@@ -33,7 +33,11 @@
               <v-icon>mdi-plus</v-icon>
             </v-btn>
           </template>
-          {{ `Add to ${control.label}` }}
+          {{
+            t('array.btn.add.tooltip', 'Add to ${label}', {
+              label: `${control.label}`,
+            })
+          }}
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
@@ -110,7 +114,7 @@
                         <v-icon class="notranslate">mdi-arrow-up</v-icon>
                       </v-btn>
                     </template>
-                    Move Up
+                    {{ t('array.btn.moveUp.tooltip', 'Move Up') }}
                   </v-tooltip>
                   <v-tooltip bottom>
                     <template v-slot:activator="{ on: onTooltip }">
@@ -129,7 +133,7 @@
                         <v-icon class="notranslate">mdi-arrow-down</v-icon>
                       </v-btn>
                     </template>
-                    Move Down
+                    {{ t('array.btn.moveDown.tooltip', 'Move Down') }}
                   </v-tooltip>
                   <v-tooltip bottom>
                     <template v-slot:activator="{ on: onTooltip }">
@@ -153,7 +157,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    Delete
+                    {{ t('array.btn.delete.tooltip', 'Delete') }}
                   </v-tooltip>
                 </td>
               </tr>
@@ -162,7 +166,7 @@
         </v-row>
       </v-container>
       <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
-        No data
+        {{ t('array.btn.noData.tooltip', 'No data') }}
       </v-container>
     </v-card-text>
   </v-card>
@@ -190,7 +194,7 @@ import {
   useJsonFormsArrayControl,
   RendererProps,
 } from '@jsonforms/vue2';
-import { useVuetifyArrayControl } from '../util';
+import { useTranslator, useVuetifyArrayControl } from '../util';
 import {
   VCard,
   VCardTitle,
@@ -235,7 +239,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVuetifyArrayControl(useJsonFormsArrayControl(props));
+    const t = useTranslator();
+
+    return { ...useVuetifyArrayControl(useJsonFormsArrayControl(props)), t };
   },
   computed: {
     arraySchema(): JsonSchema | undefined {
diff --git a/vue2-vuetify/src/complex/OneOfRenderer.vue b/vue2-vuetify/src/complex/OneOfRenderer.vue
index 01270ce0..51b63c57 100644
--- a/vue2-vuetify/src/complex/OneOfRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfRenderer.vue
@@ -42,18 +42,28 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5"> Clear form? </v-card-title>
+        <v-card-title class="text-h5">
+          {{ t('form.clear.title', 'Clear form?') }}
+        </v-card-title>
 
         <v-card-text>
-          Your data will be cleared if you select this new option. Do you want
-          to proceed?
+          {{
+            t(
+              'form.clear.text',
+              'Your data will be cleared. Do you want to proceed?'
+            )
+          }}
         </v-card-text>
 
         <v-card-actions>
           <v-spacer></v-spacer>
 
-          <v-btn text @click="cancel"> No </v-btn>
-          <v-btn text ref="confirm" @click="confirm"> Yes </v-btn>
+          <v-btn text @click="cancel">
+            {{ t('form.clear.cancel', 'No') }}
+          </v-btn>
+          <v-btn text ref="confirm" @click="confirm">
+            {{ t('form.clear.confirm', 'Yes') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/vue2-vuetify/src/complex/OneOfTabRenderer.vue b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
index be2434eb..4e451777 100644
--- a/vue2-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
@@ -35,18 +35,28 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5"> Clear form? </v-card-title>
+        <v-card-title class="text-h5">
+          {{ t('form.clear.title', 'Clear form?') }}
+        </v-card-title>
 
         <v-card-text>
-          Your data will be cleared if you navigate away from this tab. Do you
-          want to proceed?
+          {{
+            t(
+              'form.clear.text',
+              'Your data will be cleared. Do you want to proceed?'
+            )
+          }}
         </v-card-text>
 
         <v-card-actions>
           <v-spacer></v-spacer>
 
-          <v-btn text @click="cancel"> No </v-btn>
-          <v-btn text ref="confirm" @click="confirm"> Yes </v-btn>
+          <v-btn text @click="cancel">
+            {{ t('form.clear.cancel', 'No') }}
+          </v-btn>
+          <v-btn text ref="confirm" @click="confirm">
+            {{ t('form.clear.confirm', 'Yes') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -86,7 +96,7 @@ import {
   VTabs,
   VTabsItems,
 } from 'vuetify/lib';
-import { useVuetifyControl } from '../util';
+import { useTranslator, useVuetifyControl } from '../util';
 import { CombinatorProperties } from './components';
 
 const controlRenderer = defineComponent({
@@ -117,6 +127,7 @@ const controlRenderer = defineComponent({
     const tabIndex = ref(selectedIndex.value);
     const newSelectedIndex = ref(0);
     const dialog = ref(false);
+    const t = useTranslator();
 
     return {
       ...useVuetifyControl(input),
@@ -124,6 +135,7 @@ const controlRenderer = defineComponent({
       tabIndex,
       dialog,
       newSelectedIndex,
+      t,
     };
   },
   computed: {
diff --git a/vue2-vuetify/src/complex/components/AdditionalProperties.vue b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
index c3331547..1346284b 100644
--- a/vue2-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,6 +1,9 @@
 <template>
-  <v-card v-if="control.visible" elevation="0">
-    <v-card-title>
+  <v-card
+    v-if="control.visible"
+    v-bind="vuetifyProps('v-card', { elevation: '0' })"
+  >
+    <v-card-title v-bind="vuetifyProps('v-card-title')">
       <v-toolbar flat>
         <v-toolbar-title>{{ additionalPropertiesTitle }}</v-toolbar-title>
         <v-spacer></v-spacer>
@@ -38,7 +41,7 @@
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
-    <v-container>
+    <v-container v-bind="vuetifyProps('v-container')">
       <v-row
         v-for="(element, index) in additionalPropertyItems"
         :key="`${index}`"
@@ -96,6 +99,8 @@ import {
   useJsonFormsControlWithDetail,
 } from '@jsonforms/vue2';
 import Ajv, { ValidateFunction } from 'ajv';
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
 import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import startCase from 'lodash/startCase';
@@ -292,10 +297,16 @@ export default defineComponent({
       ).compile(propertyNameSchema);
     }
 
-    const vuetifyProps = (path: string) => {
+    const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
       const props = get(appliedOptions.value?.vuetify, path);
 
-      return props && isPlainObject(props) ? props : {};
+      if (props && isPlainObject(props)) {
+        return defaultProps
+          ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
+          : props;
+      } else {
+        return defaultProps ?? {};
+      }
     };
 
     const t = useTranslator();
diff --git a/vue2-vuetify/src/controls/IntegerControlRenderer.vue b/vue2-vuetify/src/controls/IntegerControlRenderer.vue
index 2c418566..76e041a2 100644
--- a/vue2-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/vue2-vuetify/src/controls/IntegerControlRenderer.vue
@@ -21,7 +21,7 @@
         :error-messages="control.errors"
         :value="inputValue"
         :clearable="hover"
-        v-bind="vuetifyProps('v-text-field')"
+        v-bind="vuetifyProps('v-text-field', { type: 'number' })"
         @input="onInputChange"
         @focus="isFocused = true"
         @blur="isFocused = false"
diff --git a/vue2-vuetify/src/controls/NumberControlRenderer.vue b/vue2-vuetify/src/controls/NumberControlRenderer.vue
index ccd61557..549dc2e4 100644
--- a/vue2-vuetify/src/controls/NumberControlRenderer.vue
+++ b/vue2-vuetify/src/controls/NumberControlRenderer.vue
@@ -21,7 +21,7 @@
         :error-messages="control.errors"
         :value="inputValue"
         :clearable="hover"
-        v-bind="vuetifyProps('v-text-field')"
+        v-bind="vuetifyProps('v-text-field', { type: 'number' })"
         @input="onInputChange"
         @focus="isFocused = true"
         @blur="isFocused = false"
diff --git a/vue2-vuetify/src/controls/components/ValidationBadge.vue b/vue2-vuetify/src/controls/components/ValidationBadge.vue
index b119a58f..de1f4f8d 100644
--- a/vue2-vuetify/src/controls/components/ValidationBadge.vue
+++ b/vue2-vuetify/src/controls/components/ValidationBadge.vue
@@ -17,7 +17,7 @@
         </v-badge>
       </template>
 
-      <p>Validation Errors</p>
+      <p>{{ header }}</p>
       <p
         v-for="(message, index) in tooltipMessages"
         :key="`${index}`"
@@ -76,6 +76,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    header: {
+      type: String,
+      default: 'Validation Errors',
+    },
   },
   computed: {
     tooltipMessages(): string[] {
diff --git a/vue2-vuetify/src/util/composition.ts b/vue2-vuetify/src/util/composition.ts
index 73fcb8e7..c34f3724 100644
--- a/vue2-vuetify/src/util/composition.ts
+++ b/vue2-vuetify/src/util/composition.ts
@@ -106,10 +106,16 @@ export const useVuetifyControl = <
 
   const styles = useStyles(input.control.value.uischema);
 
-  const vuetifyProps = (path: string) => {
+  const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
     const props = get(appliedOptions.value?.vuetify, path);
 
-    return props && isPlainObject(props) ? props : {};
+    if (props && isPlainObject(props)) {
+      return defaultProps
+        ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
+        : props;
+    } else {
+      return defaultProps ?? {};
+    }
   };
 
   return {

From b07e62ac826d2248ffad6c305631e775d4cf6078 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 23:07:03 -0400
Subject: [PATCH 15/19] add vuetifyProps configuration

---
 vue2-vuetify/src/layouts/CategorizationRenderer.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/vue2-vuetify/src/layouts/CategorizationRenderer.vue b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
index b60240a6..798eddd1 100644
--- a/vue2-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
@@ -1,7 +1,11 @@
 <template>
-  <v-container v-if="layout.visible" :class="styles.categorization.root">
+  <v-container
+    v-if="layout.visible"
+    :class="styles.categorization.root"
+    v-bind="vuetifyProps('v-container')"
+  >
     <v-row
-      v-if="appliedOptions.vertical == true"
+      v-if="appliedOptions.vertical === true"
       v-bind="vuetifyProps('v-row')"
     >
       <v-col v-bind="vuetifyProps('v-col.v-tabs')">

From 1e53d47ff1934d5536e997eaa925edd55e43b228 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 23:07:22 -0400
Subject: [PATCH 16/19] use tripple equal

---
 vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 05a09a85..48402593 100644
--- a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="layout.visible" :class="styles.categorization.root">
     <v-stepper
-      v-if="appliedOptions.vertical == true"
+      v-if="appliedOptions.vertical === true"
       v-model="activeCategory"
       vertical
       v-bind="vuetifyProps('v-stepper')"

From 12ae66e13a6edbcafd47c9a4b7f5f46c9d78bea6 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Sun, 12 Mar 2023 23:27:26 -0400
Subject: [PATCH 17/19] refactor vuetifyProps by eliminating duplicate code

---
 .../components/AdditionalProperties.vue       | 22 +++-----
 vue2-vuetify/src/util/composition.ts          | 54 +++++++------------
 2 files changed, 26 insertions(+), 50 deletions(-)

diff --git a/vue2-vuetify/src/complex/components/AdditionalProperties.vue b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
index 1346284b..481ec90c 100644
--- a/vue2-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
@@ -99,9 +99,6 @@ import {
   useJsonFormsControlWithDetail,
 } from '@jsonforms/vue2';
 import Ajv, { ValidateFunction } from 'ajv';
-import cloneDeep from 'lodash/cloneDeep';
-import merge from 'lodash/merge';
-import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import startCase from 'lodash/startCase';
 import { defineComponent, PropType, Ref, ref } from 'vue';
@@ -122,7 +119,12 @@ import {
 } from 'vuetify/lib';
 import { DisabledIconFocus } from '../../controls/directives';
 import { useStyles } from '../../styles';
-import { useAjv, useControlAppliedOptions, useTranslator } from '../../util';
+import {
+  useAjv,
+  useControlAppliedOptions,
+  useTranslator,
+  useVuetifyProps,
+} from '../../util';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -297,17 +299,7 @@ export default defineComponent({
       ).compile(propertyNameSchema);
     }
 
-    const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
-      const props = get(appliedOptions.value?.vuetify, path);
-
-      if (props && isPlainObject(props)) {
-        return defaultProps
-          ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
-          : props;
-      } else {
-        return defaultProps ?? {};
-      }
-    };
+    const vuetifyProps = useVuetifyProps(appliedOptions);
 
     const t = useTranslator();
     return {
diff --git a/vue2-vuetify/src/util/composition.ts b/vue2-vuetify/src/util/composition.ts
index c34f3724..f8644f48 100644
--- a/vue2-vuetify/src/util/composition.ts
+++ b/vue2-vuetify/src/util/composition.ts
@@ -40,6 +40,20 @@ export const useComputedLabel = <I extends { control: any }>(
   });
 };
 
+export const useVuetifyProps = (
+  appliedOptions: ComputedRef<Record<string, any>>
+) => {
+  return (path: string, defaultProps?: Record<string, any>) => {
+    const props = get(appliedOptions.value?.vuetify, path);
+
+    if (props && isPlainObject(props)) {
+      return defaultProps ? merge({}, defaultProps, props) : props;
+    } else {
+      return defaultProps ?? {};
+    }
+  };
+};
+
 /**
  * Adds styles, appliedOptions and vuetifyProps
  */
@@ -52,11 +66,8 @@ export const useVuetifyLabel = <I extends { label: any }>(input: I) => {
       cloneDeep(input.label.value.uischema.options)
     )
   );
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
-    return props && isPlainObject(props) ? props : {};
-  };
   return {
     ...input,
     appliedOptions,
@@ -106,17 +117,7 @@ export const useVuetifyControl = <
 
   const styles = useStyles(input.control.value.uischema);
 
-  const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    if (props && isPlainObject(props)) {
-      return defaultProps
-        ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
-        : props;
-    } else {
-      return defaultProps ?? {};
-    }
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,
@@ -166,16 +167,7 @@ export const useVuetifyLayout = <I extends { layout: any }>(input: I) => {
     );
   });
 
-  const vuetifyProps = (path: string, defaultProps?: Record<string, any>) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-    if (props && isPlainObject(props)) {
-      return defaultProps
-        ? merge({}, cloneDeep(defaultProps), cloneDeep(props))
-        : props;
-    } else {
-      return defaultProps ?? {};
-    }
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,
@@ -195,11 +187,7 @@ export const useVuetifyArrayControl = <I extends { control: any }>(
 
   const computedLabel = useComputedLabel(input, appliedOptions);
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   const childLabelForIndex = (index: number | null) => {
     if (index === null) {
@@ -242,11 +230,7 @@ export const useVuetifyBasicControl = <I extends { control: any }>(
 ) => {
   const appliedOptions = useControlAppliedOptions(input);
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,

From 2d54dc526831f0443ad637502bdf9048c1673c60 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Fri, 19 May 2023 22:55:31 -0400
Subject: [PATCH 18/19] update to version 3.1.0-alpha.3

---
 example/package.json                                   |  8 ++++----
 lerna.json                                             |  7 ++-----
 vue2-vuetify/package.json                              | 10 +++++-----
 vue2-vuetify/src/complex/AnyOfRenderer.vue             |  2 +-
 vue2-vuetify/src/complex/OneOfRenderer.vue             |  2 +-
 vue2-vuetify/src/complex/OneOfTabRenderer.vue          |  2 +-
 .../src/complex/components/AdditionalProperties.vue    |  6 ++----
 7 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/example/package.json b/example/package.json
index b1ff1912..3294b823 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "3.1.0-alpha.0",
+  "version": "3.1.0-alpha.3",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -8,9 +8,9 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@jsonforms/core": "3.1.0-alpha.0",
-    "@jsonforms/vue2": "3.1.0-alpha.0",
-    "@jsonforms/vue2-vuetify": "3.1.0-alpha.0",
+    "@jsonforms/core": "3.1.0-alpha.3",
+    "@jsonforms/vue2": "3.1.0-alpha.3",
+    "@jsonforms/vue2-vuetify": "3.1.0-alpha.3",
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.9.1",
     "json-refs": "^3.0.15",
diff --git a/lerna.json b/lerna.json
index bde45ee5..9995bb06 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,7 +1,4 @@
 {
-  "packages": [
-    "vue2-vuetify",
-    "example"
-  ],
-  "version": "3.1.0-alpha.0"
+  "packages": ["vue2-vuetify", "example"],
+  "version": "3.1.0-alpha.3"
 }
diff --git a/vue2-vuetify/package.json b/vue2-vuetify/package.json
index 1dca4abc..05958dc4 100644
--- a/vue2-vuetify/package.json
+++ b/vue2-vuetify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue2-vuetify",
-  "version": "3.1.0-alpha.0",
+  "version": "3.1.0-alpha.3",
   "description": "Vue 2 Vuetify renderers for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms-vuetify-renderers",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -48,8 +48,8 @@
     "v-mask": "^2.3.0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.0",
-    "@jsonforms/vue2": "3.1.0-alpha.0",
+    "@jsonforms/core": "3.1.0-alpha.3",
+    "@jsonforms/vue2": "3.1.0-alpha.3",
     "@mdi/font": "^5.9.55",
     "vue": "^2.7.0",
     "vuetify": "^2.4.0"
@@ -58,8 +58,8 @@
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-typescript": "^7.14.5",
-    "@jsonforms/core": "3.1.0-alpha.0",
-    "@jsonforms/vue2": "3.1.0-alpha.0",
+    "@jsonforms/core": "3.1.0-alpha.3",
+    "@jsonforms/vue2": "3.1.0-alpha.3",
     "@mdi/font": "^5.9.55",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
diff --git a/vue2-vuetify/src/complex/AnyOfRenderer.vue b/vue2-vuetify/src/complex/AnyOfRenderer.vue
index 2302e45c..db621d16 100644
--- a/vue2-vuetify/src/complex/AnyOfRenderer.vue
+++ b/vue2-vuetify/src/complex/AnyOfRenderer.vue
@@ -69,7 +69,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsAnyOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
     const selectedIndex = ref(control.indexOfFittingSchema || 0);
 
     return {
diff --git a/vue2-vuetify/src/complex/OneOfRenderer.vue b/vue2-vuetify/src/complex/OneOfRenderer.vue
index 51b63c57..2e7bbc6e 100644
--- a/vue2-vuetify/src/complex/OneOfRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfRenderer.vue
@@ -126,7 +126,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsOneOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
 
     const selectedIndex = ref(control.indexOfFittingSchema);
     const selectIndex = ref(selectedIndex.value);
diff --git a/vue2-vuetify/src/complex/OneOfTabRenderer.vue b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
index 4e451777..50cfc136 100644
--- a/vue2-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
@@ -121,7 +121,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsOneOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
 
     const selectedIndex = ref(control.indexOfFittingSchema || 0);
     const tabIndex = ref(selectedIndex.value);
diff --git a/vue2-vuetify/src/complex/components/AdditionalProperties.vue b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
index 481ec90c..c3232903 100644
--- a/vue2-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
@@ -101,7 +101,7 @@ import {
 import Ajv, { ValidateFunction } from 'ajv';
 import isPlainObject from 'lodash/isPlainObject';
 import startCase from 'lodash/startCase';
-import { defineComponent, PropType, Ref, ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import {
   VBtn,
   VCard,
@@ -172,9 +172,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const control = props.input.control as any as Ref<
-      typeof props.input.control
-    >;
+    const control = props.input.control;
     const reservedPropertyNames = Object.keys(
       (control.value.schema && control.value.schema.properties) || {}
     );

From b10452cce68cf889cdaac09790f0687071346807 Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Fri, 19 May 2023 23:30:19 -0400
Subject: [PATCH 19/19] use the available message translations from jsonforms
 core

---
 .../src/additional/ListWithDetailRenderer.vue | 22 +++++++------------
 .../src/complex/ArrayControlRenderer.vue      | 18 ++++++---------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
index a5b2eee2..db3e249a 100644
--- a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -19,7 +19,7 @@
                 text
                 elevation="0"
                 small
-                :aria-label="`Add to ${control.label}`"
+                :aria-label="control.translations.addAriaLabel"
                 v-on="onTooltip"
                 :class="styles.listWithDetail.addButton"
                 @click="addButtonClick"
@@ -34,17 +34,13 @@
                 <v-icon>mdi-plus</v-icon>
               </v-btn>
             </template>
-            {{
-              t('array.btn.add.tooltip', 'Add to ${label}', {
-                label: `${control.label}`,
-              })
-            }}
+            {{ control.translations.addTooltip }}
           </v-tooltip>
         </v-toolbar>
       </v-col>
     </v-row>
     <v-row v-if="dataLength === 0" :class="styles.listWithDetail.noData">
-      <v-col> {{ t('Array.noData', 'No data') }} </v-col>
+      <v-col> {{ control.translations.noDataMessage }} </v-col>
     </v-row>
     <v-row v-else>
       <v-col class="shrink pa-0">
@@ -108,7 +104,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Move up"
+                        :aria-label="control.translations.upAriaLabel"
                         :disabled="index <= 0 || !control.enabled"
                         :class="styles.listWithDetail.itemMoveUp"
                         @click.native="moveUpClick($event, index)"
@@ -129,7 +125,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Move down"
+                        :aria-label="control.translations.downAriaLabel"
                         :disabled="index >= dataLength - 1 || !control.enabled"
                         :class="styles.listWithDetail.itemMoveDown"
                         @click.native="moveDownClick($event, index)"
@@ -150,7 +146,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Delete"
+                        :aria-label="control.translations.removeAriaLabel"
                         :class="styles.listWithDetail.itemDelete"
                         @click.native="removeItemsClick($event, [index])"
                         :disabled="
@@ -164,7 +160,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    {{ t('array.btn.delete.tooltip', 'Delete') }}
+                    {{ control.translations.removeTooltip }}
                   </v-tooltip>
                 </v-list-item-action>
               </v-list-item>
@@ -173,9 +169,7 @@
         </v-list-item-group>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="grow">
-        <span class="text-h6">{{
-          t('Array.noSelection', 'No Selection')
-        }}</span>
+        <span class="text-h6">{{ control.translations.noSelection }}</span>
       </v-col>
       <v-col v-else :class="`grow ${styles.listWithDetail.itemContent}`">
         <dispatch-renderer
diff --git a/vue2-vuetify/src/complex/ArrayControlRenderer.vue b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
index 9018095f..5a7e3bf6 100644
--- a/vue2-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
@@ -18,7 +18,7 @@
               text
               elevation="0"
               small
-              :aria-label="`Add to ${control.label}`"
+              :aria-label="control.translations.addAriaLabel"
               v-on="onTooltip"
               :class="styles.arrayList.addButton"
               :disabled="
@@ -33,11 +33,7 @@
               <v-icon>mdi-plus</v-icon>
             </v-btn>
           </template>
-          {{
-            t('array.btn.add.tooltip', 'Add to ${label}', {
-              label: `${control.label}`,
-            })
-          }}
+          {{ control.translations.addTooltip }}
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
@@ -106,7 +102,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Move up"
+                        :aria-label="control.translations.upAriaLabel"
                         :disabled="index <= 0 || !control.enabled"
                         :class="styles.arrayList.itemMoveUp"
                         @click.native="moveUpClick($event, index)"
@@ -125,7 +121,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Move down"
+                        :aria-label="control.translations.downAriaLabel"
                         :disabled="index >= dataLength - 1 || !control.enabled"
                         :class="styles.arrayList.itemMoveDown"
                         @click.native="moveDownClick($event, index)"
@@ -143,7 +139,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Delete"
+                        :aria-label="control.translations.removeAriaLabel"
                         :class="styles.arrayList.itemDelete"
                         :disabled="
                           !control.enabled ||
@@ -157,7 +153,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    {{ t('array.btn.delete.tooltip', 'Delete') }}
+                    {{ control.translations.removeTooltip }}
                   </v-tooltip>
                 </td>
               </tr>
@@ -166,7 +162,7 @@
         </v-row>
       </v-container>
       <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
-        {{ t('array.btn.noData.tooltip', 'No data') }}
+        {{ control.translations.noDataMessage }}
       </v-container>
     </v-card-text>
   </v-card>