From 0677ac8b65c342f8e0877b24f7b8bd88add38731 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Thu, 15 Feb 2024 10:19:09 +0100
Subject: [PATCH] create useVanillaCell function and use it instead of
 useVanillaControl at Cells. adjusted DispatchCell props.

---
 .../vue-vanilla/src/cells/IntegerCell.vue     | 19 ++++++------
 packages/vue-vanilla/src/cells/NumberCell.vue | 19 ++++++------
 packages/vue-vanilla/src/cells/TextCell.vue   | 20 ++++++-------
 .../src/controls/InputControlRenderer.vue     |  8 ++---
 packages/vue-vanilla/src/util/composition.ts  | 29 +++++++++++++++++++
 5 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/packages/vue-vanilla/src/cells/IntegerCell.vue b/packages/vue-vanilla/src/cells/IntegerCell.vue
index 1c62ac9ca0..b2775e1211 100644
--- a/packages/vue-vanilla/src/cells/IntegerCell.vue
+++ b/packages/vue-vanilla/src/cells/IntegerCell.vue
@@ -1,11 +1,11 @@
 <template>
   <input
-    :id="control.id + '-input'"
+    :id="cell.id + '-input'"
     type="number"
     :step="1"
     :class="styles.control.input"
-    :value="control.data"
-    :disabled="!control.enabled"
+    :value="cell.data"
+    :disabled="!cell.enabled"
     :autofocus="appliedOptions.focus"
     :placeholder="appliedOptions.placeholder"
     @change="onChange"
@@ -16,20 +16,19 @@
 
 <script setup lang="ts">
 import {
-  ControlElement,
+  CellProps,
   isIntegerControl,
   type RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
-import { useVanillaControl } from '../util';
+import { useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
 
-const props = defineProps(rendererProps<ControlElement>());
-
-const input = useVanillaControl(useJsonFormsControl(props), (target) =>
+const props = defineProps<CellProps>();
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : parseInt(target.value, 10)
 );
-const { styles, control, appliedOptions, onChange, isFocused } = input;
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
 
 defineOptions({
   tester: rankWith(1, isIntegerControl) as RankedTester,
diff --git a/packages/vue-vanilla/src/cells/NumberCell.vue b/packages/vue-vanilla/src/cells/NumberCell.vue
index d7e891ae03..0f90a33304 100644
--- a/packages/vue-vanilla/src/cells/NumberCell.vue
+++ b/packages/vue-vanilla/src/cells/NumberCell.vue
@@ -1,11 +1,11 @@
 <template>
   <input
-    :id="control.id + '-input'"
+    :id="cell.id + '-input'"
     type="number"
     :step="step"
     :class="styles.control.input"
-    :value="control.data"
-    :disabled="!control.enabled"
+    :value="cell.data"
+    :disabled="!cell.enabled"
     :autofocus="appliedOptions.focus"
     :placeholder="appliedOptions.placeholder"
     @change="onChange"
@@ -16,21 +16,20 @@
 
 <script setup lang="ts">
 import {
-  ControlElement,
+  CellProps,
   isNumberControl,
   type RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
-import { useVanillaControl } from '../util';
+import { useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
 import { computed } from 'vue';
 
-const props = defineProps(rendererProps<ControlElement>());
-
-const input = useVanillaControl(useJsonFormsControl(props), (target) =>
+const props = defineProps<CellProps>();
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : Number(target.value)
 );
-const { styles, control, appliedOptions, onChange, isFocused } = input;
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
 
 const step = computed(() => {
   const options: any = appliedOptions;
diff --git a/packages/vue-vanilla/src/cells/TextCell.vue b/packages/vue-vanilla/src/cells/TextCell.vue
index c788f3da72..4cbc0428a2 100644
--- a/packages/vue-vanilla/src/cells/TextCell.vue
+++ b/packages/vue-vanilla/src/cells/TextCell.vue
@@ -1,9 +1,9 @@
 <template>
   <input
-    :id="control.id + '-input'"
+    :id="cell.id + '-input'"
     :class="styles.control.input"
-    :value="control.data"
-    :disabled="!control.enabled"
+    :value="cell.data"
+    :disabled="!cell.enabled"
     :autofocus="appliedOptions.focus"
     :placeholder="appliedOptions.placeholder"
     @change="onChange"
@@ -14,21 +14,21 @@
 
 <script setup lang="ts">
 import {
-  ControlElement,
+  CellProps,
   isStringControl,
   type RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
-import { useVanillaControl } from '../util';
+import { useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
 
-const props = defineProps(rendererProps<ControlElement>());
+const props = defineProps<CellProps>();
 
-const input = useVanillaControl(
-  useJsonFormsControl(props),
+const input = useVanillaCell(
+  useJsonFormsCell(props),
   (target) => target.value || undefined
 );
-const { styles, control, appliedOptions, onChange, isFocused } = input;
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
 
 defineOptions({
   tester: rankWith(1, isStringControl) as RankedTester,
diff --git a/packages/vue-vanilla/src/controls/InputControlRenderer.vue b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
index 91569af9bc..d9dd9d05ee 100644
--- a/packages/vue-vanilla/src/controls/InputControlRenderer.vue
+++ b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
@@ -6,11 +6,9 @@
     :applied-options="appliedOptions"
   >
     <DispatchCell
-      :id="control.id + '-input'"
-      :schema="schema"
-      :uischema="uischema"
-      :path="path"
-      :enabled="enabled"
+      v-bind="control"
+      :id="controlWrapper.id"
+      :handle-change="handleChange"
     />
   </control-wrapper>
 </template>
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 89bc88e6d4..aa820020bb 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -9,6 +9,35 @@ import {
   Resolve,
 } from '@jsonforms/core';
 
+/**
+ * Adds styles, isFocused, appliedOptions and onChange
+ */
+export const useVanillaCell = <I extends { cell: any; handleChange: any }>(
+  input: I,
+  adaptTarget: (target: any) => any = (v) => v.value
+) => {
+  const appliedOptions = computed(() =>
+    merge(
+      {},
+      cloneDeep(input.cell.value.config),
+      cloneDeep(input.cell.value.uischema.options)
+    )
+  );
+
+  const isFocused = ref(false);
+  const onChange = (event: Event) => {
+    input.handleChange(input.cell.value.path, adaptTarget(event.target));
+  };
+
+  return {
+    ...input,
+    styles: useStyles(input.cell.value.uischema),
+    isFocused,
+    appliedOptions,
+    onChange,
+  };
+};
+
 /**
  * Adds styles, isFocused, appliedOptions and onChange
  */