From f8c2cafa17643706b84172d8414370af12bb5a0f Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:07:43 -0500
Subject: [PATCH 01/37] initial mixed renderer support

---
 .../examples/src/examples/mixed-object.ts     |  85 ++++
 packages/examples/src/examples/mixed.ts       |  47 +++
 packages/examples/src/index.ts                |   4 +
 .../src/complex/MixedRenderer.entry.ts        |  75 ++++
 .../vue-vuetify/src/complex/MixedRenderer.vue | 394 ++++++++++++++++++
 packages/vue-vuetify/src/complex/index.ts     |   4 +
 6 files changed, 609 insertions(+)
 create mode 100644 packages/examples/src/examples/mixed-object.ts
 create mode 100644 packages/examples/src/examples/mixed.ts
 create mode 100644 packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
 create mode 100644 packages/vue-vuetify/src/complex/MixedRenderer.vue

diff --git a/packages/examples/src/examples/mixed-object.ts b/packages/examples/src/examples/mixed-object.ts
new file mode 100644
index 000000000..8e41e7971
--- /dev/null
+++ b/packages/examples/src/examples/mixed-object.ts
@@ -0,0 +1,85 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Mixed Types Example',
+  type: 'object',
+  properties: {
+    mixedSimple: {
+      type: ['string', 'boolean', 'integer'],
+      description: 'This property can be a string, boolean, or integer.',
+    },
+    nullableString: {
+      type: ['string', 'null'],
+    },
+    mixed: {
+      type: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    },
+  },
+  required: ['mixedSimple'],
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/mixedSimple',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/nullableString',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/mixed',
+    },
+  ],
+};
+
+const data = {
+  mixedSimple: 'String',
+  nullableString: null as any,
+};
+
+registerExamples([
+  {
+    name: 'mixed-object',
+    label: 'Mixed Object',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/examples/mixed.ts b/packages/examples/src/examples/mixed.ts
new file mode 100644
index 000000000..1de6590a1
--- /dev/null
+++ b/packages/examples/src/examples/mixed.ts
@@ -0,0 +1,47 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: ['string', 'boolean', 'integer', 'null'],
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+const data = undefined as any;
+
+registerExamples([
+  {
+    name: 'mixed',
+    label: 'Mixed',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index c50414362..750168278 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -75,6 +75,8 @@ import * as additionalErrors from './examples/additional-errors';
 import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
 import * as additionalProperties from './examples/additional-properties';
 import * as login from './examples/login';
+import * as mixed from './examples/mixed';
+import * as mixedObject from './examples/mixed-object';
 import * as string from './examples/string';
 export * from './register';
 export * from './example';
@@ -134,6 +136,8 @@ export {
   additionalErrors,
   additionalProperties,
   login,
+  mixed,
+  mixedObject,
   issue_1884,
   arrayWithDefaults,
   string,
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
new file mode 100644
index 000000000..20e543057
--- /dev/null
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
@@ -0,0 +1,75 @@
+import {
+  hasType,
+  isControl,
+  rankWith,
+  resolveSchema,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Scopable,
+  type TesterContext,
+  type UISchemaElement,
+} from '@jsonforms/core';
+
+import mixedRenderer from './MixedRenderer.vue';
+import isEmpty from 'lodash/isEmpty';
+
+export const isMixedSchema = (
+  uischema: UISchemaElement & Scopable,
+  schema: JsonSchema,
+  context: TesterContext,
+) => {
+  if (!schema || typeof schema !== 'object') {
+    return false;
+  }
+
+  if (Array.isArray(schema.type)) {
+    return true;
+  }
+  if (schema.type === 'object') {
+    const schemaPath = uischema.scope;
+    if (schemaPath && !isEmpty(schemaPath)) {
+      let currentDataSchema = schema;
+      currentDataSchema = resolveSchema(
+        schema,
+        schemaPath,
+        context?.rootSchema,
+      );
+      if (currentDataSchema === undefined) {
+        return false;
+      }
+      if (Array.isArray(currentDataSchema.type)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+export const isMixedControl = (
+  uischema: UISchemaElement,
+  schema: JsonSchema,
+  context: TesterContext,
+) =>
+  isMixedSchema(uischema, schema, context) &&
+  (isControl(uischema) || isDefaultGenUiSchema(uischema));
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: mixedRenderer,
+  tester: rankWith(20, isMixedControl),
+};
+
+function isDefaultGenUiSchema(uischema: UISchemaElement): boolean {
+  const elements = (uischema as any)?.elements;
+  let result = false;
+  if (
+    (uischema.type === 'VerticalLayout' || uischema.type === 'Group') &&
+    Array.isArray(elements)
+  ) {
+    if (elements.length == 1) {
+      // if the uischema is the default then take control
+      result = elements[0].scope === '#' && elements[0].type === 'Control';
+    }
+  }
+  return result;
+}
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
new file mode 100644
index 000000000..156da4fc9
--- /dev/null
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -0,0 +1,394 @@
+<template>
+  <div
+    :class="[
+      'prefixed-input',
+      { 'vertical-layout': valueType === 'object' || valueType === 'array' },
+    ]"
+    v-if="control.visible"
+  >
+    <v-select
+      v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
+      :class="['prefix']"
+      v-disabled-icon-focus
+      :id="control.id + '-input-selector'"
+      :disabled="!control.enabled"
+      :label="computedLabel"
+      :required="control.required"
+      :error-messages="control.errors"
+      :items="mixedRenderInfos"
+      :clearable="control.enabled"
+      @update:model-value="handleSelectChange"
+      :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
+      item-value="index"
+      v-model="selectedIndex"
+      v-bind="vuetifyProps('v-select')"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    >
+    </v-select>
+    <dispatch-renderer
+      :class="['input']"
+      v-if="schema && !(nullable && control.data === null)"
+      :schema="schema"
+      :uischema="uischema"
+      :path="path"
+      :renderers="control.renderers"
+      :cells="control.cells"
+      :enabled="control.enabled"
+    >
+    </dispatch-renderer>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  createControlElement,
+  createDefaultValue,
+  findUISchema,
+  type ControlElement,
+  type JsonFormsUISchemaRegistryEntry,
+  type JsonSchema,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  useJsonFormsControl,
+  type RendererProps,
+} from '@jsonforms/vue';
+import { computed, defineComponent, ref, watch } from 'vue';
+import { VSelect, VBtn } from 'vuetify/components';
+import { DisabledIconFocus } from '../controls';
+import {
+  useCombinatorTranslations,
+  useIcons,
+  useJsonForms,
+  useTranslator,
+  useVuetifyControl,
+} from '../util';
+
+interface SchemaRenderInfo {
+  schema: JsonSchema;
+  uischema: UISchemaElement;
+  label: string;
+}
+
+function cleanSchema(schema: JsonSchema) {
+  // Define valid keywords for each JSON Schema type
+  const validKeywords: Record<string, string[]> = {
+    array: ['items', 'minItems', 'maxItems', 'uniqueItems', 'contains'],
+    object: [
+      'properties',
+      'required',
+      'additionalProperties',
+      'minProperties',
+      'maxProperties',
+      'patternProperties',
+      'dependencies',
+      'propertyNames',
+    ],
+    string: ['minLength', 'maxLength', 'pattern', 'format'],
+    number: [
+      'minimum',
+      'maximum',
+      'exclusiveMinimum',
+      'exclusiveMaximum',
+      'multipleOf',
+    ],
+    integer: [
+      'minimum',
+      'maximum',
+      'exclusiveMinimum',
+      'exclusiveMaximum',
+      'multipleOf',
+    ],
+    boolean: [],
+    null: [],
+  };
+
+  // Function to remove invalid keywords based on type
+  function clean(schema: JsonSchema) {
+    for (const validType in validKeywords) {
+      if (validType !== schema.type) {
+        const keywords = validKeywords[validType];
+        keywords.forEach((key) => {
+          delete (schema as any)[key];
+        });
+      }
+    }
+  }
+
+  return clean(schema);
+}
+
+function getSchemaTypesAsArray(schema: JsonSchema): string[] {
+  if (typeof schema.type === 'string') {
+    return [schema.type];
+  }
+
+  if (Array.isArray(schema.type)) {
+    return schema.type;
+  }
+
+  if (Array.isArray(schema.enum)) {
+    const enumTypes = new Set(
+      schema.enum.map((value) => getJsonDataType(value)),
+    );
+    if (!enumTypes.has(null)) {
+      // return only if we were able to determine all types, otherwise return the default
+      return Array.from(enumTypes).filter((type) => type !== null) as string[];
+    }
+  }
+
+  // return any
+  return ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'];
+}
+
+const createMixedRenderInfos = (
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  control: ControlElement,
+  path: string,
+  uischemas: JsonFormsUISchemaRegistryEntry[],
+): SchemaRenderInfo[] => {
+  let schemas: JsonSchema[] = [];
+
+  if (typeof schema.type === 'string') {
+    schemas.push(schema);
+  } else {
+    const types = getSchemaTypesAsArray(schema);
+
+    types.forEach((type) => {
+      schemas.push({
+        ...schema,
+        type,
+        default:
+          schema.default !== undefined &&
+          type === getJsonDataType(schema.default)
+            ? schema.default
+            : undefined,
+      });
+    });
+  }
+
+  return schemas.map((schema) => {
+    if (schema.type === 'object') {
+      schema.additionalProperties =
+        schema.additionalProperties !== false
+          ? (schema.additionalProperties ?? true)
+          : false;
+    } else if (schema.type === 'array') {
+      schema.items = schema.items ?? {};
+      if (!(schema.items as any)) {
+        (schema.items as any).type = [
+          'array',
+          'boolean',
+          'integer',
+          'null',
+          'number',
+          'object',
+          'string',
+        ];
+      }
+    }
+
+    // help determining the correct renders by removing keywords not appropriate for the type
+    cleanSchema(schema);
+
+    const detailsForSchema = control.options
+      ? control.options[schema.type + '-detail']
+      : undefined;
+
+    const schemaControl = detailsForSchema
+      ? {
+          ...control,
+          options: { ...control.options, detail: detailsForSchema },
+        }
+      : control;
+
+    return {
+      schema,
+      uischema: findUISchema(
+        uischemas,
+        schema,
+        control.scope,
+        path,
+        () => createControlElement(control.scope),
+        schemaControl,
+        rootSchema,
+      ),
+      label: `${schema.type}`,
+    };
+  });
+};
+
+export function getJsonDataType(value: any): string | null {
+  if (typeof value === 'string') {
+    return 'string';
+  } else if (typeof value === 'number') {
+    return Number.isInteger(value) ? 'integer' : 'number';
+  } else if (typeof value === 'boolean') {
+    return 'boolean';
+  } else if (Array.isArray(value)) {
+    return 'array';
+  } else if (value === null) {
+    return 'null';
+  } else if (typeof value === 'object') {
+    return 'object';
+  }
+
+  return null;
+}
+
+const controlRenderer = defineComponent({
+  name: 'mixed-renderer',
+  components: {
+    DispatchRenderer,
+    VBtn,
+    VSelect,
+  },
+  directives: {
+    DisabledIconFocus,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const path = props.path;
+    const input = useJsonFormsControl(props);
+
+    const control = input.control.value;
+    const valueType = ref(getJsonDataType(control.data));
+    const jsonforms = useJsonForms();
+    const icons = useIcons();
+
+    watch(
+      () => input.control.value.data,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          const oldValueType = valueType.value;
+          valueType.value = getJsonDataType(newValue);
+
+          if (oldValueType !== valueType.value) {
+            // adjust the index
+            selectedIndex.value = matchingSchema.value?.index;
+          }
+        }
+      },
+      { deep: false },
+    );
+
+    const mixedRenderInfos = computed<
+      (SchemaRenderInfo & {
+        index: number;
+      })[]
+    >(() => {
+      const result = createMixedRenderInfos(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        control.schema,
+        control.rootSchema,
+        control.uischema,
+        control.path,
+        jsonforms.uischemas || [],
+      );
+
+      return result
+        .filter((info) => info.uischema)
+        .map((info, index) => ({ ...info, index: index }));
+    });
+
+    const nullable = computed(() =>
+      mixedRenderInfos.value.some((info) => info.schema.type === 'null'),
+    );
+
+    const matchingSchema = computed(() => {
+      let result = mixedRenderInfos.value.find(
+        (entry) => entry.schema.type === valueType.value,
+      );
+      if (!result) {
+        result = mixedRenderInfos.value.find(
+          (entry) =>
+            entry.schema.type === 'number' && valueType.value === 'integer',
+        );
+      }
+      if (!result && mixedRenderInfos.value.length === 1) {
+        result = mixedRenderInfos.value[0];
+      }
+      return result;
+    });
+
+    const selectedIndex = ref<number | undefined | null>(
+      matchingSchema.value?.index,
+    );
+
+    const t = useTranslator();
+
+    const schema = computed(() =>
+      selectedIndex.value !== null && selectedIndex.value !== undefined
+        ? mixedRenderInfos.value[selectedIndex.value].schema
+        : undefined,
+    );
+    const uischema = computed(() =>
+      selectedIndex.value !== null && selectedIndex.value !== undefined
+        ? mixedRenderInfos.value[selectedIndex.value].uischema
+        : undefined,
+    );
+
+    return {
+      ...useCombinatorTranslations(useVuetifyControl(input)),
+      nullable,
+      mixedRenderInfos,
+      selectedIndex,
+      t,
+      valueType,
+      schema,
+      uischema,
+      path,
+      icons,
+    };
+  },
+  methods: {
+    setToNull(): void {
+      this.handleChange(this.control.path, null);
+    },
+    handleSelectChange(newIndex: number): void {
+      const newData =
+        newIndex != null
+          ? createDefaultValue(
+              this.mixedRenderInfos[newIndex].schema,
+              this.control.rootSchema,
+            )
+          : undefined;
+
+      this.handleChange(this.control.path, newData);
+      this.selectedIndex = newIndex;
+
+      const type = newIndex
+        ? this.mixedRenderInfos[newIndex]?.schema?.type
+        : null;
+      this.valueType = type as string | null; // we know that this should be either a string or null
+    },
+  },
+});
+
+export default controlRenderer;
+</script>
+<style scoped>
+.prefixed-input {
+  display: flex;
+  align-items: center;
+}
+
+.vertical-layout {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.prefix {
+}
+
+.input {
+  flex-grow: 1;
+  width: 100%;
+}
+</style>
diff --git a/packages/vue-vuetify/src/complex/index.ts b/packages/vue-vuetify/src/complex/index.ts
index 335567cd5..adeb84282 100644
--- a/packages/vue-vuetify/src/complex/index.ts
+++ b/packages/vue-vuetify/src/complex/index.ts
@@ -5,6 +5,7 @@ export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as OneOfTabRenderer } from './OneOfTabRenderer.vue';
+export { default as MixedRenderer } from './MixedRenderer.vue';
 
 import { entry as allOfRendererEntry } from './AllOfRenderer.entry';
 import { entry as anyOfRendererEntry } from './AnyOfRenderer.entry';
@@ -13,6 +14,7 @@ import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.entry';
 import { entry as objectRendererEntry } from './ObjectRenderer.entry';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.entry';
 import { entry as oneOfTabRendererEntry } from './OneOfTabRenderer.entry';
+import { entry as mixedRendererEntry } from './MixedRenderer.entry';
 
 export const complexRenderers = [
   allOfRendererEntry,
@@ -22,6 +24,7 @@ export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,
+  mixedRendererEntry,
 ];
 
 export {
@@ -32,4 +35,5 @@ export {
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,
+  mixedRendererEntry,
 };

From c078710b65efdf73b836c27cc5788892781639ce Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:10:13 -0500
Subject: [PATCH 02/37] organize imports

---
 packages/vue-vuetify/src/complex/MixedRenderer.entry.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
index 20e543057..3ef85f9a7 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
@@ -1,5 +1,4 @@
 import {
-  hasType,
   isControl,
   rankWith,
   resolveSchema,
@@ -10,8 +9,8 @@ import {
   type UISchemaElement,
 } from '@jsonforms/core';
 
-import mixedRenderer from './MixedRenderer.vue';
 import isEmpty from 'lodash/isEmpty';
+import mixedRenderer from './MixedRenderer.vue';
 
 export const isMixedSchema = (
   uischema: UISchemaElement & Scopable,

From ece92acddca6f7ba9fc7ccc54a087ef5dd9b87a0 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:14:44 -0500
Subject: [PATCH 03/37] handle correctly the clear where if the property that
 is cleared in not part of the object that has the property defined in
 properties then to not clear it - e.g. send undefined value

---
 .../src/complex/ObjectRenderer.vue            |  15 +-
 .../components/AdditionalProperties.vue       | 334 ++++++++++--------
 .../AnyOfStringOrEnumControlRenderer.vue      |   8 +-
 .../src/controls/EnumControlRenderer.vue      |   5 +-
 .../src/controls/IntegerControlRenderer.vue   |   8 +-
 .../controls/MultiStringControlRenderer.vue   |   5 +-
 .../src/controls/NumberControlRenderer.vue    |   5 +-
 .../src/controls/StringControlRenderer.vue    |   5 +-
 .../controls/StringMaskControlRenderer.vue    |   5 +-
 .../AutocompleteEnumControlRenderer.vue       |   5 +-
 .../AutocompleteOneOfEnumControlRenderer.vue  |   5 +-
 packages/vue-vuetify/src/util/composition.ts  |  32 ++
 12 files changed, 257 insertions(+), 175 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index cd191974b..58c554e6a 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -10,7 +10,7 @@
       :cells="control.cells"
     />
     <additional-properties
-      v-if="hasAdditionalProperties && showAdditionalProperties"
+      v-if="hasAdditionalProperties || showAdditionalProperties"
       :input="input"
     ></additional-properties>
   </div>
@@ -20,11 +20,8 @@
 import {
   Generate,
   findUISchema,
-  isObjectControl,
-  rankWith,
   type ControlElement,
   type GroupLayout,
-  type JsonFormsRendererRegistryEntry,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -51,6 +48,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const control = useVuetifyControl(useJsonFormsControlWithDetail(props));
+
     const nested = useNested('object');
     return {
       ...control,
@@ -62,17 +60,14 @@ const controlRenderer = defineComponent({
     hasAdditionalProperties(): boolean {
       return (
         !isEmpty(this.control.schema.patternProperties) ||
-        isObject(this.control.schema.additionalProperties)
-        // do not support - additionalProperties === true - since then the type should be any and we won't know what kind of renderer we should use for new properties
+        isObject(this.control.schema.additionalProperties) ||
+        this.control.schema.additionalProperties === true
       );
     },
     showAdditionalProperties(): boolean {
       const showAdditionalProperties =
         this.control.uischema.options?.showAdditionalProperties;
-      return (
-        showAdditionalProperties === undefined ||
-        showAdditionalProperties === true
-      );
+      return showAdditionalProperties === true;
     },
     detailUiSchema(): UISchemaElement {
       const uiSchemaGenerator = () => {
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index fb970b3ed..94db318b3 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,103 +1,101 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="12">
-        <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
-          <v-container>
-            <v-row>
-              <v-col v-if="mdAndUp && additionalPropertiesTitle">
-                {{ additionalPropertiesTitle }}</v-col
-              >
-              <v-col>
-                <json-forms
-                  :data="newPropertyName"
-                  :uischema="
-                    {
-                      type: 'Control',
-                      scope: '#/',
-                    } as UISchemaElement
-                  "
-                  :schema="propertyNameSchema"
-                  :additionalErrors="additionalErrors"
-                  :renderers="control.renderers"
-                  :cells="control.cells"
-                  :config="control.config"
-                  :readonly="!control.enabled"
-                  :validation-mode="validationMode"
-                  :i18n="i18n"
-                  :ajv="ajv"
-                  :middleware="middleware"
-                  @change="propertyNameChange"
-                ></json-forms
-              ></v-col>
-              <v-tooltip bottom>
-                <template v-slot:activator="{ props }">
-                  <v-btn
-                    icon
-                    variant="text"
-                    elevation="0"
-                    small
-                    :aria-label="translations.addAriaLabel"
-                    v-bind="props"
-                    :disabled="addPropertyDisabled"
-                    @click="addProperty"
-                  >
-                    <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
-                  </v-btn>
-                </template>
-                {{ translations.addTooltip }}
-              </v-tooltip>
-            </v-row>
-          </v-container>
-          <v-container v-bind="vuetifyProps('v-container')">
-            <v-row
-              v-for="element in additionalPropertyItems"
-              :key="`${element.propertyName}`"
+  <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
+    <v-container>
+      <v-row no-gutters>
+        <v-col v-if="mdAndUp && additionalPropertiesTitle">
+          {{ additionalPropertiesTitle }}</v-col
+        >
+        <v-col>
+          <json-forms
+            :data="newPropertyName"
+            :uischema="
+              {
+                type: 'Control',
+                scope: '#',
+                label: propertyNameLabel,
+              } as UISchemaElement
+            "
+            :schema="propertyNameSchema"
+            :additionalErrors="additionalErrors"
+            :renderers="control.renderers"
+            :cells="control.cells"
+            :config="control.config"
+            :readonly="!control.enabled"
+            :validation-mode="validationMode"
+            :i18n="i18n"
+            :ajv="ajv"
+            :middleware="middleware"
+            @change="propertyNameChange"
+          ></json-forms
+        ></v-col>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              icon
+              variant="text"
+              elevation="0"
+              small
+              :aria-label="translations.addAriaLabel"
+              v-bind="props"
+              :disabled="addPropertyDisabled"
+              @click="addProperty"
             >
-              <v-col class="flex-shrink-0 flex-grow-1">
-                <dispatch-renderer
-                  v-if="element.schema && element.uischema"
-                  :schema="element.schema"
-                  :uischema="element.uischema"
-                  :path="element.path"
-                  :enabled="control.enabled"
-                  :renderers="control.renderers"
-                  :cells="control.cells"
-              /></v-col>
-              <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ props }">
-                    <v-btn
-                      v-bind="props"
-                      icon
-                      variant="text"
-                      elevation="0"
-                      small
-                      :aria-label="translations.removeAriaLabel"
-                      :disabled="removePropertyDisabled"
-                      @click="removeProperty(element.propertyName)"
-                    >
-                      <v-icon class="notranslate">{{
-                        icons.current.value.itemDelete
-                      }}</v-icon>
-                    </v-btn>
-                  </template>
-                  {{ translations.removeTooltip }}
-                </v-tooltip></v-col
+              <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
+            </v-btn>
+          </template>
+          {{ translations.addTooltip }}
+        </v-tooltip>
+      </v-row>
+    </v-container>
+    <v-container v-bind="vuetifyProps('v-container')">
+      <v-row
+        no-gutters
+        v-for="element in additionalPropertyItems"
+        :key="`${element.propertyName}`"
+      >
+        <v-col class="flex-shrink-0 flex-grow-1">
+          <dispatch-renderer
+            v-if="element.schema && element.uischema"
+            :schema="element.schema"
+            :uischema="element.uischema"
+            :path="element.path"
+            :enabled="control.enabled"
+            :renderers="control.renderers"
+            :cells="control.cells"
+        /></v-col>
+        <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon
+                variant="text"
+                elevation="0"
+                small
+                :aria-label="translations.removeAriaLabel"
+                :disabled="removePropertyDisabled"
+                @click="removeProperty(element.propertyName)"
               >
-            </v-row>
-          </v-container>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+                <v-icon class="notranslate">{{
+                  icons.current.value.itemDelete
+                }}</v-icon>
+              </v-btn>
+            </template>
+            {{ translations.removeTooltip }}
+          </v-tooltip></v-col
+        >
+      </v-row>
+    </v-container>
+  </v-card>
 </template>
 
 <script lang="ts">
+import { AdditionalPropertiesTranslationEnum } from '@/i18n';
 import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalPropertiesTranslations';
 import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
 import {
   Generate,
+  Resolve,
   composePaths,
   createControlElement,
   createDefaultValue,
@@ -105,6 +103,7 @@ import {
   getI18nKeyPrefix,
   type GroupLayout,
   type JsonSchema,
+  type JsonSchema4,
   type JsonSchema7,
   type UISchemaElement,
 } from '@jsonforms/core';
@@ -116,9 +115,11 @@ import {
 } from '@jsonforms/vue';
 import type { ErrorObject } from 'ajv';
 import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
 import isPlainObject from 'lodash/isPlainObject';
+import omit from 'lodash/omit';
 import startCase from 'lodash/startCase';
-import isEqual from 'lodash/isEqual';
+
 import {
   computed,
   defineComponent,
@@ -145,7 +146,6 @@ import {
   useJsonForms,
   useTranslator,
 } from '../../util';
-import { AdditionalPropertiesTranslationEnum } from '@/i18n';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -185,7 +185,7 @@ export default defineComponent({
     );
 
     const additionalKeys = computed(() =>
-      Object.keys(control.value.data).filter(
+      Object.keys(control.value.data || {}).filter(
         (k) => !reservedPropertyNames.value.includes(k),
       ),
     );
@@ -193,24 +193,34 @@ export default defineComponent({
     const toAdditionalPropertyType = (
       propName: string,
       propValue: any,
+      parentSchema: JsonSchema,
+      rootSchema: JsonSchema,
     ): AdditionalPropertyType => {
       let propSchema: JsonSchema | undefined = undefined;
       let propUiSchema: UISchemaElement | undefined = undefined;
 
-      if (control.value.schema.patternProperties) {
-        const matchedPattern = Object.keys(
-          control.value.schema.patternProperties,
-        ).find((pattern) => new RegExp(pattern).test(propName));
+      if (parentSchema.patternProperties) {
+        const matchedPattern = Object.keys(parentSchema.patternProperties).find(
+          (pattern) => new RegExp(pattern).test(propName),
+        );
         if (matchedPattern) {
-          propSchema = control.value.schema.patternProperties[matchedPattern];
+          propSchema = parentSchema.patternProperties[matchedPattern];
         }
       }
 
       if (
-        !propSchema &&
-        typeof control.value.schema.additionalProperties === 'object'
+        (!propSchema &&
+          typeof parentSchema.additionalProperties === 'object') ||
+        parentSchema.additionalProperties === true
       ) {
-        propSchema = control.value.schema.additionalProperties;
+        propSchema =
+          parentSchema.additionalProperties === true
+            ? { additionalProperties: true }
+            : parentSchema.additionalProperties;
+      }
+
+      if (typeof propSchema?.$ref === 'string') {
+        propSchema = Resolve.schema(propSchema, propSchema.$ref, rootSchema);
       }
 
       if (!propSchema && propValue !== undefined) {
@@ -219,22 +229,48 @@ export default defineComponent({
         propSchema = Generate.jsonSchema(
           { prop: propValue },
           {
-            additionalProperties: false,
-            required: () => false,
+            additionalProperties: true,
+            required: (_props: { [property: string]: JsonSchema4 }) => false,
           },
         ).properties?.prop;
       }
 
-      if (propSchema) {
-        if (propSchema.type === 'object' || propSchema.type === 'array') {
-          propUiSchema = Generate.uiSchema(propSchema, 'Group');
-          (propUiSchema as GroupLayout).label =
-            propSchema.title ?? startCase(propName);
-        } else {
-          propUiSchema = createControlElement(
-            control.value.path + '/' + encode(propName),
-          );
-        }
+      propSchema = propSchema ?? {};
+
+      if (propSchema.type === undefined) {
+        propSchema = {
+          ...propSchema,
+          type: [
+            'array',
+            'boolean',
+            'integer',
+            'null',
+            'number',
+            'object',
+            'string',
+          ],
+        };
+      }
+
+      if (propSchema.type === 'array') {
+        propUiSchema = Generate.uiSchema(propSchema, 'Group');
+        (propUiSchema as GroupLayout).label =
+          propSchema.title ?? startCase(propName);
+      } else {
+        propUiSchema = createControlElement('#/' + encode(propName));
+      }
+
+      propSchema = {
+        ...propSchema,
+        title: propName,
+      };
+      if (propSchema.type === 'object') {
+        propSchema.additionalProperties =
+          propSchema.additionalProperties !== false
+            ? (propSchema.additionalProperties ?? true)
+            : false;
+      } else if (propSchema.type === 'array') {
+        propSchema.items = propSchema.items ?? {};
       }
 
       return {
@@ -248,7 +284,12 @@ export default defineComponent({
     const appliedOptions = useControlAppliedOptions(props.input);
     const additionalPropertyItems = ref<AdditionalPropertyType[]>(
       additionalKeys.value.map((propName) =>
-        toAdditionalPropertyType(propName, control.value.data[propName]),
+        toAdditionalPropertyType(
+          propName,
+          control.value.data[propName],
+          control.value.schema,
+          control.value.rootSchema,
+        ),
       ),
     );
 
@@ -349,6 +390,9 @@ export default defineComponent({
       newPropertyName,
     );
 
+    const propertyNameLabel =
+      translations[AdditionalPropertiesTranslationEnum.propertyNameLabel];
+
     const { mdAndUp } = useDisplay();
 
     const {
@@ -375,8 +419,11 @@ export default defineComponent({
       styles,
       appliedOptions,
       additionalPropertyItems,
+      reservedPropertyNames,
       toAdditionalPropertyType,
+      additionalKeys,
       newPropertyName,
+      propertyNameLabel,
       propertyNameChange,
       newPropertyErrors,
       additionalErrors,
@@ -432,34 +479,34 @@ export default defineComponent({
   },
   watch: {
     'control.data': {
-      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 newData === 'object' && newData) {
-          const keys = Object.keys(newData);
-          let hasChanges = false;
-          const updatedData = { ...newData };
-
-          this.additionalPropertyItems.forEach((ap) => {
-            if (
-              ap.schema &&
-              (!keys.includes(ap.propertyName) ||
-                updatedData[ap.propertyName] === undefined ||
-                (updatedData[ap.propertyName] === null &&
-                  ap.schema.type !== 'null')) // createDefaultValue will return null only when the ap.schema.type is 'null'
-            ) {
-              const newValue = createDefaultValue(
-                ap.schema,
-                this.control.rootSchema,
-              );
-              hasChanges = updatedData[ap.propertyName] !== newValue;
-
-              updatedData[ap.propertyName] = newValue;
-            }
-          });
-          if (hasChanges) {
-            this.input.handleChange(this.control.path, updatedData);
-          }
+      handler(newData, oldData) {
+        function isEqualIgnoringKeys(
+          obj1: Record<string, any>,
+          obj2: Record<string, any>,
+          keysToIgnore: string[],
+        ) {
+          // Omit the specified keys from both objects
+          const filteredObj1 = omit(obj1, keysToIgnore);
+          const filteredObj2 = omit(obj2, keysToIgnore);
+
+          // Perform a deep comparison
+          // return isEqual(filteredObj1, filteredObj2);
+
+          // compare with property order as well
+          return JSON.stringify(filteredObj1) === JSON.stringify(filteredObj2);
+        }
+
+        if (
+          !isEqualIgnoringKeys(newData, oldData, this.reservedPropertyNames)
+        ) {
+          this.additionalPropertyItems = this.additionalKeys.map((propName) =>
+            this.toAdditionalPropertyType(
+              propName,
+              newData[propName],
+              this.control.schema,
+              this.control.rootSchema,
+            ),
+          );
         }
       },
       deep: true,
@@ -472,6 +519,8 @@ export default defineComponent({
         const additionalProperty = this.toAdditionalPropertyType(
           this.newPropertyName,
           undefined,
+          this.control.schema,
+          this.control.rootSchema,
         );
         if (additionalProperty) {
           this.additionalPropertyItems = [
@@ -490,6 +539,7 @@ export default defineComponent({
             additionalProperty.schema,
             this.control.rootSchema,
           );
+
           // we need always to preserve the key even when the value is "empty"
           this.input.handleChange(this.control.path, updatedData);
         }
diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
index 772d6e73f..8a4f6d5ce 100644
--- a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
@@ -45,7 +45,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VCombobox } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -62,9 +62,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVuetifyControl(
-      useJsonFormsControl(props),
-      (value) => value || undefined,
+    const clearValue = determineClearValue(props, '');
+    return useVuetifyControl(useJsonFormsControl(props), (value) =>
+      value === null ? clearValue : value,
     );
   },
   computed: {
diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
index 7a22784aa..bdb32c299 100644
--- a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
@@ -39,7 +39,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VSelect } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -56,8 +56,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     return useVuetifyControl(useJsonFormsEnumControl(props), (value) =>
-      value !== null ? value : undefined,
+      value === null ? clearValue : value,
     );
   },
 });
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 542666441..9395bd13e 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -37,7 +37,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VNumberInput } from 'vuetify/labs/VNumberInput';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -54,7 +54,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => (value === null ? undefined : value);
+    const clearValue = determineClearValue(props, 0);
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     return { ...input, adaptValue };
@@ -64,9 +65,6 @@ const controlRenderer = defineComponent({
       const options: any = this.appliedOptions;
       return options.step ?? 1;
     },
-    allowUnsafeInteger(): boolean {
-      return this.appliedOptions.allowUnsafeInteger;
-    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
index 185766099..709cf9e09 100644
--- a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
@@ -45,7 +45,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VTextarea } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -62,9 +62,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => value || undefined,
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
index af51a6114..de5be55f0 100644
--- a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -38,7 +38,7 @@ import {
 import { defineComponent } from 'vue';
 import { VNumberInput } from 'vuetify/labs/VNumberInput';
 
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -55,7 +55,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => (value == null ? undefined : value);
+    const clearValue = determineClearValue(props, 0);
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     return { ...input, adaptValue };
diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
index 90ebe5f1b..2ff8f998e 100644
--- a/packages/vue-vuetify/src/controls/StringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
@@ -78,7 +78,7 @@ import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import { defineComponent } from 'vue';
 import { VCombobox, VTextField } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { useVuetifyControl, determineClearValue } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -96,9 +96,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => value || undefined,
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
index 471fe00a9..b285ebc16 100644
--- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -50,7 +50,7 @@ import {
 import isEmpty from 'lodash/isEmpty';
 import { defineComponent, computed } from 'vue';
 import { VTextField } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 import { type MaskTokens, vMaska, Mask } from 'maska';
@@ -76,7 +76,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => value || undefined;
+    const clearValue = determineClearValue(props, '');
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const toTokens = (tokenParams: Record<string, any>): MaskTokens => {
diff --git a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
index 565452923..3375f8a63 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
@@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
 import { VAutocomplete, VSelect } from 'vuetify/components';
 import { default as ControlWrapper } from '../controls/ControlWrapper.vue';
 import { DisabledIconFocus } from '../controls/directives';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 
 const controlRenderer = defineComponent({
   name: 'autocomplete-enum-control-renderer',
@@ -81,9 +81,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     return useVuetifyControl(
       useJsonFormsEnumControl(props),
-      (value) => (value !== null ? value : undefined),
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
index e7eb31339..bbce98811 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
@@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
 import { VAutocomplete, VSelect } from 'vuetify/components';
 import { default as ControlWrapper } from '../controls/ControlWrapper.vue';
 import { DisabledIconFocus } from '../controls/directives';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 
 const controlRenderer = defineComponent({
   name: 'autocomplete-oneof-enum-control-renderer',
@@ -81,9 +81,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     return useVuetifyControl(
       useJsonFormsOneOfEnumControl(props),
-      (value) => (value !== null ? value : undefined),
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index 3e99fa08c..f064fc92c 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -12,13 +12,16 @@ import {
   getCombinatorTranslations,
   getFirstPrimitiveProp,
   isDescriptionHidden,
+  isScoped,
   type ControlElement,
   type DispatchPropsOfControl,
   type DispatchPropsOfMultiEnumControl,
   type JsonFormsSubStates,
   type JsonSchema,
+  type Scopable,
   type UISchemaElement,
 } from '@jsonforms/core';
+import type { RendererProps } from '@jsonforms/vue';
 import type Ajv from 'ajv';
 import type { ErrorObject } from 'ajv';
 import cloneDeep from 'lodash/cloneDeep';
@@ -481,3 +484,32 @@ export const useIcons = () => {
     current: iconSet,
   };
 };
+
+export const determineClearValue = (
+  props: RendererProps<ControlElement & Scopable>,
+  defaultValue: any,
+) => {
+  const { uischema } = props;
+
+  if (
+    !isScoped(uischema) ||
+    props.schema?.type !== 'object' ||
+    typeof props?.schema?.properties !== 'object'
+  ) {
+    return defaultValue;
+  }
+
+  // check if we are wrapped in an object and
+  // the path to the property is defined in the object properties
+  // then return undefined to clear the property from the object
+
+  // remove any leading #, /, or #/
+  const schemaPath = uischema.scope.replace(/^(#\/|#|\/)/, '');
+  // replace / with .
+  const property = schemaPath.replace(/\//g, '.');
+
+  const definedPropertySchema = get(props.schema, property);
+  return typeof definedPropertySchema === 'object'
+    ? undefined // clear the property from the object
+    : defaultValue;
+};

From bd28667a3ab1e944a23688458313c001e35d4a6b Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:17:16 -0500
Subject: [PATCH 04/37] update controls to properly send clear value

---
 .../src/controls/DateTimeControlRenderer.vue  | 52 ++++++++++---------
 .../src/controls/TimeControlRenderer.vue      | 52 ++++++++++---------
 2 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
index 7a0456f79..29dce063b 100644
--- a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -181,7 +180,7 @@ import {
   useJsonFormsControl,
   type RendererProps,
 } from '@jsonforms/vue';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { computed, reactive, defineComponent, ref, unref } from 'vue';
 import {
   VBtn,
   VCard,
@@ -208,6 +207,7 @@ import { useDisplay, useLocale } from 'vuetify';
 import type { IconValue } from '../icons';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useIcons,
@@ -260,10 +260,11 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     const t = useTranslator();
     const showMenu = ref(false);
     const activeTab = ref<'date' | 'time'>('date');
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
 
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
     const { mobile } = useDisplay();
@@ -277,7 +278,11 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
 
     const state = computed(() =>
       convertDayjsToMaskaFormat(dateTimeFormat.value),
@@ -289,8 +294,6 @@ const controlRenderer = defineComponent({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
@@ -308,7 +311,7 @@ const controlRenderer = defineComponent({
       dateTimeFormat,
       options,
       useMask,
-      maskCompleted,
+      maska,
     };
   },
   watch: {
@@ -483,25 +486,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const date = parseDateTime(value, this.formats);
         return date ? date.format(this.dateTimeFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const datetime = parseDateTime(value, this.dateTimeFormat);
 
         if (datetime) {
@@ -521,11 +531,8 @@ const controlRenderer = defineComponent({
 
         const date = dateTime ? dateTime.toDate() : undefined;
 
-        const time = dateTime
-          ? this.useSeconds
-            ? dateTime.format('HH:mm:ss')
-            : dateTime.format('HH:mm')
-          : undefined;
+        const format = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
+        const time = dateTime ? dateTime.format(format) : undefined;
 
         return { date, time };
       },
@@ -580,9 +587,6 @@ const controlRenderer = defineComponent({
         this.onChange(dateTime!.format(this.dateTimeSaveFormat));
       }
     },
-    clear(): void {
-      this.inputModel = undefined;
-    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
index fdaf70736..49e130613 100644
--- a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -87,7 +86,7 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { computed, reactive, defineComponent, ref, unref } from 'vue';
 import {
   VBtn,
   VConfirmEdit,
@@ -103,6 +102,7 @@ import { useLocale } from 'vuetify';
 import type { IconValue } from '../icons';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useIcons,
@@ -145,11 +145,12 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     const t = useTranslator();
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const icons = useIcons();
@@ -165,7 +166,11 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
 
     const state = computed(() => convertDayjsToMaskaFormat(timeFormat.value));
     const locale = useLocale();
@@ -175,8 +180,6 @@ const controlRenderer = defineComponent({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
@@ -193,7 +196,7 @@ const controlRenderer = defineComponent({
       timeFormat,
       options,
       useMask,
-      maskCompleted,
+      maska,
     };
   },
   computed: {
@@ -284,25 +287,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const time = parseDateTime(value, this.formats);
         return time ? time.format(this.timeFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const time = parseDateTime(value, this.timeFormat);
 
         if (time) {
@@ -319,12 +329,9 @@ const controlRenderer = defineComponent({
         const value = this.control.data;
 
         const time = parseDateTime(value, this.formats);
+        const format = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
         // show only valid values
-        return time
-          ? this.useSeconds
-            ? time.format('HH:mm:ss')
-            : time.format('HH:mm')
-          : undefined;
+        return time ? time.format(format) : undefined;
       },
       set(val: string) {
         this.onPickerChange(val);
@@ -362,9 +369,6 @@ const controlRenderer = defineComponent({
       const time = parseDateTime(value, this.useSeconds ? 'HH:mm:ss' : 'HH:mm');
       this.onChange(time ? time.format(this.timeSaveFormat) : value);
     },
-    clear(): void {
-      this.inputModel = undefined;
-    },
   },
 });
 

From a62efb45170edda29e04ed53d47827142f35147f Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:18:11 -0500
Subject: [PATCH 05/37] update control to properly send clear value and add
 support for UI options.views

---
 .../src/controls/DateControlRenderer.vue      | 199 +++++++++++++++---
 1 file changed, 167 insertions(+), 32 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
index 188324cc1..855ab3a09 100644
--- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -50,19 +49,17 @@
                 v-if="showMenu"
                 :model-value="showActions ? proxyModel.value : pickerValue"
                 @update:model-value="
-                  (val: unknown) => {
-                    if (showActions) {
-                      proxyModel.value = val as Date;
-                    } else {
-                      pickerValue = val as Date;
-                      showMenu = false;
-                    }
-                  }
+                  (val) => updateDatePickerValue(val, proxyModel)
                 "
                 v-bind="vuetifyProps('v-date-picker')"
                 :title="computedLabel"
                 :min="minDate"
                 :max="maxDate"
+                v-model:view-mode="viewMode"
+                @update:month="
+                  (month) => updateDatePickerMonth(month, proxyModel)
+                "
+                @update:year="(year) => updateDatePickerYear(year, proxyModel)"
               >
                 <template v-slot:actions v-if="showActions">
                   <component :is="actions"></component>
@@ -78,14 +75,15 @@
 
 <script lang="ts">
 import { type ControlElement, type JsonSchema } from '@jsonforms/core';
-import { computed, defineComponent, ref, unref } from 'vue';
+import type { Ref } from 'vue';
+import { computed, defineComponent, reactive, ref, unref, watch } from 'vue';
 
 import {
   rendererProps,
   useJsonFormsControl,
   type RendererProps,
 } from '@jsonforms/vue';
-import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
+import { vMaska, type MaskOptions } from 'maska';
 import { useLocale } from 'vuetify';
 import {
   VBtn,
@@ -98,6 +96,7 @@ import {
 } from 'vuetify/components';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useTranslator,
@@ -108,6 +107,8 @@ import { DisabledIconFocus } from './directives';
 
 const JSON_SCHEMA_DATE_FORMATS = ['YYYY-MM-DD'];
 
+type ViewModeType = 'year' | 'months' | 'month';
+
 // https://ajv.js.org/packages/ajv-formats.html#keywords-to-compare-values-formatmaximum-formatminimum-and-formatexclusivemaximum-formatexclusiveminimum
 type AjvMinMaxFormat = {
   formatMinimum?: string | { $data: any };
@@ -133,11 +134,12 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue(props, '');
     const t = useTranslator();
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const dateFormat = computed<string>(
@@ -149,33 +151,110 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
-
-    const state = computed(() => convertDayjsToMaskaFormat(dateFormat.value));
     const locale = useLocale();
 
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
     const options = useMask
       ? computed<MaskOptions>(() => ({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
         }))
       : null;
 
+    const state = computed(() => convertDayjsToMaskaFormat(dateFormat.value));
+
+    const viewMode = ref<ViewModeType>('month');
+
+    const views = computed<('day' | 'month' | 'year')[] | undefined>(() =>
+      Array.isArray(control.appliedOptions.value.views)
+        ? control.appliedOptions.value.views.filter(
+            (view: string) =>
+              view === 'day' || view === 'month' || view === 'year',
+          )
+        : undefined,
+    );
+
+    if (views.value !== undefined) {
+      const allowedViewModes = computed<ViewModeType[]>(() => {
+        // Define the priority order
+        const viewPriorityOrder: Record<ViewModeType, number> = {
+          month: 1,
+          months: 2,
+          year: 3,
+        };
+
+        if (views.value === undefined) {
+          return [];
+        }
+        return views.value
+          .map((view) => {
+            if (view === 'day') {
+              return 'month';
+            }
+            if (view === 'month') {
+              return 'months';
+            }
+            if (view === 'year') {
+              return 'year';
+            }
+
+            return null; // null value will be filtered out
+          })
+          .filter((value): value is ViewModeType => value !== null)
+          .sort((a, b) => viewPriorityOrder[a] - viewPriorityOrder[b]);
+      });
+
+      if (allowedViewModes.value.length > 0) {
+        viewMode.value = allowedViewModes.value[0];
+      }
+
+      watch(viewMode, (newViewMode) => {
+        if (
+          allowedViewModes.value.length > 0 &&
+          !allowedViewModes.value.includes(newViewMode)
+        ) {
+          switch (newViewMode) {
+            case 'month':
+              viewMode.value = allowedViewModes.value.includes('months')
+                ? 'months'
+                : 'year';
+              break;
+            case 'months':
+              viewMode.value = allowedViewModes.value.includes('year')
+                ? 'year'
+                : 'month';
+              break;
+            case 'year':
+              viewMode.value = allowedViewModes.value.includes('months')
+                ? 'months'
+                : 'month';
+              break;
+            default:
+              break;
+          }
+        }
+      });
+    }
+
     return {
       ...control,
+      views,
+      viewMode,
+      maska,
       showMenu,
       t,
       adaptValue,
       dateFormat,
       options,
       useMask,
-      maskCompleted,
     };
   },
   computed: {
@@ -240,25 +319,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const date = parseDateTime(value, this.formats);
         return date ? date.format(this.dateFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const date = parseDateTime(value, this.dateFormat);
 
         if (date) {
@@ -279,7 +365,6 @@ const controlRenderer = defineComponent({
       },
       set(val: Date): void {
         this.onPickerChange(val);
-        this.showMenu = false;
       },
     },
     cancelLabel(): string {
@@ -304,14 +389,64 @@ const controlRenderer = defineComponent({
   methods: {
     onPickerChange(value: Date): void {
       const date = parseDateTime(value, undefined);
-      let newdata: string | number | undefined = date
+      let newdata: string | null = date
         ? date.format(this.dateSaveFormat)
-        : undefined;
+        : null;
 
       this.onChange(newdata);
     },
-    clear(): void {
-      this.inputModel = undefined;
+    updateDatePickerValue(
+      val: unknown,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        proxyModel.value = val as Date;
+      } else {
+        this.pickerValue = val as Date;
+        this.showMenu = false;
+      }
+    },
+    updateDatePickerYear(
+      year: number,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        const date = proxyModel.value ?? new Date();
+        date.setFullYear(year);
+        proxyModel.value = date;
+      } else {
+        const date = this.pickerValue ?? new Date();
+        date.setFullYear(year);
+        this.pickerValue = date;
+
+        if (
+          this.views &&
+          this.views.length === 1 &&
+          this.views.includes('year')
+        ) {
+          // close the menu since only year can be selected
+          this.showMenu = false;
+        }
+      }
+    },
+    updateDatePickerMonth(
+      month: number,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        const date = proxyModel.value ?? new Date();
+        date.setMonth(month);
+        proxyModel.value = date;
+      } else {
+        const date = this.pickerValue ?? new Date();
+        date.setMonth(month);
+        this.pickerValue = date;
+
+        if (this.views && !this.views.includes('day')) {
+          // close the menu since day can't be selected
+          this.showMenu = false;
+        }
+      }
     },
   },
 });

From 4bc6b73305e594ff21522b13cc465ade3def59ab Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:19:04 -0500
Subject: [PATCH 06/37] optimize the performance of convertDayjsToMaskaFormat
 function

---
 packages/vue-vuetify/src/util/datejs.ts | 79 +++++++++++++++----------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/vue-vuetify/src/util/datejs.ts b/packages/vue-vuetify/src/util/datejs.ts
index f69a11ab1..667e213de 100644
--- a/packages/vue-vuetify/src/util/datejs.ts
+++ b/packages/vue-vuetify/src/util/datejs.ts
@@ -45,6 +45,35 @@ export const parseDateTime = (
   return dayjsData;
 };
 
+// defintions from - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+const dayjsTokens = [
+  'YYYY', // Four-digit year - example: 2001
+  'YY', //Two-digit year - example: 01
+  'M', // Month, beginning at 1 - example: 1-12
+  'MM', // Month, 2-digits - example: 01-12
+  'MMM', // The abbreviated month name - example: Jan-Dec
+  'MMMM', // The full month name - example: January-December
+  'D', // Day of month - example: 1-31
+  'DD', // Day of month, 2-digits - example: 01-31
+  'H', // Hours - example: 0-23
+  'HH', // Hours, 2-digits - example: 00-23
+  'h', // Hours, 12-hour clock - example: 1-12
+  'hh', // Hours, 12-hour clock, 2-digits - example: 01-12
+  'm', // Minutes - example: 0-59
+  'mm', // Minutes, 2-digits - example: 00-59
+  's', // Seconds - example: 0-59
+  'ss', // Seconds, 2-digits - example: 00-59
+  'S', // Hundreds of milliseconds, 1-digit - example: 0-9
+  'SS', // Tens of milliseconds, 2-digits - example: 00-99
+  'SSS', // Milliseconds, 3-digits - example: 000-999
+  'Z', // Offset from UTC - example: -05:00
+  'ZZ', // Compact offset from UTC, 2-digits - example: -0500
+  'A', // Post or ante meridiem, upper-case - example: AM PM
+  'a', // Post or ante meridiem, lower-case - example: am pm,
+  'X', // Unix timestamp - example 1410715640.579,
+  'x', // Unix ms timestamp - example 1410715640579
+].sort((a, b) => b.length - a.length);
+
 export const convertDayjsToMaskaFormat = (
   dayjsFormat: string,
 ): { mask: MaskType; tokens: MaskTokens } => {
@@ -110,35 +139,6 @@ export const convertDayjsToMaskaFormat = (
     }
   }
 
-  // defintions from - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
-  const dayjsTokens = [
-    'YYYY', // Four-digit year - example: 2001
-    'YY', //Two-digit year - example: 01
-    'M', // Month, beginning at 1 - example: 1-12
-    'MM', // Month, 2-digits - example: 01-12
-    'MMM', // The abbreviated month name - example: Jan-Dec
-    'MMMM', // The full month name - example: January-December
-    'D', // Day of month - example: 1-31
-    'DD', // Day of month, 2-digits - example: 01-31
-    'H', // Hours - example: 0-23
-    'HH', // Hours, 2-digits - example: 00-23
-    'h', // Hours, 12-hour clock - example: 1-12
-    'hh', // Hours, 12-hour clock, 2-digits - example: 01-12
-    'm', // Minutes - example: 0-59
-    'mm', // Minutes, 2-digits - example: 00-59
-    's', // Seconds - example: 0-59
-    'ss', // Seconds, 2-digits - example: 00-59
-    'S', // Hundreds of milliseconds, 1-digit - example: 0-9
-    'SS', // Tens of milliseconds, 2-digits - example: 00-99
-    'SSS', // Milliseconds, 3-digits - example: 000-999
-    'Z', // Offset from UTC - example: -05:00
-    'ZZ', // Compact offset from UTC, 2-digits - example: -0500
-    'A', // Post or ante meridiem, upper-case - example: AM PM
-    'a', // Post or ante meridiem, lower-case - example: am pm,
-    'X', // Unix timestamp - example 1410715640.579,
-    'x', // Unix ms timestamp - example 1410715640579
-  ].sort((a, b) => b.length - a.length);
-
   const parts = dayjsFormat
     .split(new RegExp(`(${dayjsTokens.join('|')})`))
     .filter(Boolean);
@@ -148,7 +148,7 @@ export const convertDayjsToMaskaFormat = (
     .join('');
   const tokens = new Tokens(reservedChars);
 
-  // need to prebuild all keys to tokens are are going to be used in tokenFunction
+  // need to prebuild all keys to tokens that are going to be used in tokenFunction
   tokens.registerToken({ pattern: /[0-9]/ });
   tokens.registerToken({ pattern: /1/ });
   tokens.registerToken({ pattern: /[0-2]/ });
@@ -434,5 +434,22 @@ export const convertDayjsToMaskaFormat = (
     return mask;
   };
 
-  return { mask: tokenFunction, tokens: tokens.getTokens() };
+  const cache: { value: string | undefined; mask: string | undefined } = {
+    value: undefined,
+    mask: undefined,
+  };
+
+  // memorize the last value to token since maska can call this function multiple times with the same value
+  const memorizedTokenFunction = (value: string): string => {
+    if (cache.value === value && cache.mask !== undefined) {
+      return cache.mask;
+    }
+    const mask = tokenFunction(value);
+    cache.value = value;
+    cache.mask = mask;
+
+    return mask;
+  };
+
+  return { mask: memorizedTokenFunction, tokens: tokens.getTokens() };
 };

From 4716a433c3c248f9bfe5904ff1f4e9f72b816de7 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:42:56 -0500
Subject: [PATCH 07/37] fix key property where the value is not based on data
 primary key but based on index - e.g. prevent reusing elements when the array
 change size which will cause id properties for example to not have correct
 value

---
 .../vue-vuetify/src/complex/AllOfRenderer.vue |  2 +-
 .../vue-vuetify/src/complex/AnyOfRenderer.vue |  4 +-
 .../src/complex/ArrayControlRenderer.vue      | 37 ++++++++++---------
 .../src/complex/OneOfTabRenderer.vue          |  4 +-
 .../controls/components/ValidationBadge.vue   |  2 +-
 .../src/layouts/ArrayLayoutRenderer.vue       |  2 +-
 .../src/layouts/CategorizationRenderer.vue    |  8 ++--
 .../layouts/CategorizationStepperRenderer.vue |  8 ++--
 .../vue-vuetify/src/layouts/GroupRenderer.vue |  2 +-
 .../src/layouts/HorizontalLayoutRenderer.vue  |  2 +-
 .../src/layouts/VerticalLayoutRenderer.vue    |  2 +-
 11 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/AllOfRenderer.vue b/packages/vue-vuetify/src/complex/AllOfRenderer.vue
index 3105de6d2..faad9f966 100644
--- a/packages/vue-vuetify/src/complex/AllOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/AllOfRenderer.vue
@@ -19,7 +19,7 @@
         />
         <dispatch-renderer
           v-for="(allOfRenderInfo, allOfIndex) in allOfRenderInfos"
-          :key="`${control.path}-${allOfIndex}`"
+          :key="`${control.path}-${allOfRenderInfos.length}-${allOfIndex}`"
           :schema="allOfRenderInfo.schema"
           :uischema="allOfRenderInfo.uischema"
           :path="control.path"
diff --git a/packages/vue-vuetify/src/complex/AnyOfRenderer.vue b/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
index 0b18414c0..397a5a688 100644
--- a/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
@@ -9,7 +9,7 @@
     <v-tabs v-model="selectedIndex">
       <v-tab
         v-for="(anyOfRenderInfo, anyOfIndex) in anyOfRenderInfos"
-        :key="`${control.path}-${anyOfIndex}`"
+        :key="`${control.path}-${anyOfRenderInfos.length}-${anyOfIndex}`"
       >
         {{ anyOfRenderInfo.label }}
       </v-tab>
@@ -18,7 +18,7 @@
     <v-window v-model="selectedIndex">
       <v-window-item
         v-for="(anyOfRenderInfo, anyOfIndex) in anyOfRenderInfos"
-        :key="`${control.path}-${anyOfIndex}`"
+        :key="`${control.path}-${anyOfRenderInfos.length}-${anyOfIndex}`"
       >
         <dispatch-renderer
           v-if="selectedIndex === anyOfIndex"
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index f6ea8ccd8..f2de26d74 100644
--- a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -46,8 +46,8 @@
             <thead v-if="control.schema.type === 'object'">
               <tr>
                 <th
-                  v-for="(prop, index) in getValidColumnProps(control.schema)"
-                  :key="`${control.path}-header-${index}`"
+                  v-for="(prop, index) in validColumnProps"
+                  :key="`${control.path}-header-${validColumnProps.length}-${index}`"
                   scope="col"
                 >
                   {{ title(prop) }}
@@ -66,14 +66,17 @@
             <tbody>
               <tr
                 v-for="(element, index) in control.data"
-                :key="`${control.path}-${index}`"
+                :key="`${control.path}-${control.data.length}-${index}`"
                 :class="styles.arrayList.item"
               >
                 <td
-                  v-for="propName in getValidColumnProps(control.schema)"
+                  v-for="propName in validColumnProps"
                   :key="
                     composePaths(
-                      composePaths(control.path, `${index}`),
+                      composePaths(
+                        control.path,
+                        `${validColumnProps.length}-${index}`,
+                      ),
                       propName,
                     )
                   "
@@ -249,6 +252,18 @@ const controlRenderer = defineComponent({
     dataLength(): number {
       return this.control.data ? this.control.data.length : 0;
     },
+    validColumnProps() {
+      if (
+        this.control.schema.type === 'object' &&
+        typeof this.control.schema.properties === 'object'
+      ) {
+        return Object.keys(this.control.schema.properties).filter(
+          (prop) => this.control.schema.properties![prop].type !== 'array',
+        );
+      }
+      // primitives
+      return [''];
+    },
   },
   methods: {
     composePaths,
@@ -271,18 +286,6 @@ const controlRenderer = defineComponent({
       event.stopPropagation();
       this.removeItems?.(this.control.path, toDelete)();
     },
-    getValidColumnProps(scopedSchema: JsonSchema) {
-      if (
-        scopedSchema.type === 'object' &&
-        typeof scopedSchema.properties === 'object'
-      ) {
-        return Object.keys(scopedSchema.properties).filter(
-          (prop) => scopedSchema.properties![prop].type !== 'array',
-        );
-      }
-      // primitives
-      return [''];
-    },
     title(prop: string) {
       return this.control.schema.properties?.[prop]?.title ?? startCase(prop);
     },
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
index ea94bc2eb..214bb477e 100644
--- a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
@@ -9,7 +9,7 @@
     <v-tabs v-model="selectIndex" @update:model-value="handleTabChange">
       <v-tab
         v-for="(oneOfRenderInfo, oneOfIndex) in oneOfRenderInfos"
-        :key="`${control.path}-${oneOfIndex}`"
+        :key="`${control.path}-${oneOfRenderInfos.length}-${oneOfIndex}`"
       >
         {{ oneOfRenderInfo.label }}
       </v-tab>
@@ -18,7 +18,7 @@
     <v-window v-model="selectedIndex">
       <v-window-item
         v-for="(oneOfRenderInfo, oneOfIndex) in oneOfRenderInfos"
-        :key="`${control.path}-${oneOfIndex}`"
+        :key="`${control.path}-${oneOfRenderInfos.length}-${oneOfIndex}`"
       >
         <dispatch-renderer
           v-if="selectedIndex === oneOfIndex"
diff --git a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
index 823d9b8c7..7a2db43e3 100644
--- a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
+++ b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
@@ -20,7 +20,7 @@
       <p>Validation Errors</p>
       <p
         v-for="(message, index) in tooltipMessages"
-        :key="`${index}`"
+        :key="`${tooltipMessages.length}-${index}`"
         class="mb-0"
       >
         {{ message }}
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index 58e0d6ef9..78379a6ad 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -59,7 +59,7 @@
           >
             <v-expansion-panel
               v-for="(_element, index) in control.data"
-              :key="`${control.path}-${index}`"
+              :key="`${control.path}-${control.data.length}-${index}`"
               :class="styles.arrayList.item"
             >
               <v-expansion-panel-title :class="styles.arrayList.itemHeader">
diff --git a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
index 66466835f..10e0dfa77 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
@@ -15,7 +15,7 @@
         >
           <v-tab
             v-for="(_, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             {{ visibleCategoryLabels[index] }}
           </v-tab>
@@ -29,7 +29,7 @@
         >
           <v-window-item
             v-for="(element, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <dispatch-renderer
               :schema="layout.schema"
@@ -47,7 +47,7 @@
       <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
         <v-tab
           v-for="(_, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+          :key="`${layout.path}-${visibleCategories.length}-${index}`"
         >
           {{ visibleCategoryLabels[index] }}
         </v-tab>
@@ -56,7 +56,7 @@
       <v-window v-model="activeCategory" v-bind="vuetifyProps('v-window')">
         <v-window-item
           v-for="(element, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+          :key="`${layout.path}-${visibleCategories.length}-${index}`"
         >
           <dispatch-renderer
             :schema="layout.schema"
diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 972c13e0b..a3f62d3a1 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -12,7 +12,7 @@
         :title="visibleCategoryLabels[index]"
         v-for="(element, index) in visibleCategories"
         :value="index + 1"
-        :key="`${layout.path}-${index}`"
+        :key="`${layout.path}-${visibleCategories.length}-${index}`"
       >
         <v-card elevation="0">
           <dispatch-renderer
@@ -36,14 +36,14 @@
         <v-stepper-header>
           <template
             v-for="(_, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <v-stepper-item :value="index + 1" editable>
               {{ visibleCategoryLabels[index] }}
             </v-stepper-item>
             <v-divider
               v-if="index !== visibleCategories.length - 1"
-              :key="index"
+              :key="`${layout.path}-divider-${visibleCategories.length}-${index}`"
             ></v-divider>
           </template>
         </v-stepper-header>
@@ -52,7 +52,7 @@
           <v-stepper-window-item
             v-for="(element, index) in visibleCategories"
             :value="index + 1"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <v-card elevation="0">
               <dispatch-renderer
diff --git a/packages/vue-vuetify/src/layouts/GroupRenderer.vue b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
index cb7a8fe00..c65bd1b14 100644
--- a/packages/vue-vuetify/src/layouts/GroupRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
@@ -16,7 +16,7 @@
     <v-card-text
       v-bind="vuetifyProps(`v-card-text[${index}]`)"
       v-for="(element, index) in (layout.uischema as Layout).elements"
-      :key="`${layout.path}-${index}`"
+      :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
       :class="styles.group.item"
     >
       <dispatch-renderer
diff --git a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
index fb2b07c5e..095cdc53a 100644
--- a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
@@ -7,7 +7,7 @@
     <v-row v-bind="vuetifyProps('v-row')">
       <v-col
         v-for="(element, index) in (layout.uischema as Layout).elements"
-        :key="`${layout.path}-${index}`"
+        :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
         :class="styles.horizontalLayout.item"
         :cols="cols[index]"
         v-bind="vuetifyProps(`v-col[${index}]`)"
diff --git a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
index 73f4d959f..375403e11 100644
--- a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -7,7 +7,7 @@
   >
     <v-row
       v-for="(element, index) in (layout.uischema as Layout).elements"
-      :key="`${layout.path}-${index}`"
+      :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
       v-bind="vuetifyProps(`v-row[${index}]`)"
     >
       <v-col

From 807546f8cc07b6a5b148a5fc1b6b19f45f4a31db Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:53:51 -0500
Subject: [PATCH 08/37] organize imports

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

diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index 7d77ae9ee..8398dcf7e 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -191,15 +191,10 @@
 <script lang="ts">
 import {
   Resolve,
-  and,
   composePaths,
   createDefaultValue,
   findUISchema,
-  isObjectArray,
-  rankWith,
-  uiTypeIs,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
   type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';

From 25300dbfabd4aec02a71fa160e1c1fced37ecf38 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 03:56:20 -0500
Subject: [PATCH 09/37] add translations

---
 .../src/controls/components/ValidationBadge.vue           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
index 7a2db43e3..735b5a655 100644
--- a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
+++ b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
@@ -17,7 +17,7 @@
         </v-badge>
       </template>
 
-      <p>Validation Errors</p>
+      <p>{{ t('Validation Errors', 'Validation Errors') }}</p>
       <p
         v-for="(message, index) in tooltipMessages"
         :key="`${tooltipMessages.length}-${index}`"
@@ -40,6 +40,7 @@ import {
   createLabelDescriptionFrom,
   type JsonSchema,
 } from '@jsonforms/core';
+import { useTranslator } from '@/util';
 
 export default defineComponent({
   name: 'validation-badge',
@@ -116,5 +117,10 @@ export default defineComponent({
       return error.map((v) => v.labels.join(',') + ': ' + v.message);
     },
   },
+  setup() {
+    const t = useTranslator();
+
+    return { t };
+  },
 });
 </script>

From 81c81dbae77bc11136a347ce8a7677f5c7c81775 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 04:33:22 -0500
Subject: [PATCH 10/37] make sure that we use new date so that the proxyModel
 is correctly notified for the new value

---
 packages/vue-vuetify/src/controls/DateControlRenderer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
index 855ab3a09..9f56ec918 100644
--- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -411,7 +411,7 @@ const controlRenderer = defineComponent({
       proxyModel: Ref<Date | undefined>,
     ): void {
       if (this.showActions) {
-        const date = proxyModel.value ?? new Date();
+        const date = new Date(proxyModel.value ?? new Date());
         date.setFullYear(year);
         proxyModel.value = date;
       } else {
@@ -434,7 +434,7 @@ const controlRenderer = defineComponent({
       proxyModel: Ref<Date | undefined>,
     ): void {
       if (this.showActions) {
-        const date = proxyModel.value ?? new Date();
+        const date = new Date(proxyModel.value ?? new Date());
         date.setMonth(month);
         proxyModel.value = date;
       } else {

From 3a4f2b96ffaa8ee72d14730c66450baa94dbd8a9 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 05:55:55 -0500
Subject: [PATCH 11/37] no need to check props?.schema?.properties

---
 packages/vue-vuetify/src/util/composition.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index f064fc92c..de1d7e7be 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -491,11 +491,7 @@ export const determineClearValue = (
 ) => {
   const { uischema } = props;
 
-  if (
-    !isScoped(uischema) ||
-    props.schema?.type !== 'object' ||
-    typeof props?.schema?.properties !== 'object'
-  ) {
+  if (!isScoped(uischema) || props.schema?.type !== 'object') {
     return defaultValue;
   }
 

From 6b5dca8b8df303c3bd81f01a02189ea4a147d3a8 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 05:56:23 -0500
Subject: [PATCH 12/37] proper implementation for the optional translator

---
 .../src/controls/components/ValidationBadge.vue  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
index 735b5a655..aed51d31d 100644
--- a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
+++ b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
@@ -17,7 +17,11 @@
         </v-badge>
       </template>
 
-      <p>{{ t('Validation Errors', 'Validation Errors') }}</p>
+      <p>
+        {{
+          t ? t('Validation Errors', 'Validation Errors') : 'Validation Errors'
+        }}
+      </p>
       <p
         v-for="(message, index) in tooltipMessages"
         :key="`${tooltipMessages.length}-${index}`"
@@ -31,13 +35,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue';
+import { defineComponent, inject, type PropType } from 'vue';
 import { VBadge, VTooltip } from 'vuetify/components';
 import type { ErrorObject } from 'ajv';
 import findIndex from 'lodash/findIndex';
 import {
   createControlElement,
   createLabelDescriptionFrom,
+  type JsonFormsSubStates,
   type JsonSchema,
 } from '@jsonforms/core';
 import { useTranslator } from '@/util';
@@ -118,8 +123,13 @@ export default defineComponent({
     },
   },
   setup() {
-    const t = useTranslator();
+    // allow using the ValidationBadge outside the jsonforms like in the ExampleView in the demo app
+    const jsonforms = inject<JsonFormsSubStates | undefined>(
+      'jsonforms',
+      undefined,
+    );
 
+    const t = jsonforms !== undefined ? useTranslator() : null;
     return { t };
   },
 });

From 2f96aefba4e05ec5b8916294821eeacfa4d61916 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 14:40:09 -0500
Subject: [PATCH 13/37] change the way how we determine if default value should
 be returned

---
 .../vue-vuetify/src/complex/MixedRenderer.vue | 166 ++++++++++++------
 .../src/complex/ObjectRenderer.vue            |   8 +-
 .../components/AdditionalProperties.vue       |   5 +
 packages/vue-vuetify/src/util/composition.ts  |  25 +--
 packages/vue-vuetify/src/util/index.ts        |   1 +
 packages/vue-vuetify/src/util/inject.ts       |   5 +
 6 files changed, 141 insertions(+), 69 deletions(-)
 create mode 100644 packages/vue-vuetify/src/util/inject.ts

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 156da4fc9..80d923714 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -1,42 +1,86 @@
 <template>
-  <div
-    :class="[
-      'prefixed-input',
-      { 'vertical-layout': valueType === 'object' || valueType === 'array' },
-    ]"
-    v-if="control.visible"
-  >
-    <v-select
-      v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
-      :class="['prefix']"
-      v-disabled-icon-focus
-      :id="control.id + '-input-selector'"
-      :disabled="!control.enabled"
-      :label="computedLabel"
-      :required="control.required"
-      :error-messages="control.errors"
-      :items="mixedRenderInfos"
-      :clearable="control.enabled"
-      @update:model-value="handleSelectChange"
-      :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
-      item-value="index"
-      v-model="selectedIndex"
-      v-bind="vuetifyProps('v-select')"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    >
-    </v-select>
-    <dispatch-renderer
-      :class="['input']"
-      v-if="schema && !(nullable && control.data === null)"
-      :schema="schema"
-      :uischema="uischema"
-      :path="path"
-      :renderers="control.renderers"
-      :cells="control.cells"
-      :enabled="control.enabled"
-    >
-    </dispatch-renderer>
+  <div :class="['prefixed-input']" v-if="control.visible">
+    <template v-if="valueType === 'array' || valueType === 'object'">
+      <v-expansion-panels accordion flat v-model="currentlyExpanded">
+        <v-expansion-panel>
+          <v-expansion-panel-title class="py-0 px-0">
+            <v-container class="py-0">
+              <v-row>
+                <v-col align-self="center" class="pl-0"
+                  ><v-select
+                    v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
+                    v-disabled-icon-focus
+                    :id="control.id + '-input-selector'"
+                    :disabled="!control.enabled"
+                    :label="computedLabel"
+                    :required="control.required"
+                    :error-messages="control.errors"
+                    :items="mixedRenderInfos"
+                    :clearable="control.enabled"
+                    @update:model-value="handleSelectChange"
+                    :item-title="
+                      (item: SchemaRenderInfo) => t(item.label, item.label)
+                    "
+                    item-value="index"
+                    v-model="selectedIndex"
+                    v-bind="vuetifyProps('v-select')"
+                    @click.stop
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                  >
+                  </v-select
+                ></v-col>
+              </v-row>
+            </v-container>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <dispatch-renderer
+              :class="['input']"
+              v-if="schema && !(nullable && control.data === null)"
+              :schema="schema"
+              :uischema="uischema"
+              :path="path"
+              :renderers="control.renderers"
+              :cells="control.cells"
+              :enabled="control.enabled"
+            >
+            </dispatch-renderer>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </template>
+    <template v-else>
+      <v-select
+        v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
+        v-disabled-icon-focus
+        :id="control.id + '-input-selector'"
+        :disabled="!control.enabled"
+        :label="computedLabel"
+        :required="control.required"
+        :error-messages="control.errors"
+        :items="mixedRenderInfos"
+        :clearable="control.enabled"
+        @update:model-value="handleSelectChange"
+        :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
+        item-value="index"
+        v-model="selectedIndex"
+        v-bind="vuetifyProps('v-select')"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      >
+      </v-select>
+      <dispatch-renderer
+        :class="['input']"
+        v-if="schema && !(nullable && control.data === null)"
+        :schema="schema"
+        :uischema="uischema"
+        :path="path"
+        :renderers="control.renderers"
+        :cells="control.cells"
+        :enabled="control.enabled"
+      >
+      </dispatch-renderer>
+    </template>
   </div>
 </template>
 
@@ -56,11 +100,20 @@ import {
   useJsonFormsControl,
   type RendererProps,
 } from '@jsonforms/vue';
-import { computed, defineComponent, ref, watch } from 'vue';
-import { VSelect, VBtn } from 'vuetify/components';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
+import {
+  VCol,
+  VContainer,
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VRow,
+  VSelect,
+} from 'vuetify/components';
 import { DisabledIconFocus } from '../controls';
 import {
   useCombinatorTranslations,
+  UseDefaultValueKey,
   useIcons,
   useJsonForms,
   useTranslator,
@@ -179,7 +232,7 @@ const createMixedRenderInfos = (
           : false;
     } else if (schema.type === 'array') {
       schema.items = schema.items ?? {};
-      if (!(schema.items as any)) {
+      if (!(schema.items as any).type) {
         (schema.items as any).type = [
           'array',
           'boolean',
@@ -204,7 +257,10 @@ const createMixedRenderInfos = (
           ...control,
           options: { ...control.options, detail: detailsForSchema },
         }
-      : control;
+      : {
+          ...control,
+          scope: control.scope,
+        };
 
     return {
       schema,
@@ -244,8 +300,13 @@ const controlRenderer = defineComponent({
   name: 'mixed-renderer',
   components: {
     DispatchRenderer,
-    VBtn,
     VSelect,
+    VExpansionPanel,
+    VExpansionPanelTitle,
+    VExpansionPanelText,
+    VContainer,
+    VRow,
+    VCol,
   },
   directives: {
     DisabledIconFocus,
@@ -334,6 +395,10 @@ const controlRenderer = defineComponent({
         : undefined,
     );
 
+    const currentlyExpanded = ref<number | null>(null);
+    // use the default value since all properties are dynamic so preserve the property key
+    provide(UseDefaultValueKey, true);
+
     return {
       ...useCombinatorTranslations(useVuetifyControl(input)),
       nullable,
@@ -345,6 +410,7 @@ const controlRenderer = defineComponent({
       uischema,
       path,
       icons,
+      currentlyExpanded,
     };
   },
   methods: {
@@ -367,6 +433,8 @@ const controlRenderer = defineComponent({
         ? this.mixedRenderInfos[newIndex]?.schema?.type
         : null;
       this.valueType = type as string | null; // we know that this should be either a string or null
+
+      this.currentlyExpanded = 0;
     },
   },
 });
@@ -379,16 +447,12 @@ export default controlRenderer;
   align-items: center;
 }
 
-.vertical-layout {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.prefix {
-}
-
 .input {
   flex-grow: 1;
   width: 100%;
 }
+
+:deep(.v-expansion-panel-text__wrapper) {
+  padding: 0px;
+}
 </style>
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index 58c554e6a..73c7d91c6 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -33,9 +33,10 @@ import {
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
-import { defineComponent } from 'vue';
+import { defineComponent, provide } from 'vue';
 import { useNested, useVuetifyControl } from '../util';
 import { AdditionalProperties } from './components';
+import { UseDefaultValueKey } from '@/util/inject';
 
 const controlRenderer = defineComponent({
   name: 'object-renderer',
@@ -50,6 +51,11 @@ const controlRenderer = defineComponent({
     const control = useVuetifyControl(useJsonFormsControlWithDetail(props));
 
     const nested = useNested('object');
+
+    // do not use the default value but the undefind so that
+    // the property is cleared when property clear action is executed
+    provide(UseDefaultValueKey, false);
+
     return {
       ...control,
       input: control,
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 94db318b3..04522bd2c 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -124,6 +124,7 @@ import {
   computed,
   defineComponent,
   markRaw,
+  provide,
   ref,
   unref,
   type PropType,
@@ -146,6 +147,7 @@ import {
   useJsonForms,
   useTranslator,
 } from '../../util';
+import { UseDefaultValueKey } from '@/util/inject';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -407,6 +409,9 @@ export default defineComponent({
       newPropertyName.value ? parentValidationMode : 'ValidateAndHide',
     );
 
+    // use the default value since all properties are dynamic so preserve the property key
+    provide(UseDefaultValueKey, true);
+
     return {
       validationMode: validationMode,
       i18n: i18n ? markRaw(i18n) : i18n,
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index de1d7e7be..f4969703f 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -39,6 +39,7 @@ import {
 } from 'vue';
 import type { IconOptions } from 'vuetify';
 import { useStyles } from '../styles';
+import { UseDefaultValueKey } from './inject';
 
 export const IconSymbol: InjectionKey<Required<IconOptions>> =
   Symbol.for('vuetify:icons');
@@ -489,23 +490,13 @@ export const determineClearValue = (
   props: RendererProps<ControlElement & Scopable>,
   defaultValue: any,
 ) => {
-  const { uischema } = props;
-
-  if (!isScoped(uischema) || props.schema?.type !== 'object') {
-    return defaultValue;
-  }
-
-  // check if we are wrapped in an object and
-  // the path to the property is defined in the object properties
-  // then return undefined to clear the property from the object
+  const jsonforms = useJsonForms();
 
-  // remove any leading #, /, or #/
-  const schemaPath = uischema.scope.replace(/^(#\/|#|\/)/, '');
-  // replace / with .
-  const property = schemaPath.replace(/\//g, '.');
+  const useDefaultValue = inject<boolean>(
+    UseDefaultValueKey,
+    jsonforms.core?.schema.type !== 'object',
+  );
 
-  const definedPropertySchema = get(props.schema, property);
-  return typeof definedPropertySchema === 'object'
-    ? undefined // clear the property from the object
-    : defaultValue;
+  // undefined will clear the property from the object
+  return useDefaultValue ? defaultValue : undefined;
 };
diff --git a/packages/vue-vuetify/src/util/index.ts b/packages/vue-vuetify/src/util/index.ts
index 6d720c881..e3c6d25f7 100644
--- a/packages/vue-vuetify/src/util/index.ts
+++ b/packages/vue-vuetify/src/util/index.ts
@@ -1,4 +1,5 @@
 export * from './composition';
 export * from './datejs';
+export * from './inject';
 export * from './options';
 export * from './validator';
diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
new file mode 100644
index 000000000..b89c00c67
--- /dev/null
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue';
+
+export const UseDefaultValueKey: InjectionKey<boolean> = Symbol.for(
+  'jsonforms-vue-vuetify:useDefaultValue',
+);

From cc440911d11728b7a0df4eab66898b5166f899bb Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 14:40:32 -0500
Subject: [PATCH 14/37] use control.arraySchema instead of Resolve

---
 .../src/additional/ListWithDetailRenderer.vue | 21 +++++-----------
 .../src/complex/ArrayControlRenderer.vue      | 24 +++++++------------
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index 8398dcf7e..1451da8be 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -29,9 +29,9 @@
                 :disabled="
                   !control.enabled ||
                   (appliedOptions.restrict &&
-                    arraySchema !== undefined &&
-                    arraySchema.maxItems !== undefined &&
-                    dataLength >= arraySchema.maxItems)
+                    control.arraySchema !== undefined &&
+                    control.arraySchema.maxItems !== undefined &&
+                    dataLength >= control.arraySchema.maxItems)
                 "
               >
                 <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
@@ -150,9 +150,9 @@
                         :disabled="
                           !control.enabled ||
                           (appliedOptions.restrict &&
-                            arraySchema !== undefined &&
-                            arraySchema.minItems !== undefined &&
-                            dataLength <= arraySchema.minItems)
+                            control.arraySchema !== undefined &&
+                            control.arraySchema.minItems !== undefined &&
+                            dataLength <= control.arraySchema.minItems)
                         "
                       >
                         <v-icon class="notranslate">{{
@@ -190,12 +190,10 @@
 
 <script lang="ts">
 import {
-  Resolve,
   composePaths,
   createDefaultValue,
   findUISchema,
   type ControlElement,
-  type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -273,13 +271,6 @@ const controlRenderer = defineComponent({
         this.control.uischema,
       );
     },
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
   },
   methods: {
     composePaths,
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index f2de26d74..8b58696de 100644
--- a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -23,9 +23,9 @@
               :disabled="
                 !control.enabled ||
                 (appliedOptions.restrict &&
-                  arraySchema !== undefined &&
-                  arraySchema.maxItems !== undefined &&
-                  dataLength >= arraySchema.maxItems)
+                  control.arraySchema !== undefined &&
+                  control.arraySchema.maxItems !== undefined &&
+                  dataLength >= control.arraySchema.maxItems)
               "
               @click="addButtonClick"
             >
@@ -153,9 +153,9 @@
                         :disabled="
                           !control.enabled ||
                           (appliedOptions.restrict &&
-                            arraySchema !== undefined &&
-                            arraySchema.minItems !== undefined &&
-                            dataLength <= arraySchema.minItems)
+                            control.arraySchema !== undefined &&
+                            control.arraySchema.minItems !== undefined &&
+                            dataLength <= control.arraySchema.minItems)
                         "
                         @click="removeItemsClick($event, [index])"
                       >
@@ -181,11 +181,9 @@
 
 <script lang="ts">
 import {
-  Resolve,
   composePaths,
   createDefaultValue,
   type ControlElement,
-  type JsonSchema,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -235,20 +233,14 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const icons = useIcons();
+    const input = useJsonFormsArrayControl(props);
 
     return {
-      ...useVuetifyArrayControl(useJsonFormsArrayControl(props)),
+      ...useVuetifyArrayControl(input),
       icons,
     };
   },
   computed: {
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
     dataLength(): number {
       return this.control.data ? this.control.data.length : 0;
     },

From d460e6cdc9f8f2cdfc495a548e345ef2a5dc6764 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 14:41:00 -0500
Subject: [PATCH 15/37] use control.arraySchema instead of Resolve, make the
 header to not take so much space

---
 .../src/layouts/ArrayLayoutRenderer.vue       | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index 78379a6ad..aac006294 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -62,8 +62,10 @@
               :key="`${control.path}-${control.data.length}-${index}`"
               :class="styles.arrayList.item"
             >
-              <v-expansion-panel-title :class="styles.arrayList.itemHeader">
-                <v-container py-0 :class="styles.arrayList.itemContainer">
+              <v-expansion-panel-title
+                :class="`${styles.arrayList.itemHeader} py-0`"
+              >
+                <v-container :class="`${styles.arrayList.itemContainer} py-0`">
                   <v-row
                     :style="`display: grid; grid-template-columns: ${
                       !hideAvatar ? 'min-content' : ''
@@ -161,9 +163,9 @@
                             :disabled="
                               !control.enabled ||
                               (appliedOptions.restrict &&
-                                arraySchema !== undefined &&
-                                arraySchema.minItems !== undefined &&
-                                dataLength <= arraySchema.minItems)
+                                control.arraySchema !== undefined &&
+                                control.arraySchema.minItems !== undefined &&
+                                dataLength <= control.arraySchema.minItems)
                             "
                             @click.stop="suggestToDelete = index"
                           >
@@ -250,13 +252,11 @@
 
 <script lang="ts">
 import {
-  Resolve,
   composePaths,
   createDefaultValue,
   findUISchema,
   getControlPath,
   type ControlElement,
-  type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -351,9 +351,9 @@ const controlRenderer = defineComponent({
       return (
         !this.control.enabled ||
         (this.appliedOptions.restrict &&
-          this.arraySchema !== undefined &&
-          this.arraySchema.maxItems !== undefined &&
-          this.dataLength >= this.arraySchema.maxItems)
+          this.control.arraySchema !== undefined &&
+          this.control.arraySchema.maxItems !== undefined &&
+          this.dataLength >= this.control.arraySchema.maxItems)
       );
     },
     dataLength(): number {
@@ -370,13 +370,6 @@ const controlRenderer = defineComponent({
         this.control.rootSchema,
       );
     },
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
     hideAvatar(): boolean {
       return !!this.appliedOptions.hideAvatar;
     },

From 1f24b219fbf07036941d75e835c37220371d82ef Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:23:59 -0500
Subject: [PATCH 16/37] clean up class

---
 packages/vue-vuetify/src/complex/MixedRenderer.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 80d923714..3bf1089ce 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['prefixed-input']" v-if="control.visible">
+  <div class="prefixed-input" v-if="control.visible">
     <template v-if="valueType === 'array' || valueType === 'object'">
       <v-expansion-panels accordion flat v-model="currentlyExpanded">
         <v-expansion-panel>
@@ -35,7 +35,7 @@
           </v-expansion-panel-title>
           <v-expansion-panel-text>
             <dispatch-renderer
-              :class="['input']"
+              class="input"
               v-if="schema && !(nullable && control.data === null)"
               :schema="schema"
               :uischema="uischema"
@@ -51,6 +51,7 @@
     </template>
     <template v-else>
       <v-select
+        class="select"
         v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
         v-disabled-icon-focus
         :id="control.id + '-input-selector'"
@@ -65,12 +66,13 @@
         item-value="index"
         v-model="selectedIndex"
         v-bind="vuetifyProps('v-select')"
+        @click.stop
         @focus="handleFocus"
         @blur="handleBlur"
       >
       </v-select>
       <dispatch-renderer
-        :class="['input']"
+        class="input"
         v-if="schema && !(nullable && control.data === null)"
         :schema="schema"
         :uischema="uischema"
@@ -447,6 +449,10 @@ export default controlRenderer;
   align-items: center;
 }
 
+.select {
+  flex-shrink: 0;
+}
+
 .input {
   flex-grow: 1;
   width: 100%;

From d71695314665780b02558ab4a4167c093bc5e936 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:24:47 -0500
Subject: [PATCH 17/37] use less space

---
 .../src/complex/components/AdditionalProperties.vue           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 04522bd2c..01975d508 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
-    <v-container>
+    <v-container class="py-0">
       <v-row no-gutters>
         <v-col v-if="mdAndUp && additionalPropertiesTitle">
           {{ additionalPropertiesTitle }}</v-col
@@ -47,7 +47,7 @@
         </v-tooltip>
       </v-row>
     </v-container>
-    <v-container v-bind="vuetifyProps('v-container')">
+    <v-container v-bind="vuetifyProps('v-container')" class="py-0">
       <v-row
         no-gutters
         v-for="element in additionalPropertyItems"

From 498cbf13a7dee94239cd622eb069a41c9547634b Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:27:39 -0500
Subject: [PATCH 18/37] do not render the div if nothing to renders as children

---
 packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue | 2 +-
 packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
index 095cdc53a..666cfa72c 100644
--- a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container
-    v-if="layout.visible"
+    v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
     :class="`${styles.horizontalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >
diff --git a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
index 375403e11..c8059fccb 100644
--- a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container
-    v-if="layout.visible"
+    v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
     fill-height
     :class="`${styles.verticalLayout.root}`"
     v-bind="vuetifyProps('v-container')"

From 72e17d02c1f05492a6d8fb9deefca820bb61c23e Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:38:43 -0500
Subject: [PATCH 19/37] use more descriptive name

---
 packages/vue-vuetify/src/complex/MixedRenderer.vue            | 4 ++--
 .../src/complex/components/AdditionalProperties.vue           | 4 ++--
 packages/vue-vuetify/src/util/composition.ts                  | 4 ++--
 packages/vue-vuetify/src/util/inject.ts                       | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 3bf1089ce..871218089 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -115,7 +115,7 @@ import {
 import { DisabledIconFocus } from '../controls';
 import {
   useCombinatorTranslations,
-  UseDefaultValueKey,
+  IsDynamicPropertyContext,
   useIcons,
   useJsonForms,
   useTranslator,
@@ -399,7 +399,7 @@ const controlRenderer = defineComponent({
 
     const currentlyExpanded = ref<number | null>(null);
     // use the default value since all properties are dynamic so preserve the property key
-    provide(UseDefaultValueKey, true);
+    provide(IsDynamicPropertyContext, true);
 
     return {
       ...useCombinatorTranslations(useVuetifyControl(input)),
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 01975d508..dfcf837b6 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -147,7 +147,7 @@ import {
   useJsonForms,
   useTranslator,
 } from '../../util';
-import { UseDefaultValueKey } from '@/util/inject';
+import { IsDynamicPropertyContext } from '@/util/inject';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -410,7 +410,7 @@ export default defineComponent({
     );
 
     // use the default value since all properties are dynamic so preserve the property key
-    provide(UseDefaultValueKey, true);
+    provide(IsDynamicPropertyContext, true);
 
     return {
       validationMode: validationMode,
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index f4969703f..677e818fa 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -39,7 +39,7 @@ import {
 } from 'vue';
 import type { IconOptions } from 'vuetify';
 import { useStyles } from '../styles';
-import { UseDefaultValueKey } from './inject';
+import { IsDynamicPropertyContext } from './inject';
 
 export const IconSymbol: InjectionKey<Required<IconOptions>> =
   Symbol.for('vuetify:icons');
@@ -493,7 +493,7 @@ export const determineClearValue = (
   const jsonforms = useJsonForms();
 
   const useDefaultValue = inject<boolean>(
-    UseDefaultValueKey,
+    IsDynamicPropertyContext,
     jsonforms.core?.schema.type !== 'object',
   );
 
diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
index b89c00c67..ec04df9b0 100644
--- a/packages/vue-vuetify/src/util/inject.ts
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue';
 
-export const UseDefaultValueKey: InjectionKey<boolean> = Symbol.for(
-  'jsonforms-vue-vuetify:useDefaultValue',
+export const IsDynamicPropertyContext: InjectionKey<boolean> = Symbol.for(
+  'jsonforms-vue-vuetify:IsDynamicPropertyContext',
 );

From 89bfb0bb3c6ce0e13f5c0997ee3ba6b1d5c93876 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:39:11 -0500
Subject: [PATCH 20/37] if we are in dynamic context then always prefer the
 VerticalLayout over the Group

---
 packages/vue-vuetify/src/complex/ObjectRenderer.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index 73c7d91c6..25b35713c 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -33,10 +33,10 @@ import {
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
-import { defineComponent, provide } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import { useNested, useVuetifyControl } from '../util';
 import { AdditionalProperties } from './components';
-import { UseDefaultValueKey } from '@/util/inject';
+import { IsDynamicPropertyContext } from '@/util/inject';
 
 const controlRenderer = defineComponent({
   name: 'object-renderer',
@@ -52,14 +52,17 @@ const controlRenderer = defineComponent({
 
     const nested = useNested('object');
 
+    const isDynamic = inject<boolean>(IsDynamicPropertyContext, false);
+
     // do not use the default value but the undefind so that
     // the property is cleared when property clear action is executed
-    provide(UseDefaultValueKey, false);
+    provide(IsDynamicPropertyContext, false);
 
     return {
       ...control,
       input: control,
       nested,
+      isDynamic,
     };
   },
   computed: {
@@ -78,7 +81,7 @@ const controlRenderer = defineComponent({
     detailUiSchema(): UISchemaElement {
       const uiSchemaGenerator = () => {
         const uiSchema = Generate.uiSchema(this.control.schema, 'Group');
-        if (isEmpty(this.control.path)) {
+        if (isEmpty(this.control.path) || this.isDynamic) {
           uiSchema.type = 'VerticalLayout';
         } else {
           (uiSchema as GroupLayout).label = this.control.label;

From ef24610805b59caeef66db6dac1ffad6e3ac79e6 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:40:02 -0500
Subject: [PATCH 21/37] if the schema is an object that is selected because of
 mixed type then also allow such case to be handled by the object renderer

---
 .../src/complex/ObjectRenderer.entry.ts       | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
index 0852ea8ef..61fca0242 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
@@ -1,11 +1,40 @@
 import {
+  isControl,
   isObjectControl,
   rankWith,
+  resolveSchema,
   type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Scopable,
+  type TesterContext,
+  type UISchemaElement,
 } from '@jsonforms/core';
 import controlRenderer from './ObjectRenderer.vue';
+import isEmpty from 'lodash/isEmpty';
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isObjectControl),
+  tester: rankWith(
+    2,
+    (
+      uischema: UISchemaElement & Scopable,
+      schema: JsonSchema,
+      context: TesterContext,
+    ) => {
+      return (
+        isObjectControl(uischema, schema, context) ||
+        // schemaMatches that is used inside the isObjectControl uses a resolve of the current schema which when the schema is provided as resolved for the MixedRender then there is no need for further resolve
+        (isControl(uischema) &&
+          !isEmpty(uischema.scope) &&
+          schema?.type === 'object' &&
+          Array.isArray(
+            resolveSchema(
+              context.rootSchema,
+              uischema.scope,
+              context.rootSchema,
+            )?.type,
+          ))
+      );
+    },
+  ),
 };

From 492e5fdac8460f22246483f6c5cec59d9142fdbd Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 21:40:56 -0500
Subject: [PATCH 22/37] when the mixed renderer provides the exact schema to
 use then there is no need to resolve that schema just use it

---
 packages/core/src/mappers/renderer.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index f67730334..e1dc5e128 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/packages/core/src/mappers/renderer.ts
@@ -592,11 +592,12 @@ export const mapStateToControlProps = (
   const required =
     controlElement.scope !== undefined &&
     isRequired(ownProps.schema, controlElement.scope, rootSchema);
-  const resolvedSchema = Resolve.schema(
-    ownProps.schema || rootSchema,
-    controlElement.scope,
-    rootSchema
-  );
+  const resolvedSchema =
+    Resolve.schema(
+      ownProps.schema || rootSchema,
+      controlElement.scope,
+      rootSchema
+    ) ?? ownProps.schema; // if resolve fails then rely that the ownProps.schema if exist
   const errors = getErrorAt(path, resolvedSchema)(state);
 
   const description =

From 434a1f956dce2d2e3273e71886a483ad444083bb Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 29 Dec 2024 22:23:58 -0500
Subject: [PATCH 23/37] add core schema meta-schema as example

---
 packages/examples/src/examples/jsonschema.ts | 549 +++++++++++++++++++
 packages/examples/src/index.ts               |   2 +
 2 files changed, 551 insertions(+)
 create mode 100644 packages/examples/src/examples/jsonschema.ts

diff --git a/packages/examples/src/examples/jsonschema.ts b/packages/examples/src/examples/jsonschema.ts
new file mode 100644
index 000000000..d2d2235aa
--- /dev/null
+++ b/packages/examples/src/examples/jsonschema.ts
@@ -0,0 +1,549 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import {
+  type JsonFormsUISchemaRegistryEntry,
+  type JsonSchema,
+  NOT_APPLICABLE,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import { registerExamples } from '../register';
+import { StateProps } from '../example';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://json-schema.org/draft-07/schema#',
+  title: 'Core schema meta-schema',
+  definitions: {
+    schemaArray: {
+      type: 'array',
+      minItems: 1,
+      items: { $ref: '#' },
+    },
+    nonNegativeInteger: {
+      type: 'integer',
+      minimum: 0,
+    },
+    nonNegativeIntegerDefault0: {
+      allOf: [{ $ref: '#/definitions/nonNegativeInteger' }, { default: 0 }],
+    },
+    simpleTypes: {
+      type: 'string',
+      enum: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    },
+    stringArray: {
+      type: 'array',
+      items: { type: 'string' },
+      uniqueItems: true,
+      default: [] as any,
+    },
+  },
+  type: ['object', 'boolean'],
+  properties: {
+    $id: {
+      type: 'string',
+      format: 'uri-reference',
+    },
+    $schema: {
+      type: 'string',
+      format: 'uri',
+    },
+    $ref: {
+      type: 'string',
+      format: 'uri-reference',
+    },
+    $comment: {
+      type: 'string',
+    },
+    title: {
+      type: 'string',
+    },
+    description: {
+      type: 'string',
+    },
+    default: true,
+    readOnly: {
+      type: 'boolean',
+      default: false,
+    },
+    writeOnly: {
+      type: 'boolean',
+      default: false,
+    },
+    examples: {
+      type: 'array',
+      items: true,
+    },
+    multipleOf: {
+      type: 'number',
+      exclusiveMinimum: 0,
+    },
+    maximum: {
+      type: 'number',
+    },
+    exclusiveMaximum: {
+      type: 'number',
+    },
+    minimum: {
+      type: 'number',
+    },
+    exclusiveMinimum: {
+      type: 'number',
+    },
+    maxLength: { $ref: '#/definitions/nonNegativeInteger' },
+    minLength: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    pattern: {
+      type: 'string',
+      format: 'regex',
+    },
+    additionalItems: { $ref: '#' },
+    items: {
+      anyOf: [{ $ref: '#' }, { $ref: '#/definitions/schemaArray' }],
+      default: true,
+    },
+    maxItems: { $ref: '#/definitions/nonNegativeInteger' },
+    minItems: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    uniqueItems: {
+      type: 'boolean',
+      default: false,
+    },
+    contains: { $ref: '#' },
+    maxProperties: { $ref: '#/definitions/nonNegativeInteger' },
+    minProperties: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    required: { $ref: '#/definitions/stringArray' },
+    additionalProperties: { $ref: '#' },
+    definitions: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      default: {},
+    },
+    properties: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      default: {},
+    },
+    patternProperties: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      propertyNames: { format: 'regex' },
+      default: {},
+    },
+    dependencies: {
+      type: 'object',
+      additionalProperties: {
+        anyOf: [{ $ref: '#' }, { $ref: '#/definitions/stringArray' }],
+      },
+    },
+    propertyNames: { $ref: '#' },
+    const: true,
+    enum: {
+      type: 'array',
+      items: true,
+      minItems: 1,
+      uniqueItems: true,
+    },
+    type: {
+      anyOf: [
+        { $ref: '#/definitions/simpleTypes' },
+        {
+          type: 'array',
+          items: { $ref: '#/definitions/simpleTypes' },
+          minItems: 1,
+          uniqueItems: true,
+        },
+      ],
+    },
+    format: { type: 'string' },
+    contentMediaType: { type: 'string' },
+    contentEncoding: { type: 'string' },
+    if: { $ref: '#' },
+    then: { $ref: '#' },
+    else: { $ref: '#' },
+    allOf: { $ref: '#/definitions/schemaArray' },
+    anyOf: { $ref: '#/definitions/schemaArray' },
+    oneOf: { $ref: '#/definitions/schemaArray' },
+    not: { $ref: '#' },
+  },
+  default: true,
+};
+
+export const uischema: UISchemaElement = undefined as any as UISchemaElement;
+
+export const data: any = undefined;
+
+const shouldContainTypeCondition = (type: string[]) => {
+  return {
+    scope: '#/properties/type',
+    schema: {
+      anyOf: [
+        {
+          type: 'string',
+          enum: type,
+        },
+        {
+          type: 'array',
+          items: {
+            type: 'string',
+          },
+          contains: {
+            type: 'string',
+            enum: type,
+          },
+        },
+      ],
+    },
+  };
+};
+
+const typeIsSpecifiedCondition = {
+  scope: '#/properties/type',
+  schema: {
+    oneOf: [
+      {
+        type: 'string',
+        enum: [
+          'string',
+          'number',
+          'integer',
+          'array',
+          'object',
+          'boolean',
+          'null',
+        ],
+      },
+      {
+        type: 'array',
+        items: {
+          type: 'string',
+          enum: [
+            'string',
+            'number',
+            'integer',
+            'array',
+            'object',
+            'boolean',
+            'null',
+          ],
+        },
+        minItems: 1,
+        uniqueItems: true,
+      },
+    ],
+  },
+};
+
+const properties = {
+  type: 'Control',
+  scope: '#/properties/properties',
+};
+
+const required = {
+  type: 'Control',
+  scope: '#/properties/required',
+};
+
+const constraintsLayout = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'Number',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['number', 'integer']),
+      },
+      elements: [
+        {
+          type: 'VerticalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/multipleOf',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/maximum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/exclusiveMaximum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/minimum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/exclusiveMinimum',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'String',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['string']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/maxLength',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/minLength',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/pattern',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'Array',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['array']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/minItems',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/maxItems',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/uniqueItems',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'Object',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['object']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/minProperties',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/maxProperties',
+        },
+      ],
+    },
+  ],
+};
+
+const controlLabel = (
+  controlSchemaPath: string,
+  controlLabel: string,
+  controlSchemaType: string | undefined = undefined
+) => {
+  return {
+    tester: (jsonSchema: JsonSchema, schemaPath: string, _path: string) => {
+      if (
+        controlSchemaPath === schemaPath &&
+        (controlSchemaType === undefined ||
+          controlSchemaType === jsonSchema.type)
+      ) {
+        return 2;
+      }
+      return NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Control',
+      scope: '#',
+      label: controlLabel,
+    },
+  };
+};
+
+export const uischemas = [
+  controlLabel('#/properties/minItems', 'Min Items', 'number'),
+  controlLabel('#/properties/maxItems', 'Max Items'),
+  {
+    tester: (jsonSchema: JsonSchema, schemaPath: string, path: string) => {
+      if (
+        path === 'type' &&
+        schemaPath === '#/properties/type' &&
+        jsonSchema.type === 'array'
+      ) {
+        return 2;
+      }
+      return NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Control',
+      scope: '#',
+      label: 'Form Label',
+      options: {
+        vertical: true,
+      },
+    },
+  },
+  {
+    tester: (jsonSchema: JsonSchema, _schemaPath: string, _path: string) => {
+      return 'http://json-schema.org/draft-07/schema#' ===
+        (jsonSchema as any).$id && jsonSchema.type === 'object'
+        ? 2
+        : NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Categorization',
+      elements: [
+        {
+          type: 'Category',
+          label: 'Basic',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                { type: 'Control', scope: '#/properties/$id' },
+                { type: 'Control', scope: '#/properties/$schema' },
+                { type: 'Control', scope: '#/properties/title' },
+                { type: 'Control', scope: '#/properties/description' },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'Category',
+          label: 'Structure',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/type',
+                  options: {
+                    'label-0': 'Single Type',
+                    'label-1': 'Multiple Types',
+                  },
+                },
+                {
+                  type: 'Categorization',
+                  rule: {
+                    effect: 'SHOW',
+                    condition: shouldContainTypeCondition(['object']),
+                  },
+                  elements: [
+                    {
+                      type: 'Category',
+                      label: 'Properties',
+                      elements: [properties],
+                    },
+                    {
+                      type: 'Category',
+                      label: 'Required',
+                      elements: [required],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'Category',
+          label: 'Constraints',
+          rule: {
+            effect: 'SHOW',
+            condition: typeIsSpecifiedCondition,
+          },
+          elements: [constraintsLayout],
+        },
+      ],
+      options: {
+        variant: 'stepper',
+        showNavButtons: true,
+      },
+    },
+  },
+  {
+    tester: (jsonSchema: JsonSchema, _schemaPath: string, _path: string) => {
+      return 'http://json-schema.org/draft-07/schema#' ===
+        (jsonSchema as any).$id && jsonSchema.type === 'boolean'
+        ? 2
+        : NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'VerticalLayout',
+      elements: [{ type: 'Control', scope: '#/' }],
+    },
+  },
+];
+
+const actions = [
+  {
+    label: 'Register UISchema',
+    apply: (props: StateProps) => {
+      return {
+        ...props,
+        uischemas: uischemas,
+      };
+    },
+  },
+  {
+    label: 'Unregister UISchema',
+    apply: (props: StateProps) => {
+      const uischemas: JsonFormsUISchemaRegistryEntry[] =
+        undefined as any as JsonFormsUISchemaRegistryEntry[];
+      return {
+        ...props,
+        uischemas: uischemas,
+      };
+    },
+  },
+];
+
+registerExamples([
+  {
+    name: 'jsonschema',
+    label: 'JsonSchema',
+    data,
+    schema: schema as any as JsonSchema,
+    uischema,
+    actions,
+  },
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 750168278..883db0af3 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -82,6 +82,7 @@ export * from './register';
 export * from './example';
 
 import * as ifThenElse from './examples/if_then_else';
+import * as jsonschema from './examples/jsonschema';
 
 export {
   issue_1948,
@@ -124,6 +125,7 @@ export {
   oneOfRecursive,
   huge,
   ifThenElse,
+  jsonschema,
   onChange,
   enumExample,
   radioGroupExample,

From 22760af640f41ea943dcb6a6e4ff20fb007204ff Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:17:01 -0500
Subject: [PATCH 24/37] resolve schema like 'items': true

---
 packages/core/src/mappers/renderer.ts | 18 ++++++++++++++++--
 packages/core/src/util/resolvers.ts   | 10 +++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index e1dc5e128..767737671 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/packages/core/src/mappers/renderer.ts
@@ -186,7 +186,7 @@ export const doCreateDefaultValue = (
   rootSchema: JsonSchema
 ) => {
   const resolvedSchema =
-    typeof schema.$ref === 'string'
+    typeof schema?.$ref === 'string'
       ? Resolve.schema(rootSchema, schema.$ref, rootSchema)
       : schema;
   if (resolvedSchema.default !== undefined) {
@@ -872,7 +872,21 @@ export const mapStateToArrayControlProps = (
   const { path, schema, uischema, label, ...props } =
     mapStateToControlWithDetailProps(state, ownProps);
 
-  const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
+  let resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
+  if ((resolvedSchema as any) === true) {
+    // help the testers to determine the mixed control
+    resolvedSchema = {
+      type: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    };
+  }
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
 
   return {
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index 92880f6a2..ab55dd6b0 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -123,12 +123,20 @@ const resolveSchemaWithSegments = (
   pathSegments: string[],
   rootSchema: JsonSchema
 ): JsonSchema => {
+  if (
+    typeof schema === 'boolean' &&
+    (!pathSegments || pathSegments.length === 0)
+  ) {
+    // add the case where the schema can be true value for example: items: true or additionalProperties: false
+    return schema;
+  }
+
   if (isEmpty(schema)) {
     return undefined;
   }
 
   // use typeof because schema can by of any type - check singleSegmentResolveSchema below
-  if (typeof schema.$ref === 'string') {
+  if (typeof schema?.$ref === 'string') {
     schema = resolveSchema(rootSchema, schema.$ref, rootSchema);
   }
 

From 8a1b523f81c0726ca347e65e7253378bcff49a4a Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:17:17 -0500
Subject: [PATCH 25/37] add jsonschema example

---
 packages/examples/src/examples/jsonschema.ts | 53 ++++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/examples/src/examples/jsonschema.ts b/packages/examples/src/examples/jsonschema.ts
index d2d2235aa..79c37c6d2 100644
--- a/packages/examples/src/examples/jsonschema.ts
+++ b/packages/examples/src/examples/jsonschema.ts
@@ -198,7 +198,54 @@ export const schema = {
 
 export const uischema: UISchemaElement = undefined as any as UISchemaElement;
 
-export const data: any = undefined;
+export const data = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      minLength: 3,
+      description: 'Please enter your name',
+    },
+    vegetarian: {
+      type: 'boolean',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+    nationality: {
+      type: 'string',
+      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
+    },
+    personalData: {
+      type: 'object',
+      properties: {
+        age: {
+          type: 'integer',
+          description: 'Please enter your age.',
+        },
+        height: {
+          type: 'number',
+        },
+        drivingSkill: {
+          type: 'number',
+          maximum: 10,
+          minimum: 1,
+          default: 7,
+        },
+      },
+      required: ['age', 'height'],
+    },
+    occupation: {
+      type: 'string',
+    },
+    postalCode: {
+      type: 'string',
+      maxLength: 5,
+    },
+  },
+  required: ['occupation', 'nationality'],
+};
 
 const shouldContainTypeCondition = (type: string[]) => {
   return {
@@ -415,10 +462,6 @@ export const uischemas = [
     uischema: {
       type: 'Control',
       scope: '#',
-      label: 'Form Label',
-      options: {
-        vertical: true,
-      },
     },
   },
   {

From 1d51ee8ed6dfcf2a8ca0e3fd6a217510e4b714a9 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:18:40 -0500
Subject: [PATCH 26/37] symplify how we determine that the object renderer
 should be used when the mixed renderer selected object type

---
 .../vue-vuetify/src/complex/MixedRenderer.vue | 28 ++++++++++++-------
 .../src/complex/ObjectRenderer.entry.ts       | 21 ++------------
 .../src/complex/ObjectRenderer.vue            |  9 ++----
 3 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 871218089..69acce61e 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -114,8 +114,8 @@ import {
 } from 'vuetify/components';
 import { DisabledIconFocus } from '../controls';
 import {
-  useCombinatorTranslations,
   IsDynamicPropertyContext,
+  useCombinatorTranslations,
   useIcons,
   useJsonForms,
   useTranslator,
@@ -264,17 +264,25 @@ const createMixedRenderInfos = (
           scope: control.scope,
         };
 
+    const uischema = findUISchema(
+      uischemas,
+      schema,
+      control.scope,
+      path,
+      () => createControlElement(control.scope ?? '#'),
+      schemaControl,
+      rootSchema,
+    );
+
+    if (uischema.type === 'Control' && schema.type === 'object') {
+      // override to specify exact type since the isObjectControl will check for empty scope
+      // which in this case the scope is not empty
+      uischema.type = 'Object';
+    }
+
     return {
       schema,
-      uischema: findUISchema(
-        uischemas,
-        schema,
-        control.scope,
-        path,
-        () => createControlElement(control.scope),
-        schemaControl,
-        rootSchema,
-      ),
+      uischema,
       label: `${schema.type}`,
     };
   });
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
index 61fca0242..66da2231c 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
@@ -1,8 +1,6 @@
 import {
-  isControl,
   isObjectControl,
   rankWith,
-  resolveSchema,
   type JsonFormsRendererRegistryEntry,
   type JsonSchema,
   type Scopable,
@@ -20,21 +18,8 @@ export const entry: JsonFormsRendererRegistryEntry = {
       uischema: UISchemaElement & Scopable,
       schema: JsonSchema,
       context: TesterContext,
-    ) => {
-      return (
-        isObjectControl(uischema, schema, context) ||
-        // schemaMatches that is used inside the isObjectControl uses a resolve of the current schema which when the schema is provided as resolved for the MixedRender then there is no need for further resolve
-        (isControl(uischema) &&
-          !isEmpty(uischema.scope) &&
-          schema?.type === 'object' &&
-          Array.isArray(
-            resolveSchema(
-              context.rootSchema,
-              uischema.scope,
-              context.rootSchema,
-            )?.type,
-          ))
-      );
-    },
+    ) =>
+      isObjectControl(uischema, schema, context) ||
+      (uischema.type === 'Object' && !isEmpty(uischema.scope)),
   ),
 };
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index eb6cec650..36a38a063 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+import { IsDynamicPropertyContext } from '@/util/inject';
 import {
   Generate,
   findUISchema,
@@ -33,10 +34,9 @@ import {
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
-import { defineComponent, inject, provide } from 'vue';
+import { defineComponent, provide } from 'vue';
 import { useNested, useVuetifyControl } from '../util';
 import { AdditionalProperties } from './components';
-import { IsDynamicPropertyContext } from '@/util/inject';
 
 const controlRenderer = defineComponent({
   name: 'object-renderer',
@@ -52,8 +52,6 @@ const controlRenderer = defineComponent({
 
     const nested = useNested('object');
 
-    const isDynamic = inject<boolean>(IsDynamicPropertyContext, false);
-
     // do not use the default value but the undefind so that
     // the property is cleared when property clear action is executed
     provide(IsDynamicPropertyContext, false);
@@ -62,7 +60,6 @@ const controlRenderer = defineComponent({
       ...control,
       input: control,
       nested,
-      isDynamic,
     };
   },
   computed: {
@@ -86,7 +83,7 @@ const controlRenderer = defineComponent({
           undefined,
           this.control.rootSchema,
         );
-        if (isEmpty(this.control.path) || this.isDynamic) {
+        if (isEmpty(this.control.path)) {
           uiSchema.type = 'VerticalLayout';
         } else {
           (uiSchema as GroupLayout).label = this.control.label;

From 770531a9ae5698378a7cfa74e6454b9df2b2d906 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:33:38 -0500
Subject: [PATCH 27/37] items in draft7 can accept boolean

---
 packages/core/src/models/jsonSchema7.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/models/jsonSchema7.ts b/packages/core/src/models/jsonSchema7.ts
index c4a0243dc..501f4126d 100644
--- a/packages/core/src/models/jsonSchema7.ts
+++ b/packages/core/src/models/jsonSchema7.ts
@@ -89,7 +89,7 @@ export interface JsonSchema7 {
   // Array Validation
   /////////////////////////////////////////////////
   additionalItems?: boolean | JsonSchema7;
-  items?: JsonSchema7 | JsonSchema7[];
+  items?: boolean | JsonSchema7 | JsonSchema7[];
   maxItems?: number;
   minItems?: number;
   uniqueItems?: boolean;

From 6ead876598893bb29b08004173540d3d446ec8fd Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:54:44 -0500
Subject: [PATCH 28/37] add generic json editor example

---
 packages/examples/src/examples/json-editor.ts | 48 +++++++++++++++++++
 packages/examples/src/index.ts                |  2 +
 2 files changed, 50 insertions(+)
 create mode 100644 packages/examples/src/examples/json-editor.ts

diff --git a/packages/examples/src/examples/json-editor.ts b/packages/examples/src/examples/json-editor.ts
new file mode 100644
index 000000000..566ca6d63
--- /dev/null
+++ b/packages/examples/src/examples/json-editor.ts
@@ -0,0 +1,48 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'],
+  additionalProperties: true,
+  items: true,
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+const data = undefined as any;
+
+registerExamples([
+  {
+    name: 'json-editor',
+    label: 'JSON Editor',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 883db0af3..cb8684ed4 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -83,6 +83,7 @@ export * from './example';
 
 import * as ifThenElse from './examples/if_then_else';
 import * as jsonschema from './examples/jsonschema';
+import * as jsoneditor from './examples/json-editor';
 
 export {
   issue_1948,
@@ -125,6 +126,7 @@ export {
   oneOfRecursive,
   huge,
   ifThenElse,
+  jsoneditor,
   jsonschema,
   onChange,
   enumExample,

From b7460ab066a8153341315312b52f70cfbcab7555 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 01:54:58 -0500
Subject: [PATCH 29/37] fix items.type

---
 .../vue-vuetify/src/complex/MixedRenderer.vue | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 69acce61e..309242d7d 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -94,6 +94,7 @@ import {
   type ControlElement,
   type JsonFormsUISchemaRegistryEntry,
   type JsonSchema,
+  type JsonSchema7,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -234,8 +235,23 @@ const createMixedRenderInfos = (
           : false;
     } else if (schema.type === 'array') {
       schema.items = schema.items ?? {};
-      if (!(schema.items as any).type) {
-        (schema.items as any).type = [
+      if (schema.items === true) {
+        schema.items = {
+          type: [
+            'array',
+            'boolean',
+            'integer',
+            'null',
+            'number',
+            'object',
+            'string',
+          ],
+        };
+      } else if (
+        typeof (schema.items as JsonSchema7).type !== 'string' &&
+        !Array.isArray((schema.items as JsonSchema7).type)
+      ) {
+        (schema.items as JsonSchema7).type = [
           'array',
           'boolean',
           'integer',

From 27c11fe8ada59fc59cf2a2b3027931639eec68dc Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 02:19:04 -0500
Subject: [PATCH 30/37] add some space as title so opening and closing the
 expansion panel is easier

---
 packages/vue-vuetify/src/complex/MixedRenderer.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 309242d7d..582745445 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -30,6 +30,9 @@
                   >
                   </v-select
                 ></v-col>
+                <v-col cols="3" align-self="center" class="text-truncate">{{
+                  computedLabel
+                }}</v-col>
               </v-row>
             </v-container>
           </v-expansion-panel-title>

From 318950e0fc833b0df19e13a1ac9e742ef7212e1a Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 02:54:08 -0500
Subject: [PATCH 31/37] for now revert back the change to include the boolean
 since more code in the core should be adjusted to handled that case

---
 packages/core/src/models/jsonSchema7.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/models/jsonSchema7.ts b/packages/core/src/models/jsonSchema7.ts
index 501f4126d..c4a0243dc 100644
--- a/packages/core/src/models/jsonSchema7.ts
+++ b/packages/core/src/models/jsonSchema7.ts
@@ -89,7 +89,7 @@ export interface JsonSchema7 {
   // Array Validation
   /////////////////////////////////////////////////
   additionalItems?: boolean | JsonSchema7;
-  items?: boolean | JsonSchema7 | JsonSchema7[];
+  items?: JsonSchema7 | JsonSchema7[];
   maxItems?: number;
   minItems?: number;
   uniqueItems?: boolean;

From 3a6f24020ab73f249c6381e5803f8b36e0e2e40e Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 02:55:30 -0500
Subject: [PATCH 32/37] fix the check because of the items type revert

---
 packages/vue-vuetify/src/complex/MixedRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 582745445..3e8c16557 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -238,7 +238,7 @@ const createMixedRenderInfos = (
           : false;
     } else if (schema.type === 'array') {
       schema.items = schema.items ?? {};
-      if (schema.items === true) {
+      if ((schema.items as any) === true) {
         schema.items = {
           type: [
             'array',

From e3c8b3c75812e62a759b0eb6de0d49090148f691 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Mon, 30 Dec 2024 03:03:15 -0500
Subject: [PATCH 33/37] use type array instead of true because of the items
 type revert

---
 packages/examples/src/examples/json-editor.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/examples/src/examples/json-editor.ts b/packages/examples/src/examples/json-editor.ts
index 566ca6d63..6366e5ae7 100644
--- a/packages/examples/src/examples/json-editor.ts
+++ b/packages/examples/src/examples/json-editor.ts
@@ -27,7 +27,9 @@ import { registerExamples } from '../register';
 export const schema = {
   type: ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'],
   additionalProperties: true,
-  items: true,
+  items: {
+    type: ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'],
+  },
 };
 
 export const uischema = {

From 40dc34f45e4c1ef3c53854863757fd5b44dba8bd Mon Sep 17 00:00:00 2001
From: kchobantonov <kchobantonov@gmail.com>
Date: Wed, 8 Jan 2025 18:15:31 -0500
Subject: [PATCH 34/37] remove unused imports

---
 packages/vue-vuetify/src/util/composition.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index 677e818fa..640fd5c0b 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -12,7 +12,6 @@ import {
   getCombinatorTranslations,
   getFirstPrimitiveProp,
   isDescriptionHidden,
-  isScoped,
   type ControlElement,
   type DispatchPropsOfControl,
   type DispatchPropsOfMultiEnumControl,

From 9111316be9f5796d8cf85f8933c184e1e25328e8 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Thu, 13 Feb 2025 18:13:05 -0500
Subject: [PATCH 35/37] remove ?

---
 packages/core/src/mappers/renderer.ts | 2 +-
 packages/core/src/util/resolvers.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index 767737671..47493be0f 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/packages/core/src/mappers/renderer.ts
@@ -186,7 +186,7 @@ export const doCreateDefaultValue = (
   rootSchema: JsonSchema
 ) => {
   const resolvedSchema =
-    typeof schema?.$ref === 'string'
+    typeof schema.$ref === 'string'
       ? Resolve.schema(rootSchema, schema.$ref, rootSchema)
       : schema;
   if (resolvedSchema.default !== undefined) {
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index ab55dd6b0..2e903270c 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -136,7 +136,7 @@ const resolveSchemaWithSegments = (
   }
 
   // use typeof because schema can by of any type - check singleSegmentResolveSchema below
-  if (typeof schema?.$ref === 'string') {
+  if (typeof schema.$ref === 'string') {
     schema = resolveSchema(rootSchema, schema.$ref, rootSchema);
   }
 

From 0a6047fd8e9dd9ca7e0e1a60e2c04aa0777a3be7 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Thu, 13 Feb 2025 18:14:53 -0500
Subject: [PATCH 36/37] remove prop param

---
 .../vue-vuetify/src/controls/DateTimeControlRenderer.vue     | 2 +-
 packages/vue-vuetify/src/controls/EnumControlRenderer.vue    | 2 +-
 packages/vue-vuetify/src/controls/IntegerControlRenderer.vue | 2 +-
 .../vue-vuetify/src/controls/MultiStringControlRenderer.vue  | 2 +-
 packages/vue-vuetify/src/controls/NumberControlRenderer.vue  | 2 +-
 packages/vue-vuetify/src/controls/StringControlRenderer.vue  | 2 +-
 .../vue-vuetify/src/controls/StringMaskControlRenderer.vue   | 2 +-
 packages/vue-vuetify/src/controls/TimeControlRenderer.vue    | 2 +-
 .../src/extended/AutocompleteEnumControlRenderer.vue         | 2 +-
 .../src/extended/AutocompleteOneOfEnumControlRenderer.vue    | 2 +-
 packages/vue-vuetify/src/util/composition.ts                 | 5 +----
 11 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
index 29dce063b..53eec9cf1 100644
--- a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
@@ -260,7 +260,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     const t = useTranslator();
     const showMenu = ref(false);
     const activeTab = ref<'date' | 'time'>('date');
diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
index bdb32c299..709e9b4fe 100644
--- a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
@@ -56,7 +56,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(useJsonFormsEnumControl(props), (value) =>
       value === null ? clearValue : value,
     );
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 9395bd13e..8a13fc2bf 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -54,7 +54,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, 0);
+    const clearValue = determineClearValue(0);
     const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
index 709cf9e09..4a01d84e7 100644
--- a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
@@ -62,7 +62,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
       (value) => (value === null ? clearValue : value),
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
index de5be55f0..5ac0cd1ef 100644
--- a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -55,7 +55,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, 0);
+    const clearValue = determineClearValue(0);
     const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
index 2ff8f998e..0a3f94a83 100644
--- a/packages/vue-vuetify/src/controls/StringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
@@ -96,7 +96,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
       (value) => (value === null ? clearValue : value),
diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
index b285ebc16..7cd870fac 100644
--- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -76,7 +76,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
index 49e130613..32117f608 100644
--- a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
@@ -145,7 +145,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     const t = useTranslator();
 
     const showMenu = ref(false);
diff --git a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
index 3375f8a63..9608262d7 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
@@ -81,7 +81,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsEnumControl(props),
       (value) => (value === null ? clearValue : value),
diff --git a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
index bbce98811..03e9ed970 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
@@ -81,7 +81,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsOneOfEnumControl(props),
       (value) => (value === null ? clearValue : value),
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index 640fd5c0b..bf9669e5c 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -485,10 +485,7 @@ export const useIcons = () => {
   };
 };
 
-export const determineClearValue = (
-  props: RendererProps<ControlElement & Scopable>,
-  defaultValue: any,
-) => {
+export const determineClearValue = (defaultValue: any) => {
   const jsonforms = useJsonForms();
 
   const useDefaultValue = inject<boolean>(

From fd7efb411aaf358479dda526def7da23b2423501 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Thu, 13 Feb 2025 18:44:42 -0500
Subject: [PATCH 37/37] remove prop

---
 .../src/controls/AnyOfStringOrEnumControlRenderer.vue           | 2 +-
 packages/vue-vuetify/src/controls/DateControlRenderer.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
index 8a4f6d5ce..ef5a349e4 100644
--- a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
@@ -62,7 +62,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     return useVuetifyControl(useJsonFormsControl(props), (value) =>
       value === null ? clearValue : value,
     );
diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
index 9f56ec918..188af7763 100644
--- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -134,7 +134,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const clearValue = determineClearValue(props, '');
+    const clearValue = determineClearValue('');
     const t = useTranslator();
 
     const showMenu = ref(false);