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/dist/impaktapps-ui-builder.es.js CHANGED
@@ -6576,42 +6576,40 @@ const ComponentSchema = {
6576
6576
  required: ["name"]
6577
6577
  };
6578
6578
  const componentBasicUiSchema = (theme) => {
6579
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
6579
+ var _a;
6580
6580
  const uiSchema = {
6581
6581
  type: "HorizontalLayout",
6582
- heading: "Component",
6582
+ heading: "Page-Component",
6583
6583
  elements: [
6584
- {
6585
- type: "Control",
6586
- scope: "#/properties/pageName",
6587
- options: {
6588
- widget: "Box"
6589
- },
6590
- config: {
6591
- layout: 12,
6592
- main: {
6593
- heading: " "
6594
- },
6595
- style: {
6596
- marginLeft: theme.spacing(3),
6597
- width: "auto",
6598
- fontSize: "12px",
6599
- color: "gray"
6600
- }
6601
- }
6602
- },
6603
6584
  {
6604
6585
  type: "TabLayout",
6605
6586
  config: {
6606
6587
  main: {
6607
6588
  tabLabels: ["Core"],
6608
- defaultStyle: true,
6609
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
+ }
6610
6603
  }
6611
6604
  },
6612
6605
  elements: [
6613
6606
  {
6614
- type: "HorizontalLayout",
6607
+ type: "WrapperLayout",
6608
+ config: {
6609
+ main: {
6610
+ gap: "8px"
6611
+ }
6612
+ },
6615
6613
  elements: [
6616
6614
  {
6617
6615
  type: "Control",
@@ -6620,12 +6618,22 @@ const componentBasicUiSchema = (theme) => {
6620
6618
  widget: "SelectInputField"
6621
6619
  },
6622
6620
  config: {
6623
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6621
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
6624
6622
  main: {
6625
6623
  label: "Type"
6626
6624
  }
6627
6625
  }
6628
6626
  },
6627
+ {
6628
+ type: "Control",
6629
+ scope: "#/properties/proc",
6630
+ config: {
6631
+ layout: { xs: 6, sm: 0, md: 0, lg: 0 }
6632
+ },
6633
+ options: {
6634
+ widget: "EmptyBox"
6635
+ }
6636
+ },
6629
6637
  {
6630
6638
  type: "Control",
6631
6639
  scope: "#/properties/name",
@@ -6633,9 +6641,9 @@ const componentBasicUiSchema = (theme) => {
6633
6641
  widget: "InputField"
6634
6642
  },
6635
6643
  config: {
6636
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6644
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
6637
6645
  main: {
6638
- label: "Name",
6646
+ label: "Component ID",
6639
6647
  options: [],
6640
6648
  color: "secondary",
6641
6649
  required: true
@@ -6649,7 +6657,7 @@ const componentBasicUiSchema = (theme) => {
6649
6657
  widget: "InputField"
6650
6658
  },
6651
6659
  config: {
6652
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6660
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
6653
6661
  main: {
6654
6662
  label: "Label",
6655
6663
  options: [],
@@ -6658,34 +6666,11 @@ const componentBasicUiSchema = (theme) => {
6658
6666
  }
6659
6667
  }
6660
6668
  },
6661
- {
6662
- type: "Control",
6663
- scope: "#/properties/columnFormat",
6664
- options: {
6665
- widget: "SelectInputField"
6666
- },
6667
- config: {
6668
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6669
- main: {
6670
- label: "Column Format"
6671
- }
6672
- }
6673
- },
6674
6669
  {
6675
6670
  type: "Control",
6676
6671
  scope: "#/properties/proc",
6677
6672
  config: {
6678
- layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6679
- },
6680
- options: {
6681
- widget: "EmptyBox"
6682
- }
6683
- },
6684
- {
6685
- type: "Control",
6686
- scope: "#/properties/proc",
6687
- config: {
6688
- layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6673
+ layout: { xs: 6, sm: 6, md: 0, lg: 3 }
6689
6674
  },
6690
6675
  options: {
6691
6676
  widget: "EmptyBox"
@@ -6694,114 +6679,72 @@ const componentBasicUiSchema = (theme) => {
6694
6679
  {
6695
6680
  type: "Control",
6696
6681
  scope: "#/properties/layout",
6697
- layout: 12,
6698
6682
  options: {
6699
- detail: {
6700
- type: "HorizontalLayout",
6701
- elements: [
6702
- {
6703
- type: "Control",
6704
- scope: "#/properties/key",
6705
- options: {
6706
- widget: "SelectInputField"
6707
- },
6708
- config: {
6709
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6710
- main: {
6711
- label: "Screen Size"
6712
- }
6713
- }
6714
- },
6715
- {
6716
- type: "Control",
6717
- scope: "#/properties/value",
6718
- options: {
6719
- widget: "InputField"
6720
- },
6721
- config: {
6722
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6723
- main: {
6724
- label: "Value",
6725
- type: "number",
6726
- helperText: "Number should be in range of 0 to 12",
6727
- errorMessage: "Number Can't be greater than 12 and can't be less than 0."
6728
- }
6729
- }
6730
- },
6731
- {
6732
- type: "Control",
6733
- scope: "#/properties/proc",
6734
- config: {
6735
- layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6736
- },
6737
- options: {
6738
- widget: "EmptyBox"
6739
- }
6683
+ widget: "Array"
6684
+ },
6685
+ config: {
6686
+ layout: 12,
6687
+ main: {
6688
+ label: "Layout",
6689
+ childElementLabel: "Layout"
6690
+ },
6691
+ style: {
6692
+ marginLeft: "-24px",
6693
+ marginBottom: "24px !important",
6694
+ labelStyle: {
6695
+ marginLeft: "24px"
6696
+ },
6697
+ detailsStyle: {
6698
+ marginLeft: "24px"
6699
+ }
6700
+ }
6701
+ },
6702
+ elements: [
6703
+ {
6704
+ type: "Control",
6705
+ scope: "#/properties/key",
6706
+ options: {
6707
+ widget: "SelectInputField"
6708
+ },
6709
+ config: {
6710
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6711
+ main: {
6712
+ label: "Screen Size"
6740
6713
  }
6741
- ]
6714
+ }
6715
+ },
6716
+ {
6717
+ type: "Control",
6718
+ scope: "#/properties/value",
6719
+ options: {
6720
+ widget: "InputField"
6721
+ },
6722
+ config: {
6723
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
6724
+ main: {
6725
+ label: "Value",
6726
+ type: "number",
6727
+ helperText: "Number should be in range of 0 to 12",
6728
+ errorMessage: "Number Can't be greater than 12 and can't be less than 0."
6729
+ }
6730
+ }
6731
+ },
6732
+ {
6733
+ type: "Control",
6734
+ scope: "#/properties/proc",
6735
+ config: {
6736
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 }
6737
+ },
6738
+ options: {
6739
+ widget: "EmptyBox"
6740
+ }
6742
6741
  }
6743
- }
6742
+ ]
6744
6743
  }
6745
6744
  ]
6746
6745
  }
6747
6746
  ]
6748
6747
  },
6749
- {
6750
- type: "HorizontalLayout",
6751
- config: {
6752
- layout: { xs: 12, sm: 6 }
6753
- },
6754
- elements: [
6755
- {
6756
- type: "Control",
6757
- scope: "#/properties/RemoveItemButton",
6758
- options: {
6759
- widget: "IconButton"
6760
- },
6761
- config: {
6762
- layout: { xs: 1, sm: 1 },
6763
- main: {
6764
- onClick: "RemoveItemButton",
6765
- size: "large",
6766
- icon: "RejectIcon",
6767
- styleDefault: true
6768
- },
6769
- style: {
6770
- marginLeft: "-10px"
6771
- }
6772
- }
6773
- },
6774
- {
6775
- type: "Control",
6776
- scope: "#/properties/copiedElementDetails",
6777
- options: {
6778
- widget: "Box"
6779
- },
6780
- config: {
6781
- layout: { xs: 6, sm: 6 },
6782
- main: {
6783
- heading: "No element copied"
6784
- },
6785
- style: {
6786
- color: "#535557",
6787
- marginLeft: "-10px",
6788
- fontSize: "12px",
6789
- marginTop: "4px"
6790
- }
6791
- }
6792
- },
6793
- {
6794
- type: "Control",
6795
- scope: "#/properties/EmptyBox",
6796
- options: {
6797
- widget: "EmptyBox"
6798
- },
6799
- config: {
6800
- layout: { xs: 1, sm: 5 }
6801
- }
6802
- }
6803
- ]
6804
- },
6805
6748
  {
6806
6749
  type: "Control",
6807
6750
  scope: "#/properties/btn",
@@ -6809,10 +6752,9 @@ const componentBasicUiSchema = (theme) => {
6809
6752
  widget: "Button"
6810
6753
  },
6811
6754
  config: {
6812
- layout: { xs: 4, sm: 2 },
6755
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
6813
6756
  main: {
6814
6757
  name: "Ok",
6815
- startIcon: "ApproveIcon",
6816
6758
  variant: "contained",
6817
6759
  type: "text",
6818
6760
  onClick: "okHandler",
@@ -6827,10 +6769,9 @@ const componentBasicUiSchema = (theme) => {
6827
6769
  widget: "Button"
6828
6770
  },
6829
6771
  config: {
6830
- layout: { xs: 4, sm: 2 },
6772
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
6831
6773
  main: {
6832
6774
  name: "Save & Exit",
6833
- startIcon: "ApproveIcon",
6834
6775
  variant: "contained",
6835
6776
  type: "text",
6836
6777
  onClick: "saveHandler",
@@ -6838,6 +6779,16 @@ const componentBasicUiSchema = (theme) => {
6838
6779
  }
6839
6780
  }
6840
6781
  },
6782
+ {
6783
+ type: "Control",
6784
+ scope: "#/properties/EmptyBox",
6785
+ config: {
6786
+ layout: { xs: 4, sm: 7, md: 8, lg: 9 }
6787
+ },
6788
+ options: {
6789
+ widget: "EmptyBox"
6790
+ }
6791
+ },
6841
6792
  {
6842
6793
  type: "Control",
6843
6794
  scope: "#/properties/popUpComponentSection",
@@ -6896,9 +6847,7 @@ const componentBasicUiSchema = (theme) => {
6896
6847
  layout: 6,
6897
6848
  main: {
6898
6849
  name: "No",
6899
- startIcon: "ApproveIcon",
6900
6850
  variant: "contained",
6901
- color: "info",
6902
6851
  type: "text",
6903
6852
  onClick: "deletePopUpComponent",
6904
6853
  size: "large"
@@ -6932,7 +6881,6 @@ const componentBasicUiSchema = (theme) => {
6932
6881
  layout: 6,
6933
6882
  main: {
6934
6883
  name: "Yes",
6935
- startIcon: "ApproveIcon",
6936
6884
  variant: "contained",
6937
6885
  color: "error",
6938
6886
  type: "text",
@@ -7019,9 +6967,7 @@ const componentBasicUiSchema = (theme) => {
7019
6967
  layout: 6,
7020
6968
  main: {
7021
6969
  name: "No",
7022
- startIcon: "ApproveIcon",
7023
6970
  variant: "contained",
7024
- color: "info",
7025
6971
  type: "text",
7026
6972
  onClick: "deletePopUpEvent",
7027
6973
  size: "large"
@@ -7055,7 +7001,6 @@ const componentBasicUiSchema = (theme) => {
7055
7001
  layout: 6,
7056
7002
  main: {
7057
7003
  name: "Yes",
7058
- startIcon: "ApproveIcon",
7059
7004
  variant: "contained",
7060
7005
  color: "error",
7061
7006
  type: "text",
@@ -7101,7 +7046,7 @@ const componentBasicUiSchema = (theme) => {
7101
7046
  style: {
7102
7047
  flexDirection: "row",
7103
7048
  position: "absolute",
7104
- bottom: 0,
7049
+ bottom: 10,
7105
7050
  height: "fit-content",
7106
7051
  overflow: "hidden",
7107
7052
  zIndex: 1e3,
@@ -7120,78 +7065,19 @@ const componentBasicUiSchema = (theme) => {
7120
7065
  heading: "Copywriter@ACT21.IO"
7121
7066
  },
7122
7067
  style: {
7123
- color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
7068
+ color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
7124
7069
  fontSize: "11px",
7125
7070
  textAlign: "center",
7126
- lineHeight: 2,
7071
+ lineHeight: 0,
7127
7072
  width: "fit-content",
7128
7073
  left: "50%",
7129
7074
  position: "relative",
7130
- margin: 0,
7075
+ margin: "revert",
7131
7076
  flexGrow: 1,
7132
7077
  height: 0,
7133
7078
  transform: "translate(-50%, 0%)"
7134
7079
  }
7135
7080
  }
7136
- },
7137
- {
7138
- type: "Control",
7139
- scope: "#/properties/FooterBackIcon",
7140
- options: {
7141
- widget: "Box"
7142
- },
7143
- config: {
7144
- main: {
7145
- iconName: "PrevIcon",
7146
- onClick: "backHandler",
7147
- width: "fit-content"
7148
- },
7149
- style: {
7150
- fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
7151
- width: 20,
7152
- height: 0,
7153
- top: 0,
7154
- right: { xs: "12px", sm: "84px" },
7155
- position: "absolute",
7156
- fontSize: "12px",
7157
- cursor: "pointer",
7158
- ":hover": {
7159
- fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.dark
7160
- },
7161
- marginRight: "20px"
7162
- }
7163
- }
7164
- },
7165
- {
7166
- type: "Control",
7167
- scope: "#/properties/FooterBackHandlerText",
7168
- options: {
7169
- widget: "Box"
7170
- },
7171
- config: {
7172
- main: {
7173
- heading: "Previous Page",
7174
- onClick: "backHandler"
7175
- },
7176
- style: {
7177
- display: { xs: "none", sm: "flex" },
7178
- textAlign: "left",
7179
- lineHeight: 1,
7180
- height: 0,
7181
- width: "fit-content",
7182
- color: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main,
7183
- fontSize: "12px",
7184
- cursor: "pointer",
7185
- marginLeft: "2px",
7186
- top: 3,
7187
- right: "12px",
7188
- position: "absolute",
7189
- ":hover": {
7190
- color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
7191
- },
7192
- marginRight: "4px"
7193
- }
7194
- }
7195
7081
  }
7196
7082
  ]
7197
7083
  }