From acce4cd78a7acc7d59b2ca6e701a77d0251323ea Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Fri, 9 Feb 2024 13:31:50 +0100
Subject: [PATCH] feat: inject custom-control-wrapper in controlWrapper vue
 vanilla to replace the default controlWrapper

---
 .../src/controls/ControlWrapper.vue           | 25 ++++++-
 .../src/util/customControlWrapper.ts          |  6 ++
 packages/vue-vanilla/src/util/index.ts        |  1 +
 .../CustomControlWrapper.spec.ts              | 21 ++++++
 .../tests/unit/util/CustomControlWrapper.vue  | 65 +++++++++++++++++++
 .../TestComponentWithCustomControlWrapper.vue | 22 +++++++
 packages/vue-vanilla/tests/unit/util/util.ts  | 12 ++++
 7 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 packages/vue-vanilla/src/util/customControlWrapper.ts
 create mode 100644 packages/vue-vanilla/tests/unit/customControlWrapper/CustomControlWrapper.spec.ts
 create mode 100644 packages/vue-vanilla/tests/unit/util/CustomControlWrapper.vue
 create mode 100644 packages/vue-vanilla/tests/unit/util/TestComponentWithCustomControlWrapper.vue

diff --git a/packages/vue-vanilla/src/controls/ControlWrapper.vue b/packages/vue-vanilla/src/controls/ControlWrapper.vue
index 666331b5e..a1ff4a21b 100644
--- a/packages/vue-vanilla/src/controls/ControlWrapper.vue
+++ b/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(
diff --git a/packages/vue-vanilla/src/util/customControlWrapper.ts b/packages/vue-vanilla/src/util/customControlWrapper.ts
new file mode 100644
index 000000000..26cf7076a
--- /dev/null
+++ b/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>;
+}
diff --git a/packages/vue-vanilla/src/util/index.ts b/packages/vue-vanilla/src/util/index.ts
index e1d5a5963..b4f77db93 100644
--- a/packages/vue-vanilla/src/util/index.ts
+++ b/packages/vue-vanilla/src/util/index.ts
@@ -1,2 +1,3 @@
 export * from './options';
 export * from './composition';
+export * from './customControlWrapper';
diff --git a/packages/vue-vanilla/tests/unit/customControlWrapper/CustomControlWrapper.spec.ts b/packages/vue-vanilla/tests/unit/customControlWrapper/CustomControlWrapper.spec.ts
new file mode 100644
index 000000000..f69d838a3
--- /dev/null
+++ b/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;
+  });
+});
diff --git a/packages/vue-vanilla/tests/unit/util/CustomControlWrapper.vue b/packages/vue-vanilla/tests/unit/util/CustomControlWrapper.vue
new file mode 100644
index 000000000..6c349ea2c
--- /dev/null
+++ b/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>
diff --git a/packages/vue-vanilla/tests/unit/util/TestComponentWithCustomControlWrapper.vue b/packages/vue-vanilla/tests/unit/util/TestComponentWithCustomControlWrapper.vue
new file mode 100644
index 000000000..cc1cf9f17
--- /dev/null
+++ b/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>
diff --git a/packages/vue-vanilla/tests/unit/util/util.ts b/packages/vue-vanilla/tests/unit/util/util.ts
index e1174bf8d..8d84f6b82 100644
--- a/packages/vue-vanilla/tests/unit/util/util.ts
+++ b/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 },
+  });
+};