impaktapps-ui-builder 0.0.101-alpha.3 → 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 (7) hide show
  1. package/dist/impaktapps-ui-builder.es.js +153 -202
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +9 -9
  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
  7. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +44 -25
package/dist/impaktapps-ui-builder.es.js CHANGED
@@ -116,7 +116,6 @@ const PageMasterUiSchema = (theme) => {
116
116
  tabLabels: ["Page Components", "Page Events"]
117
117
  },
118
118
  style: {
119
- marginTop: "-16px",
120
119
  TabPanelStyle: {
121
120
  padding: 0
122
121
  }
@@ -129,6 +128,9 @@ const PageMasterUiSchema = (theme) => {
129
128
  "& .MuiTabs-indicator": {
130
129
  bottom: "6px"
131
130
  }
131
+ },
132
+ TabContainerStyle: {
133
+ marginTop: "-16px"
132
134
  }
133
135
  },
134
136
  elements: [
@@ -448,32 +450,49 @@ const PageMasterUiSchema = (theme) => {
448
450
  ]
449
451
  },
450
452
  {
451
- type: "Control",
452
- scope: "#/properties/btn",
453
- options: {
454
- widget: "Button"
455
- },
453
+ scope: "#/properties/Remarks Container",
454
+ type: "WrapperLayout",
456
455
  config: {
457
- layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
456
+ layout: 12,
458
457
  main: {
459
- name: "Save",
460
- startIcon: "ApproveIcon",
461
- variant: "contained",
462
- type: "text",
463
- onClick: "saveHandler",
464
- size: "medium"
458
+ divider: false,
459
+ rowSpacing: 0,
460
+ gap: 0
461
+ },
462
+ componentsBoxStyle: {
463
+ padding: "8px 8px 8px 24px"
465
464
  }
466
- }
467
- },
468
- {
469
- type: "Control",
470
- scope: "#/properties/EmptyBox",
471
- config: {
472
- layout: { xs: 8, sm: 9.5, md: 10, lg: 10.5 }
473
465
  },
474
- options: {
475
- widget: "EmptyBox"
476
- }
466
+ elements: [
467
+ {
468
+ type: "Control",
469
+ scope: "#/properties/btn",
470
+ options: {
471
+ widget: "Button"
472
+ },
473
+ config: {
474
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
475
+ main: {
476
+ name: "Save",
477
+ startIcon: "ApproveIcon",
478
+ variant: "contained",
479
+ type: "text",
480
+ onClick: "saveHandler",
481
+ size: "medium"
482
+ }
483
+ }
484
+ },
485
+ {
486
+ type: "Control",
487
+ scope: "#/properties/EmptyBox",
488
+ config: {
489
+ layout: { xs: 8, sm: 9.5, md: 10, lg: 10.5 }
490
+ },
491
+ options: {
492
+ widget: "EmptyBox"
493
+ }
494
+ }
495
+ ]
477
496
  },
478
497
  {
479
498
  type: "Control",
@@ -6557,37 +6576,30 @@ const ComponentSchema = {
6557
6576
  required: ["name"]
6558
6577
  };
6559
6578
  const componentBasicUiSchema = (theme) => {
6560
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
6579
+ var _a;
6561
6580
  const uiSchema = {
6562
6581
  type: "HorizontalLayout",
6563
- heading: "Component",
6582
+ heading: "Page-Component",
6564
6583
  elements: [
6565
- {
6566
- type: "Control",
6567
- scope: "#/properties/pageName",
6568
- options: {
6569
- widget: "Box"
6570
- },
6571
- config: {
6572
- layout: 12,
6573
- main: {
6574
- heading: " "
6575
- },
6576
- style: {
6577
- marginLeft: theme.spacing(3),
6578
- width: "auto",
6579
- fontSize: "12px",
6580
- color: "gray"
6581
- }
6582
- }
6583
- },
6584
6584
  {
6585
6585
  type: "TabLayout",
6586
6586
  config: {
6587
6587
  main: {
6588
6588
  tabLabels: ["Core"],
6589
- defaultStyle: true,
6590
6589
  id: `component`
6590
+ },
6591
+ style: {
6592
+ TabPanelStyle: {
6593
+ padding: 0
6594
+ }
6595
+ },
6596
+ TabsStyle: {
6597
+ marginBottom: "3px",
6598
+ paddingBottom: "4px",
6599
+ boxShadow: "0px 3px 4px #afafaf80",
6600
+ "& .MuiTabs-indicator": {
6601
+ bottom: "6px"
6602
+ }
6591
6603
  }
6592
6604
  },
6593
6605
  elements: [
@@ -6601,12 +6613,22 @@ const componentBasicUiSchema = (theme) => {
6601
6613
  widget: "SelectInputField"
6602
6614
  },
6603
6615
  config: {
6604
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6616
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
6605
6617
  main: {
6606
6618
  label: "Type"
6607
6619
  }
6608
6620
  }
6609
6621
  },
6622
+ {
6623
+ type: "Control",
6624
+ scope: "#/properties/proc",
6625
+ config: {
6626
+ layout: { xs: 6, sm: 0, md: 0, lg: 0 }
6627
+ },
6628
+ options: {
6629
+ widget: "EmptyBox"
6630
+ }
6631
+ },
6610
6632
  {
6611
6633
  type: "Control",
6612
6634
  scope: "#/properties/name",
@@ -6614,9 +6636,9 @@ const componentBasicUiSchema = (theme) => {
6614
6636
  widget: "InputField"
6615
6637
  },
6616
6638
  config: {
6617
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6639
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
6618
6640
  main: {
6619
- label: "Name",
6641
+ label: "Component ID",
6620
6642
  options: [],
6621
6643
  color: "secondary",
6622
6644
  required: true
@@ -6630,7 +6652,7 @@ const componentBasicUiSchema = (theme) => {
6630
6652
  widget: "InputField"
6631
6653
  },
6632
6654
  config: {
6633
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6655
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
6634
6656
  main: {
6635
6657
  label: "Label",
6636
6658
  options: [],
@@ -6639,34 +6661,11 @@ const componentBasicUiSchema = (theme) => {
6639
6661
  }
6640
6662
  }
6641
6663
  },
6642
- {
6643
- type: "Control",
6644
- scope: "#/properties/columnFormat",
6645
- options: {
6646
- widget: "SelectInputField"
6647
- },
6648
- config: {
6649
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6650
- main: {
6651
- label: "Column Format"
6652
- }
6653
- }
6654
- },
6655
- {
6656
- type: "Control",
6657
- scope: "#/properties/proc",
6658
- config: {
6659
- layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6660
- },
6661
- options: {
6662
- widget: "EmptyBox"
6663
- }
6664
- },
6665
6664
  {
6666
6665
  type: "Control",
6667
6666
  scope: "#/properties/proc",
6668
6667
  config: {
6669
- layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6668
+ layout: { xs: 6, sm: 6, md: 0, lg: 3 }
6670
6669
  },
6671
6670
  options: {
6672
6671
  widget: "EmptyBox"
@@ -6722,64 +6721,73 @@ const componentBasicUiSchema = (theme) => {
6722
6721
  ]
6723
6722
  }
6724
6723
  }
6725
- }
6726
- ]
6727
- }
6728
- ]
6729
- },
6730
- {
6731
- type: "HorizontalLayout",
6732
- config: {
6733
- layout: { xs: 12, sm: 6 }
6734
- },
6735
- elements: [
6736
- {
6737
- type: "Control",
6738
- scope: "#/properties/RemoveItemButton",
6739
- options: {
6740
- widget: "IconButton"
6741
- },
6742
- config: {
6743
- layout: { xs: 1, sm: 1 },
6744
- main: {
6745
- onClick: "RemoveItemButton",
6746
- size: "large",
6747
- icon: "RejectIcon",
6748
- styleDefault: true
6749
6724
  },
6750
- style: {
6751
- marginLeft: "-10px"
6752
- }
6753
- }
6754
- },
6755
- {
6756
- type: "Control",
6757
- scope: "#/properties/copiedElementDetails",
6758
- options: {
6759
- widget: "Box"
6760
- },
6761
- config: {
6762
- layout: { xs: 6, sm: 6 },
6763
- main: {
6764
- heading: "No element copied"
6765
- },
6766
- style: {
6767
- color: "#535557",
6768
- marginLeft: "-10px",
6769
- fontSize: "12px",
6770
- marginTop: "4px"
6725
+ {
6726
+ type: "Control",
6727
+ scope: "#/properties/layout",
6728
+ options: {
6729
+ widget: "Array"
6730
+ },
6731
+ config: {
6732
+ layout: 12,
6733
+ main: {
6734
+ label: "Layout",
6735
+ childElementLabel: "Layout"
6736
+ },
6737
+ style: {
6738
+ marginLeft: "-24px",
6739
+ marginBottom: "24px !important",
6740
+ labelStyle: {
6741
+ marginLeft: "24px"
6742
+ },
6743
+ detailsStyle: {
6744
+ marginLeft: "24px"
6745
+ }
6746
+ }
6747
+ },
6748
+ elements: [
6749
+ {
6750
+ type: "Control",
6751
+ scope: "#/properties/key",
6752
+ options: {
6753
+ widget: "SelectInputField"
6754
+ },
6755
+ config: {
6756
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6757
+ main: {
6758
+ label: "Screen Size"
6759
+ }
6760
+ }
6761
+ },
6762
+ {
6763
+ type: "Control",
6764
+ scope: "#/properties/value",
6765
+ options: {
6766
+ widget: "InputField"
6767
+ },
6768
+ config: {
6769
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6770
+ main: {
6771
+ label: "Value",
6772
+ type: "number",
6773
+ helperText: "Number should be in range of 0 to 12",
6774
+ errorMessage: "Number Can't be greater than 12 and can't be less than 0."
6775
+ }
6776
+ }
6777
+ },
6778
+ {
6779
+ type: "Control",
6780
+ scope: "#/properties/proc",
6781
+ config: {
6782
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6783
+ },
6784
+ options: {
6785
+ widget: "EmptyBox"
6786
+ }
6787
+ }
6788
+ ]
6771
6789
  }
6772
- }
6773
- },
6774
- {
6775
- type: "Control",
6776
- scope: "#/properties/EmptyBox",
6777
- options: {
6778
- widget: "EmptyBox"
6779
- },
6780
- config: {
6781
- layout: { xs: 1, sm: 5 }
6782
- }
6790
+ ]
6783
6791
  }
6784
6792
  ]
6785
6793
  },
@@ -6790,10 +6798,9 @@ const componentBasicUiSchema = (theme) => {
6790
6798
  widget: "Button"
6791
6799
  },
6792
6800
  config: {
6793
- layout: { xs: 4, sm: 2 },
6801
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
6794
6802
  main: {
6795
6803
  name: "Ok",
6796
- startIcon: "ApproveIcon",
6797
6804
  variant: "contained",
6798
6805
  type: "text",
6799
6806
  onClick: "okHandler",
@@ -6808,10 +6815,9 @@ const componentBasicUiSchema = (theme) => {
6808
6815
  widget: "Button"
6809
6816
  },
6810
6817
  config: {
6811
- layout: { xs: 4, sm: 2 },
6818
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
6812
6819
  main: {
6813
6820
  name: "Save & Exit",
6814
- startIcon: "ApproveIcon",
6815
6821
  variant: "contained",
6816
6822
  type: "text",
6817
6823
  onClick: "saveHandler",
@@ -6819,6 +6825,16 @@ const componentBasicUiSchema = (theme) => {
6819
6825
  }
6820
6826
  }
6821
6827
  },
6828
+ {
6829
+ type: "Control",
6830
+ scope: "#/properties/EmptyBox",
6831
+ config: {
6832
+ layout: { xs: 4, sm: 7, md: 8, lg: 9 }
6833
+ },
6834
+ options: {
6835
+ widget: "EmptyBox"
6836
+ }
6837
+ },
6822
6838
  {
6823
6839
  type: "Control",
6824
6840
  scope: "#/properties/popUpComponentSection",
@@ -6877,9 +6893,7 @@ const componentBasicUiSchema = (theme) => {
6877
6893
  layout: 6,
6878
6894
  main: {
6879
6895
  name: "No",
6880
- startIcon: "ApproveIcon",
6881
6896
  variant: "contained",
6882
- color: "info",
6883
6897
  type: "text",
6884
6898
  onClick: "deletePopUpComponent",
6885
6899
  size: "large"
@@ -6913,7 +6927,6 @@ const componentBasicUiSchema = (theme) => {
6913
6927
  layout: 6,
6914
6928
  main: {
6915
6929
  name: "Yes",
6916
- startIcon: "ApproveIcon",
6917
6930
  variant: "contained",
6918
6931
  color: "error",
6919
6932
  type: "text",
@@ -7000,9 +7013,7 @@ const componentBasicUiSchema = (theme) => {
7000
7013
  layout: 6,
7001
7014
  main: {
7002
7015
  name: "No",
7003
- startIcon: "ApproveIcon",
7004
7016
  variant: "contained",
7005
- color: "info",
7006
7017
  type: "text",
7007
7018
  onClick: "deletePopUpEvent",
7008
7019
  size: "large"
@@ -7036,7 +7047,6 @@ const componentBasicUiSchema = (theme) => {
7036
7047
  layout: 6,
7037
7048
  main: {
7038
7049
  name: "Yes",
7039
- startIcon: "ApproveIcon",
7040
7050
  variant: "contained",
7041
7051
  color: "error",
7042
7052
  type: "text",
@@ -7082,7 +7092,7 @@ const componentBasicUiSchema = (theme) => {
7082
7092
  style: {
7083
7093
  flexDirection: "row",
7084
7094
  position: "absolute",
7085
- bottom: 0,
7095
+ bottom: 10,
7086
7096
  height: "fit-content",
7087
7097
  overflow: "hidden",
7088
7098
  zIndex: 1e3,
@@ -7101,78 +7111,19 @@ const componentBasicUiSchema = (theme) => {
7101
7111
  heading: "Copywriter@ACT21.IO"
7102
7112
  },
7103
7113
  style: {
7104
- color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
7114
+ color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
7105
7115
  fontSize: "11px",
7106
7116
  textAlign: "center",
7107
- lineHeight: 2,
7117
+ lineHeight: 0,
7108
7118
  width: "fit-content",
7109
7119
  left: "50%",
7110
7120
  position: "relative",
7111
- margin: 0,
7121
+ margin: "revert",
7112
7122
  flexGrow: 1,
7113
7123
  height: 0,
7114
7124
  transform: "translate(-50%, 0%)"
7115
7125
  }
7116
7126
  }
7117
- },
7118
- {
7119
- type: "Control",
7120
- scope: "#/properties/FooterBackIcon",
7121
- options: {
7122
- widget: "Box"
7123
- },
7124
- config: {
7125
- main: {
7126
- iconName: "PrevIcon",
7127
- onClick: "backHandler",
7128
- width: "fit-content"
7129
- },
7130
- style: {
7131
- fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
7132
- width: 20,
7133
- height: 0,
7134
- top: 0,
7135
- right: { xs: "12px", sm: "84px" },
7136
- position: "absolute",
7137
- fontSize: "12px",
7138
- cursor: "pointer",
7139
- ":hover": {
7140
- fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.dark
7141
- },
7142
- marginRight: "20px"
7143
- }
7144
- }
7145
- },
7146
- {
7147
- type: "Control",
7148
- scope: "#/properties/FooterBackHandlerText",
7149
- options: {
7150
- widget: "Box"
7151
- },
7152
- config: {
7153
- main: {
7154
- heading: "Previous Page",
7155
- onClick: "backHandler"
7156
- },
7157
- style: {
7158
- display: { xs: "none", sm: "flex" },
7159
- textAlign: "left",
7160
- lineHeight: 1,
7161
- height: 0,
7162
- width: "fit-content",
7163
- color: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main,
7164
- fontSize: "12px",
7165
- cursor: "pointer",
7166
- marginLeft: "2px",
7167
- top: 3,
7168
- right: "12px",
7169
- position: "absolute",
7170
- ":hover": {
7171
- color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
7172
- },
7173
- marginRight: "4px"
7174
- }
7175
- }
7176
7127
  }
7177
7128
  ]
7178
7129
  }