Cell renderer set for vue vanilla (work in progress)

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"

packages/vue-vanilla/src/cells/BooleanCell.vue

@@ -0,0 +1,40 @@
+<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 { ControlElement, RankedTester } from '@jsonforms/core';
+import { isBooleanControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.checked
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+/**
+ * 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>

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 { 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(rendererProps<ControlElement>());
+
+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 { 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(rendererProps<ControlElement>());
+
+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(input.cell.value.data);
+watch(() => input.cell.value.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 { rendererProps, useJsonFormsEnumCell } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import { isEnumControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+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 { 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(rendererProps<ControlElement>());
+
+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

@@ -0,0 +1,33 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="number"
+    :step="1"
+    :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 type { RankedTester, ControlElement } from '@jsonforms/core';
+import { isIntegerControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  target.value === '' ? undefined : parseInt(target.value, 10)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isIntegerControl) as RankedTester,
+});
+</script>

packages/vue-vanilla/src/cells/NumberCell.vue

@@ -0,0 +1,39 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="number"
+    :step="step"
+    :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 { computed } from 'vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isNumberControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  target.value === '' ? undefined : Number(target.value)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const step = computed(() => {
+  const options: any = appliedOptions;
+  return options.step ?? 0.1;
+});
+
+defineOptions({
+  tester: rankWith(1, isNumberControl) as RankedTester,
+});
+</script>

packages/vue-vanilla/src/cells/TextCell.vue

@@ -0,0 +1,32 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    :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 type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isStringControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isStringControl) as RankedTester,
+});
+</script>

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 { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import {
+  and,
+  isMultiLineControl,
+  isStringControl,
+  rankWith,
+} from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+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>