From d7cb44df1eff556b46669a5e08224522b9728297 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Thu, 21 Aug 2025 18:16:41 -0400
Subject: [PATCH 01/11] allow control-wrapper to be overridden by provided
 component

---
 packages/vue-vuetify/README.md                | 28 +++++++++
 packages/vue-vuetify/dev/App.vue              | 10 ++-
 .../dev/components/ControlWrapper.vue         | 62 +++++++++++++++++++
 .../dev/components/ExampleSettings.vue        | 18 ++++++
 packages/vue-vuetify/dev/store/index.ts       |  1 +
 .../src/controls/ControlWrapper.vue           | 52 +++++++++++-----
 .../components/DefaultControlWrapper.vue      | 29 +++++++++
 .../src/controls/components/index.ts          |  1 +
 packages/vue-vuetify/src/util/inject.ts       | 22 ++++++-
 .../BooleanControlRenderer.spec.ts.snap       |  2 +-
 .../DateControlRenderer.spec.ts.snap          |  4 +-
 .../DateTimeControlRenderer.spec.ts.snap      |  4 +-
 .../EnumControlRenderer.spec.ts.snap          |  4 +-
 .../IntegerControlRenderer.spec.ts.snap       |  2 +-
 .../MultiStringControlRenderer.spec.ts.snap   |  2 +-
 .../NumberControlRenderer.spec.ts.snap        |  2 +-
 .../OneOfEnumControlRenderer.spec.ts.snap     |  4 +-
 .../StringControlRenderer.spec.ts.snap        |  6 +-
 .../TimeControlRenderer.spec.ts.snap          |  4 +-
 19 files changed, 221 insertions(+), 36 deletions(-)
 create mode 100644 packages/vue-vuetify/dev/components/ControlWrapper.vue
 create mode 100644 packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue

diff --git a/packages/vue-vuetify/README.md b/packages/vue-vuetify/README.md
index 6f1a2d9247..8ae9c6d561 100644
--- a/packages/vue-vuetify/README.md
+++ b/packages/vue-vuetify/README.md
@@ -126,6 +126,34 @@ If note done yet, please [install Vuetify for Vue](https://vuetifyjs.com/en/gett
 
 For more information on how JSON Forms can be configured, please see the [README of `@jsonforms/vue`](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md).
 
+## Override the ControlWrapper component
+
+All control renderers wrap their components with a **`ControlWrapper`** component, which by default uses **`DefaultControlWrapper`** to render the wrapper element around each control.
+
+If you want to:
+
+- Replace the **`DefaultControlWrapper`** with your own implementation, or
+- Provide custom renderers that render their child controls differently,
+
+you can use Vue’s **`provide` / `inject` mechanism** to supply your own wrapper under the **`ControlWrapperSymbol`**.
+
+For example, the demo application includes a custom wrapper that can be enabled from the **Example App Settings**. It is registered like this:
+
+```ts
+import { provide, type DefineComponent } from 'vue';
+import {
+  ControlWrapperSymbol,
+  type ControlWrapperProps,
+} from '@jsonforms/vue-vuetify';
+
+import ControlWrapper from './components/ControlWrapper.vue';
+
+provide(
+  ControlWrapperSymbol,
+  ControlWrapper as DefineComponent<ControlWrapperProps>,
+);
+```
+
 ## License
 
 The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.
diff --git a/packages/vue-vuetify/dev/App.vue b/packages/vue-vuetify/dev/App.vue
index eab6fa09be..e3a9cb4964 100644
--- a/packages/vue-vuetify/dev/App.vue
+++ b/packages/vue-vuetify/dev/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, provide, type DefineComponent } from 'vue';
+import ControlWrapper from './components/ControlWrapper.vue';
 import ExampleAppBar from './components/ExampleAppBar.vue';
 import ExampleDrawer from './components/ExampleDrawer.vue';
 import ExampleSettings from './components/ExampleSettings.vue';
@@ -7,6 +8,7 @@ import ExampleSettings from './components/ExampleSettings.vue';
 import ExampleView from './views/ExampleView.vue';
 import HomeView from './views/HomeView.vue';
 
+import { ControlWrapperSymbol, type ControlWrapperProps } from '@/util';
 import examples from './examples';
 import { getCustomThemes } from './plugins/vuetify';
 import { useAppStore } from './store';
@@ -27,6 +29,12 @@ const theme = computed(() => {
 
   return appStore.dark ? 'dark' : 'light';
 });
+
+// override the default ControlWrapper
+provide(
+  ControlWrapperSymbol,
+  ControlWrapper as DefineComponent<ControlWrapperProps>,
+);
 </script>
 
 <template>
diff --git a/packages/vue-vuetify/dev/components/ControlWrapper.vue b/packages/vue-vuetify/dev/components/ControlWrapper.vue
new file mode 100644
index 0000000000..fb5736a133
--- /dev/null
+++ b/packages/vue-vuetify/dev/components/ControlWrapper.vue
@@ -0,0 +1,62 @@
+<template>
+  <div
+    v-if="appStore.overrideControlTemplate && visible"
+    :class="['control-wrapper', { 'focused-wrapper': isFocused }]"
+    :id="id"
+  >
+    <slot></slot>
+  </div>
+  <default-control-wrapper v-else v-bind="props">
+    <slot></slot>
+  </default-control-wrapper>
+</template>
+
+<script setup lang="ts">
+import DefaultControlWrapper from '@/controls/components/DefaultControlWrapper.vue';
+import type { ControlWrapperProps } from '@/util';
+import { useAppStore } from '../store';
+import { defineProps } from 'vue';
+const appStore = useAppStore();
+
+const props = defineProps<ControlWrapperProps>();
+</script>
+
+<style scoped>
+.control-wrapper {
+  position: relative;
+  padding: 8px;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+  border-radius: 6px;
+}
+
+/* Subtle focus effect */
+.focused-wrapper {
+  background-color: rgba(25, 118, 210, 0.05); /* soft glow */
+  box-shadow: 0 0 8px rgba(25, 118, 210, 0.3);
+}
+
+/* Override icon in the corner */
+.override-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  transition:
+    transform 0.2s ease,
+    color 0.2s ease;
+}
+
+/* Slight icon animation on focus */
+.focused-wrapper .override-icon {
+  transform: scale(1.3);
+  color: #1976d2;
+}
+
+/* Error styling */
+.error-alert {
+  margin-top: 4px;
+  padding: 4px 8px;
+  font-size: 0.85rem;
+}
+</style>
diff --git a/packages/vue-vuetify/dev/components/ExampleSettings.vue b/packages/vue-vuetify/dev/components/ExampleSettings.vue
index 4534bf2a49..ca1a0729ad 100644
--- a/packages/vue-vuetify/dev/components/ExampleSettings.vue
+++ b/packages/vue-vuetify/dev/components/ExampleSettings.vue
@@ -258,6 +258,24 @@ const layouts = appstoreLayouts.map((value: AppstoreLayouts) => ({
       </v-row>
     </v-container>
 
+    <v-divider />
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ props }">
+              <v-switch
+                v-model="appStore.overrideControlTemplate"
+                label="Use custom ControlWrapper"
+                v-bind="props"
+              ></v-switch>
+            </template>
+            This shows how ControlWrapper can be overriden, uses Example app
+            custom ControlWrapper. Visible when control is on focus.
+          </v-tooltip>
+        </v-col>
+      </v-row>
+    </v-container>
     <v-divider />
 
     <v-container>
diff --git a/packages/vue-vuetify/dev/store/index.ts b/packages/vue-vuetify/dev/store/index.ts
index 0b74452678..64e5533d53 100644
--- a/packages/vue-vuetify/dev/store/index.ts
+++ b/packages/vue-vuetify/dev/store/index.ts
@@ -17,6 +17,7 @@ const appstore = reactive({
   variant: useLocalStorage('vuetify-example-variant', ''),
   iconset: useLocalStorage('vuetify-example-iconset', 'mdi'),
   blueprint: useLocalStorage('vuetify-example-blueprint', 'md1'),
+  overrideControlTemplate: false,
   jsonforms: {
     readonly: useHistoryHashQuery('read-only', false as boolean),
     validationMode: 'ValidateAndShow' as ValidationMode,
diff --git a/packages/vue-vuetify/src/controls/ControlWrapper.vue b/packages/vue-vuetify/src/controls/ControlWrapper.vue
index 8353bc7d3c..9c5214408b 100644
--- a/packages/vue-vuetify/src/controls/ControlWrapper.vue
+++ b/packages/vue-vuetify/src/controls/ControlWrapper.vue
@@ -1,29 +1,47 @@
 <template>
-  <div v-if="visible" :class="styles.control.root" :id="id">
-    <slot></slot>
-  </div>
+  <component :is="WrapperComponent" v-bind="props">
+    <slot />
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue';
-import type { Styles } from '../styles';
+import type { Styles } from '@/styles';
+import type {
+  AppliedOptions,
+  ControlWrapperProps,
+  ControlWrapperType,
+} from '@/util';
+import { ControlWrapperSymbol } from '@/util';
+import { defineComponent, inject, type PropType } from 'vue';
+import DefaultControlWrapper from './components/DefaultControlWrapper.vue';
 
 export default defineComponent({
-  name: 'control-wrapper',
+  name: 'ControlWrapper',
   props: {
-    id: {
-      required: true as const,
-      type: String,
-    },
-    visible: {
-      required: false as const,
-      type: Boolean,
-      default: true,
-    },
-    styles: {
+    id: { type: String, required: true },
+    description: { type: String, required: true },
+    errors: { type: String, required: true },
+    label: { type: String, required: true },
+    visible: { type: Boolean, required: true },
+    required: { type: Boolean, required: true },
+    isFocused: { type: Boolean, required: true },
+    styles: { type: Object as PropType<Styles>, required: true },
+    appliedOptions: {
+      type: Object as PropType<AppliedOptions>,
       required: true,
-      type: Object as PropType<Styles>,
     },
   },
+  setup(props: ControlWrapperProps) {
+    // Inject a custom wrapper if provided
+    const WrapperComponent = inject<ControlWrapperType>(
+      ControlWrapperSymbol,
+      DefaultControlWrapper,
+    ) as ControlWrapperType;
+
+    return {
+      WrapperComponent,
+      props,
+    };
+  },
 });
 </script>
diff --git a/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue b/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue
new file mode 100644
index 0000000000..e9bb95ee33
--- /dev/null
+++ b/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-if="visible" :class="styles.control.root" :id="id">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import type { Styles } from '@/styles';
+import type { AppliedOptions, ControlWrapperProps } from '@/util';
+import { defineComponent, type DefineComponent, type PropType } from 'vue';
+
+export default defineComponent({
+  name: 'default-control-wrapper',
+  props: {
+    id: { type: String, required: true },
+    description: { type: String, required: true },
+    errors: { type: String, required: true },
+    label: { type: String, required: true },
+    visible: { type: Boolean, required: true },
+    required: { type: Boolean, required: true },
+    isFocused: { type: Boolean, required: true },
+    styles: { type: Object as PropType<Styles>, required: true },
+    appliedOptions: {
+      type: Object as PropType<AppliedOptions>,
+      required: true,
+    },
+  },
+}) as DefineComponent<ControlWrapperProps>;
+</script>
diff --git a/packages/vue-vuetify/src/controls/components/index.ts b/packages/vue-vuetify/src/controls/components/index.ts
index 87028e7c11..37f42e9682 100644
--- a/packages/vue-vuetify/src/controls/components/index.ts
+++ b/packages/vue-vuetify/src/controls/components/index.ts
@@ -1,2 +1,3 @@
+export { default as DefaultControlWrapper } from './DefaultControlWrapper.vue';
 export { default as ValidationBadge } from './ValidationBadge.vue';
 export { default as ValidationIcon } from './ValidationIcon.vue';
diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
index ec04df9b0a..30d4c9d400 100644
--- a/packages/vue-vuetify/src/util/inject.ts
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -1,5 +1,25 @@
-import type { InjectionKey } from 'vue';
+import type { DefineComponent, InjectionKey } from 'vue';
+import type { Styles } from '../styles';
+import type { useControlAppliedOptions } from './composition';
 
 export const IsDynamicPropertyContext: InjectionKey<boolean> = Symbol.for(
   'jsonforms-vue-vuetify:IsDynamicPropertyContext',
 );
+
+export type AppliedOptions = ReturnType<typeof useControlAppliedOptions>;
+export interface ControlWrapperProps {
+  id: string;
+  description: string;
+  errors: string;
+  label: string;
+  visible: boolean;
+  required: boolean;
+  isFocused: boolean;
+  styles: Styles;
+  appliedOptions: AppliedOptions;
+}
+
+export type ControlWrapperType = DefineComponent<ControlWrapperProps>;
+
+export const ControlWrapperSymbol: InjectionKey<ControlWrapperType> =
+  Symbol.for('jsonforms-vue-vuetify:ControlWrapper');
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/BooleanControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/BooleanControlRenderer.spec.ts.snap
index f5bc93c5d8..7bd4b13e91 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/BooleanControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/BooleanControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`BooleanControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Boolean" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-checkbox input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
index 227943dc49..1c82a25d1a 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`DateControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Date" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
@@ -64,7 +64,7 @@ exports[`DateControlRenderer.vue > should render component and match snapshot 1`
 exports[`DateControlRenderer.vue > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#7" errors="" label="My Date" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#7">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
index 4f7bf6e921..63bf698e5e 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`DateTimeControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div data-v-bc5e61db="" class="control" id="#6" errors="" label="My Date Time" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div data-v-bc5e61db="" class="control" id="#6">
       <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
@@ -64,7 +64,7 @@ exports[`DateTimeControlRenderer.vue > should render component and match snapsho
 exports[`DateTimeControlRenderer.vue > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div data-v-bc5e61db="" class="control" id="#7" errors="" label="My Date Time" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div data-v-bc5e61db="" class="control" id="#7">
       <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
index b0f2bdeb3f..6be82fd497 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`EnumControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#4" errors="" label="My Enum" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#4">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
@@ -66,7 +66,7 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot 1`
 exports[`EnumControlRenderer.vue > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#5" errors="" label="My Enum" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#5">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
index f6a2a9da7a..416cd7f3f2 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`IntegerControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Integer" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
index 590dc994e5..13deccdd6b 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`MultiStringControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Multi String" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-textarea v-text-field input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
index ac9b3e429e..133a3e5346 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`NumberControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Number" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
index a67b4b0222..1e64f77c1b 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`OneOfEnumControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#4" errors="" label="My OneOf Enum" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#4">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
@@ -66,7 +66,7 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
 exports[`OneOfEnumControlRenderer.vue > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#5" errors="" label="My OneOf Enum" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#5">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
index aacafa72cf..f864eed53d 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`StringControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My String" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
@@ -61,7 +61,7 @@ exports[`StringControlRenderer.vue > should render component and match snapshot
 exports[`StringControlRenderer.vue with suggestion > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#11" errors="" label="Select Continent" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#11">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
         <!---->
         <div class="v-input__control">
@@ -124,7 +124,7 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
 exports[`StringControlRenderer.vue with suggestion > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#12" errors="" label="Select Continent" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#12">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
         <!---->
         <div class="v-input__control">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
index 4cd26d2aba..4f1fa5fbcd 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`TimeControlRenderer.vue > should render component and match snapshot 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#6" errors="" label="My Time" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#6">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
@@ -64,7 +64,7 @@ exports[`TimeControlRenderer.vue > should render component and match snapshot 1`
 exports[`TimeControlRenderer.vue > should render component and match snapshot when clicked 1`] = `
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
-    <div class="control" id="#7" errors="" label="My Time" required="false" isfocused="false" appliedoptions="[object Object]">
+    <div class="control" id="#7">
       <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">

From 3c9cf53e030f36b0f1ca7ae5e18ae5ec5db9adba Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Fri, 29 Aug 2025 21:22:42 -0400
Subject: [PATCH 02/11] fix list-with-detail example, the v-number-input
 doesn't handle incorrect data nicely at the moment

---
 .../src/additional/ListWithDetailRenderer.vue        |  3 +++
 .../src/controls/IntegerControlRenderer.vue          | 12 +++++++++++-
 .../src/controls/NumberControlRenderer.vue           | 12 +++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index 1451da8bea..f4c7aeeaa2 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -292,6 +292,9 @@ const controlRenderer = defineComponent({
     removeItemsClick(event: Event, toDelete: number[]): void {
       event.stopPropagation();
       this.removeItems?.(this.control.path, toDelete)();
+      if (this.selectedIndex && this.selectedIndex >= this.dataLength) {
+        this.selectedIndex = undefined;
+      }
     },
     childErrors(index: number): ErrorObject[] {
       return this.control.childErrors.filter((e) =>
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 4d2bbbad88..6dc4180897 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -18,7 +18,7 @@
       :persistent-hint="persistentHint()"
       :required="control.required"
       :error-messages="control.errors"
-      :model-value="control.data"
+      :model-value="value"
       :clearable="control.enabled"
       v-bind="vuetifyProps('v-text-field')"
       @update:model-value="onChange"
@@ -65,6 +65,16 @@ const controlRenderer = defineComponent({
       const options: any = this.appliedOptions;
       return options.step ?? 1;
     },
+    value(): number | null | undefined {
+      if (
+        typeof this.control.data === 'number' ||
+        this.control.data == null ||
+        this.control.data === undefined
+      ) {
+        return this.control.data;
+      }
+      return Number(this.control.data);
+    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
index fdeae2c604..6ea9883910 100644
--- a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -19,7 +19,7 @@
       :persistent-hint="persistentHint()"
       :required="control.required"
       :error-messages="control.errors"
-      :model-value="control.data"
+      :model-value="value"
       :clearable="control.enabled"
       v-bind="vuetifyProps('v-number-input')"
       @update:model-value="onChange"
@@ -78,6 +78,16 @@ const controlRenderer = defineComponent({
       const fraction = stepStr.split('.')[1];
       return fraction ? fraction.length : undefined;
     },
+    value(): number | null | undefined {
+      if (
+        typeof this.control.data === 'number' ||
+        this.control.data == null ||
+        this.control.data === undefined
+      ) {
+        return this.control.data;
+      }
+      return Number(this.control.data);
+    },
   },
 });
 

From 0e85ab1e7f6192fcb19df75735b6b16b17f3f93e Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Fri, 29 Aug 2025 21:35:34 -0400
Subject: [PATCH 03/11] use computed field to make sure that the selectedIndex
 is in range

---
 .../src/additional/ListWithDetailRenderer.vue | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index f4c7aeeaa2..08af719c9e 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -203,7 +203,7 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import type { ErrorObject } from 'ajv';
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import {
   VAvatar,
   VBtn,
@@ -248,11 +248,28 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const selectedIndex = ref<number | undefined>(undefined);
+    const input = useVuetifyArrayControl(useJsonFormsArrayControl(props));
+
+    const _selectedIndex = ref<number | undefined>(undefined);
+    const selectedIndex = computed<number | undefined>({
+      get: () => {
+        const len = input.control.value?.data?.length ?? 0;
+
+        // If no index or out of bounds → undefined
+        if (_selectedIndex.value === undefined || _selectedIndex.value >= len) {
+          return undefined;
+        }
+
+        return _selectedIndex.value;
+      },
+      set: (val) => {
+        _selectedIndex.value = val;
+      },
+    });
     const icons = useIcons();
 
     return {
-      ...useVuetifyArrayControl(useJsonFormsArrayControl(props)),
+      ...input,
       selectedIndex,
       icons,
     };
@@ -292,9 +309,6 @@ const controlRenderer = defineComponent({
     removeItemsClick(event: Event, toDelete: number[]): void {
       event.stopPropagation();
       this.removeItems?.(this.control.path, toDelete)();
-      if (this.selectedIndex && this.selectedIndex >= this.dataLength) {
-        this.selectedIndex = undefined;
-      }
     },
     childErrors(index: number): ErrorObject[] {
       return this.control.childErrors.filter((e) =>

From ab9e82c07272675c0d1921d9a43a43a3d51eff7e Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Fri, 29 Aug 2025 22:05:08 -0400
Subject: [PATCH 04/11] make props optional

---
 .../src/controls/ControlWrapper.vue           | 17 ++++++++---------
 .../components/DefaultControlWrapper.vue      | 19 +++++++++----------
 packages/vue-vuetify/src/util/inject.ts       | 18 +++++++++---------
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/ControlWrapper.vue b/packages/vue-vuetify/src/controls/ControlWrapper.vue
index 9c5214408b..4f5e7cff48 100644
--- a/packages/vue-vuetify/src/controls/ControlWrapper.vue
+++ b/packages/vue-vuetify/src/controls/ControlWrapper.vue
@@ -18,17 +18,16 @@ import DefaultControlWrapper from './components/DefaultControlWrapper.vue';
 export default defineComponent({
   name: 'ControlWrapper',
   props: {
-    id: { type: String, required: true },
-    description: { type: String, required: true },
-    errors: { type: String, required: true },
-    label: { type: String, required: true },
-    visible: { type: Boolean, required: true },
-    required: { type: Boolean, required: true },
-    isFocused: { type: Boolean, required: true },
-    styles: { type: Object as PropType<Styles>, required: true },
+    id: { type: String },
+    description: { type: String },
+    errors: { type: String },
+    label: { type: String },
+    visible: { type: Boolean },
+    required: { type: Boolean },
+    isFocused: { type: Boolean },
+    styles: { type: Object as PropType<Styles> },
     appliedOptions: {
       type: Object as PropType<AppliedOptions>,
-      required: true,
     },
   },
   setup(props: ControlWrapperProps) {
diff --git a/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue b/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue
index e9bb95ee33..40358d969a 100644
--- a/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue
+++ b/packages/vue-vuetify/src/controls/components/DefaultControlWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" :class="styles.control.root" :id="id">
+  <div v-if="visible" :class="styles?.control.root" :id="id">
     <slot></slot>
   </div>
 </template>
@@ -12,17 +12,16 @@ import { defineComponent, type DefineComponent, type PropType } from 'vue';
 export default defineComponent({
   name: 'default-control-wrapper',
   props: {
-    id: { type: String, required: true },
-    description: { type: String, required: true },
-    errors: { type: String, required: true },
-    label: { type: String, required: true },
-    visible: { type: Boolean, required: true },
-    required: { type: Boolean, required: true },
-    isFocused: { type: Boolean, required: true },
-    styles: { type: Object as PropType<Styles>, required: true },
+    id: { type: String },
+    description: { type: String },
+    errors: { type: String },
+    label: { type: String },
+    visible: { type: Boolean },
+    required: { type: Boolean },
+    isFocused: { type: Boolean },
+    styles: { type: Object as PropType<Styles> },
     appliedOptions: {
       type: Object as PropType<AppliedOptions>,
-      required: true,
     },
   },
 }) as DefineComponent<ControlWrapperProps>;
diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
index 30d4c9d400..a880b43340 100644
--- a/packages/vue-vuetify/src/util/inject.ts
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -8,15 +8,15 @@ export const IsDynamicPropertyContext: InjectionKey<boolean> = Symbol.for(
 
 export type AppliedOptions = ReturnType<typeof useControlAppliedOptions>;
 export interface ControlWrapperProps {
-  id: string;
-  description: string;
-  errors: string;
-  label: string;
-  visible: boolean;
-  required: boolean;
-  isFocused: boolean;
-  styles: Styles;
-  appliedOptions: AppliedOptions;
+  id?: string;
+  description?: string;
+  errors?: string;
+  label?: string;
+  visible?: boolean;
+  required?: boolean;
+  isFocused?: boolean;
+  styles?: Styles;
+  appliedOptions?: AppliedOptions;
 }
 
 export type ControlWrapperType = DefineComponent<ControlWrapperProps>;

From a9d8096ed41a6139e1bfbdade39eec7fb5e4f303 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Fri, 29 Aug 2025 23:31:10 -0400
Subject: [PATCH 05/11] enhance the custom wrapper for examples.

---
 .../dev/components/ControlWrapper.vue         | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/vue-vuetify/dev/components/ControlWrapper.vue b/packages/vue-vuetify/dev/components/ControlWrapper.vue
index fb5736a133..212579144b 100644
--- a/packages/vue-vuetify/dev/components/ControlWrapper.vue
+++ b/packages/vue-vuetify/dev/components/ControlWrapper.vue
@@ -1,11 +1,16 @@
 <template>
   <div
+    class="control-wrapper"
     v-if="appStore.overrideControlTemplate && visible"
-    :class="['control-wrapper', { 'focused-wrapper': isFocused }]"
+    :class="[styles?.control.root, { 'focused-wrapper': isFocused }]"
     :id="id"
   >
-    <slot></slot>
+    <label :for="id">{{ label }} {{ required ? '(required)' : '' }}</label>
+    <template v-for="vnode in processedSlot">
+      <component :is="vnode" />
+    </template>
   </div>
+
   <default-control-wrapper v-else v-bind="props">
     <slot></slot>
   </default-control-wrapper>
@@ -14,11 +19,35 @@
 <script setup lang="ts">
 import DefaultControlWrapper from '@/controls/components/DefaultControlWrapper.vue';
 import type { ControlWrapperProps } from '@/util';
+import { cloneVNode, computed, defineProps, useSlots } from 'vue';
 import { useAppStore } from '../store';
-import { defineProps } from 'vue';
 const appStore = useAppStore();
 
 const props = defineProps<ControlWrapperProps>();
+const slots = useSlots();
+
+/**
+ * Recursively clones a VNode and removes 'label' prop from Vuetify input components.
+ */
+function stripLabel(vnode: any) {
+  if (!vnode) return vnode;
+
+  const hasLabel = vnode.props && 'label' in vnode.props;
+  if (hasLabel) {
+    vnode = cloneVNode(vnode, { label: undefined });
+  }
+
+  if (vnode.children && Array.isArray(vnode.children)) {
+    vnode.children = vnode.children.map(stripLabel);
+  }
+
+  return vnode;
+}
+
+const processedSlot = computed(() => {
+  if (!slots.default) return [];
+  return slots.default().map(stripLabel);
+});
 </script>
 
 <style scoped>
@@ -36,27 +65,4 @@ const props = defineProps<ControlWrapperProps>();
   background-color: rgba(25, 118, 210, 0.05); /* soft glow */
   box-shadow: 0 0 8px rgba(25, 118, 210, 0.3);
 }
-
-/* Override icon in the corner */
-.override-icon {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  transition:
-    transform 0.2s ease,
-    color 0.2s ease;
-}
-
-/* Slight icon animation on focus */
-.focused-wrapper .override-icon {
-  transform: scale(1.3);
-  color: #1976d2;
-}
-
-/* Error styling */
-.error-alert {
-  margin-top: 4px;
-  padding: 4px 8px;
-  font-size: 0.85rem;
-}
 </style>

From b67adf009b21d7254e3c11ee15b2ec93b52b2e9f Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:40:55 -0400
Subject: [PATCH 06/11] Update
 packages/vue-vuetify/src/controls/IntegerControlRenderer.vue

Co-authored-by: Stefan Dirix <sdirix@eclipsesource.com>
---
 packages/vue-vuetify/src/controls/IntegerControlRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 6dc4180897..21c96e7513 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -68,7 +68,7 @@ const controlRenderer = defineComponent({
     value(): number | null | undefined {
       if (
         typeof this.control.data === 'number' ||
-        this.control.data == null ||
+        this.control.data === null ||
         this.control.data === undefined
       ) {
         return this.control.data;

From ba9bebac83baafd08482de8dec9b4280e5b2fa22 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:41:04 -0400
Subject: [PATCH 07/11] Update
 packages/vue-vuetify/src/controls/NumberControlRenderer.vue

Co-authored-by: Stefan Dirix <sdirix@eclipsesource.com>
---
 packages/vue-vuetify/src/controls/NumberControlRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
index 6ea9883910..4d463bd260 100644
--- a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -81,7 +81,7 @@ const controlRenderer = defineComponent({
     value(): number | null | undefined {
       if (
         typeof this.control.data === 'number' ||
-        this.control.data == null ||
+        this.control.data === null ||
         this.control.data === undefined
       ) {
         return this.control.data;

From 08e4dad1092fce5d95411a2c7bc54fe9640f5c45 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Tue, 23 Sep 2025 17:43:12 -0400
Subject: [PATCH 08/11] revert back the name of the control

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

diff --git a/packages/vue-vuetify/src/controls/ControlWrapper.vue b/packages/vue-vuetify/src/controls/ControlWrapper.vue
index 4f5e7cff48..773238f659 100644
--- a/packages/vue-vuetify/src/controls/ControlWrapper.vue
+++ b/packages/vue-vuetify/src/controls/ControlWrapper.vue
@@ -16,7 +16,7 @@ import { defineComponent, inject, type PropType } from 'vue';
 import DefaultControlWrapper from './components/DefaultControlWrapper.vue';
 
 export default defineComponent({
-  name: 'ControlWrapper',
+  name: 'control-wrapper',
   props: {
     id: { type: String },
     description: { type: String },

From b216569e7716bcaeefb3e49ee2b968705a6f4eee Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 28 Sep 2025 01:13:16 -0400
Subject: [PATCH 09/11] remove not needed method

---
 .../src/controls/StringMaskControlRenderer.vue   | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
index 7cd870fac5..0a27eb2a83 100644
--- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -187,20 +187,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-const hasOption =
-  (optionName: string): Tester =>
-  (uischema: UISchemaElement): boolean => {
-    if (isEmpty(uischema)) {
-      return false;
-    }
-
-    const options = uischema.options;
-    return (
-      (options &&
-        !isEmpty(options) &&
-        typeof options[optionName] === 'string') ||
-      false
-    );
-  };
 </script>

From e7c5485a65e6cf0032f604b65a44614c370ef501 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 28 Sep 2025 01:14:21 -0400
Subject: [PATCH 10/11] organize imports

---
 .../src/controls/StringMaskControlRenderer.vue      | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
index 0a27eb2a83..a835143e66 100644
--- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -37,24 +37,19 @@
 </template>
 
 <script lang="ts">
-import {
-  type ControlElement,
-  type Tester,
-  type UISchemaElement,
-} from '@jsonforms/core';
+import { type ControlElement } from '@jsonforms/core';
 import {
   rendererProps,
   type RendererProps,
   useJsonFormsControl,
 } from '@jsonforms/vue';
-import isEmpty from 'lodash/isEmpty';
-import { defineComponent, computed } from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
+import { Mask, type MaskTokens, vMaska } from 'maska';
+import { computed, defineComponent } from 'vue';
 import { VTextField } from 'vuetify/components';
 import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
-import { type MaskTokens, vMaska, Mask } from 'maska';
-import cloneDeep from 'lodash/cloneDeep';
 
 const defaultTokens: MaskTokens = {
   '#': { pattern: /[0-9]/ },

From bf7af15608f0a37c8f10e9d8727dd007c9b8888d Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 28 Sep 2025 18:05:30 -0400
Subject: [PATCH 11/11] update type definition

---
 packages/vue-vuetify/src/util/inject.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
index a880b43340..d22dad3fb1 100644
--- a/packages/vue-vuetify/src/util/inject.ts
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -19,7 +19,12 @@ export interface ControlWrapperProps {
   appliedOptions?: AppliedOptions;
 }
 
-export type ControlWrapperType = DefineComponent<ControlWrapperProps>;
+export type ControlWrapperType = DefineComponent<
+  ControlWrapperProps,
+  any,
+  any,
+  any
+>;
 
 export const ControlWrapperSymbol: InjectionKey<ControlWrapperType> =
   Symbol.for('jsonforms-vue-vuetify:ControlWrapper');