feat: cell renderer set for vue vanilla (work in progress)

Author: davewwww

Diff for: 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 { JsonFormsI18nState } from '@jsonforms/core';
 import { ErrorObject } from 'ajv';
@@ -32,6 +37,7 @@ export default defineComponent({
     return {
       data: {},
       renderers: Object.freeze(vanillaRenderers),
+      cells: Object.freeze(vanillaCells),
       currentExampleName: examples[0].name,
       examples,
       config: {
@@ -105,6 +111,7 @@ export default defineComponent({
         :schema="example.schema"
         :uischema="example.uischema"
         :renderers="renderers"
+        :cells="cells"
         :config="config"
         :i18n="i18n"
         :additional-errors="additionalErrors"

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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"
   />