use rendererProps() for defineProps(), use input.cell.value.data instead of props.data

Author: davewwww

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

@@ -14,20 +14,27 @@
 </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),
   (target) => target.checked
 );
 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>

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

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,

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

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

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)

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)

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

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

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)