From b4baa52f264a7986ecf39d981f1c22449d0ded40 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 12 Feb 2024 13:04:40 +0100
Subject: [PATCH 1/5] rebase onto master

---
 packages/vue-vanilla/dev/components/App.vue   |  9 ++-
 .../vue-vanilla/src/cells/IntegerCell.vue     | 37 ++++++++++
 packages/vue-vanilla/src/cells/NumberCell.vue | 43 ++++++++++++
 packages/vue-vanilla/src/cells/TextCell.vue   | 36 ++++++++++
 packages/vue-vanilla/src/cells/index.ts       | 10 +++
 .../src/controls/InputControlRenderer.vue     | 67 +++++++++++++++++++
 packages/vue-vanilla/src/controls/index.ts    | 21 +++---
 packages/vue-vanilla/src/index.ts             |  1 +
 .../tests/unit/util/TestComponent.vue         |  4 +-
 9 files changed, 217 insertions(+), 11 deletions(-)
 create mode 100644 packages/vue-vanilla/src/cells/IntegerCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/NumberCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/TextCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/index.ts
 create mode 100644 packages/vue-vanilla/src/controls/InputControlRenderer.vue

diff --git a/packages/vue-vanilla/dev/components/App.vue b/packages/vue-vanilla/dev/components/App.vue
index 59dc1afd0b..7ce2fc2b91 100644
--- a/packages/vue-vanilla/dev/components/App.vue
+++ b/packages/vue-vanilla/dev/components/App.vue
@@ -1,7 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { JsonForms, JsonFormsChangeEvent } from '../../config/jsonforms';
-import { vanillaRenderers, mergeStyles, defaultStyles } from '../../src';
+import {
+  vanillaRenderers,
+  vanillaCells,
+  mergeStyles,
+  defaultStyles,
+} from '../../src';
 import '../../vanilla.css';
 import { ErrorObject } from 'ajv';
 import { getExamples } from '../../../examples';
@@ -29,6 +34,7 @@ export default defineComponent({
     return {
       data: {},
       renderers: Object.freeze(vanillaRenderers),
+      cells: Object.freeze(vanillaCells),
       currentExampleName: examples[0].name,
       examples,
       i18n: examples[0].i18n,
@@ -137,6 +143,7 @@ export default defineComponent({
           :schema="example.schema"
           :uischema="example.uischema"
           :renderers="renderers"
+          :cells="cells"
           :i18n="example.i18n"
           :additional-errors="additionalErrors"
           @change="onChange"
diff --git a/packages/vue-vanilla/src/cells/IntegerCell.vue b/packages/vue-vanilla/src/cells/IntegerCell.vue
new file mode 100644
index 0000000000..1c62ac9ca0
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/IntegerCell.vue
@@ -0,0 +1,37 @@
+<template>
+  <input
+    :id="control.id + '-input'"
+    type="number"
+    :step="1"
+    :class="styles.control.input"
+    :value="control.data"
+    :disabled="!control.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  ControlElement,
+  isIntegerControl,
+  type RankedTester,
+  rankWith,
+} from '@jsonforms/core';
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import { useVanillaControl } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaControl(useJsonFormsControl(props), (target) =>
+  target.value === '' ? undefined : parseInt(target.value, 10)
+);
+const { styles, control, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isIntegerControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/NumberCell.vue b/packages/vue-vanilla/src/cells/NumberCell.vue
new file mode 100644
index 0000000000..d7e891ae03
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/NumberCell.vue
@@ -0,0 +1,43 @@
+<template>
+  <input
+    :id="control.id + '-input'"
+    type="number"
+    :step="step"
+    :class="styles.control.input"
+    :value="control.data"
+    :disabled="!control.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  ControlElement,
+  isNumberControl,
+  type RankedTester,
+  rankWith,
+} from '@jsonforms/core';
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import { useVanillaControl } from '../util';
+import { computed } from 'vue';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaControl(useJsonFormsControl(props), (target) =>
+  target.value === '' ? undefined : Number(target.value)
+);
+const { styles, control, appliedOptions, onChange, isFocused } = input;
+
+const step = computed(() => {
+  const options: any = appliedOptions;
+  return options.step ?? 0.1;
+});
+
+defineOptions({
+  tester: rankWith(1, isNumberControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/TextCell.vue b/packages/vue-vanilla/src/cells/TextCell.vue
new file mode 100644
index 0000000000..c788f3da72
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TextCell.vue
@@ -0,0 +1,36 @@
+<template>
+  <input
+    :id="control.id + '-input'"
+    :class="styles.control.input"
+    :value="control.data"
+    :disabled="!control.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  ControlElement,
+  isStringControl,
+  type RankedTester,
+  rankWith,
+} from '@jsonforms/core';
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import { useVanillaControl } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaControl(
+  useJsonFormsControl(props),
+  (target) => target.value || undefined
+);
+const { styles, control, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isStringControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/index.ts b/packages/vue-vanilla/src/cells/index.ts
new file mode 100644
index 0000000000..e76d865e00
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/index.ts
@@ -0,0 +1,10 @@
+import { type JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
+import TextCell from './TextCell.vue';
+import NumberCell from './NumberCell.vue';
+import IntegerCell from './IntegerCell.vue';
+
+export const vanillaCells: JsonFormsCellRendererRegistryEntry[] = [
+  { cell: TextCell, tester: TextCell.tester },
+  { cell: NumberCell, tester: NumberCell.tester },
+  { cell: IntegerCell, tester: IntegerCell.tester },
+];
diff --git a/packages/vue-vanilla/src/controls/InputControlRenderer.vue b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
new file mode 100644
index 0000000000..91569af9bc
--- /dev/null
+++ b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
@@ -0,0 +1,67 @@
+<template>
+  <control-wrapper
+    v-bind="controlWrapper"
+    :styles="styles"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
+  >
+    <DispatchCell
+      :id="control.id + '-input'"
+      :schema="schema"
+      :uischema="uischema"
+      :path="path"
+      :enabled="enabled"
+    />
+  </control-wrapper>
+</template>
+
+<script lang="ts">
+import {
+  and,
+  ControlElement,
+  isControl,
+  isIntegerControl,
+  isNumberControl,
+  isStringControl,
+  JsonFormsRendererRegistryEntry,
+  or,
+  rankWith,
+} from '@jsonforms/core';
+import { defineComponent } from 'vue';
+import {
+  DispatchCell,
+  rendererProps,
+  type RendererProps,
+  useJsonFormsControl,
+} from '../../config/jsonforms';
+import { default as ControlWrapper } from './ControlWrapper.vue';
+import { useVanillaControl } from '../util';
+
+const controlRenderer = defineComponent({
+  name: 'InputControlRenderer',
+  components: {
+    ControlWrapper,
+    DispatchCell,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.value || undefined
+    );
+  },
+});
+
+export default controlRenderer;
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  //tester: rankWith(1, isControl),
+  tester: rankWith(
+    2,
+    and(isControl, or(isStringControl, isIntegerControl, isNumberControl))
+  ),
+};
+</script>
diff --git a/packages/vue-vanilla/src/controls/index.ts b/packages/vue-vanilla/src/controls/index.ts
index 6bfaa073a6..ad9670b4c8 100644
--- a/packages/vue-vanilla/src/controls/index.ts
+++ b/packages/vue-vanilla/src/controls/index.ts
@@ -1,35 +1,38 @@
 export { default as ControlWrapper } from './ControlWrapper.vue';
-export { default as StringControlRenderer } from './StringControlRenderer.vue';
+//export { default as StringControlRenderer } from './StringControlRenderer.vue';
 export { default as MultiStringControlRenderer } from './MultiStringControlRenderer.vue';
-export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
-export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
+//export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
+//export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
 export { default as EnumControlRenderer } from './EnumControlRenderer.vue';
 export { default as oneOfEnumControlRenderer } from './EnumOneOfControlRenderer.vue';
 export { default as DateControlRenderer } from './DateControlRenderer.vue';
 export { default as DateTimeControlRenderer } from './DateTimeControlRenderer.vue';
 export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
 export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue';
+export { default as InputControlRenderer } from './InputControlRenderer.vue';
 
-import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
+//import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
 import { entry as multiStringControlRendererEntry } from './MultiStringControlRenderer.vue';
-import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
-import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
+//import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
+//import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
 import { entry as enumControlRendererEntry } from './EnumControlRenderer.vue';
 import { entry as oneOfEnumControlRendererEntry } from './EnumOneOfControlRenderer.vue';
 import { entry as dateControlRendererEntry } from './DateControlRenderer.vue';
 import { entry as dateTimeControlRendererEntry } from './DateTimeControlRenderer.vue';
 import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
 import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
+import { entry as InputControlRendererEntry } from './InputControlRenderer.vue';
 
 export const controlRenderers = [
-  stringControlRendererEntry,
+  //stringControlRendererEntry,
   multiStringControlRendererEntry,
-  numberControlRendererEntry,
-  integerControlRendererEntry,
+  //numberControlRendererEntry,
+  //integerControlRendererEntry,
   enumControlRendererEntry,
   oneOfEnumControlRendererEntry,
   dateControlRendererEntry,
   dateTimeControlRendererEntry,
   timeControlRendererEntry,
   booleanControlRendererEntry,
+  InputControlRendererEntry,
 ];
diff --git a/packages/vue-vanilla/src/index.ts b/packages/vue-vanilla/src/index.ts
index 90770dbcd4..cda18843cb 100644
--- a/packages/vue-vanilla/src/index.ts
+++ b/packages/vue-vanilla/src/index.ts
@@ -5,3 +5,4 @@ export * from './renderers';
 export * from './styles';
 export * from './util';
 export * from './label';
+export * from './cells';
diff --git a/packages/vue-vanilla/tests/unit/util/TestComponent.vue b/packages/vue-vanilla/tests/unit/util/TestComponent.vue
index 8e3f764a1e..26952ce534 100644
--- a/packages/vue-vanilla/tests/unit/util/TestComponent.vue
+++ b/packages/vue-vanilla/tests/unit/util/TestComponent.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { JsonForms } from '../../../config/jsonforms';
-import { vanillaRenderers } from '../../../src';
+import { vanillaRenderers, vanillaCells } from '../../../src';
 import { JsonFormsChangeEvent } from '@jsonforms/vue';
 
 export default defineComponent({
@@ -14,6 +14,7 @@ export default defineComponent({
   data() {
     return {
       renderers: Object.freeze(vanillaRenderers),
+      cells: Object.freeze(vanillaCells),
       data: this.initialData,
     };
   },
@@ -31,6 +32,7 @@ export default defineComponent({
     :schema="schema"
     :uischema="uischema"
     :renderers="renderers"
+    :cells="cells"
     :config="config"
     @change="onChange"
   />

From 6a52e77a7efbe0a2808d81afdd3904e60365366d Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Thu, 15 Feb 2024 10:19:09 +0100
Subject: [PATCH 2/5] 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
  */

From 8c097460c5188e90128f6d61757d9da0c4e43f63 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Thu, 15 Feb 2024 14:43:59 +0100
Subject: [PATCH 3/5] replace all control renderers with a cell equivalent.

also add a fix for #2156 at dateTimeCell: use v-model instead of value and add missing seconds at timeCell
---
 .../vue-vanilla/src/cells/BooleanCell.vue     | 33 +++++++++
 packages/vue-vanilla/src/cells/DateCell.vue   | 33 +++++++++
 .../vue-vanilla/src/cells/DateTimeCell.vue    | 44 ++++++++++++
 packages/vue-vanilla/src/cells/EnumCell.vue   | 39 +++++++++++
 .../vue-vanilla/src/cells/EnumOneOfCell.vue   | 39 +++++++++++
 .../vue-vanilla/src/cells/IntegerCell.vue     |  9 +--
 packages/vue-vanilla/src/cells/NumberCell.vue | 11 ++-
 packages/vue-vanilla/src/cells/TextCell.vue   |  8 +--
 .../vue-vanilla/src/cells/TextareaCell.vue    | 37 ++++++++++
 packages/vue-vanilla/src/cells/TimeCell.vue   | 35 ++++++++++
 packages/vue-vanilla/src/cells/index.ts       | 14 ++++
 .../vue-vanilla/src/complex/OneOfRenderer.vue |  5 +-
 .../src/controls/BooleanControlRenderer.vue   | 61 ----------------
 .../src/controls/DateControlRenderer.vue      | 61 ----------------
 .../src/controls/DateTimeControlRenderer.vue  | 69 -------------------
 .../src/controls/EnumControlRenderer.vue      | 67 ------------------
 .../src/controls/EnumOneOfControlRenderer.vue | 67 ------------------
 .../src/controls/InputControlRenderer.vue     | 16 +----
 .../src/controls/IntegerControlRenderer.vue   | 61 ----------------
 .../controls/MultiStringControlRenderer.vue   | 62 -----------------
 .../src/controls/NumberControlRenderer.vue    | 67 ------------------
 .../src/controls/StringControlRenderer.vue    | 60 ----------------
 .../src/controls/TimeControlRenderer.vue      | 61 ----------------
 packages/vue-vanilla/src/controls/index.ts    | 34 +--------
 24 files changed, 291 insertions(+), 702 deletions(-)
 create mode 100644 packages/vue-vanilla/src/cells/BooleanCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/DateCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/DateTimeCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/EnumCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/EnumOneOfCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/TextareaCell.vue
 create mode 100644 packages/vue-vanilla/src/cells/TimeCell.vue
 delete mode 100644 packages/vue-vanilla/src/controls/BooleanControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/DateControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/EnumControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/IntegerControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/NumberControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/StringControlRenderer.vue
 delete mode 100644 packages/vue-vanilla/src/controls/TimeControlRenderer.vue

diff --git a/packages/vue-vanilla/src/cells/BooleanCell.vue b/packages/vue-vanilla/src/cells/BooleanCell.vue
new file mode 100644
index 0000000000..db38534a4f
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/BooleanCell.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="checkbox"
+    :class="styles.control.input"
+    :checked="!!cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isBooleanControl, rankWith } from '@jsonforms/core';
+import { useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.checked
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isBooleanControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/DateCell.vue b/packages/vue-vanilla/src/cells/DateCell.vue
new file mode 100644
index 0000000000..fbde7cf854
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/DateCell.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="date"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useJsonFormsCell } from '@jsonforms/vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isDateControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, isDateControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/DateTimeCell.vue b/packages/vue-vanilla/src/cells/DateTimeCell.vue
new file mode 100644
index 0000000000..57c74fd567
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/DateTimeCell.vue
@@ -0,0 +1,44 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    v-model="dataTime"
+    type="datetime-local"
+    :class="styles.control.input"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useJsonFormsCell } from '@jsonforms/vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isDateTimeControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  '' !== target.value ? toISO(target.value) : undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const fromISO = (str: string | undefined) => str?.slice(0, 16);
+const toISO = (str: string) => str + ':00.000Z';
+
+const dataTime = ref();
+const setDateTime = (str: string | undefined) => {
+  dataTime.value = fromISO(str);
+};
+
+setDateTime(props.data.value);
+watch(() => props.data, setDateTime);
+
+defineOptions({
+  tester: rankWith(2, isDateTimeControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/EnumCell.vue b/packages/vue-vanilla/src/cells/EnumCell.vue
new file mode 100644
index 0000000000..e05c23ec97
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/EnumCell.vue
@@ -0,0 +1,39 @@
+<template>
+  <select
+    :id="cell.id + '-select'"
+    :class="styles.control.select"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  >
+    <option key="empty" value="" :class="styles.control.option" />
+    <option
+      v-for="optionElement in cell?.options"
+      :key="optionElement.value"
+      :value="optionElement.value"
+      :label="optionElement.label"
+      :class="styles.control.option"
+    ></option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { useJsonFormsEnumCell } from '@jsonforms/vue';
+import type { CellProps } from '@jsonforms/core';
+import { isEnumControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(useJsonFormsEnumCell(props), (target) =>
+  target.selectedIndex === 0 ? undefined : target.value
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, isEnumControl),
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/EnumOneOfCell.vue b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
new file mode 100644
index 0000000000..63b2bf7522
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
@@ -0,0 +1,39 @@
+<template>
+  <select
+    :id="cell.id + '-input'"
+    :class="styles.control.select"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  >
+    <option key="empty" value="" :class="styles.control.option" />
+    <option
+      v-for="optionElement in cell.options"
+      :key="optionElement.value"
+      :value="optionElement.value"
+      :label="optionElement.label"
+      :class="styles.control.option"
+    ></option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { useJsonFormsOneOfEnumCell } from '@jsonforms/vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isOneOfEnumControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(useJsonFormsOneOfEnumCell(props), (target) =>
+  target.selectedIndex === 0 ? undefined : target.value
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(5, isOneOfEnumControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/IntegerCell.vue b/packages/vue-vanilla/src/cells/IntegerCell.vue
index b2775e1211..2c34b603a3 100644
--- a/packages/vue-vanilla/src/cells/IntegerCell.vue
+++ b/packages/vue-vanilla/src/cells/IntegerCell.vue
@@ -15,16 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CellProps,
-  isIntegerControl,
-  type RankedTester,
-  rankWith,
-} from '@jsonforms/core';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isIntegerControl, rankWith } from '@jsonforms/core';
 import { useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
 const props = defineProps<CellProps>();
+
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : parseInt(target.value, 10)
 );
diff --git a/packages/vue-vanilla/src/cells/NumberCell.vue b/packages/vue-vanilla/src/cells/NumberCell.vue
index 0f90a33304..dd25f410b8 100644
--- a/packages/vue-vanilla/src/cells/NumberCell.vue
+++ b/packages/vue-vanilla/src/cells/NumberCell.vue
@@ -15,17 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CellProps,
-  isNumberControl,
-  type RankedTester,
-  rankWith,
-} from '@jsonforms/core';
+import { computed } from 'vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isNumberControl, rankWith } from '@jsonforms/core';
 import { useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
-import { computed } from 'vue';
 
 const props = defineProps<CellProps>();
+
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : Number(target.value)
 );
diff --git a/packages/vue-vanilla/src/cells/TextCell.vue b/packages/vue-vanilla/src/cells/TextCell.vue
index 4cbc0428a2..9b067a808b 100644
--- a/packages/vue-vanilla/src/cells/TextCell.vue
+++ b/packages/vue-vanilla/src/cells/TextCell.vue
@@ -13,12 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CellProps,
-  isStringControl,
-  type RankedTester,
-  rankWith,
-} from '@jsonforms/core';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isStringControl, rankWith } from '@jsonforms/core';
 import { useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
diff --git a/packages/vue-vanilla/src/cells/TextareaCell.vue b/packages/vue-vanilla/src/cells/TextareaCell.vue
new file mode 100644
index 0000000000..6772f16b12
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TextareaCell.vue
@@ -0,0 +1,37 @@
+<template>
+  <textarea
+    :id="cell.id + '-input'"
+    :class="styles.control.textarea"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useJsonFormsCell } from '@jsonforms/vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import {
+  and,
+  isMultiLineControl,
+  isStringControl,
+  rankWith,
+} from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, and(isStringControl, isMultiLineControl)) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/TimeCell.vue b/packages/vue-vanilla/src/cells/TimeCell.vue
new file mode 100644
index 0000000000..e14795d4c7
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TimeCell.vue
@@ -0,0 +1,35 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="time"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useJsonFormsCell } from '@jsonforms/vue';
+import type { CellProps, RankedTester } from '@jsonforms/core';
+import { isTimeControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps<CellProps>();
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  appendSeconds(target.value || undefined)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const appendSeconds = (value: string | undefined) =>
+  value?.split(':').length === 2 ? value + ':00' : value;
+
+defineOptions({
+  tester: rankWith(2, isTimeControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/index.ts b/packages/vue-vanilla/src/cells/index.ts
index e76d865e00..5285aacda3 100644
--- a/packages/vue-vanilla/src/cells/index.ts
+++ b/packages/vue-vanilla/src/cells/index.ts
@@ -2,9 +2,23 @@ import { type JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
 import TextCell from './TextCell.vue';
 import NumberCell from './NumberCell.vue';
 import IntegerCell from './IntegerCell.vue';
+import DateCell from './DateCell.vue';
+import TimeCell from './TimeCell.vue';
+import DateTimeCell from './DateTimeCell.vue';
+import TextareaCell from './TextareaCell.vue';
+import EnumCell from './EnumCell.vue';
+import EnumOneOfCell from './EnumOneOfCell.vue';
+import BooleanCell from './BooleanCell.vue';
 
 export const vanillaCells: JsonFormsCellRendererRegistryEntry[] = [
   { cell: TextCell, tester: TextCell.tester },
   { cell: NumberCell, tester: NumberCell.tester },
   { cell: IntegerCell, tester: IntegerCell.tester },
+  { cell: DateCell, tester: DateCell.tester },
+  { cell: TimeCell, tester: TimeCell.tester },
+  { cell: DateTimeCell, tester: DateTimeCell.tester },
+  { cell: TextareaCell, tester: TextareaCell.tester },
+  { cell: EnumCell, tester: EnumCell.tester },
+  { cell: EnumOneOfCell, tester: EnumOneOfCell.tester },
+  { cell: BooleanCell, tester: BooleanCell.tester },
 ];
diff --git a/packages/vue-vanilla/src/complex/OneOfRenderer.vue b/packages/vue-vanilla/src/complex/OneOfRenderer.vue
index 471d89dd7d..7a4e7198d6 100644
--- a/packages/vue-vanilla/src/complex/OneOfRenderer.vue
+++ b/packages/vue-vanilla/src/complex/OneOfRenderer.vue
@@ -70,12 +70,15 @@
 
 <script lang="ts">
 import {
+  and,
   CombinatorSubSchemaRenderInfo,
   ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
+  isOneOfEnumControl,
   JsonFormsRendererRegistryEntry,
+  not,
   rankWith,
 } from '@jsonforms/core';
 import {
@@ -192,6 +195,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(3, isOneOfControl),
+  tester: rankWith(3, and(isOneOfControl, not(isOneOfEnumControl))),
 };
 </script>
diff --git a/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue b/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue
deleted file mode 100644
index d8332eb821..0000000000
--- a/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="checkbox"
-      :class="styles.control.input"
-      :checked="!!control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isBooleanControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'BooleanControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.checked
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isBooleanControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/DateControlRenderer.vue b/packages/vue-vanilla/src/controls/DateControlRenderer.vue
deleted file mode 100644
index 14ef0e8fff..0000000000
--- a/packages/vue-vanilla/src/controls/DateControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="date"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isDateControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'DateControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isDateControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue b/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue
deleted file mode 100644
index 39b0400b04..0000000000
--- a/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="datetime-local"
-      :class="styles.control.input"
-      :value="dataTime"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isDateTimeControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const toISOString = (inputDateTime: string) => {
-  return inputDateTime === '' ? undefined : inputDateTime + ':00.000Z';
-};
-
-const controlRenderer = defineComponent({
-  name: 'DatetimeControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      toISOString(target.value)
-    );
-  },
-  computed: {
-    dataTime(): string {
-      return (this.control.data ?? '').substr(0, 16);
-    },
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isDateTimeControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumControlRenderer.vue
deleted file mode 100644
index d713e584fd..0000000000
--- a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <select
-      :id="control.id + '-select'"
-      :class="styles.control.select"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
-      <option key="empty" value="" :class="styles.control.option" />
-      <option
-        v-for="optionElement in control.options"
-        :key="optionElement.value"
-        :value="optionElement.value"
-        :label="optionElement.label"
-        :class="styles.control.option"
-      ></option>
-    </select>
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isEnumControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsEnumControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'EnumControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isEnumControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
deleted file mode 100644
index 0b520279d9..0000000000
--- a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <select
-      :id="control.id + '-input'"
-      :class="styles.control.select"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
-      <option key="empty" value="" :class="styles.control.option" />
-      <option
-        v-for="optionElement in control.options"
-        :key="optionElement.value"
-        :value="optionElement.value"
-        :label="optionElement.label"
-        :class="styles.control.option"
-      ></option>
-    </select>
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isOneOfEnumControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsOneOfEnumControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'EnumOneofControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsOneOfEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(5, isOneOfEnumControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/InputControlRenderer.vue b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
index d9dd9d05ee..f047a7e1c0 100644
--- a/packages/vue-vanilla/src/controls/InputControlRenderer.vue
+++ b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
@@ -14,17 +14,11 @@
 </template>
 
 <script lang="ts">
-import {
-  and,
+import type {
   ControlElement,
-  isControl,
-  isIntegerControl,
-  isNumberControl,
-  isStringControl,
   JsonFormsRendererRegistryEntry,
-  or,
-  rankWith,
 } from '@jsonforms/core';
+import { isControl, rankWith } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchCell,
@@ -56,10 +50,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  //tester: rankWith(1, isControl),
-  tester: rankWith(
-    2,
-    and(isControl, or(isStringControl, isIntegerControl, isNumberControl))
-  ),
+  tester: rankWith(1, isControl),
 };
 </script>
diff --git a/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue b/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue
deleted file mode 100644
index 0e0654c5d5..0000000000
--- a/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="number"
-      :step="1"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isIntegerControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'IntegerControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      target.value === '' ? undefined : parseInt(target.value, 10)
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isIntegerControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue b/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue
deleted file mode 100644
index 0d1b80e367..0000000000
--- a/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <textarea
-      :id="control.id + '-input'"
-      :class="styles.control.textarea"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  isMultiLineControl,
-  and,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'MultiStringControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, and(isStringControl, isMultiLineControl)),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/NumberControlRenderer.vue b/packages/vue-vanilla/src/controls/NumberControlRenderer.vue
deleted file mode 100644
index 418dca9832..0000000000
--- a/packages/vue-vanilla/src/controls/NumberControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="number"
-      :step="step"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isNumberControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'NumberControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      target.value === '' ? undefined : Number(target.value)
-    );
-  },
-  computed: {
-    step(): number {
-      const options: any = this.appliedOptions;
-      return options.step ?? 0.1;
-    },
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isNumberControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/StringControlRenderer.vue b/packages/vue-vanilla/src/controls/StringControlRenderer.vue
deleted file mode 100644
index 958126a333..0000000000
--- a/packages/vue-vanilla/src/controls/StringControlRenderer.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'StringControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isStringControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/TimeControlRenderer.vue b/packages/vue-vanilla/src/controls/TimeControlRenderer.vue
deleted file mode 100644
index edae10174a..0000000000
--- a/packages/vue-vanilla/src/controls/TimeControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="time"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isTimeControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'TimeControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isTimeControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/index.ts b/packages/vue-vanilla/src/controls/index.ts
index ad9670b4c8..18f0aba934 100644
--- a/packages/vue-vanilla/src/controls/index.ts
+++ b/packages/vue-vanilla/src/controls/index.ts
@@ -1,38 +1,6 @@
 export { default as ControlWrapper } from './ControlWrapper.vue';
-//export { default as StringControlRenderer } from './StringControlRenderer.vue';
-export { default as MultiStringControlRenderer } from './MultiStringControlRenderer.vue';
-//export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
-//export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
-export { default as EnumControlRenderer } from './EnumControlRenderer.vue';
-export { default as oneOfEnumControlRenderer } from './EnumOneOfControlRenderer.vue';
-export { default as DateControlRenderer } from './DateControlRenderer.vue';
-export { default as DateTimeControlRenderer } from './DateTimeControlRenderer.vue';
-export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
-export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue';
 export { default as InputControlRenderer } from './InputControlRenderer.vue';
 
-//import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
-import { entry as multiStringControlRendererEntry } from './MultiStringControlRenderer.vue';
-//import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
-//import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
-import { entry as enumControlRendererEntry } from './EnumControlRenderer.vue';
-import { entry as oneOfEnumControlRendererEntry } from './EnumOneOfControlRenderer.vue';
-import { entry as dateControlRendererEntry } from './DateControlRenderer.vue';
-import { entry as dateTimeControlRendererEntry } from './DateTimeControlRenderer.vue';
-import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
-import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
 import { entry as InputControlRendererEntry } from './InputControlRenderer.vue';
 
-export const controlRenderers = [
-  //stringControlRendererEntry,
-  multiStringControlRendererEntry,
-  //numberControlRendererEntry,
-  //integerControlRendererEntry,
-  enumControlRendererEntry,
-  oneOfEnumControlRendererEntry,
-  dateControlRendererEntry,
-  dateTimeControlRendererEntry,
-  timeControlRendererEntry,
-  booleanControlRendererEntry,
-  InputControlRendererEntry,
-];
+export const controlRenderers = [InputControlRendererEntry];

From 029308eea866da952f1d7e0b475d59151a8d3e25 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 18 Mar 2024 10:19:21 +0100
Subject: [PATCH 4/5] use rendererProps() for defineProps(), use
 input.cell.value.data instead of props.data

---
 .../vue-vanilla/src/cells/BooleanCell.vue     | 19 +++++++++++++------
 packages/vue-vanilla/src/cells/DateCell.vue   |  6 +++---
 .../vue-vanilla/src/cells/DateTimeCell.vue    | 10 +++++-----
 packages/vue-vanilla/src/cells/EnumCell.vue   |  6 +++---
 .../vue-vanilla/src/cells/EnumOneOfCell.vue   |  6 +++---
 .../vue-vanilla/src/cells/IntegerCell.vue     |  6 +++---
 packages/vue-vanilla/src/cells/NumberCell.vue |  6 +++---
 packages/vue-vanilla/src/cells/TextCell.vue   |  6 +++---
 .../vue-vanilla/src/cells/TextareaCell.vue    |  6 +++---
 packages/vue-vanilla/src/cells/TimeCell.vue   |  6 +++---
 10 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/packages/vue-vanilla/src/cells/BooleanCell.vue b/packages/vue-vanilla/src/cells/BooleanCell.vue
index db38534a4f..b37ae4a359 100644
--- a/packages/vue-vanilla/src/cells/BooleanCell.vue
+++ b/packages/vue-vanilla/src/cells/BooleanCell.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import { isBooleanControl, rankWith } from '@jsonforms/core';
-import { useJsonFormsCell } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(
   useJsonFormsCell(props),
@@ -27,7 +27,14 @@ const input = useVanillaCell(
 );
 const { styles, cell, appliedOptions, onChange, isFocused } = input;
 
-defineOptions({
-  tester: rankWith(1, isBooleanControl) as RankedTester,
-});
+/**
+ * JUST AN PROPOSAL!!!
+ * @see https://github.com/eclipsesource/jsonforms/pull/2279#discussion_r1528101480
+ */
+defineOptions(
+  ((): { tester: RankedTester } => {
+    const tester: RankedTester = rankWith(1, isBooleanControl);
+    return { tester };
+  })()
+);
 </script>
diff --git a/packages/vue-vanilla/src/cells/DateCell.vue b/packages/vue-vanilla/src/cells/DateCell.vue
index fbde7cf854..aa5df7f09e 100644
--- a/packages/vue-vanilla/src/cells/DateCell.vue
+++ b/packages/vue-vanilla/src/cells/DateCell.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonFormsCell } from '@jsonforms/vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import { isDateControl, rankWith } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(
   useJsonFormsCell(props),
diff --git a/packages/vue-vanilla/src/cells/DateTimeCell.vue b/packages/vue-vanilla/src/cells/DateTimeCell.vue
index 57c74fd567..8a52acb4d0 100644
--- a/packages/vue-vanilla/src/cells/DateTimeCell.vue
+++ b/packages/vue-vanilla/src/cells/DateTimeCell.vue
@@ -15,12 +15,12 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { useJsonFormsCell } from '@jsonforms/vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { RankedTester, ControlElement } from '@jsonforms/core';
 import { isDateTimeControl, rankWith } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   '' !== target.value ? toISO(target.value) : undefined
@@ -35,8 +35,8 @@ const setDateTime = (str: string | undefined) => {
   dataTime.value = fromISO(str);
 };
 
-setDateTime(props.data.value);
-watch(() => props.data, setDateTime);
+setDateTime(input.cell.value.data);
+watch(() => input.cell.value.data, setDateTime);
 
 defineOptions({
   tester: rankWith(2, isDateTimeControl) as RankedTester,
diff --git a/packages/vue-vanilla/src/cells/EnumCell.vue b/packages/vue-vanilla/src/cells/EnumCell.vue
index e05c23ec97..6ecd7c4b8f 100644
--- a/packages/vue-vanilla/src/cells/EnumCell.vue
+++ b/packages/vue-vanilla/src/cells/EnumCell.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonFormsEnumCell } from '@jsonforms/vue';
-import type { CellProps } from '@jsonforms/core';
+import { rendererProps, useJsonFormsEnumCell } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
 import { isEnumControl, rankWith } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsEnumCell(props), (target) =>
   target.selectedIndex === 0 ? undefined : target.value
diff --git a/packages/vue-vanilla/src/cells/EnumOneOfCell.vue b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
index 63b2bf7522..aeade4c756 100644
--- a/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
+++ b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonFormsOneOfEnumCell } from '@jsonforms/vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import { rendererProps, useJsonFormsOneOfEnumCell } from '@jsonforms/vue';
+import type { RankedTester, ControlElement } from '@jsonforms/core';
 import { isOneOfEnumControl, rankWith } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsOneOfEnumCell(props), (target) =>
   target.selectedIndex === 0 ? undefined : target.value
diff --git a/packages/vue-vanilla/src/cells/IntegerCell.vue b/packages/vue-vanilla/src/cells/IntegerCell.vue
index 2c34b603a3..7966a2fd48 100644
--- a/packages/vue-vanilla/src/cells/IntegerCell.vue
+++ b/packages/vue-vanilla/src/cells/IntegerCell.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import type { RankedTester, ControlElement } from '@jsonforms/core';
 import { isIntegerControl, rankWith } from '@jsonforms/core';
-import { useJsonFormsCell } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : parseInt(target.value, 10)
diff --git a/packages/vue-vanilla/src/cells/NumberCell.vue b/packages/vue-vanilla/src/cells/NumberCell.vue
index dd25f410b8..fe9fb4d29b 100644
--- a/packages/vue-vanilla/src/cells/NumberCell.vue
+++ b/packages/vue-vanilla/src/cells/NumberCell.vue
@@ -16,12 +16,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import { isNumberControl, rankWith } from '@jsonforms/core';
-import { useJsonFormsCell } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   target.value === '' ? undefined : Number(target.value)
diff --git a/packages/vue-vanilla/src/cells/TextCell.vue b/packages/vue-vanilla/src/cells/TextCell.vue
index 9b067a808b..4210e8ae5d 100644
--- a/packages/vue-vanilla/src/cells/TextCell.vue
+++ b/packages/vue-vanilla/src/cells/TextCell.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script setup lang="ts">
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import { isStringControl, rankWith } from '@jsonforms/core';
-import { useJsonFormsCell } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(
   useJsonFormsCell(props),
diff --git a/packages/vue-vanilla/src/cells/TextareaCell.vue b/packages/vue-vanilla/src/cells/TextareaCell.vue
index 6772f16b12..ef5a95db9e 100644
--- a/packages/vue-vanilla/src/cells/TextareaCell.vue
+++ b/packages/vue-vanilla/src/cells/TextareaCell.vue
@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonFormsCell } from '@jsonforms/vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import {
   and,
   isMultiLineControl,
@@ -23,7 +23,7 @@ import {
 } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(
   useJsonFormsCell(props),
diff --git a/packages/vue-vanilla/src/cells/TimeCell.vue b/packages/vue-vanilla/src/cells/TimeCell.vue
index e14795d4c7..d27c4d2dd8 100644
--- a/packages/vue-vanilla/src/cells/TimeCell.vue
+++ b/packages/vue-vanilla/src/cells/TimeCell.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonFormsCell } from '@jsonforms/vue';
-import type { CellProps, RankedTester } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
 import { isTimeControl, rankWith } from '@jsonforms/core';
 import { useVanillaCell } from '../util';
 
-const props = defineProps<CellProps>();
+const props = defineProps(rendererProps<ControlElement>());
 
 const input = useVanillaCell(useJsonFormsCell(props), (target) =>
   appendSeconds(target.value || undefined)

From 893774b625d60d3411ff8841a0e5cf5553d4e47e Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 18 Mar 2024 10:21:20 +0100
Subject: [PATCH 5/5] hand over only some keys instead of binding control

---
 .../vue-vanilla/src/controls/InputControlRenderer.vue     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vanilla/src/controls/InputControlRenderer.vue b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
index f047a7e1c0..ccb5af1eae 100644
--- a/packages/vue-vanilla/src/controls/InputControlRenderer.vue
+++ b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
@@ -6,9 +6,11 @@
     :applied-options="appliedOptions"
   >
     <DispatchCell
-      v-bind="control"
-      :id="controlWrapper.id"
-      :handle-change="handleChange"
+      :id="control.id + '-input'"
+      :schema="control.schema"
+      :uischema="control.uischema"
+      :enabled="control.enabled"
+      :path="control.path"
     />
   </control-wrapper>
 </template>