eclipsesource · yaffol · Apr 24, 2025
diff --git 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
@@ -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);
+};
diff --git a/packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts b/packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts
  });

  it('renders a checkbox', () => {
    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
  });

  it('renders title as label', () => {
  });

  it('should render component and match snapshot', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
diff --git a/packages/vue-vuetify/tests/unit/controls/DateControlRenderer.spec.ts b/packages/vue-vuetify/tests/unit/controls/DateControlRenderer.spec.ts
  });

  it('renders a date input', () => {
    expect(wrapper.find('input[type="text"]').exists()).toBe(true);
  });

  it('renders title as label', () => {
	});

	it('renders a checkbox', () => {
	expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
Check failure on line 35 in packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts GitHub Actions / Run on macos-latest tests/unit/controls/BooleanControlRenderer.spec.ts > BooleanControlRenderer.vue > renders a checkbox `AssertionError: expected false to be true // Object.is equality - Expected + Received - true + false ❯ tests/unit/controls/BooleanControlRenderer.spec.ts:35:61` Check failure on line 35 in packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts GitHub Actions / Run on windows-latest tests/unit/controls/BooleanControlRenderer.spec.ts > BooleanControlRenderer.vue > renders a checkbox `AssertionError: expected false to be true // Object.is equality - Expected + Received - true + false ❯ tests/unit/controls/BooleanControlRenderer.spec.ts:35:61`
	});

	it('renders title as label', () => {
	});

	it('should render component and match snapshot', () => {
	expect(wrapper.html()).toMatchSnapshot();
Check failure on line 55 in packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts GitHub Actions / Run on macos-latest tests/unit/controls/BooleanControlRenderer.spec.ts > BooleanControlRenderer.vue > should render component and match snapshot Error: Snapshot `BooleanControlRenderer.vue > should render component and match snapshot 1` mismatched - Expected + Received "<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="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"> - <div class="v-selection-control v-selection-control--dirty v-selection-control--density-default v-checkbox-btn"> - <div class="v-selection-control__wrapper"> - <!----> - <div class="v-selection-control__input"><i class="mdi-checkbox-marked mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="#6-input" aria-disabled="false" aria-label="My Boolean" type="checkbox" aria-describedby="#6-input-messages" placeholder="boolean placeholder" value="true"></div> - </div><label class="v-label v-label--clickable" for="#6-input"> - <!---->My Boolean - </label> - </div> - </div> - <!----> - <div class="v-input__details"> - <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="#6-input-messages"> - <!----> - </transition-group-stub> - <!----> - </div> - </div> - </div> + <!--[object Object]--> </div> </div>" ❯ tests/unit/controls/BooleanControlRenderer.spec.ts:55:28 Check failure on line 55 in packages/vue-vuetify/tests/unit/controls/BooleanControlRenderer.spec.ts GitHub Actions / Run on windows-latest tests/unit/controls/BooleanControlRenderer.spec.ts > BooleanControlRenderer.vue > should render component and match snapshot Error: Snapshot `BooleanControlRenderer.vue > should render component and match snapshot 1` mismatched - Expected + Received "<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="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"> - <div class="v-selection-control v-selection-control--dirty v-selection-control--density-default v-checkbox-btn"> - <div class="v-selection-control__wrapper"> - <!----> - <div class="v-selection-control__input"><i class="mdi-checkbox-marked mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="#6-input" aria-disabled="false" aria-label="My Boolean" type="checkbox" aria-describedby="#6-input-messages" placeholder="boolean placeholder" value="true"></div> - </div><label class="v-label v-label--clickable" for="#6-input"> - <!---->My Boolean - </label> - </div> - </div> - <!----> - <div class="v-input__details"> - <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="#6-input-messages"> - <!----> - </transition-group-stub> - <!----> - </div> - </div> - </div> + <!--[object Object]--> </div> </div>" ❯ tests/unit/controls/BooleanControlRenderer.spec.ts:55:28
	});
	});
	});

	it('renders a date input', () => {
	expect(wrapper.find('input[type="text"]').exists()).toBe(true);
Check failure on line 39 in packages/vue-vuetify/tests/unit/controls/DateControlRenderer.spec.ts GitHub Actions / Run on macos-latest tests/unit/controls/DateControlRenderer.spec.ts > DateControlRenderer.vue > renders a date input `AssertionError: expected false to be true // Object.is equality - Expected + Received - true + false ❯ tests/unit/controls/DateControlRenderer.spec.ts:39:57` Check failure on line 39 in packages/vue-vuetify/tests/unit/controls/DateControlRenderer.spec.ts GitHub Actions / Run on windows-latest tests/unit/controls/DateControlRenderer.spec.ts > DateControlRenderer.vue > renders a date input `AssertionError: expected false to be true // Object.is equality - Expected + Received - true + false ❯ tests/unit/controls/DateControlRenderer.spec.ts:39:57`
	});

	it('renders title as label', () => {