impaktapps-ui-builder 0.0.101-alpha.4 → 0.0.101-alpha.6

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 (6) hide show
  1. package/dist/impaktapps-ui-builder.es.js +110 -224
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +8 -8
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +254 -338
package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts CHANGED
@@ -1,56 +1,82 @@
1
1
  export const componentBasicUiSchema: any = (theme)=>{
2
2
  const uiSchema = {
3
3
  type: "HorizontalLayout",
4
- heading: "Component",
4
+ heading: "Page-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,
32
31
  id:`component`
33
32
  },
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
+ },
34
46
  },
35
47
 
36
48
  elements: [
37
49
  {
38
- type: "HorizontalLayout",
50
+ type: "WrapperLayout",
51
+ config: {
52
+ main: {
53
+ gap: "8px"
54
+ }
55
+ },
39
56
  elements: [
40
57
  {
41
58
  type: "Control",
42
59
  scope: "#/properties/type",
43
-
44
60
  options: {
45
61
  widget: "SelectInputField",
46
62
  },
47
63
  config: {
48
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
64
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
49
65
  main: {
50
66
  label: "Type",
51
67
  },
52
68
  },
53
69
  },
70
+ {
71
+ type: "Control",
72
+ scope: "#/properties/proc",
73
+ config: {
74
+ layout: { xs: 6, sm: 0, md: 0, lg: 0 },
75
+ },
76
+ options: {
77
+ widget: "EmptyBox",
78
+ },
79
+ },
54
80
  {
55
81
  type: "Control",
56
82
  scope: "#/properties/name",
@@ -59,9 +85,9 @@ export const componentBasicUiSchema: any = (theme)=>{
59
85
  widget: "InputField",
60
86
  },
61
87
  config: {
62
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
88
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
63
89
  main: {
64
- label: "Name",
90
+ label: "Component ID",
65
91
  options: [],
66
92
  color: "secondary",
67
93
  required: true,
@@ -76,7 +102,7 @@ export const componentBasicUiSchema: any = (theme)=>{
76
102
  widget: "InputField",
77
103
  },
78
104
  config: {
79
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
105
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
80
106
  main: {
81
107
  label: "Label",
82
108
  options: [],
@@ -85,157 +111,216 @@ export const componentBasicUiSchema: any = (theme)=>{
85
111
  },
86
112
  },
87
113
  },
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",
114
+ // {//////////////////////////
115
+ // type: "Control",
116
+ // scope: "#/properties/columnFormat",
117
+ // options: {
118
+ // widget: "SelectInputField",
119
+ // },
120
+ // config: {
121
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
122
+ // main: {
123
+ // label: "Column Format",
98
124
 
99
- },
100
- },
101
- },
102
- {
103
- type: "Control",
104
- scope: "#/properties/proc",
105
- config: {
106
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
107
- },
108
- options: {
109
- widget: "EmptyBox",
110
- },
111
- },
125
+ // },
126
+ // },
127
+ // },/////////////////////
112
128
  {
113
129
  type: "Control",
114
130
  scope: "#/properties/proc",
115
131
  config: {
116
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
132
+ layout: { xs: 6, sm: 6, md: 0, lg: 3 },
117
133
  },
118
134
  options: {
119
135
  widget: "EmptyBox",
120
136
  },
121
137
  },
138
+ // {
139
+ // type: "Control",
140
+ // scope: "#/properties/layout",
141
+ // layout: 12,
142
+ // options: {
143
+ // detail: {
144
+ // type: "HorizontalLayout",
145
+ // elements: [
146
+ // {
147
+ // type: "Control",
148
+ // scope: "#/properties/key",
149
+ // options: {
150
+ // widget: "SelectInputField",
151
+ // },
152
+ // config: {
153
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
154
+ // main: {
155
+ // label: "Screen Size",
156
+
157
+ // },
158
+ // },
159
+ // },
160
+ // {
161
+ // type: "Control",
162
+ // scope: "#/properties/value",
163
+
164
+ // options: {
165
+ // widget: "InputField",
166
+ // },
167
+ // config: {
168
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
169
+ // main: {
170
+ // label: "Value",
171
+ // type:"number",
172
+ // // freeSolo:true,
173
+ // helperText:'Number should be in range of 0 to 12',
174
+ // errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
175
+
176
+ // },
177
+ // },
178
+ // },
179
+ // {
180
+ // type: "Control",
181
+ // scope: "#/properties/proc",
182
+ // config: {
183
+ // layout: { xs: 0, sm: 0, md: 4, lg: 4 },
184
+ // },
185
+ // options: {
186
+ // widget: "EmptyBox",
187
+ // },
188
+ // },
189
+ // ],
190
+ // },
191
+ // },
192
+ // },
122
193
  {
123
194
  type: "Control",
124
195
  scope: "#/properties/layout",
125
- layout: 12,
126
196
  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
- },
197
+ widget: "Array",
198
+ },
199
+ config: {
200
+ layout: 12,
201
+ main: {
202
+ label: "Layout",
203
+ childElementLabel: "Layout",
204
+ },
205
+ style: {
206
+ marginLeft: "-24px",
207
+ marginBottom: "24px !important",
208
+ labelStyle: {
209
+ marginLeft: "24px",
210
+ },
211
+ detailsStyle: {
212
+ marginLeft: "24px",
213
+ }
214
+ }
215
+ },
216
+ elements: [
217
+ {
218
+ type: "Control",
219
+ scope: "#/properties/key",
220
+ options: {
221
+ widget: "SelectInputField",
222
+ },
223
+ config: {
224
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
225
+ main: {
226
+ label: "Screen Size",
227
+
143
228
  },
144
- {
145
- type: "Control",
146
- scope: "#/properties/value",
229
+ },
230
+ },
231
+ {
232
+ type: "Control",
233
+ scope: "#/properties/value",
147
234
 
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
- },
162
- },
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
- },
235
+ options: {
236
+ widget: "InputField",
237
+ },
238
+ config: {
239
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
240
+ main: {
241
+ label: "Value",
242
+ type:"number",
243
+ // freeSolo:true,
244
+ helperText:'Number should be in range of 0 to 12',
245
+ errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
246
+
172
247
  },
173
- ],
248
+ },
174
249
  },
175
- },
250
+ {
251
+ type: "Control",
252
+ scope: "#/properties/proc",
253
+ config: {
254
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
255
+ },
256
+ options: {
257
+ widget: "EmptyBox",
258
+ },
259
+ },
260
+ ],
176
261
  },
177
262
  ],
178
263
  },
179
264
  ],
180
265
  },
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
- },
266
+ // {
267
+ // type: "HorizontalLayout",
268
+ // config: {
269
+ // layout:{xs:12,sm: 6}
270
+ // },
271
+ // elements: [
272
+ // {
273
+ // type: "Control",
274
+ // scope: "#/properties/RemoveItemButton",
275
+ // options: {
276
+ // widget: "IconButton",
277
+ // },
278
+ // config: {
279
+ // layout: { xs: 1, sm: 1 },
280
+ // main: {
281
+ // onClick: "RemoveItemButton",
282
+ // size: "large",
283
+ // icon: "RejectIcon",
284
+ // styleDefault: true,
285
+ // },
286
+ // style:{
287
+ // marginLeft: "-10px"
288
+ // }
289
+ // },
290
+ // },
206
291
 
207
- {
208
- type: "Control",
209
- scope: "#/properties/copiedElementDetails",
292
+ // {
293
+ // type: "Control",
294
+ // scope: "#/properties/copiedElementDetails",
210
295
 
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
- },
296
+ // options: {
297
+ // widget: "Box",
298
+ // },
299
+ // config: {
300
+ // layout: { xs: 6, sm: 6 },
301
+ // main: {
302
+ // heading: "No element copied",
303
+ // },
304
+ // style: {
305
+ // color: "#535557",
306
+ // marginLeft: "-10px",
307
+ // fontSize: "12px",
308
+ // marginTop: "4px"
309
+ // },
310
+ // },
311
+ // },
312
+ // {
313
+ // type: "Control",
314
+ // scope: "#/properties/EmptyBox",
315
+ // options: {
316
+ // widget: "EmptyBox",
317
+ // },
318
+ // config: {
319
+ // layout: { xs: 1, sm: 5 },
320
+ // },
321
+ // },
322
+ // ]
323
+ // },
239
324
  {
240
325
  type: "Control",
241
326
  scope: "#/properties/btn",
@@ -244,12 +329,10 @@ export const componentBasicUiSchema: any = (theme)=>{
244
329
  },
245
330
 
246
331
  config: {
247
- layout: { xs: 4, sm: 2 },
332
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
248
333
  main: {
249
334
  name: "Ok",
250
- startIcon: "ApproveIcon",
251
335
  variant: "contained",
252
- // color: "info",
253
336
  type: "text",
254
337
  onClick: "okHandler",
255
338
  size: "medium",
@@ -264,20 +347,26 @@ export const componentBasicUiSchema: any = (theme)=>{
264
347
  },
265
348
 
266
349
  config: {
267
- layout: { xs: 4, sm: 2 },
350
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
268
351
  main: {
269
352
  name: "Save & Exit",
270
- startIcon: "ApproveIcon",
271
353
  variant: "contained",
272
- // color: "info",
273
354
  type: "text",
274
355
  onClick: "saveHandler",
275
356
  size: "medium",
276
357
  },
277
358
  },
278
359
  },
279
-
280
-
360
+ {
361
+ type: "Control",
362
+ scope: "#/properties/EmptyBox",
363
+ config: {
364
+ layout: { xs: 4, sm:7, md: 8, lg: 9 },
365
+ },
366
+ options: {
367
+ widget: "EmptyBox",
368
+ },
369
+ },
281
370
  {
282
371
  type: "Control",
283
372
  scope: "#/properties/popUpComponentSection",
@@ -339,9 +428,7 @@ export const componentBasicUiSchema: any = (theme)=>{
339
428
  layout: 6,
340
429
  main: {
341
430
  name: "No",
342
- startIcon: "ApproveIcon",
343
431
  variant: "contained",
344
- color: "info",
345
432
  type: "text",
346
433
  onClick: "deletePopUpComponent",
347
434
  size: "large",
@@ -375,7 +462,6 @@ export const componentBasicUiSchema: any = (theme)=>{
375
462
  layout: 6,
376
463
  main: {
377
464
  name: "Yes",
378
- startIcon: "ApproveIcon",
379
465
  variant: "contained",
380
466
  color: "error",
381
467
  type: "text",
@@ -465,9 +551,7 @@ export const componentBasicUiSchema: any = (theme)=>{
465
551
  layout: 6,
466
552
  main: {
467
553
  name: "No",
468
- startIcon: "ApproveIcon",
469
554
  variant: "contained",
470
- color: "info",
471
555
  type: "text",
472
556
  onClick: "deletePopUpEvent",
473
557
  size: "large",
@@ -501,7 +585,6 @@ export const componentBasicUiSchema: any = (theme)=>{
501
585
  layout: 6,
502
586
  main: {
503
587
  name: "Yes",
504
- startIcon: "ApproveIcon",
505
588
  variant: "contained",
506
589
  color: "error",
507
590
  type: "text",
@@ -538,112 +621,6 @@ export const componentBasicUiSchema: any = (theme)=>{
538
621
  },
539
622
  layout: 6,
540
623
  },
541
- // {
542
- // type: "HorizontalLayout",
543
- // config: {
544
- // main: {
545
- // direction: 'row'
546
- // },
547
- // style: {
548
- // flexDirection: "row",
549
- // position: "absolute",
550
- // bottom: 0,
551
- // marginBottom: '-8px',
552
- // height: 'fit-content',
553
- // overflow: 'hidden',
554
- // zIndex: 1000,
555
- // width: 'inherit'
556
- // }
557
- // },
558
- // elements: [
559
- // {
560
-
561
- // type: "Control",
562
- // scope: "#/properties/FooterText",
563
- // options: {
564
- // widget: "Box",
565
- // },
566
- // config: {
567
- // main: {
568
- // heading: "Copywriter@ACT21.IO"
569
- // },
570
- // style: {
571
- // color: theme?.palette?.text.disabled || "#AFAFAF",
572
- // fontSize: '11px',
573
- // textAlign: 'center',
574
- // lineHeight: 2,
575
- // width: 'fit-content',
576
- // left: '50%',
577
- // position: 'relative',
578
- // margin: 0,
579
- // flexGrow: 1,
580
- // height: 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',
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
- // }
643
- // },
644
- // },
645
- // ]
646
- // }
647
624
  {
648
625
  type: "HorizontalLayout",
649
626
  config: {
@@ -653,7 +630,7 @@ export const componentBasicUiSchema: any = (theme)=>{
653
630
  style: {
654
631
  flexDirection: "row",
655
632
  position: "absolute",
656
- bottom: 0,
633
+ bottom: 10,
657
634
  height: "fit-content",
658
635
  overflow: "hidden",
659
636
  zIndex: 1000,
@@ -672,81 +649,20 @@ export const componentBasicUiSchema: any = (theme)=>{
672
649
  heading: "Copywriter@ACT21.IO",
673
650
  },
674
651
  style: {
675
- color: theme?.palette?.text?.disabled || "#AFAFAF",
652
+ color: theme?.palette?.text.disabled || "#AFAFAF",
676
653
  fontSize: "11px",
677
654
  textAlign: "center",
678
- lineHeight: 2,
655
+ lineHeight: 0,
679
656
  width: "fit-content",
680
657
  left: "50%",
681
658
  position: "relative",
682
- margin: 0,
659
+ margin: "revert",
683
660
  flexGrow: 1,
684
661
  height: 0,
685
662
  transform: "translate(-50%, 0%)",
686
663
  },
687
664
  },
688
665
  },
689
- {
690
- type: "Control",
691
- scope: "#/properties/FooterBackIcon",
692
- options: {
693
- widget: "Box",
694
- },
695
- config: {
696
- main: {
697
- iconName: "PrevIcon",
698
- onClick: "backHandler",
699
- width: "fit-content",
700
- },
701
- style: {
702
- fill: theme?.palette?.primary?.main,
703
- width: 20,
704
- height: 0,
705
- // margin: 0,
706
- top: 0,
707
- right: { xs: "12px", sm: "84px" },
708
- position: "absolute",
709
- fontSize: "12px",
710
- cursor: "pointer",
711
- ":hover": {
712
- fill: theme?.palette?.primary?.dark,
713
- },
714
- marginRight: "20px",
715
- },
716
- },
717
- },
718
- {
719
- type: "Control",
720
- scope: "#/properties/FooterBackHandlerText",
721
- options: {
722
- widget: "Box",
723
- },
724
- config: {
725
- main: {
726
- heading: "Previous Page",
727
- onClick: "backHandler",
728
- },
729
- style: {
730
- display: { xs: "none", sm: "flex" },
731
- textAlign: "left",
732
- lineHeight: 1,
733
- height: 0,
734
- width: "fit-content",
735
- color: theme?.palette?.primary?.main,
736
- fontSize: "12px",
737
- cursor: "pointer",
738
- marginLeft: "2px",
739
-
740
- top: 3,
741
- right: "12px",
742
- position: "absolute",
743
- ":hover": {
744
- color: theme?.palette?.primary?.dark,
745
- },
746
- marginRight: "4px",
747
- },
748
- },
749
- },
750
666
  ],
751
667
  }
752
668
  ],