impaktapps-ui-builder 0.0.101-alpha.1 → 0.0.101-alpha.3

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 +119 -180
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +5 -5
  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/PageMaster/uiSchema.ts +186 -295
package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts CHANGED
@@ -2,16 +2,15 @@ import { EventUiSchema } from "../event/uiSchema"
2
2
  export const PageMasterUiSchema: any = (theme) => {
3
3
  const uiSchema = {
4
4
  type: "HorizontalLayout",
5
- heading: "Page Master",
5
+ heading: "Page",
6
6
  elements: [
7
7
  {
8
8
  type: "WrapperLayout",
9
9
  config: {
10
10
  main: {
11
- },
12
- wrapperStyle: {
13
- marginLeft: theme.spacing(2),
14
- backgroundColor: theme.palette.background.default
11
+ label: "Basic Details",
12
+ isAccordion: true,
13
+ gap: "8px",
15
14
  },
16
15
  },
17
16
  elements: [
@@ -23,9 +22,9 @@ export const PageMasterUiSchema: any = (theme) => {
23
22
  widget: "InputField",
24
23
  },
25
24
  config: {
26
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
25
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
27
26
  main: {
28
- label: "Name",
27
+ label: "Page Name",
29
28
  options: [],
30
29
  color: "secondary",
31
30
  errorMessage: "Name should be start with 'page_'",
@@ -34,27 +33,27 @@ export const PageMasterUiSchema: any = (theme) => {
34
33
  },
35
34
  },
36
35
  },
37
- {
38
- type: "Control",
39
- scope: "#/properties/template",
36
+ // {
37
+ // type: "Control",
38
+ // scope: "#/properties/template",
40
39
 
41
- options: {
42
- widget: "SelectInputField",
43
- },
44
- config: {
45
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
46
- main: {
47
- label: "Template",
48
- options: [
49
- { const: "template1", title: "template1" },
50
- { const: "template2", title: "template2" },
51
- { const: "template3", title: "template3" }
52
- ],
53
- color: "secondary",
54
- required: true,
55
- },
56
- },
57
- },
40
+ // options: {
41
+ // widget: "SelectInputField",
42
+ // },
43
+ // config: {
44
+ // layout: { xs: 6, sm: 6, md: 4, lg: 3 },
45
+ // main: {
46
+ // label: "Template",
47
+ // options: [
48
+ // { const: "template1", title: "template1" },
49
+ // { const: "template2", title: "template2" },
50
+ // { const: "template3", title: "template3" }
51
+ // ],
52
+ // color: "secondary",
53
+ // required: true,
54
+ // },
55
+ // },
56
+ // },
58
57
  {
59
58
  type: "Control",
60
59
  scope: "#/properties/label",
@@ -63,9 +62,9 @@ export const PageMasterUiSchema: any = (theme) => {
63
62
  widget: "InputField",
64
63
  },
65
64
  config: {
66
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
65
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
67
66
  main: {
68
- label: "Label",
67
+ label: "Page Heading",
69
68
  options: [],
70
69
  color: "secondary",
71
70
  required: true,
@@ -76,7 +75,7 @@ export const PageMasterUiSchema: any = (theme) => {
76
75
  type: "Control",
77
76
  scope: "#/properties/EmptyBox",
78
77
  config: {
79
- layout: { xs: 6, sm: 6, md: 0, lg: 0 },
78
+ layout: { xs: 0, sm: 0, md: 4, lg: 6 },
80
79
  },
81
80
  options: {
82
81
  widget: "EmptyBox",
@@ -87,11 +86,25 @@ export const PageMasterUiSchema: any = (theme) => {
87
86
  {
88
87
  type: "TabLayout",
89
88
  config: {
89
+ layout: 12,
90
90
  main: {
91
- tabLabels: ["Components", "Events"],
92
- divider: true,
91
+ tabLabels: ["Page Components", "Page Events"],
92
+ },
93
+ style: {
94
+ marginTop: "-16px",
95
+ TabPanelStyle: {
96
+ padding: 0,
97
+ }
98
+ },
99
+ TabsStyle: {
100
+ borderTop: `1px solid ${theme.palette.common.black}29`,
101
+ marginBottom: "3px",
102
+ paddingBottom: "4px",
103
+ boxShadow: "0px 3px 4px #afafaf80",
104
+ "& .MuiTabs-indicator": {
105
+ bottom: "6px",
106
+ }
93
107
  },
94
- defaultStyle: true,
95
108
  },
96
109
  elements: [
97
110
  {
@@ -108,26 +121,29 @@ export const PageMasterUiSchema: any = (theme) => {
108
121
  widget: {
109
122
  type: "Control",
110
123
  scope: "#/properties/New_Record",
111
-
112
124
  options: {
113
125
  widget: "IconButton",
114
126
  },
115
127
  config: {
116
128
  main: {
117
- // color: "info",
118
129
  onClick: "onAddClickHandler",
119
130
  size: "small",
120
- icon: "AddIcon",
121
- iconLabel: "Add New",
131
+ icon: "TableAddIcon",
132
+ iconLabel: "Add",
122
133
  styleDefault: true,
123
134
  },
124
135
  style: {
125
136
  mt: "6px",
137
+ color: "inherit",
138
+ fill: "inherit",
139
+ "&:hover": {
140
+ color: "inherit",
141
+ fill: "inherit",
142
+ }
126
143
  },
127
144
  },
128
145
  }
129
146
  },
130
-
131
147
  {
132
148
  widget: {
133
149
  type: "Control",
@@ -138,15 +154,20 @@ export const PageMasterUiSchema: any = (theme) => {
138
154
  },
139
155
  config: {
140
156
  main: {
141
- // color: "info",
142
157
  onClick: "copyPasteElement",
143
158
  size: "small",
144
- icon: "PasteIcon",
159
+ icon: "TablePasteIcon",
145
160
  iconLabel: "Paste",
146
161
  styleDefault: true,
147
162
  },
148
163
  style: {
149
164
  mt: "6px",
165
+ color: "inherit",
166
+ fill: "inherit",
167
+ "&:hover": {
168
+ color: "inherit",
169
+ fill: "inherit",
170
+ }
150
171
  },
151
172
  },
152
173
  }
@@ -161,18 +182,21 @@ export const PageMasterUiSchema: any = (theme) => {
161
182
  elements: [
162
183
  {
163
184
  accessorKey: "name",
164
-
165
185
  header: "Name",
186
+ size: 300,
187
+ type: "string"
166
188
  },
167
189
  {
168
190
  accessorKey: "type",
169
-
170
191
  header: "Type",
192
+ size: 300,
193
+ type: "string"
171
194
  },
172
195
  {
173
196
  header: "Edit",
174
197
  field: "Reject_Records",
175
- flex: 1,
198
+ size: 150,
199
+ type: "action",
176
200
  widget: {
177
201
  type: "Control",
178
202
  scope: "#/properties/RejectButton",
@@ -181,13 +205,15 @@ export const PageMasterUiSchema: any = (theme) => {
181
205
  },
182
206
  config: {
183
207
  main: {
184
- icon: "EditIcon",
185
- color: "primary",
208
+ icon: "TableEditIcon",
186
209
  onClick: "Edit_Components",
187
210
  tooltipMessage: "Edit This Record",
188
211
  },
189
212
  style: {
190
- color: theme.palette.primary.main,
213
+ fill: theme.palette.primary.main,
214
+ "& :hover": {
215
+ fill: theme.palette.primary.dark,
216
+ },
191
217
  },
192
218
  },
193
219
  },
@@ -195,7 +221,8 @@ export const PageMasterUiSchema: any = (theme) => {
195
221
  {
196
222
  header: "Delete",
197
223
  field: "Reject_Records",
198
- flex: 1,
224
+ size: 150,
225
+ type: "action",
199
226
  widget: {
200
227
  type: "Control",
201
228
  scope: "#/properties/RejectButton",
@@ -204,15 +231,19 @@ export const PageMasterUiSchema: any = (theme) => {
204
231
  },
205
232
  config: {
206
233
  main: {
207
- icon: "RejectIcon",
208
- color: "error",
234
+ icon: "Bin",
209
235
  onClick: "deletePopUpComponent",
210
236
  tooltipMessage: "Reject This Record",
211
237
  },
238
+ style: {
239
+ fill: theme.palette.primary.main,
240
+ "& :hover": {
241
+ fill: theme.palette.primary.dark,
242
+ },
243
+ },
212
244
  },
213
245
  },
214
246
  },
215
-
216
247
  {
217
248
  header: "Copy",
218
249
  field: "Copy_Component",
@@ -233,8 +264,6 @@ export const PageMasterUiSchema: any = (theme) => {
233
264
  },
234
265
  },
235
266
  },
236
-
237
-
238
267
  ]
239
268
  },
240
269
  {
@@ -251,21 +280,25 @@ export const PageMasterUiSchema: any = (theme) => {
251
280
  widget: {
252
281
  type: "Control",
253
282
  scope: "#/properties/New_Record",
254
-
255
283
  options: {
256
284
  widget: "IconButton",
257
285
  },
258
286
  config: {
259
287
  main: {
260
- // color: "info",
261
288
  onClick: "eventAddHandler",
262
289
  size: "small",
263
- icon: "AddIcon",
264
- iconLabel: "Add New",
290
+ icon: "TableAddIcon",
291
+ iconLabel: "Add",
265
292
  styleDefault: true,
266
293
  },
267
294
  style: {
268
295
  mt: "6px",
296
+ color: "inherit",
297
+ fill: "inherit",
298
+ "&:hover": {
299
+ color: "inherit",
300
+ fill: "inherit",
301
+ }
269
302
  },
270
303
  },
271
304
  }
@@ -281,15 +314,20 @@ export const PageMasterUiSchema: any = (theme) => {
281
314
  },
282
315
  config: {
283
316
  main: {
284
- // color: "info",
285
317
  onClick: "copyPasteElement",
286
318
  size: "small",
287
- icon: "PasteIcon",
319
+ icon: "TablePasteIcon",
288
320
  iconLabel: "Paste",
289
321
  styleDefault: true,
290
322
  },
291
323
  style: {
292
324
  mt: "6px",
325
+ color: "inherit",
326
+ fill: "inherit",
327
+ "&:hover": {
328
+ color: "inherit",
329
+ fill: "inherit",
330
+ }
293
331
  },
294
332
  },
295
333
  }
@@ -308,14 +346,20 @@ export const PageMasterUiSchema: any = (theme) => {
308
346
  {
309
347
  accessorKey: "eventType",
310
348
  header: "Event Type",
349
+ size: 300,
350
+ type: "string"
311
351
  },
312
352
  {
313
353
  accessorKey: "Handler",
314
354
  header: "Handler",
355
+ size: 300,
356
+ type: "string"
315
357
  },
316
358
  {
317
359
  accessorKey: "Edit_Approve_Records",
318
360
  header: "Edit Widget",
361
+ type: "action",
362
+ size: 150,
319
363
  widget: {
320
364
  type: "Control",
321
365
  scope: "#/properties/Edit_Records",
@@ -324,14 +368,16 @@ export const PageMasterUiSchema: any = (theme) => {
324
368
  },
325
369
  config: {
326
370
  main: {
327
- color: "info",
328
371
  size: "small",
329
- icon: "EditIcon",
372
+ icon: "TableEditIcon",
330
373
  tooltipMessage: "Edit This Record",
331
374
  onClick: "editEvent",
332
375
  },
333
376
  style: {
334
- color: theme.palette.primary.main,
377
+ fill: theme.palette.primary.main,
378
+ "& :hover": {
379
+ fill: theme.palette.primary.dark,
380
+ },
335
381
  },
336
382
  },
337
383
  },
@@ -347,16 +393,19 @@ export const PageMasterUiSchema: any = (theme) => {
347
393
  },
348
394
  config: {
349
395
  main: {
350
- icon: "RejectIcon",
351
- color: "error",
396
+ icon: "Bin",
352
397
  tooltipMessage: "Reject This Record",
353
398
  onClick: "deletePopUpEvent",
354
399
  },
400
+ style: {
401
+ fill: theme.palette.primary.main,
402
+ "& :hover": {
403
+ fill: theme.palette.primary.dark,
404
+ },
405
+ },
355
406
  },
356
407
  },
357
408
  },
358
-
359
-
360
409
  {
361
410
  header: "Copy",
362
411
  field: "Copy_Event",
@@ -376,71 +425,71 @@ export const PageMasterUiSchema: any = (theme) => {
376
425
  },
377
426
  },
378
427
  },
379
- },
428
+ },////////////////
380
429
  ]
381
430
  // }]
382
431
  },
383
432
 
384
433
  ],
385
434
  },
386
- {
387
- type: "HorizontalLayout",
388
- config: {
389
- layout:{xs:12,sm: 9}
390
- },
391
- elements: [
392
- {
393
- type: "Control",
394
- scope: "#/properties/RemoveItemButton",
395
- options: {
396
- widget: "IconButton",
397
- },
398
- config: {
399
- layout: { xs: 1, sm: 1 },
400
- main: {
401
- onClick: "RemoveItemButton",
402
- size: "large",
403
- icon: "RejectIcon",
404
- styleDefault: true,
405
- },
406
- style:{
407
- marginLeft: "-5px"
408
- }
409
- },
410
- },
435
+ // {
436
+ // type: "HorizontalLayout",
437
+ // config: {
438
+ // layout:{xs:12,sm: 9}
439
+ // },
440
+ // elements: [
441
+ // {
442
+ // type: "Control",
443
+ // scope: "#/properties/RemoveItemButton",
444
+ // options: {
445
+ // widget: "IconButton",
446
+ // },
447
+ // config: {
448
+ // layout: { xs: 1, sm: 1 },
449
+ // main: {
450
+ // onClick: "RemoveItemButton",
451
+ // size: "large",
452
+ // icon: "RejectIcon",
453
+ // styleDefault: true,
454
+ // },
455
+ // style:{
456
+ // marginLeft: "-5px"
457
+ // }
458
+ // },
459
+ // },
411
460
 
412
- {
413
- type: "Control",
414
- scope: "#/properties/copiedElementDetails",
461
+ // {
462
+ // type: "Control",
463
+ // scope: "#/properties/copiedElementDetails",
415
464
 
416
- options: {
417
- widget: "Box",
418
- },
419
- config: {
420
- layout: { xs: 6, sm: 6 },
421
- main: {
422
- heading: "No element copied",
423
- },
424
- style: {
425
- color: "#535557",
426
- marginLeft: "-30px",
427
- fontSize: "12px",
428
- marginTop: "4px"
429
- },
430
- },
431
- },
432
- {
433
- type: "Control",
434
- scope: "#/properties/EmptyBox",
435
- options: {
436
- widget: "EmptyBox",
437
- },
438
- config: {
439
- layout: { xs: 1, sm: 5 },
440
- },
441
- },
442
- ]
443
- },
465
+ // options: {
466
+ // widget: "Box",
467
+ // },
468
+ // config: {
469
+ // layout: { xs: 6, sm: 6 },
470
+ // main: {
471
+ // heading: "No element copied",
472
+ // },
473
+ // style: {
474
+ // color: "#535557",
475
+ // marginLeft: "-30px",
476
+ // fontSize: "12px",
477
+ // marginTop: "4px"
478
+ // },
479
+ // },
480
+ // },
481
+ // {
482
+ // type: "Control",
483
+ // scope: "#/properties/EmptyBox",
484
+ // options: {
485
+ // widget: "EmptyBox",
486
+ // },
487
+ // config: {
488
+ // layout: { xs: 1, sm: 5 },
489
+ // },
490
+ // },
491
+ // ]
492
+ // },
444
493
  {
445
494
  type: "Control",
446
495
  scope: "#/properties/btn",
@@ -449,18 +498,27 @@ export const PageMasterUiSchema: any = (theme) => {
449
498
  },
450
499
 
451
500
  config: {
452
- layout: { xs: 4, sm: 2 },
501
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
453
502
  main: {
454
503
  name: "Save",
455
504
  startIcon: "ApproveIcon",
456
505
  variant: "contained",
457
- // color: "info",
458
506
  type: "text",
459
507
  onClick: "saveHandler",
460
508
  size: "medium",
461
509
  },
462
510
  },
463
511
  },
512
+ {
513
+ type: "Control",
514
+ scope: "#/properties/EmptyBox",
515
+ config: {
516
+ layout: { xs: 8, sm:9.5, md: 10, lg: 10.5 },
517
+ },
518
+ options: {
519
+ widget: "EmptyBox",
520
+ },
521
+ },
464
522
  {
465
523
  type: "Control",
466
524
  scope: "#/properties/popUpPageMasterComponent",
@@ -721,112 +779,6 @@ export const PageMasterUiSchema: any = (theme) => {
721
779
  },
722
780
  layout: 6,
723
781
  },
724
- // {
725
- // type: "HorizontalLayout",
726
- // config: {
727
- // main: {
728
- // direction: 'row'
729
- // },
730
- // style: {
731
- // flexDirection: "row",
732
- // position: "absolute",
733
- // bottom: 0,
734
- // marginBottom: '-8px',
735
- // height: 'fit-content',
736
- // overflow: 'hidden',
737
- // zIndex: 1000,
738
- // width: 'inherit'
739
- // }
740
- // },
741
- // elements: [
742
- // {
743
-
744
- // type: "Control",
745
- // scope: "#/properties/FooterText",
746
- // options: {
747
- // widget: "Box",
748
- // },
749
- // config: {
750
- // main: {
751
- // heading: "Copywriter@ACT21.IO"
752
- // },
753
- // style: {
754
- // color: theme?.palette?.text.disabled || "#AFAFAF",
755
- // fontSize: '12px',
756
- // textAlign: 'center',
757
- // lineHeight: 2,
758
- // width: 'fit-content',
759
- // left: '50%',
760
- // position: 'relative',
761
- // margin: 0,
762
- // flexGrow: 1,
763
- // height: 0,
764
- // transform: "translate(-50%,0%)"
765
- // }
766
- // },
767
- // },
768
- // {
769
- // type: "Control",
770
- // scope: "#/properties/backIcon",
771
- // options: {
772
- // widget: "Box",
773
- // },
774
- // config: {
775
- // main: {
776
- // iconName: 'PrevIcon',
777
- // onClick: "backHandler",
778
- // width: 'fit-content',
779
- // },
780
- // style: {
781
- // fill: theme.palette.primary.main,
782
- // width: 20,
783
- // height: 0,
784
- // margin: 0,
785
- // top: 0,
786
- // right: {xs: '12px', sm: '84px'},
787
- // position: 'absolute',
788
- // fontSize: '12px',
789
- // cursor: 'pointer',
790
- // ':hover': {
791
- // fill: theme.palette.primary.dark,
792
- // }
793
- // }
794
- // }
795
- // },
796
- // {
797
- // type: "Control",
798
- // scope: "#/properties/text",
799
-
800
- // options: {
801
- // widget: "Box",
802
- // },
803
- // config: {
804
- // main: {
805
- // heading: "Previous Page",
806
- // onClick: "backHandler"
807
- // },
808
- // style: {
809
- // display: {xs: 'none', sm: "flex"},
810
- // textAlign: 'left',
811
- // lineHeight: 1,
812
- // height: 0,
813
- // width: 'fit-content',
814
- // color: theme.palette.primary.main,
815
- // fontSize: "12px",
816
- // cursor: 'pointer',
817
- // marginLeft: '2px',
818
- // marginRight: 0,
819
- // top: 3,
820
- // right: '12px',
821
- // position: 'absolute',
822
- // ':hover': {
823
- // color: theme.palette.primary.dark,
824
- // }
825
- // }
826
- // },
827
- // },
828
- // ]
829
- // }
830
782
  {
831
783
  type: "HorizontalLayout",
832
784
  config: {
@@ -836,7 +788,7 @@ export const PageMasterUiSchema: any = (theme) => {
836
788
  style: {
837
789
  flexDirection: "row",
838
790
  position: "absolute",
839
- bottom: 0,
791
+ bottom: 10,
840
792
  height: "fit-content",
841
793
  overflow: "hidden",
842
794
  zIndex: 1000,
@@ -855,81 +807,20 @@ export const PageMasterUiSchema: any = (theme) => {
855
807
  heading: "Copywriter@ACT21.IO",
856
808
  },
857
809
  style: {
858
- color: theme?.palette?.text?.disabled || "#AFAFAF",
810
+ color: theme?.palette?.text.disabled || "#AFAFAF",
859
811
  fontSize: "11px",
860
812
  textAlign: "center",
861
- lineHeight: 2,
813
+ lineHeight: 0,
862
814
  width: "fit-content",
863
815
  left: "50%",
864
816
  position: "relative",
865
- margin: 0,
817
+ margin: "revert",
866
818
  flexGrow: 1,
867
819
  height: 0,
868
820
  transform: "translate(-50%, 0%)",
869
821
  },
870
822
  },
871
823
  },
872
- {
873
- type: "Control",
874
- scope: "#/properties/FooterBackIcon",
875
- options: {
876
- widget: "Box",
877
- },
878
- config: {
879
- main: {
880
- iconName: "PrevIcon",
881
- onClick: "backHandler",
882
- width: "fit-content",
883
- },
884
- style: {
885
- fill: theme?.palette?.primary?.main,
886
- width: 20,
887
- height: 0,
888
- // margin: 0,
889
- top: 0,
890
- right: { xs: "12px", sm: "84px" },
891
- position: "absolute",
892
- fontSize: "12px",
893
- cursor: "pointer",
894
- ":hover": {
895
- fill: theme?.palette?.primary?.dark,
896
- },
897
- marginRight: "20px",
898
- },
899
- },
900
- },
901
- {
902
- type: "Control",
903
- scope: "#/properties/FooterBackHandlerText",
904
- options: {
905
- widget: "Box",
906
- },
907
- config: {
908
- main: {
909
- heading: "Previous Page",
910
- onClick: "backHandler",
911
- },
912
- style: {
913
- display: { xs: "none", sm: "flex" },
914
- textAlign: "left",
915
- lineHeight: 1,
916
- height: 0,
917
- width: "fit-content",
918
- color: theme?.palette?.primary?.main,
919
- fontSize: "12px",
920
- cursor: "pointer",
921
- marginLeft: "2px",
922
-
923
- top: 3,
924
- right: "12px",
925
- position: "absolute",
926
- ":hover": {
927
- color: theme?.palette?.primary?.dark,
928
- },
929
- marginRight: "4px",
930
- },
931
- },
932
- },
933
824
  ],
934
825
  }
935
826
  ]