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

Lines changed: 33 additions & 0 deletions
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

Lines changed: 33 additions & 0 deletions
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

Lines changed: 44 additions & 0 deletions
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

Lines changed: 39 additions & 0 deletions
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

Lines changed: 39 additions & 0 deletions
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

Lines changed: 3 additions & 6 deletions
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

Lines changed: 4 additions & 7 deletions
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

Lines changed: 2 additions & 6 deletions
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

Lines changed: 37 additions & 0 deletions
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

Lines changed: 35 additions & 0 deletions
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>

0 commit comments

Comments
 (0)