Skip to content

Commit 3c21c93

Browse files
davewwwwdavewwww
committed
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
1 parent f59d490 commit 3c21c93

24 files changed

+291
-702
lines changed

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<input
3+
:id="cell.id + '-input'"
4+
type="checkbox"
5+
:class="styles.control.input"
6+
:checked="!!cell.data"
7+
:disabled="!cell.enabled"
8+
:autofocus="appliedOptions.focus"
9+
:placeholder="appliedOptions.placeholder"
10+
@change="onChange"
11+
@focus="isFocused = true"
12+
@blur="isFocused = false"
13+
/>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import type { CellProps, RankedTester } from '@jsonforms/core';
18+
import { isBooleanControl, rankWith } from '@jsonforms/core';
19+
import { useJsonFormsCell } from '@jsonforms/vue';
20+
import { useVanillaCell } from '../util';
21+
22+
const props = defineProps<CellProps>();
23+
24+
const input = useVanillaCell(
25+
useJsonFormsCell(props),
26+
(target) => target.checked
27+
);
28+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
29+
30+
defineOptions({
31+
tester: rankWith(1, isBooleanControl) as RankedTester,
32+
});
33+
</script>

‎packages/vue-vanilla/src/cells/DateCell.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<input
3+
:id="cell.id + '-input'"
4+
type="date"
5+
:class="styles.control.input"
6+
:value="cell.data"
7+
:disabled="!cell.enabled"
8+
:autofocus="appliedOptions.focus"
9+
:placeholder="appliedOptions.placeholder"
10+
@change="onChange"
11+
@focus="isFocused = true"
12+
@blur="isFocused = false"
13+
/>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { useJsonFormsCell } from '@jsonforms/vue';
18+
import type { CellProps, RankedTester } from '@jsonforms/core';
19+
import { isDateControl, rankWith } from '@jsonforms/core';
20+
import { useVanillaCell } from '../util';
21+
22+
const props = defineProps<CellProps>();
23+
24+
const input = useVanillaCell(
25+
useJsonFormsCell(props),
26+
(target) => target.value || undefined
27+
);
28+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
29+
30+
defineOptions({
31+
tester: rankWith(2, isDateControl) as RankedTester,
32+
});
33+
</script>

‎packages/vue-vanilla/src/cells/DateTimeCell.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<input
3+
:id="cell.id + '-input'"
4+
v-model="dataTime"
5+
type="datetime-local"
6+
:class="styles.control.input"
7+
:disabled="!cell.enabled"
8+
:autofocus="appliedOptions.focus"
9+
:placeholder="appliedOptions.placeholder"
10+
@change="onChange"
11+
@focus="isFocused = true"
12+
@blur="isFocused = false"
13+
/>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { ref, watch } from 'vue';
18+
import { useJsonFormsCell } from '@jsonforms/vue';
19+
import type { CellProps, RankedTester } from '@jsonforms/core';
20+
import { isDateTimeControl, rankWith } from '@jsonforms/core';
21+
import { useVanillaCell } from '../util';
22+
23+
const props = defineProps<CellProps>();
24+
25+
const input = useVanillaCell(useJsonFormsCell(props), (target) =>
26+
'' !== target.value ? toISO(target.value) : undefined
27+
);
28+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
29+
30+
const fromISO = (str: string | undefined) => str?.slice(0, 16);
31+
const toISO = (str: string) => str + ':00.000Z';
32+
33+
const dataTime = ref();
34+
const setDateTime = (str: string | undefined) => {
35+
dataTime.value = fromISO(str);
36+
};
37+
38+
setDateTime(props.data.value);
39+
watch(() => props.data, setDateTime);
40+
41+
defineOptions({
42+
tester: rankWith(2, isDateTimeControl) as RankedTester,
43+
});
44+
</script>

‎packages/vue-vanilla/src/cells/EnumCell.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<select
3+
:id="cell.id + '-select'"
4+
:class="styles.control.select"
5+
:value="cell.data"
6+
:disabled="!cell.enabled"
7+
:autofocus="appliedOptions.focus"
8+
@change="onChange"
9+
@focus="isFocused = true"
10+
@blur="isFocused = false"
11+
>
12+
<option key="empty" value="" :class="styles.control.option" />
13+
<option
14+
v-for="optionElement in cell?.options"
15+
:key="optionElement.value"
16+
:value="optionElement.value"
17+
:label="optionElement.label"
18+
:class="styles.control.option"
19+
></option>
20+
</select>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { useJsonFormsEnumCell } from '@jsonforms/vue';
25+
import type { CellProps } from '@jsonforms/core';
26+
import { isEnumControl, rankWith } from '@jsonforms/core';
27+
import { useVanillaCell } from '../util';
28+
29+
const props = defineProps<CellProps>();
30+
31+
const input = useVanillaCell(useJsonFormsEnumCell(props), (target) =>
32+
target.selectedIndex === 0 ? undefined : target.value
33+
);
34+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
35+
36+
defineOptions({
37+
tester: rankWith(2, isEnumControl),
38+
});
39+
</script>

‎packages/vue-vanilla/src/cells/EnumOneOfCell.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<select
3+
:id="cell.id + '-input'"
4+
:class="styles.control.select"
5+
:value="cell.data"
6+
:disabled="!cell.enabled"
7+
:autofocus="appliedOptions.focus"
8+
@change="onChange"
9+
@focus="isFocused = true"
10+
@blur="isFocused = false"
11+
>
12+
<option key="empty" value="" :class="styles.control.option" />
13+
<option
14+
v-for="optionElement in cell.options"
15+
:key="optionElement.value"
16+
:value="optionElement.value"
17+
:label="optionElement.label"
18+
:class="styles.control.option"
19+
></option>
20+
</select>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { useJsonFormsOneOfEnumCell } from '@jsonforms/vue';
25+
import type { CellProps, RankedTester } from '@jsonforms/core';
26+
import { isOneOfEnumControl, rankWith } from '@jsonforms/core';
27+
import { useVanillaCell } from '../util';
28+
29+
const props = defineProps<CellProps>();
30+
31+
const input = useVanillaCell(useJsonFormsOneOfEnumCell(props), (target) =>
32+
target.selectedIndex === 0 ? undefined : target.value
33+
);
34+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
35+
36+
defineOptions({
37+
tester: rankWith(5, isOneOfEnumControl) as RankedTester,
38+
});
39+
</script>

‎packages/vue-vanilla/src/cells/IntegerCell.vue

+3-6
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,13 @@
1515
</template>
1616

1717
<script setup lang="ts">
18-
import {
19-
CellProps,
20-
isIntegerControl,
21-
type RankedTester,
22-
rankWith,
23-
} from '@jsonforms/core';
18+
import type { CellProps, RankedTester } from '@jsonforms/core';
19+
import { isIntegerControl, rankWith } from '@jsonforms/core';
2420
import { useJsonFormsCell } from '@jsonforms/vue';
2521
import { useVanillaCell } from '../util';
2622
2723
const props = defineProps<CellProps>();
24+
2825
const input = useVanillaCell(useJsonFormsCell(props), (target) =>
2926
target.value === '' ? undefined : parseInt(target.value, 10)
3027
);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,14 @@
1515
</template>
1616

1717
<script setup lang="ts">
18-
import {
19-
CellProps,
20-
isNumberControl,
21-
type RankedTester,
22-
rankWith,
23-
} from '@jsonforms/core';
18+
import { computed } from 'vue';
19+
import type { CellProps, RankedTester } from '@jsonforms/core';
20+
import { isNumberControl, rankWith } from '@jsonforms/core';
2421
import { useJsonFormsCell } from '@jsonforms/vue';
2522
import { useVanillaCell } from '../util';
26-
import { computed } from 'vue';
2723
2824
const props = defineProps<CellProps>();
25+
2926
const input = useVanillaCell(useJsonFormsCell(props), (target) =>
3027
target.value === '' ? undefined : Number(target.value)
3128
);

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

+2-6
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,8 @@
1313
</template>
1414

1515
<script setup lang="ts">
16-
import {
17-
CellProps,
18-
isStringControl,
19-
type RankedTester,
20-
rankWith,
21-
} from '@jsonforms/core';
16+
import type { CellProps, RankedTester } from '@jsonforms/core';
17+
import { isStringControl, rankWith } from '@jsonforms/core';
2218
import { useJsonFormsCell } from '@jsonforms/vue';
2319
import { useVanillaCell } from '../util';
2420

‎packages/vue-vanilla/src/cells/TextareaCell.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<textarea
3+
:id="cell.id + '-input'"
4+
:class="styles.control.textarea"
5+
:value="cell.data"
6+
:disabled="!cell.enabled"
7+
:autofocus="appliedOptions.focus"
8+
:placeholder="appliedOptions.placeholder"
9+
@change="onChange"
10+
@focus="isFocused = true"
11+
@blur="isFocused = false"
12+
/>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import { useJsonFormsCell } from '@jsonforms/vue';
17+
import type { CellProps, RankedTester } from '@jsonforms/core';
18+
import {
19+
and,
20+
isMultiLineControl,
21+
isStringControl,
22+
rankWith,
23+
} from '@jsonforms/core';
24+
import { useVanillaCell } from '../util';
25+
26+
const props = defineProps<CellProps>();
27+
28+
const input = useVanillaCell(
29+
useJsonFormsCell(props),
30+
(target) => target.value || undefined
31+
);
32+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
33+
34+
defineOptions({
35+
tester: rankWith(2, and(isStringControl, isMultiLineControl)) as RankedTester,
36+
});
37+
</script>

‎packages/vue-vanilla/src/cells/TimeCell.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<input
3+
:id="cell.id + '-input'"
4+
type="time"
5+
:class="styles.control.input"
6+
:value="cell.data"
7+
:disabled="!cell.enabled"
8+
:autofocus="appliedOptions.focus"
9+
:placeholder="appliedOptions.placeholder"
10+
@change="onChange"
11+
@focus="isFocused = true"
12+
@blur="isFocused = false"
13+
/>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { useJsonFormsCell } from '@jsonforms/vue';
18+
import type { CellProps, RankedTester } from '@jsonforms/core';
19+
import { isTimeControl, rankWith } from '@jsonforms/core';
20+
import { useVanillaCell } from '../util';
21+
22+
const props = defineProps<CellProps>();
23+
24+
const input = useVanillaCell(useJsonFormsCell(props), (target) =>
25+
appendSeconds(target.value || undefined)
26+
);
27+
const { styles, cell, appliedOptions, onChange, isFocused } = input;
28+
29+
const appendSeconds = (value: string | undefined) =>
30+
value?.split(':').length === 2 ? value + ':00' : value;
31+
32+
defineOptions({
33+
tester: rankWith(2, isTimeControl) as RankedTester,
34+
});
35+
</script>

‎packages/vue-vanilla/src/cells/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,23 @@ import { type JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
22
import TextCell from './TextCell.vue';
33
import NumberCell from './NumberCell.vue';
44
import IntegerCell from './IntegerCell.vue';
5+
import DateCell from './DateCell.vue';
6+
import TimeCell from './TimeCell.vue';
7+
import DateTimeCell from './DateTimeCell.vue';
8+
import TextareaCell from './TextareaCell.vue';
9+
import EnumCell from './EnumCell.vue';
10+
import EnumOneOfCell from './EnumOneOfCell.vue';
11+
import BooleanCell from './BooleanCell.vue';
512

613
export const vanillaCells: JsonFormsCellRendererRegistryEntry[] = [
714
{ cell: TextCell, tester: TextCell.tester },
815
{ cell: NumberCell, tester: NumberCell.tester },
916
{ cell: IntegerCell, tester: IntegerCell.tester },
17+
{ cell: DateCell, tester: DateCell.tester },
18+
{ cell: TimeCell, tester: TimeCell.tester },
19+
{ cell: DateTimeCell, tester: DateTimeCell.tester },
20+
{ cell: TextareaCell, tester: TextareaCell.tester },
21+
{ cell: EnumCell, tester: EnumCell.tester },
22+
{ cell: EnumOneOfCell, tester: EnumOneOfCell.tester },
23+
{ cell: BooleanCell, tester: BooleanCell.tester },
1024
];

‎packages/vue-vanilla/src/complex/OneOfRenderer.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,15 @@
7070

7171
<script lang="ts">
7272
import {
73+
and,
7374
CombinatorSubSchemaRenderInfo,
7475
ControlElement,
7576
createCombinatorRenderInfos,
7677
createDefaultValue,
7778
isOneOfControl,
79+
isOneOfEnumControl,
7880
JsonFormsRendererRegistryEntry,
81+
not,
7982
rankWith,
8083
} from '@jsonforms/core';
8184
import {
@@ -192,6 +195,6 @@ export default controlRenderer;
192195
193196
export const entry: JsonFormsRendererRegistryEntry = {
194197
renderer: controlRenderer,
195-
tester: rankWith(3, isOneOfControl),
198+
tester: rankWith(3, and(isOneOfControl, not(isOneOfEnumControl))),
196199
};
197200
</script>

0 commit comments

Comments
 (0)