impaktapps-ui-builder 0.0.382-alpha.2 → 0.0.382-alpha.20

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.
Files changed (30) hide show
  1. package/dist/impaktapps-ui-builder.es.js +1206 -1076
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +14 -14
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/uischema/apiSection.d.ts +18 -0
  6. package/dist/src/impaktapps-ui-builder/builder/build/uischema/coreSection.d.ts +15 -18
  7. package/dist/src/impaktapps-ui-builder/builder/build/uischema/eventSection.d.ts +70 -121
  8. package/dist/src/impaktapps-ui-builder/builder/build/uischema/tableSection.d.ts +53 -102
  9. package/dist/src/impaktapps-ui-builder/builder/build/uischema/validationSections.d.ts +17 -2
  10. package/dist/src/impaktapps-ui-builder/builder/build/uischema/valueTab.d.ts +17 -2
  11. package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts +1 -1
  12. package/package.json +1 -1
  13. package/src/impaktapps-ui-builder/builder/build/uischema/apiSection.ts +28 -26
  14. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +22 -25
  15. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +16 -36
  16. package/src/impaktapps-ui-builder/builder/build/uischema/dateInputField.ts +1 -6
  17. package/src/impaktapps-ui-builder/builder/build/uischema/emptyBox.ts +1 -1
  18. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +78 -51
  19. package/src/impaktapps-ui-builder/builder/build/uischema/multiSelect.ts +1 -1
  20. package/src/impaktapps-ui-builder/builder/build/uischema/selectInputField.ts +1 -6
  21. package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts +84 -56
  22. package/src/impaktapps-ui-builder/builder/build/uischema/textInputField.ts +1 -6
  23. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +12 -12
  24. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +12 -12
  25. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +344 -266
  26. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +343 -343
  27. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +415 -284
  28. package/src/impaktapps-ui-builder/builder/services/component.ts +3 -3
  29. package/src/impaktapps-ui-builder/builder/services/event.ts +8 -8
  30. package/src/impaktapps-ui-builder/builder/services/pageMaster.ts +1 -1
@@ -8,12 +8,7 @@ const EmptyBox = {
8
8
  widget: "EmptyBox",
9
9
  },
10
10
  config: {
11
- layout: {
12
- xs: 11,
13
- sm: 11,
14
- md: 5.5,
15
- lg: 5.5,
16
- },
11
+ layout: { xs: 0, sm: 4, md: 4, lg: 4 },
17
12
  main: {
18
13
 
19
14
  },
@@ -138,12 +133,7 @@ const getInputField = (scope: String, label: String) => {
138
133
  widget: "InputField",
139
134
  },
140
135
  config: {
141
- layout: {
142
- xs: 11,
143
- sm: 11,
144
- md: 5.5,
145
- lg: 5.5,
146
- },
136
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
147
137
  main: {
148
138
  label: label,
149
139
  },
@@ -160,12 +150,7 @@ const getRadioInputField = (scope: String, label: String, options: string[]) =>
160
150
  widget: "RadioInputField",
161
151
  },
162
152
  config: {
163
- layout: {
164
- xs: 11,
165
- sm: 11,
166
- md: 5.5,
167
- lg: 5.5,
168
- },
153
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
169
154
  main: {
170
155
  label: label,
171
156
 
@@ -216,7 +201,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
216
201
  widget: "SelectInputField",
217
202
  },
218
203
  config: {
219
- layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
204
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
220
205
  main: {
221
206
  label: label,
222
207
  type: "text",
@@ -241,6 +226,7 @@ export const buildPropertiesSection = function (type: String) {
241
226
  getInputField("elevation", "Card Elevation"),
242
227
  getInputField("height", "Grid height"),
243
228
  getInputField("justifyContent", "justifyContent"),
229
+ EmptyBox,
244
230
  cardLayout,
245
231
  ]
246
232
  break;
@@ -254,7 +240,7 @@ export const buildPropertiesSection = function (type: String) {
254
240
  { label: "Horizontal", value: "horizontal" },
255
241
  { label: "Vertical", value: "vertical" },
256
242
  ]),
257
-
243
+ EmptyBox,
258
244
  getArrayControl("sectionLabels", "label")
259
245
 
260
246
  ]
@@ -271,13 +257,15 @@ export const buildPropertiesSection = function (type: String) {
271
257
  uiSchema.elements = [
272
258
  getInputField("placeholder", "Placeholder"),
273
259
  EmptyBox,
260
+ EmptyBox,
274
261
  getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
275
262
  ]
276
263
  break;
277
264
  case "TextArea":
278
265
  uiSchema.elements = [
279
266
  getInputField("placeholder", "Placeholder"),
280
- EmptyBox,]
267
+ EmptyBox,
268
+ EmptyBox]
281
269
  break;
282
270
 
283
271
  case "SpeedoMeter":
@@ -286,7 +274,8 @@ export const buildPropertiesSection = function (type: String) {
286
274
  getInputField("heading", "Container Heading"),
287
275
  getInputField("heading", "Container Heading"),
288
276
  getInputField("speedoCaption", "Speedometer Caption"),
289
- getInputField("width", "Speedometer Width")
277
+ getInputField("width", "Speedometer Width"),
278
+ EmptyBox
290
279
  ]
291
280
  break;
292
281
  case "RankCard":
@@ -294,7 +283,10 @@ export const buildPropertiesSection = function (type: String) {
294
283
  getInputField("rank", "Rank"),
295
284
  getInputField("image", "Image Url"),
296
285
  getInputField("title", "Card Title"),
297
- getInputField("description", "Card Description")];
286
+ getInputField("description", "Card Description"),
287
+ EmptyBox,
288
+ EmptyBox
289
+ ];
298
290
  break;
299
291
  case "LeaderBoard":
300
292
  uiSchema.elements = [
@@ -302,6 +294,7 @@ export const buildPropertiesSection = function (type: String) {
302
294
  getInputField("firstImage", "First Image url"),
303
295
  getInputField("secondImage", "Second Image url"),
304
296
  getInputField("thirdImage", "Third Image url"),
297
+ EmptyBox,
305
298
  getTextArea("functionCode", "Write Compare Code", false)
306
299
  ];
307
300
  break;
@@ -315,7 +308,9 @@ export const buildPropertiesSection = function (type: String) {
315
308
  getInputField("heading", "Heading"),
316
309
  getInputField("bottomLabel_1", "First BottomLabel"),
317
310
  getInputField("bottomLabel_2", "Second BottomLabel"),
318
- getInputField("bottomLabel_3", "Third BottomLabel")
311
+ getInputField("bottomLabel_3", "Third BottomLabel"),
312
+ EmptyBox,
313
+ EmptyBox
319
314
  ];
320
315
  break;
321
316
  case "card":
@@ -358,7 +353,7 @@ export const buildPropertiesSection = function (type: String) {
358
353
  ];
359
354
  break;
360
355
  case "WrapperSection":
361
- uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox]
356
+ uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox, EmptyBox]
362
357
  break;
363
358
 
364
359
  case "TabSection":
@@ -388,11 +383,13 @@ export const buildPropertiesSection = function (type: String) {
388
383
  uiSchema.elements = [
389
384
  getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
390
385
  getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
386
+ EmptyBox
391
387
  ]
392
388
  break;
393
389
  case "MultipleSelect":
394
390
  uiSchema.elements = [
395
391
  getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
392
+ EmptyBox,
396
393
  EmptyBox
397
394
  ]
398
395
  break;
@@ -9,7 +9,7 @@ export const CoreSection = {
9
9
  widget: "SelectInputField",
10
10
  },
11
11
  config: {
12
- layout: { xs: 12, sm: 12, md: 6, lg: 6 },
12
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
13
13
  main: {
14
14
  label: "Type",
15
15
  type: "text",
@@ -24,12 +24,7 @@ export const CoreSection = {
24
24
  widget: "InputField",
25
25
  },
26
26
  config: {
27
- layout: {
28
- xs: 12,
29
- sm: 12,
30
- md: 6,
31
- lg: 6,
32
- },
27
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
33
28
  main: {
34
29
  label: "Name",
35
30
  },
@@ -43,31 +38,16 @@ export const CoreSection = {
43
38
  widget: "InputField",
44
39
  },
45
40
  config: {
46
- layout: {
47
- xs: 12,
48
- sm: 12,
49
- md: 6,
50
- lg: 6,
51
- },
41
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
52
42
  main: {
53
43
  label: "Label",
54
44
  },
55
45
  },
56
46
  },
57
- {
58
- type: "Control",
59
- scope: "#/properties/proc",
60
- config: {
61
- layout: { xs: 11, sm: 11, md: 6, lg: 6 },
62
- },
63
- options: {
64
- widget: "EmptyBox",
65
- },
66
- },
67
47
  {
68
48
  type: "Control",
69
49
  scope: "#/properties/layout",
70
- layout: 11.5,
50
+ layout: 12,
71
51
  options: {
72
52
  "elementLabelProp": "key",
73
53
  detail: {
@@ -81,12 +61,7 @@ export const CoreSection = {
81
61
  widget: "SelectInputField",
82
62
  },
83
63
  config: {
84
- layout: {
85
- xs: 11,
86
- sm: 11,
87
- md: 5.5,
88
- lg: 5.5,
89
- },
64
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
90
65
  main: {
91
66
  label: "Screen Size",
92
67
 
@@ -101,12 +76,7 @@ export const CoreSection = {
101
76
  widget: "InputField",
102
77
  },
103
78
  config: {
104
- layout: {
105
- xs: 11,
106
- sm: 11,
107
- md: 5.5,
108
- lg: 5.5,
109
- },
79
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
110
80
  main: {
111
81
  label: "Value",
112
82
  type:"number",
@@ -116,6 +86,16 @@ export const CoreSection = {
116
86
  },
117
87
  },
118
88
  },
89
+ {
90
+ type: 'Control',
91
+ scope: '#/properties/emptyBox',
92
+ options: {
93
+ widget: "EmptyBox"
94
+ },
95
+ config: {
96
+ layout: {xs: 0, sm: 4}
97
+ }
98
+ }
119
99
  ],
120
100
  },
121
101
  },
@@ -6,12 +6,7 @@ export default {
6
6
  },
7
7
 
8
8
  config: {
9
- layout: {
10
- xs: 11,
11
- sm: 11,
12
- md: 5.5,
13
- lg: 5.5,
14
- },
9
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
15
10
  main: {
16
11
  label: "",
17
12
  type: "date",
@@ -6,7 +6,7 @@ export default {
6
6
  },
7
7
 
8
8
  config: {
9
- layout:{xs:12,sm:12,md:5.5,lg:5.5},
9
+ layout: { xs: 0, sm: 4, md: 4, lg: 4 },
10
10
  main: {},
11
11
  style:{}
12
12
  },
@@ -1,58 +1,58 @@
1
1
  export const EventSection = {
2
2
  type: "HorizontalLayout",
3
3
  elements: [
4
- {
5
- type: "WrapperLayout",
6
- config: {
7
- main: {
8
- // label: "Table Columns",
9
- divider: true,
10
- },
11
- wrapperStyle: {
12
- border:"1px solid gray"
13
- },
14
- },
15
- elements: [
16
- {
17
- type: "Control",
18
- scope: "#/properties/programType",
4
+ // {
5
+ // type: "WrapperLayout",
6
+ // config: {
7
+ // main: {
8
+ // // label: "Table Columns",
9
+ // divider: true,
10
+ // },
11
+ // wrapperStyle: {
12
+ // border:"1px solid gray"
13
+ // },
14
+ // },
15
+ // elements: [
16
+ // {
17
+ // type: "Control",
18
+ // scope: "#/properties/programType",
19
19
 
20
- options: {
21
- widget: "Box",
22
- },
23
- config: {
24
- layout: 8,
25
- main: {
26
- heading: "Event Table",
27
- },
28
- style: {
29
- fontFamily: "Roboto",
30
- fontWeight: "500",
31
- paddingLeft:"-10px",
32
- fontSize: "20px",},
33
- },
34
- },
35
- {
36
- type: "Control",
37
- scope: "#/properties/Back_Button",
20
+ // options: {
21
+ // widget: "Box",
22
+ // },
23
+ // config: {
24
+ // layout: 8,
25
+ // main: {
26
+ // heading: "Event Table",
27
+ // },
28
+ // style: {
29
+ // fontFamily: "Roboto",
30
+ // fontWeight: "500",
31
+ // paddingLeft:"-10px",
32
+ // fontSize: "20px",},
33
+ // },
34
+ // },
35
+ // {
36
+ // type: "Control",
37
+ // scope: "#/properties/Back_Button",
38
38
 
39
- options: {
40
- widget: "IconButton",
41
- },
42
- config: {
43
- layout: 3,
44
- main: {
45
- icon: "AddIcon",
46
- styleDefault: true,
47
- size: "small",
48
- onClick: "eventAddHandler",
49
- tooltipMessage: "Back",
50
- },
51
- style: {
52
- float: "right",
53
- },
54
- },
55
- },
39
+ // options: {
40
+ // widget: "IconButton",
41
+ // },
42
+ // config: {
43
+ // layout: 3,
44
+ // main: {
45
+ // icon: "AddIcon",
46
+ // styleDefault: true,
47
+ // size: "small",
48
+ // onClick: "eventAddHandler",
49
+ // tooltipMessage: "Back",
50
+ // },
51
+ // style: {
52
+ // float: "right",
53
+ // },
54
+ // },
55
+ // },
56
56
  {
57
57
  type: "Control",
58
58
  scope: "#/properties/events",
@@ -61,6 +61,33 @@ export const EventSection = {
61
61
  },
62
62
  config: {
63
63
  main: {
64
+ headerIcons: {
65
+ elements: [
66
+ {
67
+ widget: {
68
+ type: "Control",
69
+ scope: "#/properties/New_Record",
70
+
71
+ options: {
72
+ widget: "IconButton",
73
+ },
74
+ config: {
75
+ main: {
76
+ color: "info",
77
+ onClick: "eventAddHandler",
78
+ size: "small",
79
+ icon: "AddIcon",
80
+ iconLabel: "Add New",
81
+ styleDefault: true,
82
+ },
83
+ style: {
84
+ mt: "6px",
85
+ },
86
+ },
87
+ }
88
+ },
89
+ ]
90
+ },
64
91
  disableAction: true,
65
92
  disableSelection: true,
66
93
  enableDrag: true,
@@ -124,7 +151,7 @@ export const EventSection = {
124
151
  },
125
152
  ]
126
153
  }]}
127
- ]}
154
+ // ]}
128
155
 
129
156
  export const EventSectionSchema = {
130
157
  events: {
@@ -6,7 +6,7 @@ export default {
6
6
  widget: "MultipleSelect",
7
7
  },
8
8
  config: {
9
- layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
9
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
10
10
  main: {
11
11
  label: "",
12
12
  type: "text",
@@ -6,12 +6,7 @@ export default {
6
6
  widget: "SelectInputField",
7
7
  },
8
8
  config: {
9
- "layout": {
10
- "xs": 11,
11
- "sm": 11,
12
- "md": 5.5,
13
- "lg": 5.5
14
- },
9
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
15
10
  main: {
16
11
  label: "",
17
12
  type: "text",
@@ -1,58 +1,58 @@
1
1
  export const TableSection = {
2
2
  type: "HorizontalLayout",
3
3
  elements: [
4
- {
5
- type: "WrapperLayout",
6
- config: {
7
- main: {
8
- // label: "Table Columns",
9
- // divider: true,
10
- },
11
- wrapperStyle: {
12
- border:"1px solid gray"
13
- },
14
- },
15
- elements: [
16
- {
17
- type: "Control",
18
- scope: "#/properties/programType",
19
-
20
- options: {
21
- widget: "Box",
22
- },
23
- config: {
24
- layout: 8,
25
- main: {
26
- heading: "Components Table",
27
- },
28
- style: {
29
- fontFamily: "Roboto",
30
- fontWeight: "500",
31
- paddingLeft:"-10px",
32
- fontSize: "20px",},
33
- },
34
- },
35
- {
36
- type: "Control",
37
- scope: "#/properties/Back_Button",
38
-
39
- options: {
40
- widget: "IconButton",
41
- },
42
- config: {
43
- layout: 3,
44
- main: {
45
- icon: "AddIcon",
46
- styleDefault: true,
47
- size: "small",
48
- onClick: "widgetAddClickHandler",
49
- tooltipMessage: "Add New",
50
- },
51
- style: {
52
- float: "right",
53
- },
54
- },
55
- },
4
+ // {
5
+ // type: "WrapperLayout",
6
+ // config: {
7
+ // main: {
8
+ // // label: "Table Columns",
9
+ // // divider: true,
10
+ // },
11
+ // wrapperStyle: {
12
+ // border:"1px solid gray"
13
+ // },
14
+ // },
15
+ // elements: [
16
+ // {
17
+ // type: "Control",
18
+ // scope: "#/properties/programType",
19
+
20
+ // options: {
21
+ // widget: "Box",
22
+ // },
23
+ // config: {
24
+ // layout: 8,
25
+ // main: {
26
+ // heading: "Components Table",
27
+ // },
28
+ // style: {
29
+ // fontFamily: "Roboto",
30
+ // fontWeight: "500",
31
+ // paddingLeft:"-10px",
32
+ // fontSize: "20px",},
33
+ // },
34
+ // },
35
+ // {
36
+ // type: "Control",
37
+ // scope: "#/properties/Back_Button",
38
+
39
+ // options: {
40
+ // widget: "IconButton",
41
+ // },
42
+ // config: {
43
+ // layout: 3,
44
+ // main: {
45
+ // icon: "AddIcon",
46
+ // styleDefault: true,
47
+ // size: "small",
48
+ // onClick: "widgetAddClickHandler",
49
+ // tooltipMessage: "Add New",
50
+ // },
51
+ // style: {
52
+ // float: "right",
53
+ // },
54
+ // },
55
+ // },
56
56
  {
57
57
  type: "Control",
58
58
  scope: "#/properties/elements",
@@ -61,13 +61,40 @@ export const TableSection = {
61
61
  },
62
62
  config: {
63
63
  main: {
64
+ headerIcons: {
65
+ elements: [
66
+ {
67
+ widget: {
68
+ type: "Control",
69
+ scope: "#/properties/New_Record",
70
+
71
+ options: {
72
+ widget: "IconButton",
73
+ },
74
+ config: {
75
+ main: {
76
+ color: "info",
77
+ onClick: "widgetAddClickHandler",
78
+ size: "small",
79
+ icon: "AddIcon",
80
+ iconLabel: "Add New",
81
+ styleDefault: true,
82
+ },
83
+ style: {
84
+ mt: "6px",
85
+ },
86
+ },
87
+ }
88
+ },
89
+ ]
90
+ },
64
91
  disableAction: true,
65
92
  disableSelection: true,
66
93
  enableDrag: true,
67
-
94
+
68
95
  },
69
96
  },
70
- elements:[
97
+ elements: [
71
98
  {
72
99
  accessorKey: "name",
73
100
  header: "Name"
@@ -117,8 +144,9 @@ export const TableSection = {
117
144
  },
118
145
  }
119
146
  ]
120
- }]}
121
- ]}
147
+ }]
148
+ }
149
+ // ]}
122
150
 
123
151
  export const TableSectionSchema = {
124
152
  columns: {
@@ -6,12 +6,7 @@ export default {
6
6
  widget: "InputField",
7
7
  },
8
8
  config: {
9
- layout: {
10
- xs: 11,
11
- sm: 11,
12
- md: 5.5,
13
- lg: 5.5,
14
- },
9
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
15
10
  main: {
16
11
  label: "",
17
12
  },
@@ -18,12 +18,7 @@ export const ValidationSection = {
18
18
  widget: "SelectInputField",
19
19
  },
20
20
  config: {
21
- layout: {
22
- xs: 11,
23
- sm: 11,
24
- md: 5.5,
25
- lg: 5.5,
26
- },
21
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
27
22
  main: {
28
23
  label: "Validation Type",
29
24
  },
@@ -37,16 +32,21 @@ export const ValidationSection = {
37
32
  widget: "InputField",
38
33
  },
39
34
  config: {
40
- layout: {
41
- xs: 11,
42
- sm: 11,
43
- md: 5.5,
44
- lg: 5.5,
45
- },
35
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
46
36
  main: {
47
37
  label: "Validation Value",
48
38
  },
49
39
  },
40
+ },
41
+ {
42
+ type: "Control",
43
+ scope: "#/properties/emptyBox",
44
+ options: {
45
+ widget: "EmptyBox"
46
+ },
47
+ config: {
48
+ layout: {xs: 0, sm: 4}
49
+ }
50
50
  }
51
51
  ],
52
52
  },