@json-layout/core 0.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/LICENSE +21 -0
- package/package.json +70 -0
- package/src/compile/index.js +136 -0
- package/src/compile/serialize.js +76 -0
- package/src/compile/skeleton-node.js +162 -0
- package/src/compile/skeleton-tree.js +28 -0
- package/src/compile/types.ts +50 -0
- package/src/compile/utils/resolve-refs.js +69 -0
- package/src/i18n/en.js +10 -0
- package/src/i18n/fr.js +10 -0
- package/src/i18n/index.js +8 -0
- package/src/i18n/types.ts +14 -0
- package/src/index.js +3 -0
- package/src/state/index.js +381 -0
- package/src/state/state-node.js +317 -0
- package/src/state/state-tree.js +59 -0
- package/src/state/types.ts +89 -0
- package/src/state/utils/display.js +132 -0
- package/src/state/utils/immutable.js +11 -0
- package/types/compile/index.d.ts +14 -0
- package/types/compile/index.d.ts.map +1 -0
- package/types/compile/serialize.d.ts +6 -0
- package/types/compile/serialize.d.ts.map +1 -0
- package/types/compile/skeleton-node.d.ts +14 -0
- package/types/compile/skeleton-node.d.ts.map +1 -0
- package/types/compile/skeleton-tree.d.ts +12 -0
- package/types/compile/skeleton-tree.d.ts.map +1 -0
- package/types/compile/types.d.ts +43 -0
- package/types/compile/types.d.ts.map +1 -0
- package/types/compile/utils/resolve-refs.d.ts +9 -0
- package/types/compile/utils/resolve-refs.d.ts.map +1 -0
- package/types/i18n/en.d.ts +3 -0
- package/types/i18n/en.d.ts.map +1 -0
- package/types/i18n/fr.d.ts +3 -0
- package/types/i18n/fr.d.ts.map +1 -0
- package/types/i18n/index.d.ts +3 -0
- package/types/i18n/index.d.ts.map +1 -0
- package/types/i18n/types.d.ts +13 -0
- package/types/i18n/types.d.ts.map +1 -0
- package/types/index.d.ts +4 -0
- package/types/index.d.ts.map +1 -0
- package/types/state/index.d.ts +185 -0
- package/types/state/index.d.ts.map +1 -0
- package/types/state/state-node.d.ts +31 -0
- package/types/state/state-node.d.ts.map +1 -0
- package/types/state/state-tree.d.ts +13 -0
- package/types/state/state-tree.d.ts.map +1 -0
- package/types/state/types.d.ts +119 -0
- package/types/state/types.d.ts.map +1 -0
- package/types/state/utils/display.d.ts +51 -0
- package/types/state/utils/display.d.ts.map +1 -0
- package/types/state/utils/immutable.d.ts +8 -0
- package/types/state/utils/immutable.d.ts.map +1 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { produce } from 'immer'
|
|
2
|
+
import { createStateNode } from './state-node.js'
|
|
3
|
+
|
|
4
|
+
/** @type {(draft: import('./types.js').StateTree, root: import('./types.js').StateNode, valid: boolean) => any} */
|
|
5
|
+
const produceStateTree = produce(
|
|
6
|
+
(draft, root, valid) => {
|
|
7
|
+
draft.root = root
|
|
8
|
+
draft.valid = valid
|
|
9
|
+
}
|
|
10
|
+
)
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @param {import('./types.js').CreateStateTreeContext} context
|
|
14
|
+
* @param {import('./types.js').StatefulLayoutOptions} options
|
|
15
|
+
* @param {import('../index.js').CompiledLayout} compiledLayout
|
|
16
|
+
* @param {import('../index.js').SkeletonTree} skeleton
|
|
17
|
+
* @param {import('./utils/display.js').Display} display
|
|
18
|
+
* @param {unknown} value
|
|
19
|
+
* @param {import('./types.js').ValidationState} validationState
|
|
20
|
+
* @param {import('./types.js').StateTree} [reusedStateTree]
|
|
21
|
+
* @returns {import('./types.js').StateTree}
|
|
22
|
+
*/
|
|
23
|
+
export function createStateTree (
|
|
24
|
+
context,
|
|
25
|
+
options,
|
|
26
|
+
compiledLayout,
|
|
27
|
+
skeleton,
|
|
28
|
+
display,
|
|
29
|
+
value,
|
|
30
|
+
validationState,
|
|
31
|
+
reusedStateTree
|
|
32
|
+
) {
|
|
33
|
+
const validate = compiledLayout.validates[skeleton.root.pointer]
|
|
34
|
+
const valid = validate(value)
|
|
35
|
+
if (validate.errors) {
|
|
36
|
+
for (const error of validate.errors) {
|
|
37
|
+
if (error.keyword !== 'errorMessage') compiledLayout.localizeErrors([error])
|
|
38
|
+
}
|
|
39
|
+
context.errors = validate.errors
|
|
40
|
+
}
|
|
41
|
+
const root = createStateNode(
|
|
42
|
+
context,
|
|
43
|
+
options,
|
|
44
|
+
compiledLayout,
|
|
45
|
+
'',
|
|
46
|
+
'',
|
|
47
|
+
null,
|
|
48
|
+
'',
|
|
49
|
+
null,
|
|
50
|
+
skeleton.root,
|
|
51
|
+
null,
|
|
52
|
+
display,
|
|
53
|
+
value,
|
|
54
|
+
validationState,
|
|
55
|
+
reusedStateTree?.root
|
|
56
|
+
)
|
|
57
|
+
|
|
58
|
+
return produceStateTree(reusedStateTree ?? /** @type {import('./types.js').StateTree} */({}), root, valid)
|
|
59
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { type ErrorObject } from 'ajv'
|
|
2
|
+
import { type CompObject, type Cols, type StateNodeOptions, type TextField, type Textarea, type NumberField, type Slider, type Checkbox, type Switch, type DatePicker, type DateTimePicker, type TimePicker, type ColorPicker, type Section, type OneOfSelect, type Select, type Tabs, type VerticalTabs, type ExpansionPanels, type List } from '@json-layout/vocabulary'
|
|
3
|
+
import { type SkeletonTree, type SkeletonNode, type StatefulLayout } from '../index.js'
|
|
4
|
+
import { type LocaleMessages } from '../i18n/types.js'
|
|
5
|
+
|
|
6
|
+
export interface StateNode {
|
|
7
|
+
key: string | number
|
|
8
|
+
fullKey: string
|
|
9
|
+
parentFullKey: string | null
|
|
10
|
+
dataPath: string
|
|
11
|
+
parentDataPath: string | null
|
|
12
|
+
skeleton: SkeletonNode
|
|
13
|
+
layout: CompObject
|
|
14
|
+
cols: Cols
|
|
15
|
+
data: unknown
|
|
16
|
+
error: string | undefined
|
|
17
|
+
childError: boolean | undefined
|
|
18
|
+
validated: boolean
|
|
19
|
+
options: StatefulLayoutOptions
|
|
20
|
+
messages: LocaleMessages
|
|
21
|
+
children?: StateNode[]
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface StateTree {
|
|
25
|
+
root: StateNode
|
|
26
|
+
valid: boolean
|
|
27
|
+
title: string
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface CreateStateTreeContext {
|
|
31
|
+
errors?: ErrorObject[]
|
|
32
|
+
nodes: StateNode[]
|
|
33
|
+
activeItems: Record<string, number>
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export interface ValidationState {
|
|
37
|
+
initialized: boolean
|
|
38
|
+
validatedForm: boolean
|
|
39
|
+
validatedChildren: string[]
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
|
|
43
|
+
export type StatefulLayoutEvents = {
|
|
44
|
+
// input: { value: unknown, child: { pointer: string, dataPointer: string, value: unknown } }
|
|
45
|
+
input: unknown
|
|
46
|
+
'update': StatefulLayout
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export type StatefulLayoutOptions = Required<StateNodeOptions> & {
|
|
50
|
+
context: Record<string, any>
|
|
51
|
+
width: number
|
|
52
|
+
validateOn: 'input' | 'blur' | 'submit'
|
|
53
|
+
initialValidation: 'never' | 'always' | 'withData'
|
|
54
|
+
messages: LocaleMessages
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export type TextFieldNode = Omit<StateNode, 'children'> & { layout: TextField, data: string | undefined | null }
|
|
58
|
+
|
|
59
|
+
export type TextareaNode = Omit<StateNode, 'children'> & { layout: Textarea, data: string | undefined | null }
|
|
60
|
+
|
|
61
|
+
export type NumberFieldNode = Omit<StateNode, 'children'> & { layout: NumberField, data: number | undefined | null }
|
|
62
|
+
|
|
63
|
+
export type SliderNode = Omit<StateNode, 'children'> & { layout: Slider, data: number | undefined | null }
|
|
64
|
+
|
|
65
|
+
export type CheckboxNode = Omit<StateNode, 'children'> & { layout: Checkbox, data: boolean | undefined | null }
|
|
66
|
+
|
|
67
|
+
export type SwitchNode = Omit<StateNode, 'children'> & { layout: Switch, data: boolean | undefined | null }
|
|
68
|
+
|
|
69
|
+
export type DatePickerNode = Omit<StateNode, 'children'> & { layout: DatePicker, data: string | undefined | null }
|
|
70
|
+
|
|
71
|
+
export type DateTimePickerNode = Omit<StateNode, 'children'> & { layout: DateTimePicker, data: string | undefined | null }
|
|
72
|
+
|
|
73
|
+
export type TimePickerNode = Omit<StateNode, 'children'> & { layout: TimePicker, data: string | undefined | null }
|
|
74
|
+
|
|
75
|
+
export type ColorPickerNode = Omit<StateNode, 'children'> & { layout: ColorPicker, data: string | undefined | null }
|
|
76
|
+
|
|
77
|
+
export type SectionNode = StateNode & { layout: Section, children: StateNode[] }
|
|
78
|
+
|
|
79
|
+
export type OneOfSelectNode = StateNode & { layout: OneOfSelect, data: Record<string, unknown>, childrenTrees: SkeletonTree[] }
|
|
80
|
+
|
|
81
|
+
export type SelectNode = Omit<StateNode, 'children'> & { layout: Select, data: any }
|
|
82
|
+
|
|
83
|
+
export type TabsNode = StateNode & { layout: Tabs, children: StateNode[] }
|
|
84
|
+
|
|
85
|
+
export type VerticalTabsNode = StateNode & { layout: VerticalTabs, children: StateNode[] }
|
|
86
|
+
|
|
87
|
+
export type ExpansionPanelsNode = StateNode & { layout: ExpansionPanels, children: StateNode[] }
|
|
88
|
+
|
|
89
|
+
export type ListNode = StateNode & { layout: List, data: any[], children: StateNode[], childrenTrees: SkeletonTree[] }
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
// inspired by https://vuetifyjs.com/en/features/display-and-platform/#interface
|
|
2
|
+
|
|
3
|
+
/** @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'} BreakPointName */
|
|
4
|
+
|
|
5
|
+
/** @type {BreakPointName[]} */
|
|
6
|
+
const names = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
|
|
7
|
+
|
|
8
|
+
// TODO: make this configurable
|
|
9
|
+
/** @type {Record<BreakPointName, number>} */
|
|
10
|
+
const thresholds = {
|
|
11
|
+
xs: 0,
|
|
12
|
+
sm: 600,
|
|
13
|
+
md: 960,
|
|
14
|
+
lg: 1280,
|
|
15
|
+
xl: 1920,
|
|
16
|
+
xxl: 2560
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export class Display {
|
|
20
|
+
/**
|
|
21
|
+
* @readonly
|
|
22
|
+
* @type {number}
|
|
23
|
+
*/
|
|
24
|
+
width
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* @param {number} width
|
|
28
|
+
*/
|
|
29
|
+
constructor (width) {
|
|
30
|
+
this.width = width
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/** @returns {BreakPointName} */
|
|
34
|
+
get name () {
|
|
35
|
+
for (let i = 0; i < names.length; i++) {
|
|
36
|
+
if (names[i + 1] && this.width < thresholds[names[i + 1]]) return names[i]
|
|
37
|
+
}
|
|
38
|
+
return 'xxl'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/** @returns {boolean} */
|
|
42
|
+
get xs () {
|
|
43
|
+
return this.width < thresholds.sm
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/** @returns {boolean} */
|
|
47
|
+
get sm () {
|
|
48
|
+
return this.width >= thresholds.sm && this.width < thresholds.md
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/** @returns {boolean} */
|
|
52
|
+
get smAndDown () {
|
|
53
|
+
return this.width < thresholds.md
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/** @returns {boolean} */
|
|
57
|
+
get smAndUp () {
|
|
58
|
+
return this.width >= thresholds.sm
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/** @returns {boolean} */
|
|
62
|
+
get md () {
|
|
63
|
+
return this.width >= thresholds.md && this.width < thresholds.lg
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/** @returns {boolean} */
|
|
67
|
+
get mdAndDown () {
|
|
68
|
+
return this.width < thresholds.lg
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/** @returns {boolean} */
|
|
72
|
+
get mobile () {
|
|
73
|
+
return this.mdAndDown
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/** @returns {boolean} */
|
|
77
|
+
get mdAndUp () {
|
|
78
|
+
return this.width >= thresholds.md
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/** @returns {boolean} */
|
|
82
|
+
get lg () {
|
|
83
|
+
return this.width >= thresholds.lg && this.width < thresholds.xl
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/** @returns {boolean} */
|
|
87
|
+
get lgAndDown () {
|
|
88
|
+
return this.width < thresholds.xl
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/** @returns {boolean} */
|
|
92
|
+
get lgAndUp () {
|
|
93
|
+
return this.width >= thresholds.lg
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/** @returns {boolean} */
|
|
97
|
+
get xl () {
|
|
98
|
+
return this.width >= thresholds.xl && this.width < thresholds.xxl
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/** @returns {boolean} */
|
|
102
|
+
get xlAndDown () {
|
|
103
|
+
return this.width < thresholds.xxl
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/** @returns {boolean} */
|
|
107
|
+
get xlAndUp () {
|
|
108
|
+
return this.width >= thresholds.xl
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/** @returns {boolean} */
|
|
112
|
+
get xxl () {
|
|
113
|
+
return this.width >= thresholds.xxl
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* @param {Display} parentDisplay
|
|
119
|
+
* @param {import("@json-layout/vocabulary").ColsObj | undefined} colsObj
|
|
120
|
+
* @returns {[Display, import("@json-layout/vocabulary").Cols]}
|
|
121
|
+
*/
|
|
122
|
+
export function getChildDisplay (parentDisplay, colsObj) {
|
|
123
|
+
if (!colsObj) return [parentDisplay, 12]
|
|
124
|
+
let cols = colsObj.xs
|
|
125
|
+
if (parentDisplay.smAndUp && colsObj.sm !== undefined) cols = colsObj.sm
|
|
126
|
+
if (parentDisplay.mdAndUp && colsObj.md !== undefined) cols = colsObj.md
|
|
127
|
+
if (parentDisplay.lgAndUp && colsObj.lg !== undefined) cols = colsObj.lg
|
|
128
|
+
if (parentDisplay.xlAndUp && colsObj.xl !== undefined) cols = colsObj.xl
|
|
129
|
+
if (parentDisplay.xxl && colsObj.xxl !== undefined) cols = colsObj.xxl
|
|
130
|
+
const display = cols === 12 ? parentDisplay : new Display(Math.round(parentDisplay.width * (cols / 12)))
|
|
131
|
+
return [display, cols]
|
|
132
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @template ItemType
|
|
3
|
+
* @param {ItemType[]} a1
|
|
4
|
+
* @param {ItemType[]} a2
|
|
5
|
+
* @returns {ItemType[]}
|
|
6
|
+
*/
|
|
7
|
+
export function shallowCompareArrays (a1 = [], a2 = []) {
|
|
8
|
+
if (!a1 || !a2 || a1.length !== a2.length) return a2
|
|
9
|
+
for (let i = 0; i < a1.length; i++) { if (a1[i] !== a2[i]) return a2 }
|
|
10
|
+
return a1
|
|
11
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @param {object} _schema
|
|
3
|
+
* @param {PartialCompileOptions} [partialOptions]
|
|
4
|
+
* @returns {CompiledLayout}
|
|
5
|
+
*/
|
|
6
|
+
export function compile(_schema: object, partialOptions?: import("./types.js").PartialCompileOptions | undefined): CompiledLayout;
|
|
7
|
+
export { resolveRefs } from "./utils/resolve-refs.js";
|
|
8
|
+
export type SkeletonTree = import('./types.js').SkeletonTree;
|
|
9
|
+
export type SkeletonNode = import('./types.js').SkeletonNode;
|
|
10
|
+
export type CompiledLayout = import('./types.js').CompiledLayout;
|
|
11
|
+
export type CompileOptions = import('./types.js').CompileOptions;
|
|
12
|
+
export type PartialCompileOptions = import('./types.js').PartialCompileOptions;
|
|
13
|
+
export type CompiledExpression = import('./types.js').CompiledExpression;
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAsEA;;;;GAIG;AACH,iCAJW,MAAM,4EAEJ,cAAc,CA8D1B;;2BAvHY,OAAO,YAAY,EAAE,YAAY;2BACjC,OAAO,YAAY,EAAE,YAAY;6BACjC,OAAO,YAAY,EAAE,cAAc;6BACnC,OAAO,YAAY,EAAE,cAAc;oCACnC,OAAO,YAAY,EAAE,qBAAqB;iCAC1C,OAAO,YAAY,EAAE,kBAAkB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../src/compile/serialize.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,0CAHW,OAAO,YAAY,EAAE,cAAc,GACjC,MAAM,CAmElB"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @param {any} schema
|
|
3
|
+
* @param {import('./index.js').CompileOptions} options
|
|
4
|
+
* @param {string[]} validates
|
|
5
|
+
* @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
|
|
6
|
+
* @param {import('@json-layout/vocabulary').Expression[]} expressions
|
|
7
|
+
* @param {string | number} key
|
|
8
|
+
* @param {string} pointer
|
|
9
|
+
* @param {string | null} parentPointer
|
|
10
|
+
* @param {boolean} required
|
|
11
|
+
* @returns {import('./types.js').SkeletonNode}
|
|
12
|
+
*/
|
|
13
|
+
export function makeSkeletonNode(schema: any, options: import('./index.js').CompileOptions, validates: string[], normalizedLayouts: Record<string, import('@json-layout/vocabulary').NormalizedLayout>, expressions: import('@json-layout/vocabulary').Expression[], key: string | number, pointer: string, parentPointer: string | null, required: boolean): import('./types.js').SkeletonNode;
|
|
14
|
+
//# sourceMappingURL=skeleton-node.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton-node.d.ts","sourceRoot":"","sources":["../../src/compile/skeleton-node.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;GAWG;AACH,yCAXW,GAAG,WACH,OAAO,YAAY,EAAE,cAAc,aACnC,MAAM,EAAE,qBACR,OAAO,MAAM,EAAE,OAAO,yBAAyB,EAAE,gBAAgB,CAAC,eAClE,OAAO,yBAAyB,EAAE,UAAU,EAAE,OAC9C,MAAM,GAAG,MAAM,WACf,MAAM,iBACN,MAAM,GAAG,IAAI,YACb,OAAO,GACL,OAAO,YAAY,EAAE,YAAY,CAqI7C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @param {any} schema
|
|
3
|
+
* @param {import('./index.js').CompileOptions} options
|
|
4
|
+
* @param {string[]} validates
|
|
5
|
+
* @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
|
|
6
|
+
* @param {import('@json-layout/vocabulary').Expression[]} expressions
|
|
7
|
+
* @param {string} pointer
|
|
8
|
+
* @param {string} title
|
|
9
|
+
* @returns {import('./types.js').SkeletonTree}
|
|
10
|
+
*/
|
|
11
|
+
export function makeSkeletonTree(schema: any, options: import('./index.js').CompileOptions, validates: string[], normalizedLayouts: Record<string, import('@json-layout/vocabulary').NormalizedLayout>, expressions: import('@json-layout/vocabulary').Expression[], pointer: string, title: string): import('./types.js').SkeletonTree;
|
|
12
|
+
//# sourceMappingURL=skeleton-tree.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton-tree.d.ts","sourceRoot":"","sources":["../../src/compile/skeleton-tree.js"],"names":[],"mappings":"AAKA;;;;;;;;;GASG;AACH,yCATW,GAAG,WACH,OAAO,YAAY,EAAE,cAAc,aACnC,MAAM,EAAE,qBACR,OAAO,MAAM,EAAE,OAAO,yBAAyB,EAAE,gBAAgB,CAAC,eAClE,OAAO,yBAAyB,EAAE,UAAU,EAAE,WAC9C,MAAM,SACN,MAAM,GACJ,OAAO,YAAY,EAAE,YAAY,CAc7C"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type ajvModule from 'ajv';
|
|
2
|
+
import type MarkdownIt from 'markdown-it';
|
|
3
|
+
import { type NormalizedLayout, type StateNodeOptions } from '@json-layout/vocabulary';
|
|
4
|
+
import { type ValidateFunction, type SchemaObject } from 'ajv';
|
|
5
|
+
import { type Display } from '../state/utils/display.js';
|
|
6
|
+
import { type LocaleMessages } from '../i18n/types.js';
|
|
7
|
+
export type CompiledExpression = (data: any, options: StateNodeOptions, display: Display) => any;
|
|
8
|
+
export interface CompileOptions {
|
|
9
|
+
ajv: ajvModule.default;
|
|
10
|
+
code: boolean;
|
|
11
|
+
markdown: (text: string) => string;
|
|
12
|
+
markdownIt?: MarkdownIt.Options;
|
|
13
|
+
locale: string;
|
|
14
|
+
messages: LocaleMessages;
|
|
15
|
+
}
|
|
16
|
+
export type PartialCompileOptions = Partial<Omit<CompileOptions, 'messages'>> & {
|
|
17
|
+
messages?: Partial<LocaleMessages>;
|
|
18
|
+
};
|
|
19
|
+
export interface CompiledLayout {
|
|
20
|
+
options?: CompileOptions;
|
|
21
|
+
schema?: SchemaObject;
|
|
22
|
+
skeletonTree: SkeletonTree;
|
|
23
|
+
validates: Record<string, ValidateFunction>;
|
|
24
|
+
normalizedLayouts: Record<string, NormalizedLayout>;
|
|
25
|
+
expressions: CompiledExpression[];
|
|
26
|
+
locale: string;
|
|
27
|
+
messages: LocaleMessages;
|
|
28
|
+
localizeErrors: (errors: ajvModule.ErrorObject[]) => void;
|
|
29
|
+
}
|
|
30
|
+
export interface SkeletonTree {
|
|
31
|
+
title: string;
|
|
32
|
+
root: SkeletonNode;
|
|
33
|
+
}
|
|
34
|
+
export interface SkeletonNode {
|
|
35
|
+
key: string | number;
|
|
36
|
+
pointer: string;
|
|
37
|
+
parentPointer: string | null;
|
|
38
|
+
defaultData?: unknown;
|
|
39
|
+
const?: unknown;
|
|
40
|
+
children?: SkeletonNode[];
|
|
41
|
+
childrenTrees?: SkeletonTree[];
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/compile/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,KAAK,CAAA;AAChC,OAAO,KAAK,UAAU,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AACtF,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,KAAK,CAAA;AAC9D,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEtD,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,KAAK,GAAG,CAAA;AAEhG,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,SAAS,CAAC,OAAO,CAAA;IACtB,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAA;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,cAAc,CAAA;CACzB;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CAAE,CAAA;AAEtH,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IAC3C,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACnD,WAAW,EAAE,kBAAkB,EAAE,CAAA;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,cAAc,CAAA;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,KAAK,IAAI,CAAA;CAC1D;AAID,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,YAAY,CAAA;CACnB;AAID,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;CAC/B"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @param {import('ajv').SchemaObject} schema
|
|
3
|
+
* @param {ajvModule.default} ajv
|
|
4
|
+
* @param {string} locale
|
|
5
|
+
* @returns {import('ajv').SchemaObject}
|
|
6
|
+
*/
|
|
7
|
+
export function resolveRefs(schema: import('ajv').SchemaObject, ajv: ajvModule.default, locale?: string): import('ajv').SchemaObject;
|
|
8
|
+
import ajvModule from 'ajv';
|
|
9
|
+
//# sourceMappingURL=resolve-refs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolve-refs.d.ts","sourceRoot":"","sources":["../../../src/compile/utils/resolve-refs.js"],"names":[],"mappings":"AA2DA;;;;;GAKG;AACH,oCALW,OAAO,KAAK,EAAE,YAAY,OAC1B,UAAU,OAAO,WACjB,MAAM,GACJ,OAAO,KAAK,EAAE,YAAY,CAKtC;sBApEqB,KAAK"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.js"],"names":[],"mappings":"wBAAW,OAAO,YAAY,EAAE,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../src/i18n/fr.js"],"names":[],"mappings":"wBAAW,OAAO,YAAY,EAAE,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.js"],"names":[],"mappings":"wBAGW,OAAO,MAAM,EAAE,OAAO,YAAY,EAAE,cAAc,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface CompileOptionsMessages {
|
|
2
|
+
errorOneOf: string;
|
|
3
|
+
errorRequired: string;
|
|
4
|
+
}
|
|
5
|
+
export interface StateOptionsMessages {
|
|
6
|
+
addItem: string;
|
|
7
|
+
delete: string;
|
|
8
|
+
edit: string;
|
|
9
|
+
duplicate: string;
|
|
10
|
+
sort: string;
|
|
11
|
+
}
|
|
12
|
+
export type LocaleMessages = CompileOptionsMessages & StateOptionsMessages;
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/i18n/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,cAAc,GAAG,sBAAsB,GAAG,oBAAoB,CAAA"}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
export { Display } from "./utils/display.js";
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {import('./types.js').StateNode} StateNode
|
|
4
|
+
* @typedef {import('./types.js').StateTree} StateTree
|
|
5
|
+
* @typedef {import('./types.js').StatefulLayoutOptions} StatefulLayoutOptions
|
|
6
|
+
* @typedef {import('./types.js').StatefulLayoutEvents} StatefulLayoutEvents
|
|
7
|
+
* @typedef {import('./types.js').CreateStateTreeContext} CreateStateTreeContext
|
|
8
|
+
* @typedef {import('./types.js').TextFieldNode} TextFieldNode
|
|
9
|
+
* @typedef {import('./types.js').TextareaNode} TextareaNode
|
|
10
|
+
* @typedef {import('./types.js').NumberFieldNode} NumberFieldNode
|
|
11
|
+
* @typedef {import('./types.js').SliderNode} SliderNode
|
|
12
|
+
* @typedef {import('./types.js').SectionNode} SectionNode
|
|
13
|
+
* @typedef {import('./types.js').SelectNode} SelectNode
|
|
14
|
+
* @typedef {import('./types.js').CheckboxNode} CheckboxNode
|
|
15
|
+
* @typedef {import('./types.js').SwitchNode} SwitchNode
|
|
16
|
+
* @typedef {import('./types.js').ColorPickerNode} ColorPickerNode
|
|
17
|
+
* @typedef {import('./types.js').DatePickerNode} DatePickerNode
|
|
18
|
+
* @typedef {import('./types.js').DateTimePickerNode} DateTimePickerNode
|
|
19
|
+
* @typedef {import('./types.js').TimePickerNode} TimePickerNode
|
|
20
|
+
* @typedef {import('./types.js').ExpansionPanelsNode} ExpansionPanelsNode
|
|
21
|
+
* @typedef {import('./types.js').TabsNode} TabsNode
|
|
22
|
+
* @typedef {import('./types.js').VerticalTabsNode} VerticalTabsNode
|
|
23
|
+
* @typedef {import('./types.js').OneOfSelectNode} OneOfSelectNode
|
|
24
|
+
* @typedef {import('./types.js').ListNode} ListNode
|
|
25
|
+
*/
|
|
26
|
+
/** @type {(node: StateNode | undefined) => node is SectionNode} */
|
|
27
|
+
export const isSection: (node: StateNode | undefined) => node is import("./types.js").SectionNode;
|
|
28
|
+
/** @type {(node: StateNode | undefined) => node is SelectNode} */
|
|
29
|
+
export const isSelect: (node: StateNode | undefined) => node is import("./types.js").SelectNode;
|
|
30
|
+
export class StatefulLayout {
|
|
31
|
+
/**
|
|
32
|
+
* @param {import("../index.js").CompiledLayout} compiledLayout
|
|
33
|
+
* @param {import("../index.js").SkeletonTree} skeletonTree
|
|
34
|
+
* @param {Partial<StatefulLayoutOptions>} options
|
|
35
|
+
* @param {unknown} data
|
|
36
|
+
*/
|
|
37
|
+
constructor(compiledLayout: import("../index.js").CompiledLayout, skeletonTree: import("../index.js").SkeletonTree, options: Partial<StatefulLayoutOptions>, data?: unknown);
|
|
38
|
+
/**
|
|
39
|
+
* @readonly
|
|
40
|
+
* @type {import('mitt').Emitter<StatefulLayoutEvents>}
|
|
41
|
+
*/
|
|
42
|
+
readonly events: import('mitt').Emitter<StatefulLayoutEvents>;
|
|
43
|
+
/**
|
|
44
|
+
* @private
|
|
45
|
+
* @readonly
|
|
46
|
+
* @type {import('../index.js').CompiledLayout}
|
|
47
|
+
*/
|
|
48
|
+
private readonly _compiledLayout;
|
|
49
|
+
get compiledLayout(): import("../compile/types.js").CompiledLayout;
|
|
50
|
+
/**
|
|
51
|
+
* @private
|
|
52
|
+
* @type {StateTree}
|
|
53
|
+
*/
|
|
54
|
+
private _stateTree;
|
|
55
|
+
get stateTree(): import("./types.js").StateTree;
|
|
56
|
+
/**
|
|
57
|
+
* @readonly
|
|
58
|
+
* @type {import('../index.js').SkeletonTree}
|
|
59
|
+
*/
|
|
60
|
+
readonly skeletonTree: import('../index.js').SkeletonTree;
|
|
61
|
+
/**
|
|
62
|
+
* @private
|
|
63
|
+
* @type {Display}
|
|
64
|
+
*/
|
|
65
|
+
private _display;
|
|
66
|
+
get display(): Display;
|
|
67
|
+
/**
|
|
68
|
+
* @private
|
|
69
|
+
* @type {import('./types.js').ValidationState}
|
|
70
|
+
*/
|
|
71
|
+
private _validationState;
|
|
72
|
+
/**
|
|
73
|
+
* @private
|
|
74
|
+
* @param {Partial<import('./types.js').ValidationState>} validationState
|
|
75
|
+
*/
|
|
76
|
+
set validationState(arg: import("./types.js").ValidationState);
|
|
77
|
+
/**
|
|
78
|
+
* @returns {import('./types.js').ValidationState}
|
|
79
|
+
*/
|
|
80
|
+
get validationState(): import("./types.js").ValidationState;
|
|
81
|
+
/**
|
|
82
|
+
* @private
|
|
83
|
+
* @type {StatefulLayoutOptions}
|
|
84
|
+
*/
|
|
85
|
+
private _options;
|
|
86
|
+
/**
|
|
87
|
+
* @param {Partial<StatefulLayoutOptions>} options
|
|
88
|
+
*/
|
|
89
|
+
set options(arg: import("./types.js").StatefulLayoutOptions);
|
|
90
|
+
/**
|
|
91
|
+
* @returns {StatefulLayoutOptions}
|
|
92
|
+
*/
|
|
93
|
+
get options(): import("./types.js").StatefulLayoutOptions;
|
|
94
|
+
/**
|
|
95
|
+
* @private
|
|
96
|
+
* @type {unknown}
|
|
97
|
+
*/
|
|
98
|
+
private _data;
|
|
99
|
+
set data(arg: unknown);
|
|
100
|
+
get data(): unknown;
|
|
101
|
+
/**
|
|
102
|
+
* @private
|
|
103
|
+
* @type {CreateStateTreeContext}
|
|
104
|
+
*/
|
|
105
|
+
private _lastCreateStateTreeContext;
|
|
106
|
+
/**
|
|
107
|
+
* @type {Record<string, number>}
|
|
108
|
+
*/
|
|
109
|
+
activeItems: Record<string, number>;
|
|
110
|
+
/**
|
|
111
|
+
* @private
|
|
112
|
+
* @param {Partial<StatefulLayoutOptions>} options
|
|
113
|
+
*/
|
|
114
|
+
private prepareOptions;
|
|
115
|
+
/**
|
|
116
|
+
* @private
|
|
117
|
+
*/
|
|
118
|
+
private initValidationState;
|
|
119
|
+
/**
|
|
120
|
+
* @private
|
|
121
|
+
*/
|
|
122
|
+
private updateState;
|
|
123
|
+
/**
|
|
124
|
+
* @private
|
|
125
|
+
*/
|
|
126
|
+
private createStateTree;
|
|
127
|
+
validate(): void;
|
|
128
|
+
resetValidation(): void;
|
|
129
|
+
/**
|
|
130
|
+
* @returns {boolean}
|
|
131
|
+
*/
|
|
132
|
+
get valid(): boolean;
|
|
133
|
+
/**
|
|
134
|
+
* @returns {boolean}
|
|
135
|
+
*/
|
|
136
|
+
get hasHiddenError(): boolean;
|
|
137
|
+
/**
|
|
138
|
+
* @param {StateNode} node
|
|
139
|
+
* @param {unknown} data
|
|
140
|
+
* @param {number} [activateKey]
|
|
141
|
+
*/
|
|
142
|
+
input(node: StateNode, data: unknown, activateKey?: number | undefined): void;
|
|
143
|
+
/**
|
|
144
|
+
* @param {StateNode} node
|
|
145
|
+
*/
|
|
146
|
+
blur(node: StateNode): void;
|
|
147
|
+
/**
|
|
148
|
+
* @param {StateNode} node
|
|
149
|
+
* @returns {Promise<import('@json-layout/vocabulary').SelectItems>}
|
|
150
|
+
*/
|
|
151
|
+
getSelectItems(node: StateNode): Promise<import('@json-layout/vocabulary').SelectItems>;
|
|
152
|
+
/**
|
|
153
|
+
* @param {StateNode} node
|
|
154
|
+
* @param {number} key
|
|
155
|
+
*/
|
|
156
|
+
activateItem(node: StateNode, key: number): void;
|
|
157
|
+
/**
|
|
158
|
+
* @param {StateNode} node
|
|
159
|
+
*/
|
|
160
|
+
deactivateItem(node: StateNode): void;
|
|
161
|
+
}
|
|
162
|
+
export type StateNode = import('./types.js').StateNode;
|
|
163
|
+
export type StateTree = import('./types.js').StateTree;
|
|
164
|
+
export type StatefulLayoutOptions = import('./types.js').StatefulLayoutOptions;
|
|
165
|
+
export type StatefulLayoutEvents = import('./types.js').StatefulLayoutEvents;
|
|
166
|
+
export type CreateStateTreeContext = import('./types.js').CreateStateTreeContext;
|
|
167
|
+
export type TextFieldNode = import('./types.js').TextFieldNode;
|
|
168
|
+
export type TextareaNode = import('./types.js').TextareaNode;
|
|
169
|
+
export type NumberFieldNode = import('./types.js').NumberFieldNode;
|
|
170
|
+
export type SliderNode = import('./types.js').SliderNode;
|
|
171
|
+
export type SectionNode = import('./types.js').SectionNode;
|
|
172
|
+
export type SelectNode = import('./types.js').SelectNode;
|
|
173
|
+
export type CheckboxNode = import('./types.js').CheckboxNode;
|
|
174
|
+
export type SwitchNode = import('./types.js').SwitchNode;
|
|
175
|
+
export type ColorPickerNode = import('./types.js').ColorPickerNode;
|
|
176
|
+
export type DatePickerNode = import('./types.js').DatePickerNode;
|
|
177
|
+
export type DateTimePickerNode = import('./types.js').DateTimePickerNode;
|
|
178
|
+
export type TimePickerNode = import('./types.js').TimePickerNode;
|
|
179
|
+
export type ExpansionPanelsNode = import('./types.js').ExpansionPanelsNode;
|
|
180
|
+
export type TabsNode = import('./types.js').TabsNode;
|
|
181
|
+
export type VerticalTabsNode = import('./types.js').VerticalTabsNode;
|
|
182
|
+
export type OneOfSelectNode = import('./types.js').OneOfSelectNode;
|
|
183
|
+
export type ListNode = import('./types.js').ListNode;
|
|
184
|
+
import { Display } from './utils/display.js';
|
|
185
|
+
//# sourceMappingURL=index.d.ts.map
|