create useVanillaCell function and use it instead of useVanillaControl at Cells. adjusted DispatchCell props.

Author: davewwww

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,

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;

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,

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>

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
  */