Improve Vue Layout renderer reactivity and Vue HTML output

packages/vue/vue-vanilla/dev/components/App.vue

@@ -237,8 +237,124 @@ export default defineComponent({
       this.data.number = 10;
     },
     adaptUiSchema() {
-      this.uischema.elements[0].elements[0].elements[1].options = {
-        multi: true
+      this.uischema = {
+        type: 'VerticalLayout',
+        elements: [
+          {
+            type: 'HorizontalLayout',
+            elements: [
+              {
+                type: 'VerticalLayout',
+                elements: [
+                  {
+                    type: 'Control',
+                    scope: '#/properties/string',
+                    options: {
+                      placeholder: 'this is a placeholder'
+                    }
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/multiString'
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/boolean',
+                    options: {
+                      placeholder: 'boolean placeholder'
+                    }
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/boolean2'
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/number',
+                    rule: {
+                      effect: 'DISABLE',
+                      condition: {
+                        scope: '#/properties/boolean',
+                        schema: {
+                          const: true
+                        }
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                type: 'Group',
+                label: 'My group',
+                elements: [
+                  {
+                    type: 'Control',
+                    scope: '#/properties/integer',
+                    rule: {
+                      effect: 'HIDE',
+                      condition: {
+                        scope: '#/properties/boolean2',
+                        schema: {
+                          const: true
+                        }
+                      }
+                    }
+                  },
+                  {
+                    type: 'HorizontalLayout',
+                    elements: [
+                      {
+                        type: 'Control',
+                        scope: '#/properties/enum'
+                      },
+                      {
+                        type: 'Control',
+                        scope: '#/properties/oneOfEnum'
+                      },
+                      {
+                        type: 'Control',
+                        scope: '#/properties/date',
+                        options: {
+                          placeholder: 'date placeholder'
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/dateTime',
+                    options: {
+                      placeholder: 'date-time placeholder'
+                    }
+                  },
+                  {
+                    type: 'Control',
+                    scope: '#/properties/time',
+                    options: {
+                      placeholder: 'time placeholder',
+                      styles: {
+                        control: {
+                          root: 'control my-time'
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: 'Label',
+            text: 'This is my label'
+          },
+          {
+            type: 'Control',
+            scope: '#/properties/array',
+            options: {
+              childLabelProp: 'age'
+            }
+          }
+        ]
       };
     }
   },

packages/vue/vue-vanilla/rollup.config.js

@@ -12,7 +12,7 @@ const buildFormats = [
       exports: 'named',
       sourcemap: true
     },
-    external: ['vue', '@jsonforms/core', '@jsonforms/vue', 'lodash/maxBy', 'lodash/merge', 'lodash/cloneDeep'],
+    external: ['vue', '@jsonforms/core', '@jsonforms/vue', 'lodash/maxBy', 'lodash/merge', 'lodash/cloneDeep', 'lodash/mergeWith'],
     plugins: [
       typescript({
         module: 'esnext',

packages/vue/vue-vanilla/src/controls/BooleanControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <control-wrapper
-    v-bind="control"
+    v-bind="controlWrapper"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"

packages/vue/vue-vanilla/src/util/composition.ts

@@ -1,31 +1,14 @@
 import { useStyles } from '../styles';
-import { Options, optionsInit } from './options';
-import { Ref, ref, watch } from '../../config/vue';
+import { computed, ref } from '../../config/vue';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import {
   composePaths,
   findUISchema,
   getFirstPrimitiveProp,
-  Resolve,
-  UISchemaElement
+  Resolve
 } from '@jsonforms/core';
 
-export type Nullable<T> = {
-  [P in keyof T]: P | null;
-};
-
-const updateOptions = (
-  appliedOptionsRef: Ref<Nullable<Options>>,
-  controlRef: any
-) => {
-  appliedOptionsRef.value = merge(
-    {},
-    cloneDeep(controlRef.value.config),
-    cloneDeep(controlRef.value.uischema.options)
-  );
-};
-
 /**
  * Adds styles, isFocused, appliedOptions and onChange
  */
@@ -35,23 +18,37 @@ export const useVanillaControl = <
   input: I,
   adaptTarget: (target: any) => any = v => v.value
 ) => {
-  const appliedOptions = ref<Nullable<Options>>(optionsInit());
-  updateOptions(appliedOptions, input.control);
-  watch(
-    () => [input.control.value.config, input.control.value.uischema],
-    () => {
-      updateOptions(appliedOptions, input.control);
-    }
+  const appliedOptions = computed(() =>
+    merge(
+      {},
+      cloneDeep(input.control.value.config),
+      cloneDeep(input.control.value.uischema.options)
+    )
   );
+
   const isFocused = ref(false);
   const onChange = (event: Event) => {
     input.handleChange(input.control.value.path, adaptTarget(event.target));
   };
+
+  const controlWrapper = computed(() => {
+    const {
+      id,
+      description,
+      errors,
+      label,
+      visible,
+      required
+    } = input.control.value;
+    return { id, description, errors, label, visible, required };
+  });
+
   return {
     ...input,
     styles: useStyles(input.control.value.uischema),
     isFocused,
     appliedOptions,
+    controlWrapper,
     onChange
   };
 };
@@ -60,13 +57,12 @@ export const useVanillaControl = <
  * Adds styles and appliedOptions
  */
 export const useVanillaLayout = <I extends { layout: any }>(input: I) => {
-  const appliedOptions = ref<Nullable<Options>>(optionsInit());
-  updateOptions(appliedOptions, input.layout);
-  watch(
-    () => [input.layout.value.config, input.layout.value.uischema],
-    () => {
-      updateOptions(appliedOptions, input.layout);
-    }
+  const appliedOptions = computed(() =>
+    merge(
+      {},
+      cloneDeep(input.layout.value.config),
+      cloneDeep(input.layout.value.uischema.options)
+    )
   );
   return {
     ...input,
@@ -75,45 +71,29 @@ export const useVanillaLayout = <I extends { layout: any }>(input: I) => {
   };
 };
 
-const updateUiSchema = (
-  uiSchemaRef: Ref<UISchemaElement | undefined>,
-  controlRef: any
-) => {
-  uiSchemaRef.value = findUISchema(
-    controlRef.value.uischemas,
-    controlRef.value.schema,
-    controlRef.value.uischema.scope,
-    controlRef.value.path
-  );
-};
-
 /**
  * Adds styles, appliedOptions and childUiSchema
  */
 export const useVanillaArrayControl = <I extends { control: any }>(
   input: I
 ) => {
-  const appliedOptions = ref<Nullable<Options>>(optionsInit());
-  updateOptions(appliedOptions, input.control);
-  watch(
-    () => [input.control.value.config, input.control.value.uischema],
-    () => {
-      updateOptions(appliedOptions, input.control);
-    }
+  const appliedOptions = computed(() =>
+    merge(
+      {},
+      cloneDeep(input.control.value.config),
+      cloneDeep(input.control.value.uischema.options)
+    )
   );
-  const childUiSchema = ref<UISchemaElement>();
-  updateUiSchema(childUiSchema, input.control);
-  watch(
-    () => [
+
+  const childUiSchema = computed(() =>
+    findUISchema(
       input.control.value.uischemas,
       input.control.value.schema,
       input.control.value.uischema.scope,
       input.control.value.path
-    ],
-    () => {
-      updateUiSchema(childUiSchema, input.control);
-    }
+    )
   );
+
   const childLabelForIndex = (index: number) => {
     const childLabelProp =
       input.control.value.uischema.options?.childLabelProp ??

packages/vue/vue-vanilla/src/util/options.ts

@@ -4,10 +4,3 @@ export interface Options {
   focus?: boolean;
   step?: number;
 }
-
-export const optionsInit = () => ({
-  showUnfocusedDescription: null,
-  hideRequiredAsterisk:null,
-  focus: null,
-  step: null
-})