From f9a084f36614fa73cd506dd7aaf038eaceb9ce02 Mon Sep 17 00:00:00 2001
From: Patrick Vale <pvale@crossref.org>
Date: Thu, 24 Apr 2025 16:54:43 +0100
Subject: [PATCH] feat: allow control-wrapper to be overridden by provided
 component

---
 .../vue-vuetify/src/controls/DateControlRenderer.vue   | 10 +++++++---
 packages/vue-vuetify/src/util/composition.ts           |  6 ++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
index 188324cc1..ba87f1564 100644
--- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -1,6 +1,8 @@
 <template>
-  <control-wrapper
+  <component
+    :is="resolvedWrapper"
     v-bind="controlWrapper"
+    :control="control"
     :styles="styles"
     :isFocused="isFocused"
     :appliedOptions="appliedOptions"
@@ -73,12 +75,12 @@
         </v-menu>
       </template>
     </v-text-field>
-  </control-wrapper>
+  </component>
 </template>
 
 <script lang="ts">
 import { type ControlElement, type JsonSchema } from '@jsonforms/core';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { computed, defineComponent, inject, ref, unref } from 'vue';
 
 import {
   rendererProps,
@@ -140,6 +142,7 @@ const controlRenderer = defineComponent({
     const adaptValue = (value: any) => value || undefined;
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
+    const resolvedWrapper = inject('controlWrapperOverride', ControlWrapper);
     const dateFormat = computed<string>(
       () =>
         typeof control.appliedOptions.value.dateFormat == 'string'
@@ -176,6 +179,7 @@ const controlRenderer = defineComponent({
       options,
       useMask,
       maskCompleted,
+      resolvedWrapper,
     };
   },
   computed: {
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index 3e99fa08c..c2603c77a 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -31,11 +31,13 @@ import {
   inject,
   provide,
   ref,
+  type Component,
   type ComputedRef,
   type InjectionKey,
 } from 'vue';
 import type { IconOptions } from 'vuetify';
 import { useStyles } from '../styles';
+import { ControlWrapper } from '@/controls';
 
 export const IconSymbol: InjectionKey<Required<IconOptions>> =
   Symbol.for('vuetify:icons');
@@ -481,3 +483,7 @@ export const useIcons = () => {
     current: iconSet,
   };
 };
+
+export const useControlWrapper = () => {
+  return inject('vuetify:control-wrapper', ControlWrapper);
+};