@koumoul/vjsf 4.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/components/nodes/index.js +56 -0
- package/src/components/vjsf-webmcp.vue +83 -0
- package/src/components/vjsf.vue +1 -57
- package/types/components/nodes/index.d.ts +3 -0
- package/types/components/nodes/index.d.ts.map +1 -0
- package/types/components/vjsf-webmcp.vue.d.ts +70 -0
- package/types/components/vjsf-webmcp.vue.d.ts.map +1 -0
- package/types/components/vjsf.vue.d.ts.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koumoul/vjsf",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test-tz1": "TZ=Europe/Paris vitest run",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"vuetify": "^4.0.0"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@json-layout/core": "~2.
|
|
75
|
+
"@json-layout/core": "~2.5.0",
|
|
76
76
|
"@json-layout/vocabulary": "~2.12.0",
|
|
77
77
|
"@vueuse/core": "^12.5.0",
|
|
78
78
|
"debug": "^4.3.4"
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import NodeSection from './section.vue'
|
|
2
|
+
import NodeTextField from './text-field.vue'
|
|
3
|
+
import NodeTextarea from './textarea.vue'
|
|
4
|
+
import NodeCheckbox from './checkbox.vue'
|
|
5
|
+
import NodeSwitch from './switch.vue'
|
|
6
|
+
import NodeNumberField from './number-field.vue'
|
|
7
|
+
import NodeSlider from './slider.vue'
|
|
8
|
+
import NodeDatePicker from './date-picker.vue'
|
|
9
|
+
import NodeTimePicker from './time-picker.vue'
|
|
10
|
+
import NodeDateTimePicker from './date-time-picker.vue'
|
|
11
|
+
import NodeColorPicker from './color-picker.vue'
|
|
12
|
+
import NodeSelect from './select.vue'
|
|
13
|
+
import NodeAutocomplete from './autocomplete.vue'
|
|
14
|
+
import NodeRadioGroup from './radio-group.vue'
|
|
15
|
+
import NodeCheckboxGroup from './checkbox-group.vue'
|
|
16
|
+
import NodeSwitchGroup from './switch-group.vue'
|
|
17
|
+
import NodeOneOfSelect from './one-of-select.vue'
|
|
18
|
+
import NodeTabs from './tabs.vue'
|
|
19
|
+
import NodeVerticalTabs from './vertical-tabs.vue'
|
|
20
|
+
import NodeCombobox from './combobox.vue'
|
|
21
|
+
import NodeNumberCombobox from './number-combobox.vue'
|
|
22
|
+
import NodeExpansionPanels from './expansion-panels.vue'
|
|
23
|
+
import NodeStepper from './stepper.vue'
|
|
24
|
+
import NodeList from './list.vue'
|
|
25
|
+
import NodeFileInput from './file-input.vue'
|
|
26
|
+
import NodeCard from './card.vue'
|
|
27
|
+
|
|
28
|
+
/** @type {Record<string, import('vue').Component>} */
|
|
29
|
+
export const nodeComponents = {
|
|
30
|
+
section: NodeSection,
|
|
31
|
+
'text-field': NodeTextField,
|
|
32
|
+
textarea: NodeTextarea,
|
|
33
|
+
checkbox: NodeCheckbox,
|
|
34
|
+
switch: NodeSwitch,
|
|
35
|
+
'number-field': NodeNumberField,
|
|
36
|
+
slider: NodeSlider,
|
|
37
|
+
'date-picker': NodeDatePicker,
|
|
38
|
+
'time-picker': NodeTimePicker,
|
|
39
|
+
'date-time-picker': NodeDateTimePicker,
|
|
40
|
+
'color-picker': NodeColorPicker,
|
|
41
|
+
select: NodeSelect,
|
|
42
|
+
autocomplete: NodeAutocomplete,
|
|
43
|
+
'radio-group': NodeRadioGroup,
|
|
44
|
+
'checkbox-group': NodeCheckboxGroup,
|
|
45
|
+
'switch-group': NodeSwitchGroup,
|
|
46
|
+
'one-of-select': NodeOneOfSelect,
|
|
47
|
+
tabs: NodeTabs,
|
|
48
|
+
'vertical-tabs': NodeVerticalTabs,
|
|
49
|
+
'expansion-panels': NodeExpansionPanels,
|
|
50
|
+
stepper: NodeStepper,
|
|
51
|
+
list: NodeList,
|
|
52
|
+
combobox: NodeCombobox,
|
|
53
|
+
'number-combobox': NodeNumberCombobox,
|
|
54
|
+
'file-input': NodeFileInput,
|
|
55
|
+
card: NodeCard
|
|
56
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, shallowRef, watch } from 'vue'
|
|
3
|
+
|
|
4
|
+
import { compile, produceCompileOptions } from '@json-layout/core/compile'
|
|
5
|
+
import { WebMCP } from '@json-layout/core/webmcp'
|
|
6
|
+
import Tree from './tree.vue'
|
|
7
|
+
import { useVjsf, emits } from '../composables/use-vjsf.js'
|
|
8
|
+
import '../styles/vjsf.css'
|
|
9
|
+
import { nodeComponents } from './nodes/index.js'
|
|
10
|
+
|
|
11
|
+
const props = defineProps({
|
|
12
|
+
schema: {
|
|
13
|
+
type: Object,
|
|
14
|
+
required: true
|
|
15
|
+
},
|
|
16
|
+
precompiledLayout: {
|
|
17
|
+
/** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
|
|
18
|
+
type: Object,
|
|
19
|
+
default: null
|
|
20
|
+
},
|
|
21
|
+
modelValue: {
|
|
22
|
+
type: null,
|
|
23
|
+
default: null
|
|
24
|
+
},
|
|
25
|
+
options: {
|
|
26
|
+
/** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
|
|
27
|
+
type: Object,
|
|
28
|
+
default: null
|
|
29
|
+
},
|
|
30
|
+
prefixName: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: null
|
|
33
|
+
},
|
|
34
|
+
dataTitle: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: null
|
|
37
|
+
}
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
const emit = defineEmits(emits)
|
|
41
|
+
|
|
42
|
+
const { el, statefulLayout, stateTree } = useVjsf(
|
|
43
|
+
computed(() => props.schema),
|
|
44
|
+
computed(() => props.modelValue),
|
|
45
|
+
computed(() => props.options),
|
|
46
|
+
nodeComponents,
|
|
47
|
+
emit,
|
|
48
|
+
compile,
|
|
49
|
+
produceCompileOptions,
|
|
50
|
+
computed(() => props.precompiledLayout)
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
/** @type import('vue').ShallowRef<WebMCP | null> */
|
|
54
|
+
const webMCP = shallowRef(null)
|
|
55
|
+
watch(statefulLayout, () => {
|
|
56
|
+
if (webMCP.value) webMCP.value.unregisterTools()
|
|
57
|
+
if (statefulLayout.value) {
|
|
58
|
+
webMCP.value = new WebMCP(
|
|
59
|
+
/** @type {import('@json-layout/core').StatefulLayout} */(/** @type {unknown} */(statefulLayout.value)),
|
|
60
|
+
{ prefixName: props.prefixName, dataTitle: props.dataTitle }
|
|
61
|
+
)
|
|
62
|
+
webMCP.value.registerTools()
|
|
63
|
+
}
|
|
64
|
+
}, { immediate: true })
|
|
65
|
+
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<template>
|
|
69
|
+
<div
|
|
70
|
+
ref="el"
|
|
71
|
+
class="vjsf"
|
|
72
|
+
>
|
|
73
|
+
<tree
|
|
74
|
+
v-if="statefulLayout && stateTree"
|
|
75
|
+
:model-value="stateTree"
|
|
76
|
+
:stateful-layout="statefulLayout"
|
|
77
|
+
/>
|
|
78
|
+
</div>
|
|
79
|
+
</template>
|
|
80
|
+
|
|
81
|
+
<style lang="css">
|
|
82
|
+
/* nothing here, use ../styles/vjsf.css */
|
|
83
|
+
</style>
|
package/src/components/vjsf.vue
CHANGED
|
@@ -5,63 +5,7 @@ import { compile, produceCompileOptions } from '@json-layout/core/compile'
|
|
|
5
5
|
import Tree from './tree.vue'
|
|
6
6
|
import { useVjsf, emits } from '../composables/use-vjsf.js'
|
|
7
7
|
import '../styles/vjsf.css'
|
|
8
|
-
|
|
9
|
-
import NodeSection from './nodes/section.vue'
|
|
10
|
-
import NodeTextField from './nodes/text-field.vue'
|
|
11
|
-
import NodeTextarea from './nodes/textarea.vue'
|
|
12
|
-
import NodeCheckbox from './nodes/checkbox.vue'
|
|
13
|
-
import NodeSwitch from './nodes/switch.vue'
|
|
14
|
-
import NodeNumberField from './nodes/number-field.vue'
|
|
15
|
-
import NodeSlider from './nodes/slider.vue'
|
|
16
|
-
import NodeDatePicker from './nodes/date-picker.vue'
|
|
17
|
-
import NodeTimePicker from './nodes/time-picker.vue'
|
|
18
|
-
import NodeDateTimePicker from './nodes/date-time-picker.vue'
|
|
19
|
-
import NodeColorPicker from './nodes/color-picker.vue'
|
|
20
|
-
import NodeSelect from './nodes/select.vue'
|
|
21
|
-
import NodeAutocomplete from './nodes/autocomplete.vue'
|
|
22
|
-
import NodeRadioGroup from './nodes/radio-group.vue'
|
|
23
|
-
import NodeCheckboxGroup from './nodes/checkbox-group.vue'
|
|
24
|
-
import NodeSwitchGroup from './nodes/switch-group.vue'
|
|
25
|
-
import NodeOneOfSelect from './nodes/one-of-select.vue'
|
|
26
|
-
import NodeTabs from './nodes/tabs.vue'
|
|
27
|
-
import NodeVerticalTabs from './nodes/vertical-tabs.vue'
|
|
28
|
-
import NodeCombobox from './nodes/combobox.vue'
|
|
29
|
-
import NodeNumberCombobox from './nodes/number-combobox.vue'
|
|
30
|
-
import NodeExpansionPanels from './nodes/expansion-panels.vue'
|
|
31
|
-
import NodeStepper from './nodes/stepper.vue'
|
|
32
|
-
import NodeList from './nodes/list.vue'
|
|
33
|
-
import NodeFileInput from './nodes/file-input.vue'
|
|
34
|
-
import NodeCard from './nodes/card.vue'
|
|
35
|
-
|
|
36
|
-
/** @type {Record<string, import('vue').Component>} */
|
|
37
|
-
const nodeComponents = {
|
|
38
|
-
section: NodeSection,
|
|
39
|
-
'text-field': NodeTextField,
|
|
40
|
-
textarea: NodeTextarea,
|
|
41
|
-
checkbox: NodeCheckbox,
|
|
42
|
-
switch: NodeSwitch,
|
|
43
|
-
'number-field': NodeNumberField,
|
|
44
|
-
slider: NodeSlider,
|
|
45
|
-
'date-picker': NodeDatePicker,
|
|
46
|
-
'time-picker': NodeTimePicker,
|
|
47
|
-
'date-time-picker': NodeDateTimePicker,
|
|
48
|
-
'color-picker': NodeColorPicker,
|
|
49
|
-
select: NodeSelect,
|
|
50
|
-
autocomplete: NodeAutocomplete,
|
|
51
|
-
'radio-group': NodeRadioGroup,
|
|
52
|
-
'checkbox-group': NodeCheckboxGroup,
|
|
53
|
-
'switch-group': NodeSwitchGroup,
|
|
54
|
-
'one-of-select': NodeOneOfSelect,
|
|
55
|
-
tabs: NodeTabs,
|
|
56
|
-
'vertical-tabs': NodeVerticalTabs,
|
|
57
|
-
'expansion-panels': NodeExpansionPanels,
|
|
58
|
-
stepper: NodeStepper,
|
|
59
|
-
list: NodeList,
|
|
60
|
-
combobox: NodeCombobox,
|
|
61
|
-
'number-combobox': NodeNumberCombobox,
|
|
62
|
-
'file-input': NodeFileInput,
|
|
63
|
-
card: NodeCard
|
|
64
|
-
}
|
|
8
|
+
import { nodeComponents } from './nodes/index.js'
|
|
65
9
|
|
|
66
10
|
const props = defineProps({
|
|
67
11
|
schema: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/index.js"],"names":[],"mappings":"AA2BA,sDAAsD;AACtD,6BADW,MAAM,CAAC,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,CA4BjD"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
|
|
4
|
+
schema: {
|
|
5
|
+
type: ObjectConstructor;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
precompiledLayout: {
|
|
9
|
+
/** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
|
|
10
|
+
type: import("vue").PropType<import("@json-layout/core").CompiledLayout>;
|
|
11
|
+
default: null;
|
|
12
|
+
};
|
|
13
|
+
modelValue: {
|
|
14
|
+
type: null;
|
|
15
|
+
default: null;
|
|
16
|
+
};
|
|
17
|
+
options: {
|
|
18
|
+
/** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
|
|
19
|
+
type: import("vue").PropType<import("../types.js").PartialVjsfOptions | null>;
|
|
20
|
+
default: null;
|
|
21
|
+
};
|
|
22
|
+
prefixName: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
default: null;
|
|
25
|
+
};
|
|
26
|
+
dataTitle: {
|
|
27
|
+
type: StringConstructor;
|
|
28
|
+
default: null;
|
|
29
|
+
};
|
|
30
|
+
}>, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
|
|
31
|
+
"update:state": (state: import("../types.js", { with: { "resolution-mode": "import" } }).VjsfStatefulLayout) => void;
|
|
32
|
+
"update:modelValue": (data: any) => void;
|
|
33
|
+
}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
|
|
34
|
+
schema: {
|
|
35
|
+
type: ObjectConstructor;
|
|
36
|
+
required: true;
|
|
37
|
+
};
|
|
38
|
+
precompiledLayout: {
|
|
39
|
+
/** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
|
|
40
|
+
type: import("vue").PropType<import("@json-layout/core").CompiledLayout>;
|
|
41
|
+
default: null;
|
|
42
|
+
};
|
|
43
|
+
modelValue: {
|
|
44
|
+
type: null;
|
|
45
|
+
default: null;
|
|
46
|
+
};
|
|
47
|
+
options: {
|
|
48
|
+
/** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
|
|
49
|
+
type: import("vue").PropType<import("../types.js").PartialVjsfOptions | null>;
|
|
50
|
+
default: null;
|
|
51
|
+
};
|
|
52
|
+
prefixName: {
|
|
53
|
+
type: StringConstructor;
|
|
54
|
+
default: null;
|
|
55
|
+
};
|
|
56
|
+
dataTitle: {
|
|
57
|
+
type: StringConstructor;
|
|
58
|
+
default: null;
|
|
59
|
+
};
|
|
60
|
+
}>> & Readonly<{
|
|
61
|
+
"onUpdate:state"?: ((state: import("../types.js", { with: { "resolution-mode": "import" } }).VjsfStatefulLayout) => any) | undefined;
|
|
62
|
+
"onUpdate:modelValue"?: ((data: any) => any) | undefined;
|
|
63
|
+
}>, {
|
|
64
|
+
options: import("../types.js", { with: { "resolution-mode": "import" } }).PartialVjsfOptions | null;
|
|
65
|
+
modelValue: any;
|
|
66
|
+
precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js", { with: { "resolution-mode": "import" } }).CompiledLayout;
|
|
67
|
+
prefixName: string;
|
|
68
|
+
dataTitle: string;
|
|
69
|
+
}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>;
|
|
70
|
+
//# sourceMappingURL=vjsf-webmcp.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vjsf-webmcp.vue.d.ts","sourceRoot":"","sources":["../../src/components/vjsf-webmcp.vue"],"names":[],"mappings":"wBAgOqB,OAAO,YAAY;;AA/BxC;;;;;;QAQI,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;QATjF,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;wHAalF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vjsf.vue.d.ts","sourceRoot":"","sources":["../../src/components/vjsf.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"vjsf.vue.d.ts","sourceRoot":"","sources":["../../src/components/vjsf.vue"],"names":[],"mappings":"wBA4KqB,OAAO,YAAY;;AAvBxC;;;;;;QAQI,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;;;QATjF,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;wHAKlF"}
|