impaktapps-ui-builder 0.0.101-alpha.9 → 0.0.102

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.
@@ -1,83 +1,56 @@
1
1
  export const componentBasicUiSchema: any = (theme)=>{
2
2
  const uiSchema = {
3
3
  type: "HorizontalLayout",
4
- heading: "Page-Component",
4
+ heading: "Component",
5
5
  elements: [
6
- // {
7
- // type: "Control",
8
- // scope: "#/properties/pageName",
6
+ {
7
+ type: "Control",
8
+ scope: "#/properties/pageName",
9
9
 
10
- // options: {
11
- // widget: "Box",
12
- // },
13
- // config: {
14
- // layout: 12,
15
- // main: {
16
- // heading: " ",
17
- // },
18
- // style: {
19
- // marginLeft: theme.spacing(3),
20
- // width:"auto",
21
- // fontSize:"12px",
22
- // color:"gray",
23
- // },
24
- // },
25
- // },
10
+ options: {
11
+ widget: "Box",
12
+ },
13
+ config: {
14
+ layout: 12,
15
+ main: {
16
+ heading: " ",
17
+ },
18
+ style: {
19
+ marginLeft: theme.spacing(3),
20
+ width:"auto",
21
+ fontSize:"12px",
22
+ color:"gray",
23
+ },
24
+ },
25
+ },
26
26
  {
27
27
  type: "TabLayout",
28
28
  config: {
29
29
  main: {
30
30
  tabLabels: ["Core"],
31
+ defaultStyle: true,
31
32
  id:`component`
32
33
  },
33
- style: {
34
- TabPanelStyle: {
35
- padding: 0,
36
- }
37
- },
38
- TabsStyle: {
39
- marginBottom: "3px",
40
- paddingBottom: "4px",
41
- boxShadow: "0px 3px 4px #afafaf80",
42
- "& .MuiTabs-indicator": {
43
- bottom: "6px",
44
- }
45
- },
46
34
  },
47
35
 
48
36
  elements: [
49
37
  {
50
- type: "WrapperLayout",
51
- config: {
52
- main: {
53
- label: "",
54
- gap: "8px"
55
- }
56
- },
38
+ type: "HorizontalLayout",
57
39
  elements: [
58
40
  {
59
41
  type: "Control",
60
42
  scope: "#/properties/type",
43
+
61
44
  options: {
62
45
  widget: "SelectInputField",
63
46
  },
64
47
  config: {
65
- layout: { xs: 6, sm: 6, md: 4, lg: 3 },
48
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
66
49
  main: {
67
50
  label: "Type",
68
51
  },
69
52
  },
70
53
  },
71
- {
72
- type: "Control",
73
- scope: "#/properties/proc",
74
- config: {
75
- layout: { xs: 6, sm: 0, md: 0, lg: 0 },
76
- },
77
- options: {
78
- widget: "EmptyBox",
79
- },
80
- },
81
54
  {
82
55
  type: "Control",
83
56
  scope: "#/properties/name",
@@ -86,9 +59,9 @@ export const componentBasicUiSchema: any = (theme)=>{
86
59
  widget: "InputField",
87
60
  },
88
61
  config: {
89
- layout: { xs: 12, sm: 6, md: 4, lg: 3 },
62
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
90
63
  main: {
91
- label: "Component ID",
64
+ label: "Name",
92
65
  options: [],
93
66
  color: "secondary",
94
67
  required: true,
@@ -103,7 +76,7 @@ export const componentBasicUiSchema: any = (theme)=>{
103
76
  widget: "InputField",
104
77
  },
105
78
  config: {
106
- layout: { xs: 6, sm: 6, md: 4, lg: 3 },
79
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
107
80
  main: {
108
81
  label: "Label",
109
82
  options: [],
@@ -112,216 +85,157 @@ export const componentBasicUiSchema: any = (theme)=>{
112
85
  },
113
86
  },
114
87
  },
115
- // {//////////////////////////
116
- // type: "Control",
117
- // scope: "#/properties/columnFormat",
118
- // options: {
119
- // widget: "SelectInputField",
120
- // },
121
- // config: {
122
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
123
- // main: {
124
- // label: "Column Format",
88
+ {
89
+ type: "Control",
90
+ scope: "#/properties/columnFormat",
91
+ options: {
92
+ widget: "SelectInputField",
93
+ },
94
+ config: {
95
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
96
+ main: {
97
+ label: "Column Format",
125
98
 
126
- // },
127
- // },
128
- // },/////////////////////
99
+ },
100
+ },
101
+ },
129
102
  {
130
103
  type: "Control",
131
104
  scope: "#/properties/proc",
132
105
  config: {
133
- layout: { xs: 6, sm: 6, md: 0, lg: 3 },
106
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
134
107
  },
135
108
  options: {
136
109
  widget: "EmptyBox",
137
110
  },
138
111
  },
139
- // {
140
- // type: "Control",
141
- // scope: "#/properties/layout",
142
- // layout: 12,
143
- // options: {
144
- // detail: {
145
- // type: "HorizontalLayout",
146
- // elements: [
147
- // {
148
- // type: "Control",
149
- // scope: "#/properties/key",
150
- // options: {
151
- // widget: "SelectInputField",
152
- // },
153
- // config: {
154
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
155
- // main: {
156
- // label: "Screen Size",
157
-
158
- // },
159
- // },
160
- // },
161
- // {
162
- // type: "Control",
163
- // scope: "#/properties/value",
164
-
165
- // options: {
166
- // widget: "InputField",
167
- // },
168
- // config: {
169
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
170
- // main: {
171
- // label: "Value",
172
- // type:"number",
173
- // // freeSolo:true,
174
- // helperText:'Number should be in range of 0 to 12',
175
- // errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
176
-
177
- // },
178
- // },
179
- // },
180
- // {
181
- // type: "Control",
182
- // scope: "#/properties/proc",
183
- // config: {
184
- // layout: { xs: 0, sm: 0, md: 4, lg: 4 },
185
- // },
186
- // options: {
187
- // widget: "EmptyBox",
188
- // },
189
- // },
190
- // ],
191
- // },
192
- // },
193
- // },
194
112
  {
195
113
  type: "Control",
196
- scope: "#/properties/layout",
197
- options: {
198
- widget: "Array",
199
- },
114
+ scope: "#/properties/proc",
200
115
  config: {
201
- layout: 12,
202
- main: {
203
- label: "Layout",
204
- childElementLabel: "Layout",
205
- },
206
- style: {
207
- marginLeft: "-24px",
208
- marginBottom: "24px !important",
209
- labelStyle: {
210
- marginLeft: "24px",
211
- },
212
- detailsStyle: {
213
- marginLeft: "24px",
214
- }
215
- }
116
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
216
117
  },
217
- elements: [
218
- {
219
- type: "Control",
220
- scope: "#/properties/key",
221
- options: {
222
- widget: "SelectInputField",
223
- },
224
- config: {
225
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
226
- main: {
227
- label: "Screen Size",
228
-
118
+ options: {
119
+ widget: "EmptyBox",
120
+ },
121
+ },
122
+ {
123
+ type: "Control",
124
+ scope: "#/properties/layout",
125
+ layout: 12,
126
+ options: {
127
+ detail: {
128
+ type: "HorizontalLayout",
129
+ elements: [
130
+ {
131
+ type: "Control",
132
+ scope: "#/properties/key",
133
+ options: {
134
+ widget: "SelectInputField",
135
+ },
136
+ config: {
137
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
138
+ main: {
139
+ label: "Screen Size",
140
+
141
+ },
142
+ },
229
143
  },
230
- },
231
- },
232
- {
233
- type: "Control",
234
- scope: "#/properties/value",
144
+ {
145
+ type: "Control",
146
+ scope: "#/properties/value",
235
147
 
236
- options: {
237
- widget: "InputField",
238
- },
239
- config: {
240
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
241
- main: {
242
- label: "Value",
243
- type:"number",
244
- // freeSolo:true,
245
- helperText:'Number should be in range of 0 to 12',
246
- errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
247
-
148
+ options: {
149
+ widget: "InputField",
150
+ },
151
+ config: {
152
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
153
+ main: {
154
+ label: "Value",
155
+ type:"number",
156
+ // freeSolo:true,
157
+ helperText:'Number should be in range of 0 to 12',
158
+ errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
159
+
160
+ },
161
+ },
248
162
  },
249
- },
250
- },
251
- {
252
- type: "Control",
253
- scope: "#/properties/proc",
254
- config: {
255
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
256
- },
257
- options: {
258
- widget: "EmptyBox",
259
- },
163
+ {
164
+ type: "Control",
165
+ scope: "#/properties/proc",
166
+ config: {
167
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
168
+ },
169
+ options: {
170
+ widget: "EmptyBox",
171
+ },
172
+ },
173
+ ],
260
174
  },
261
- ],
175
+ },
262
176
  },
263
177
  ],
264
178
  },
265
179
  ],
266
180
  },
267
- // {
268
- // type: "HorizontalLayout",
269
- // config: {
270
- // layout:{xs:12,sm: 6}
271
- // },
272
- // elements: [
273
- // {
274
- // type: "Control",
275
- // scope: "#/properties/RemoveItemButton",
276
- // options: {
277
- // widget: "IconButton",
278
- // },
279
- // config: {
280
- // layout: { xs: 1, sm: 1 },
281
- // main: {
282
- // onClick: "RemoveItemButton",
283
- // size: "large",
284
- // icon: "RejectIcon",
285
- // styleDefault: true,
286
- // },
287
- // style:{
288
- // marginLeft: "-10px"
289
- // }
290
- // },
291
- // },
181
+ {
182
+ type: "HorizontalLayout",
183
+ config: {
184
+ layout:{xs:12,sm: 6}
185
+ },
186
+ elements: [
187
+ {
188
+ type: "Control",
189
+ scope: "#/properties/RemoveItemButton",
190
+ options: {
191
+ widget: "IconButton",
192
+ },
193
+ config: {
194
+ layout: { xs: 1, sm: 1 },
195
+ main: {
196
+ onClick: "RemoveItemButton",
197
+ size: "large",
198
+ icon: "RejectIcon",
199
+ styleDefault: true,
200
+ },
201
+ style:{
202
+ marginLeft: "-10px"
203
+ }
204
+ },
205
+ },
292
206
 
293
- // {
294
- // type: "Control",
295
- // scope: "#/properties/copiedElementDetails",
207
+ {
208
+ type: "Control",
209
+ scope: "#/properties/copiedElementDetails",
296
210
 
297
- // options: {
298
- // widget: "Box",
299
- // },
300
- // config: {
301
- // layout: { xs: 6, sm: 6 },
302
- // main: {
303
- // heading: "No element copied",
304
- // },
305
- // style: {
306
- // color: "#535557",
307
- // marginLeft: "-10px",
308
- // fontSize: "12px",
309
- // marginTop: "4px"
310
- // },
311
- // },
312
- // },
313
- // {
314
- // type: "Control",
315
- // scope: "#/properties/EmptyBox",
316
- // options: {
317
- // widget: "EmptyBox",
318
- // },
319
- // config: {
320
- // layout: { xs: 1, sm: 5 },
321
- // },
322
- // },
323
- // ]
324
- // },
211
+ options: {
212
+ widget: "Box",
213
+ },
214
+ config: {
215
+ layout: { xs: 6, sm: 6 },
216
+ main: {
217
+ heading: "No element copied",
218
+ },
219
+ style: {
220
+ color: "#535557",
221
+ marginLeft: "-10px",
222
+ fontSize: "12px",
223
+ marginTop: "4px"
224
+ },
225
+ },
226
+ },
227
+ {
228
+ type: "Control",
229
+ scope: "#/properties/EmptyBox",
230
+ options: {
231
+ widget: "EmptyBox",
232
+ },
233
+ config: {
234
+ layout: { xs: 1, sm: 5 },
235
+ },
236
+ },
237
+ ]
238
+ },
325
239
  {
326
240
  type: "Control",
327
241
  scope: "#/properties/btn",
@@ -330,10 +244,12 @@ export const componentBasicUiSchema: any = (theme)=>{
330
244
  },
331
245
 
332
246
  config: {
333
- layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
247
+ layout: { xs: 4, sm: 2 },
334
248
  main: {
335
249
  name: "Ok",
250
+ startIcon: "ApproveIcon",
336
251
  variant: "contained",
252
+ // color: "info",
337
253
  type: "text",
338
254
  onClick: "okHandler",
339
255
  size: "medium",
@@ -348,26 +264,20 @@ export const componentBasicUiSchema: any = (theme)=>{
348
264
  },
349
265
 
350
266
  config: {
351
- layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
267
+ layout: { xs: 4, sm: 2 },
352
268
  main: {
353
269
  name: "Save & Exit",
270
+ startIcon: "ApproveIcon",
354
271
  variant: "contained",
272
+ // color: "info",
355
273
  type: "text",
356
274
  onClick: "saveHandler",
357
275
  size: "medium",
358
276
  },
359
277
  },
360
278
  },
361
- {
362
- type: "Control",
363
- scope: "#/properties/EmptyBox",
364
- config: {
365
- layout: { xs: 4, sm:7, md: 8, lg: 9 },
366
- },
367
- options: {
368
- widget: "EmptyBox",
369
- },
370
- },
279
+
280
+
371
281
  {
372
282
  type: "Control",
373
283
  scope: "#/properties/popUpComponentSection",
@@ -396,7 +306,7 @@ export const componentBasicUiSchema: any = (theme)=>{
396
306
  widget: "Box",
397
307
  },
398
308
  config: {
399
- layout: 11,
309
+ layout: 12,
400
310
  main: {
401
311
  heading: "Are you sure you want to delete ?",
402
312
  },
@@ -414,7 +324,7 @@ export const componentBasicUiSchema: any = (theme)=>{
414
324
  {
415
325
  type: "WrapperLayout",
416
326
  config: {
417
- layout: 11,
327
+ layout: 12,
418
328
  main: {},
419
329
 
420
330
  },
@@ -429,7 +339,9 @@ export const componentBasicUiSchema: any = (theme)=>{
429
339
  layout: 6,
430
340
  main: {
431
341
  name: "No",
342
+ startIcon: "ApproveIcon",
432
343
  variant: "contained",
344
+ color: "info",
433
345
  type: "text",
434
346
  onClick: "deletePopUpComponent",
435
347
  size: "large",
@@ -463,6 +375,7 @@ export const componentBasicUiSchema: any = (theme)=>{
463
375
  layout: 6,
464
376
  main: {
465
377
  name: "Yes",
378
+ startIcon: "ApproveIcon",
466
379
  variant: "contained",
467
380
  color: "error",
468
381
  type: "text",
@@ -519,7 +432,7 @@ export const componentBasicUiSchema: any = (theme)=>{
519
432
  widget: "Box",
520
433
  },
521
434
  config: {
522
- layout: 11,
435
+ layout: 12,
523
436
  main: {
524
437
  heading: "Are you sure you want to delete ?",
525
438
  },
@@ -537,7 +450,7 @@ export const componentBasicUiSchema: any = (theme)=>{
537
450
  {
538
451
  type: "WrapperLayout",
539
452
  config: {
540
- layout: 11,
453
+ layout: 12,
541
454
  main: {},
542
455
 
543
456
  },
@@ -552,7 +465,9 @@ export const componentBasicUiSchema: any = (theme)=>{
552
465
  layout: 6,
553
466
  main: {
554
467
  name: "No",
468
+ startIcon: "ApproveIcon",
555
469
  variant: "contained",
470
+ color: "info",
556
471
  type: "text",
557
472
  onClick: "deletePopUpEvent",
558
473
  size: "large",
@@ -586,6 +501,7 @@ export const componentBasicUiSchema: any = (theme)=>{
586
501
  layout: 6,
587
502
  main: {
588
503
  name: "Yes",
504
+ startIcon: "ApproveIcon",
589
505
  variant: "contained",
590
506
  color: "error",
591
507
  type: "text",
@@ -626,20 +542,22 @@ export const componentBasicUiSchema: any = (theme)=>{
626
542
  type: "HorizontalLayout",
627
543
  config: {
628
544
  main: {
629
- direction: "row",
545
+ direction: 'row'
630
546
  },
631
547
  style: {
632
548
  flexDirection: "row",
633
549
  position: "absolute",
634
- bottom: 10,
635
- height: "fit-content",
636
- overflow: "hidden",
550
+ bottom: 0,
551
+ marginBottom: '-8px',
552
+ height: 'fit-content',
553
+ overflow: 'hidden',
637
554
  zIndex: 1000,
638
- width: "inherit",
639
- },
555
+ width: 'inherit'
556
+ }
640
557
  },
641
558
  elements: [
642
559
  {
560
+
643
561
  type: "Control",
644
562
  scope: "#/properties/FooterText",
645
563
  options: {
@@ -647,24 +565,84 @@ export const componentBasicUiSchema: any = (theme)=>{
647
565
  },
648
566
  config: {
649
567
  main: {
650
- heading: "Copywriter@ACT21.IO",
568
+ heading: "Copywriter@ACT21.IO"
651
569
  },
652
570
  style: {
653
571
  color: theme?.palette?.text.disabled || "#AFAFAF",
654
- fontSize: "11px",
655
- textAlign: "center",
656
- lineHeight: 0,
657
- width: "fit-content",
658
- left: "50%",
659
- position: "relative",
660
- margin: "revert",
572
+ fontSize: '12px',
573
+ textAlign: 'center',
574
+ lineHeight: 2,
575
+ width: 'fit-content',
576
+ left: '50%',
577
+ position: 'relative',
578
+ margin: 0,
661
579
  flexGrow: 1,
662
580
  height: 0,
663
- transform: "translate(-50%, 0%)",
581
+ transform: "translate(-50%,0%)"
582
+ }
583
+ },
584
+ },
585
+ {
586
+ type: "Control",
587
+ scope: "#/properties/backIcon",
588
+ options: {
589
+ widget: "Box",
590
+ },
591
+ config: {
592
+ main: {
593
+ iconName: 'PrevIcon',
594
+ onClick: "backHandler",
595
+ width: 'fit-content',
664
596
  },
597
+ style: {
598
+ fill: theme.palette.primary.main,
599
+ width: 20,
600
+ height: 0,
601
+ margin: 0,
602
+ top: 0,
603
+ right: {xs: '12px', sm: '84px'},
604
+ position: 'absolute',
605
+ fontSize: '12px',
606
+ cursor: 'pointer',
607
+ ':hover': {
608
+ fill: theme.palette.primary.dark,
609
+ }
610
+ }
611
+ }
612
+ },
613
+ {
614
+ type: "Control",
615
+ scope: "#/properties/text",
616
+
617
+ options: {
618
+ widget: "Box",
619
+ },
620
+ config: {
621
+ main: {
622
+ heading: "Previous Page",
623
+ onClick: "backHandler"
624
+ },
625
+ style: {
626
+ display: {xs: 'none', sm: "flex"},
627
+ textAlign: 'left',
628
+ lineHeight: 1,
629
+ height: 0,
630
+ width: 'fit-content',
631
+ color: theme.palette.primary.main,
632
+ fontSize: "12px",
633
+ cursor: 'pointer',
634
+ marginLeft: '2px',
635
+ marginRight: 0,
636
+ top: 3,
637
+ right: '12px',
638
+ position: 'absolute',
639
+ ':hover': {
640
+ color: theme.palette.primary.dark,
641
+ }
642
+ }
665
643
  },
666
644
  },
667
- ],
645
+ ]
668
646
  }
669
647
  ],
670
648
  };