feat: inject custom-control-wrapper in controlWrapper vue vanilla to replace the default controlWrapper

Author: davewwww

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

@@ -1,5 +1,13 @@
 <template>
-  <div v-if="visible" :id="id" :class="styles.control.root">
+  <component
+    :is="customControlWrapper.component"
+    v-bind="customControlWrapper.props"
+    v-if="visible && customControlWrapper && customControlWrapper.component"
+  >
+    <slot></slot>
+  </component>
+
+  <div v-else-if="visible" :id="id" :class="styles.control.root">
     <label :for="id + '-input'" :class="styles.control.label">
       {{ computedLabel }}
     </label>
@@ -14,9 +22,9 @@
 
 <script lang="ts">
 import { isDescriptionHidden, computeLabel } from '@jsonforms/core';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import { Styles } from '../styles';
-import { Options } from '../util';
+import { type CustomControllWrapper, Options } from '../util';
 
 export default defineComponent({
   name: 'ControlWrapper',
@@ -65,6 +73,17 @@ export default defineComponent({
       type: Object as PropType<Styles>,
     },
   },
+  setup(props: any) {
+    const customControlWrapper = inject<CustomControllWrapper | undefined>(
+      'custom-control-wrapper',
+      undefined
+    );
+    if (customControlWrapper?.component) {
+      customControlWrapper.props = { ...props, ...customControlWrapper?.props };
+    }
+
+    return { customControlWrapper };
+  },
   computed: {
     showDescription(): boolean {
       return !isDescriptionHidden(

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

@@ -0,0 +1,6 @@
+import type { Component } from 'vue';
+
+export interface CustomControllWrapper {
+  component: Component;
+  props?: Record<string, any>;
+}

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

@@ -1,2 +1,3 @@
 export * from './options';
 export * from './composition';
+export * from './customControlWrapper';

packages/vue-vanilla/tests/unit/customControlWrapper/CustomControlWrapper.spec.ts

@@ -0,0 +1,21 @@
+import { expect } from 'chai';
+import { mountJsonFormsWithCustomControlWrapper } from '../util';
+
+const schema = {
+  type: 'string',
+};
+const uischema = {
+  type: 'Control',
+  scope: '#',
+};
+
+describe('CustomControlWrapper.vue', () => {
+  it('renders a custom control wrapper', () => {
+    const wrapper = mountJsonFormsWithCustomControlWrapper(
+      '',
+      schema,
+      uischema
+    );
+    expect(wrapper.find('.customWrapper').exists()).to.be.true;
+  });
+});

packages/vue-vanilla/tests/unit/util/CustomControlWrapper.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="visible" :id="id" class="customWrapper">
+    {{ label }}: <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CustomControlWrapper',
+  props: {
+    id: {
+      required: true,
+      type: String,
+    },
+    description: {
+      required: false as const,
+      type: String,
+      default: undefined,
+    },
+    errors: {
+      required: false as const,
+      type: String,
+      default: undefined,
+    },
+    label: {
+      required: false as const,
+      type: String,
+      default: undefined,
+    },
+    appliedOptions: {
+      required: false as const,
+      type: Object,
+      default: undefined,
+    },
+    visible: {
+      required: false as const,
+      type: Boolean,
+      default: true,
+    },
+    required: {
+      required: false as const,
+      type: Boolean,
+      default: false,
+    },
+    isFocused: {
+      required: false as const,
+      type: Boolean,
+      default: false,
+    },
+    styles: {
+      required: true,
+      type: Object,
+    },
+  },
+});
+</script>
+
+
+<style scoped>
+.customWrapper {
+  display: flex;
+}
+</style>

packages/vue-vanilla/tests/unit/util/TestComponentWithCustomControlWrapper.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+// eslint-disable-next-line vue/no-unused-components
+import CustomControlWrapper from './CustomControlWrapper.vue';
+import TestComponent from './TestComponent.vue';
+
+export default defineComponent({
+  name: 'TestComponentWithCustomWrapper',
+  components: {
+    TestComponent,
+  },
+  provide() {
+    return {
+      'custom-control-wrapper': { component: CustomControlWrapper },
+    };
+  },
+});
+</script>
+
+<template>
+  <TestComponent />
+</template>

packages/vue-vanilla/tests/unit/util/util.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import TestComponent from './TestComponent.vue';
+import TestComponentWithCustomControlWrapper from './TestComponentWithCustomControlWrapper.vue';
 
 export const mountJsonForms = (
   data: any,
@@ -11,3 +12,14 @@ export const mountJsonForms = (
     props: { initialData: data, schema, uischema, config },
   });
 };
+
+export const mountJsonFormsWithCustomControlWrapper = (
+  data: any,
+  schema: any,
+  uischema?: any,
+  config?: any
+) => {
+  return mount(TestComponentWithCustomControlWrapper, {
+    props: { initialData: data, schema, uischema, config },
+  });
+};