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

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>

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>

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>

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>

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>

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)
 );

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)
 );

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';
 

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>

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>

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 },
 ];

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>