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

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 +111 -179
  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 +203 -291
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-ui-builder",
3
- "version": "0.0.101-alpha.4",
3
+ "version": "0.0.101-alpha.5",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts CHANGED
@@ -1,36 +1,48 @@
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: [
@@ -40,17 +52,26 @@ export const componentBasicUiSchema: any = (theme)=>{
40
52
  {
41
53
  type: "Control",
42
54
  scope: "#/properties/type",
43
-
44
55
  options: {
45
56
  widget: "SelectInputField",
46
57
  },
47
58
  config: {
48
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
59
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
49
60
  main: {
50
61
  label: "Type",
51
62
  },
52
63
  },
53
64
  },
65
+ {
66
+ type: "Control",
67
+ scope: "#/properties/proc",
68
+ config: {
69
+ layout: { xs: 6, sm: 0, md: 0, lg: 0 },
70
+ },
71
+ options: {
72
+ widget: "EmptyBox",
73
+ },
74
+ },
54
75
  {
55
76
  type: "Control",
56
77
  scope: "#/properties/name",
@@ -59,9 +80,9 @@ export const componentBasicUiSchema: any = (theme)=>{
59
80
  widget: "InputField",
60
81
  },
61
82
  config: {
62
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
83
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
63
84
  main: {
64
- label: "Name",
85
+ label: "Component ID",
65
86
  options: [],
66
87
  color: "secondary",
67
88
  required: true,
@@ -76,7 +97,7 @@ export const componentBasicUiSchema: any = (theme)=>{
76
97
  widget: "InputField",
77
98
  },
78
99
  config: {
79
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
100
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
80
101
  main: {
81
102
  label: "Label",
82
103
  options: [],
@@ -85,35 +106,25 @@ export const componentBasicUiSchema: any = (theme)=>{
85
106
  },
86
107
  },
87
108
  },
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",
109
+ // {//////////////////////////
110
+ // type: "Control",
111
+ // scope: "#/properties/columnFormat",
112
+ // options: {
113
+ // widget: "SelectInputField",
114
+ // },
115
+ // config: {
116
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
117
+ // main: {
118
+ // label: "Column Format",
98
119
 
99
- },
100
- },
101
- },
120
+ // },
121
+ // },
122
+ // },/////////////////////
102
123
  {
103
124
  type: "Control",
104
125
  scope: "#/properties/proc",
105
126
  config: {
106
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
107
- },
108
- options: {
109
- widget: "EmptyBox",
110
- },
111
- },
112
- {
113
- type: "Control",
114
- scope: "#/properties/proc",
115
- config: {
116
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
127
+ layout: { xs: 6, sm: 6, md: 0, lg: 3 },
117
128
  },
118
129
  options: {
119
130
  widget: "EmptyBox",
@@ -174,68 +185,138 @@ export const componentBasicUiSchema: any = (theme)=>{
174
185
  },
175
186
  },
176
187
  },
188
+ //////////////////////////////////////////////////////
189
+ {
190
+ type: "Control",
191
+ scope: "#/properties/layout",
192
+ options: {
193
+ widget: "Array",
194
+ },
195
+ config: {
196
+ layout: 12,
197
+ main: {
198
+ label: "Layout",
199
+ childElementLabel: "Layout",
200
+ },
201
+ style: {
202
+ marginLeft: "-24px",
203
+ marginBottom: "24px !important",
204
+ labelStyle: {
205
+ marginLeft: "24px",
206
+ },
207
+ detailsStyle: {
208
+ marginLeft: "24px",
209
+ }
210
+ }
211
+ },
212
+ elements: [
213
+ {
214
+ type: "Control",
215
+ scope: "#/properties/key",
216
+ options: {
217
+ widget: "SelectInputField",
218
+ },
219
+ config: {
220
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
221
+ main: {
222
+ label: "Screen Size",
223
+
224
+ },
225
+ },
226
+ },
227
+ {
228
+ type: "Control",
229
+ scope: "#/properties/value",
230
+
231
+ options: {
232
+ widget: "InputField",
233
+ },
234
+ config: {
235
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
236
+ main: {
237
+ label: "Value",
238
+ type:"number",
239
+ // freeSolo:true,
240
+ helperText:'Number should be in range of 0 to 12',
241
+ errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
242
+
243
+ },
244
+ },
245
+ },
246
+ {
247
+ type: "Control",
248
+ scope: "#/properties/proc",
249
+ config: {
250
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
251
+ },
252
+ options: {
253
+ widget: "EmptyBox",
254
+ },
255
+ },
256
+ ],
257
+ },
177
258
  ],
178
259
  },
179
260
  ],
180
261
  },
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
- },
262
+ // {
263
+ // type: "HorizontalLayout",
264
+ // config: {
265
+ // layout:{xs:12,sm: 6}
266
+ // },
267
+ // elements: [
268
+ // {
269
+ // type: "Control",
270
+ // scope: "#/properties/RemoveItemButton",
271
+ // options: {
272
+ // widget: "IconButton",
273
+ // },
274
+ // config: {
275
+ // layout: { xs: 1, sm: 1 },
276
+ // main: {
277
+ // onClick: "RemoveItemButton",
278
+ // size: "large",
279
+ // icon: "RejectIcon",
280
+ // styleDefault: true,
281
+ // },
282
+ // style:{
283
+ // marginLeft: "-10px"
284
+ // }
285
+ // },
286
+ // },
206
287
 
207
- {
208
- type: "Control",
209
- scope: "#/properties/copiedElementDetails",
288
+ // {
289
+ // type: "Control",
290
+ // scope: "#/properties/copiedElementDetails",
210
291
 
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
- },
292
+ // options: {
293
+ // widget: "Box",
294
+ // },
295
+ // config: {
296
+ // layout: { xs: 6, sm: 6 },
297
+ // main: {
298
+ // heading: "No element copied",
299
+ // },
300
+ // style: {
301
+ // color: "#535557",
302
+ // marginLeft: "-10px",
303
+ // fontSize: "12px",
304
+ // marginTop: "4px"
305
+ // },
306
+ // },
307
+ // },
308
+ // {
309
+ // type: "Control",
310
+ // scope: "#/properties/EmptyBox",
311
+ // options: {
312
+ // widget: "EmptyBox",
313
+ // },
314
+ // config: {
315
+ // layout: { xs: 1, sm: 5 },
316
+ // },
317
+ // },
318
+ // ]
319
+ // },
239
320
  {
240
321
  type: "Control",
241
322
  scope: "#/properties/btn",
@@ -244,12 +325,10 @@ export const componentBasicUiSchema: any = (theme)=>{
244
325
  },
245
326
 
246
327
  config: {
247
- layout: { xs: 4, sm: 2 },
328
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
248
329
  main: {
249
330
  name: "Ok",
250
- startIcon: "ApproveIcon",
251
331
  variant: "contained",
252
- // color: "info",
253
332
  type: "text",
254
333
  onClick: "okHandler",
255
334
  size: "medium",
@@ -264,20 +343,26 @@ export const componentBasicUiSchema: any = (theme)=>{
264
343
  },
265
344
 
266
345
  config: {
267
- layout: { xs: 4, sm: 2 },
346
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
268
347
  main: {
269
348
  name: "Save & Exit",
270
- startIcon: "ApproveIcon",
271
349
  variant: "contained",
272
- // color: "info",
273
350
  type: "text",
274
351
  onClick: "saveHandler",
275
352
  size: "medium",
276
353
  },
277
354
  },
278
355
  },
279
-
280
-
356
+ {
357
+ type: "Control",
358
+ scope: "#/properties/EmptyBox",
359
+ config: {
360
+ layout: { xs: 4, sm:7, md: 8, lg: 9 },
361
+ },
362
+ options: {
363
+ widget: "EmptyBox",
364
+ },
365
+ },
281
366
  {
282
367
  type: "Control",
283
368
  scope: "#/properties/popUpComponentSection",
@@ -339,9 +424,7 @@ export const componentBasicUiSchema: any = (theme)=>{
339
424
  layout: 6,
340
425
  main: {
341
426
  name: "No",
342
- startIcon: "ApproveIcon",
343
427
  variant: "contained",
344
- color: "info",
345
428
  type: "text",
346
429
  onClick: "deletePopUpComponent",
347
430
  size: "large",
@@ -375,7 +458,6 @@ export const componentBasicUiSchema: any = (theme)=>{
375
458
  layout: 6,
376
459
  main: {
377
460
  name: "Yes",
378
- startIcon: "ApproveIcon",
379
461
  variant: "contained",
380
462
  color: "error",
381
463
  type: "text",
@@ -465,9 +547,7 @@ export const componentBasicUiSchema: any = (theme)=>{
465
547
  layout: 6,
466
548
  main: {
467
549
  name: "No",
468
- startIcon: "ApproveIcon",
469
550
  variant: "contained",
470
- color: "info",
471
551
  type: "text",
472
552
  onClick: "deletePopUpEvent",
473
553
  size: "large",
@@ -501,7 +581,6 @@ export const componentBasicUiSchema: any = (theme)=>{
501
581
  layout: 6,
502
582
  main: {
503
583
  name: "Yes",
504
- startIcon: "ApproveIcon",
505
584
  variant: "contained",
506
585
  color: "error",
507
586
  type: "text",
@@ -538,112 +617,6 @@ export const componentBasicUiSchema: any = (theme)=>{
538
617
  },
539
618
  layout: 6,
540
619
  },
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
620
  {
648
621
  type: "HorizontalLayout",
649
622
  config: {
@@ -653,7 +626,7 @@ export const componentBasicUiSchema: any = (theme)=>{
653
626
  style: {
654
627
  flexDirection: "row",
655
628
  position: "absolute",
656
- bottom: 0,
629
+ bottom: 10,
657
630
  height: "fit-content",
658
631
  overflow: "hidden",
659
632
  zIndex: 1000,
@@ -672,81 +645,20 @@ export const componentBasicUiSchema: any = (theme)=>{
672
645
  heading: "Copywriter@ACT21.IO",
673
646
  },
674
647
  style: {
675
- color: theme?.palette?.text?.disabled || "#AFAFAF",
648
+ color: theme?.palette?.text.disabled || "#AFAFAF",
676
649
  fontSize: "11px",
677
650
  textAlign: "center",
678
- lineHeight: 2,
651
+ lineHeight: 0,
679
652
  width: "fit-content",
680
653
  left: "50%",
681
654
  position: "relative",
682
- margin: 0,
655
+ margin: "revert",
683
656
  flexGrow: 1,
684
657
  height: 0,
685
658
  transform: "translate(-50%, 0%)",
686
659
  },
687
660
  },
688
661
  },
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
662
  ],
751
663
  }
752
664
  ],