Skip to content

Commit 689b8c2

Browse files
davewwwwdavewwww
committed
feat: cell renderer set for vue vanilla (work in progress)
1 parent 0cec549 commit 689b8c2

File tree

9 files changed

+218
-12
lines changed

9 files changed

+218
-12
lines changed

‎packages/vue-vanilla/dev/components/App.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<script lang="ts">
22
import { defineComponent } from 'vue';
33
import { JsonForms, JsonFormsChangeEvent } from '../../config/jsonforms';
4-
import { vanillaRenderers, mergeStyles, defaultStyles } from '../../src';
4+
import {
5+
vanillaRenderers,
6+
vanillaCells,
7+
mergeStyles,
8+
defaultStyles,
9+
} from '../../src';
510
import '../../vanilla.css';
611
import { JsonFormsI18nState } from '@jsonforms/core';
712
import { ErrorObject } from 'ajv';
@@ -32,6 +37,7 @@ export default defineComponent({
3237
return {
3338
data: {},
3439
renderers: Object.freeze(vanillaRenderers),
40+
cells: Object.freeze(vanillaCells),
3541
currentExampleName: examples[0].name,
3642
examples,
3743
i18n,
@@ -140,7 +146,8 @@ export default defineComponent({
140146
:schema="example.schema"
141147
:uischema="example.uischema"
142148
:renderers="renderers"
143-
:config="config"
149+
:cells="cells"
150+
:config="config"
144151
:i18n="i18n"
145152
:additional-errors="additionalErrors"
146153
@change="onChange"

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

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

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<input
3+
:id="control.id + '-input'"
4+
type="number"
5+
:step="step"
6+
:class="styles.control.input"
7+
:value="control.data"
8+
:disabled="!control.enabled"
9+
:autofocus="appliedOptions.focus"
10+
:placeholder="appliedOptions.placeholder"
11+
@change="onChange"
12+
@focus="isFocused = true"
13+
@blur="isFocused = false"
14+
/>
15+
</template>
16+
17+
<script setup lang="ts">
18+
import {
19+
ControlElement,
20+
isNumberControl,
21+
type RankedTester,
22+
rankWith,
23+
} from '@jsonforms/core';
24+
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
25+
import { useVanillaControl } from '../util';
26+
import { computed } from 'vue';
27+
28+
const props = defineProps(rendererProps<ControlElement>());
29+
30+
const input = useVanillaControl(useJsonFormsControl(props), (target) =>
31+
target.value === '' ? undefined : Number(target.value)
32+
);
33+
const { styles, control, appliedOptions, onChange, isFocused } = input;
34+
35+
const step = computed(() => {
36+
const options: any = appliedOptions;
37+
return options.step ?? 0.1;
38+
});
39+
40+
defineOptions({
41+
tester: rankWith(1, isNumberControl) as RankedTester,
42+
});
43+
</script>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<input
3+
:id="control.id + '-input'"
4+
:class="styles.control.input"
5+
:value="control.data"
6+
:disabled="!control.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 {
17+
ControlElement,
18+
isStringControl,
19+
type RankedTester,
20+
rankWith,
21+
} from '@jsonforms/core';
22+
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
23+
import { useVanillaControl } from '../util';
24+
25+
const props = defineProps(rendererProps<ControlElement>());
26+
27+
const input = useVanillaControl(
28+
useJsonFormsControl(props),
29+
(target) => target.value || undefined
30+
);
31+
const { styles, control, appliedOptions, onChange, isFocused } = input;
32+
33+
defineOptions({
34+
tester: rankWith(1, isStringControl) as RankedTester,
35+
});
36+
</script>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
2+
import TextCell from './TextCell.vue';
3+
import NumberCell from './NumberCell.vue';
4+
import IntegerCell from './IntegerCell.vue';
5+
6+
export const vanillaCells: JsonFormsCellRendererRegistryEntry[] = [
7+
{ cell: TextCell, tester: TextCell.tester },
8+
{ cell: NumberCell, tester: NumberCell.tester },
9+
{ cell: IntegerCell, tester: IntegerCell.tester },
10+
];

‎packages/vue-vanilla/src/controls/InputControlRenderer.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<control-wrapper
3+
v-bind="controlWrapper"
4+
:styles="styles"
5+
:is-focused="isFocused"
6+
:applied-options="appliedOptions"
7+
>
8+
<DispatchCell
9+
:id="control.id + '-input'"
10+
:schema="schema"
11+
:uischema="uischema"
12+
:path="path"
13+
:enabled="enabled"
14+
/>
15+
</control-wrapper>
16+
</template>
17+
18+
<script lang="ts">
19+
import {
20+
and,
21+
ControlElement,
22+
isControl,
23+
isIntegerControl,
24+
isNumberControl,
25+
isStringControl,
26+
JsonFormsRendererRegistryEntry,
27+
or,
28+
rankWith,
29+
} from '@jsonforms/core';
30+
import { defineComponent } from 'vue';
31+
import {
32+
DispatchCell,
33+
rendererProps,
34+
type RendererProps,
35+
useJsonFormsControl,
36+
} from '../../config/jsonforms';
37+
import { default as ControlWrapper } from './ControlWrapper.vue';
38+
import { useVanillaControl } from '../util';
39+
40+
const controlRenderer = defineComponent({
41+
name: 'InputControlRenderer',
42+
components: {
43+
ControlWrapper,
44+
DispatchCell,
45+
},
46+
props: {
47+
...rendererProps<ControlElement>(),
48+
},
49+
setup(props: RendererProps<ControlElement>) {
50+
return useVanillaControl(
51+
useJsonFormsControl(props),
52+
(target) => target.value || undefined
53+
);
54+
},
55+
});
56+
57+
export default controlRenderer;
58+
59+
export const entry: JsonFormsRendererRegistryEntry = {
60+
renderer: controlRenderer,
61+
//tester: rankWith(1, isControl),
62+
tester: rankWith(
63+
2,
64+
and(isControl, or(isStringControl, isIntegerControl, isNumberControl))
65+
),
66+
};
67+
</script>

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
11
export { default as ControlWrapper } from './ControlWrapper.vue';
2-
export { default as StringControlRenderer } from './StringControlRenderer.vue';
2+
//export { default as StringControlRenderer } from './StringControlRenderer.vue';
33
export { default as MultiStringControlRenderer } from './MultiStringControlRenderer.vue';
4-
export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
5-
export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
4+
//export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
5+
//export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
66
export { default as EnumControlRenderer } from './EnumControlRenderer.vue';
77
export { default as oneOfEnumControlRenderer } from './EnumOneOfControlRenderer.vue';
88
export { default as DateControlRenderer } from './DateControlRenderer.vue';
99
export { default as DateTimeControlRenderer } from './DateTimeControlRenderer.vue';
1010
export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
1111
export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue';
12+
export { default as InputControlRenderer } from './InputControlRenderer.vue';
1213

13-
import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
14+
//import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
1415
import { entry as multiStringControlRendererEntry } from './MultiStringControlRenderer.vue';
15-
import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
16-
import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
16+
//import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
17+
//import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
1718
import { entry as enumControlRendererEntry } from './EnumControlRenderer.vue';
1819
import { entry as oneOfEnumControlRendererEntry } from './EnumOneOfControlRenderer.vue';
1920
import { entry as dateControlRendererEntry } from './DateControlRenderer.vue';
2021
import { entry as dateTimeControlRendererEntry } from './DateTimeControlRenderer.vue';
2122
import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
2223
import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
24+
import { entry as InputControlRendererEntry } from './InputControlRenderer.vue';
2325

2426
export const controlRenderers = [
25-
stringControlRendererEntry,
27+
//stringControlRendererEntry,
2628
multiStringControlRendererEntry,
27-
numberControlRendererEntry,
28-
integerControlRendererEntry,
29+
//numberControlRendererEntry,
30+
//integerControlRendererEntry,
2931
enumControlRendererEntry,
3032
oneOfEnumControlRendererEntry,
3133
dateControlRendererEntry,
3234
dateTimeControlRendererEntry,
3335
timeControlRendererEntry,
3436
booleanControlRendererEntry,
37+
InputControlRendererEntry,
3538
];

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export * from './renderers';
55
export * from './styles';
66
export * from './util';
77
export * from './label';
8+
export * from './cells';

‎packages/vue-vanilla/tests/unit/util/TestComponent.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { defineComponent } from 'vue';
33
import { JsonForms } from '../../../config/jsonforms';
4-
import { vanillaRenderers } from '../../../src';
4+
import { vanillaRenderers, vanillaCells } from '../../../src';
55
import { JsonFormsChangeEvent } from '@jsonforms/vue';
66
77
export default defineComponent({
@@ -14,6 +14,7 @@ export default defineComponent({
1414
data() {
1515
return {
1616
renderers: Object.freeze(vanillaRenderers),
17+
cells: Object.freeze(vanillaCells),
1718
data: this.initialData,
1819
};
1920
},
@@ -31,6 +32,7 @@ export default defineComponent({
3132
:schema="schema"
3233
:uischema="uischema"
3334
:renderers="renderers"
35+
:cells="cells"
3436
:config="config"
3537
@change="onChange"
3638
/>

0 commit comments

Comments
 (0)