@flozy/editor 1.4.0 → 1.4.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/Editor/CommonEditor.js +9 -6
  2. package/dist/Editor/Editor.css +1 -1
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +21 -7
  4. package/dist/Editor/Elements/Button/EditorButton.js +43 -10
  5. package/dist/Editor/Elements/ChipText/ChipText.js +7 -2
  6. package/dist/Editor/Elements/Form/Form.js +2 -2
  7. package/dist/Editor/Elements/Form/FormElements/FormText.js +9 -7
  8. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +51 -0
  9. package/dist/Editor/Elements/Form/FormElements/index.js +3 -1
  10. package/dist/Editor/Elements/Form/FormField.js +2 -3
  11. package/dist/Editor/Elements/Grid/Grid.js +1 -1
  12. package/dist/Editor/Elements/Grid/GridItem.js +47 -13
  13. package/dist/Editor/Elements/Grid/templates/default_grid.js +144 -0
  14. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
  15. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +33 -0
  16. package/dist/Editor/Toolbar/FormatTools/Text.js +29 -0
  17. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  18. package/dist/Editor/Toolbar/PopupTool/index.js +0 -3
  19. package/dist/Editor/Toolbar/Toolbar.js +16 -9
  20. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +35 -0
  21. package/dist/Editor/common/StyleBuilder/buttonStyle.js +36 -0
  22. package/dist/Editor/common/StyleBuilder/fieldStyle.js +10 -2
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +1 -1
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +11 -4
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +11 -4
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +107 -0
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +10 -3
  29. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +8 -0
  30. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +62 -4
  31. package/dist/Editor/common/StyleBuilder/gridStyle.js +33 -5
  32. package/dist/Editor/common/StyleBuilder/index.js +2 -2
  33. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +2 -2
  34. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -1
  35. package/dist/Editor/utils/form.js +8 -0
  36. package/dist/Editor/utils/formfield.js +7 -1
  37. package/dist/Editor/utils/grid.js +2 -8
  38. package/package.json +1 -1
@@ -0,0 +1,33 @@
1
+ import React from "react";
2
+ import { Autocomplete, TextField } from "@mui/material";
3
+ import { activeMark } from "../../utils/SlateUtilityFunctions.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SelectFreeSolo = ({
6
+ editor,
7
+ format,
8
+ options
9
+ }) => {
10
+ const value = activeMark(editor, format);
11
+ console.log(options);
12
+ const changeMarkData = (event, format) => {
13
+ event.preventDefault();
14
+ console.log(event.target.value, format);
15
+ // const value = event.target.value;
16
+ // addMarkData(editor, { format, value });
17
+ };
18
+
19
+ return /*#__PURE__*/_jsx(Autocomplete, {
20
+ size: "small",
21
+ style: {},
22
+ value: value?.value,
23
+ className: "editor-dd",
24
+ onChange: e => changeMarkData(e, format),
25
+ getOptionLabel: option => option.text,
26
+ options: options,
27
+ freeSolo: true,
28
+ renderInput: params => /*#__PURE__*/_jsx(TextField, {
29
+ ...params
30
+ })
31
+ });
32
+ };
33
+ export default SelectFreeSolo;
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import { TextField } from "@mui/material";
3
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
+ import { sizeMap } from "../../utils/font.js";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const Text = ({
7
+ editor,
8
+ format,
9
+ options,
10
+ style = {}
11
+ }) => {
12
+ const value = activeMark(editor, format);
13
+ const changeMarkData = (event, format) => {
14
+ event.preventDefault();
15
+ const value = event.target.value;
16
+ addMarkData(editor, {
17
+ format,
18
+ value
19
+ });
20
+ };
21
+ return /*#__PURE__*/_jsx(TextField, {
22
+ size: "small",
23
+ style: style,
24
+ value: sizeMap[value],
25
+ className: "editor-text",
26
+ onChange: e => changeMarkData(e, format)
27
+ });
28
+ };
29
+ export default Text;
@@ -1,4 +1,6 @@
1
1
  import BlockButton from "./BlockButton";
2
2
  import Dropdown from "./Dropdown";
3
3
  import MarkButton from "./MarkButton";
4
- export { BlockButton, Dropdown, MarkButton };
4
+ import Autocomplete from "./Autocomplete";
5
+ import Text from "./Text";
6
+ export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };
@@ -5,7 +5,6 @@ import { Editor, Range } from "slate";
5
5
  import { useSlate, useFocused } from "slate-react";
6
6
  import TextFormat from "./TextFormat";
7
7
  import usePopupStyle from "./PopupToolStyle";
8
- import useFormat from "../../utils/customHooks/useFormat";
9
8
  import { jsx as _jsx } from "react/jsx-runtime";
10
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
10
  const PopupTool = () => {
@@ -18,9 +17,7 @@ const PopupTool = () => {
18
17
  } = editor;
19
18
  const open = Boolean(anchorEl);
20
19
  const id = open ? "popup-edit-tool" : "";
21
- console.log(useFormat(editor, null));
22
20
  useEffect(() => {
23
- console.log(selection, inFocus);
24
21
  if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
25
22
  setAnchorEl(null);
26
23
  } else {
@@ -20,8 +20,10 @@ import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
20
20
  import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
21
21
  import CarouselButton from "../Elements/Carousel/CarouselButton";
22
22
  import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
23
- import "./styles.css";
24
23
  import FormButton from "../Elements/Form/FormButton.js";
24
+ import Text from "./FormatTools/Text";
25
+ import ChipTextButton from "../Elements/ChipText/ChipTextButton";
26
+ import "./styles.css";
25
27
  import { jsx as _jsx } from "react/jsx-runtime";
26
28
  import { jsxs as _jsxs } from "react/jsx-runtime";
27
29
  const Toolbar = props => {
@@ -65,6 +67,14 @@ const Toolbar = props => {
65
67
  ...element,
66
68
  editor: editor
67
69
  }, element.id);
70
+ case "text":
71
+ return /*#__PURE__*/_jsx(Text, {
72
+ ...element,
73
+ editor: editor,
74
+ style: {
75
+ width: "80px"
76
+ }
77
+ }, element.id);
68
78
  case "link":
69
79
  return /*#__PURE__*/_jsx(LinkButton, {
70
80
  active: isBlockActive(editor, "link"),
@@ -128,14 +138,11 @@ const Toolbar = props => {
128
138
  return /*#__PURE__*/_jsx(CarouselButton, {
129
139
  editor: editor
130
140
  }, element.id);
131
- // case "chip-text":
132
- // return (
133
- // <ChipTextButton
134
- // key={element.id}
135
- // editor={editor}
136
- // customProps={customProps}
137
- // />
138
- // );
141
+ case "chip-text":
142
+ return /*#__PURE__*/_jsx(ChipTextButton, {
143
+ editor: editor,
144
+ customProps: customProps
145
+ }, element.id);
139
146
  // case "drawer":
140
147
  // return (
141
148
  // <DrawerMenuButton
@@ -8,6 +8,24 @@ const appHeaderStyle = [{
8
8
  key: "appTitle",
9
9
  type: "text",
10
10
  placeholder: "Leave Empty, If only Logo"
11
+ }, {
12
+ label: "Title Font Size",
13
+ key: "logoFontSize",
14
+ type: "text",
15
+ placeholder: "16px"
16
+ }, {
17
+ label: "Title Font Family",
18
+ key: "titleFontFamily",
19
+ type: "textOptions",
20
+ options: fontOptions,
21
+ renderOption: option => {
22
+ return /*#__PURE__*/_jsx("span", {
23
+ style: {
24
+ fontFamily: option.value
25
+ },
26
+ children: option.text
27
+ });
28
+ }
11
29
  }, {
12
30
  label: "App Logo URL",
13
31
  key: "appLogo",
@@ -80,5 +98,22 @@ const appHeaderStyle = [{
80
98
  key: "borderColor",
81
99
  type: "color"
82
100
  }]
101
+ }, {
102
+ tab: "Hover Colors",
103
+ value: "hoverColors",
104
+ fields: [{
105
+ label: "Text",
106
+ key: "textColorHover",
107
+ type: "color",
108
+ needPreview: true
109
+ }, {
110
+ label: "Background",
111
+ key: "bgColorHover",
112
+ type: "color"
113
+ }, {
114
+ label: "Border",
115
+ key: "borderColorHover",
116
+ type: "color"
117
+ }]
83
118
  }];
84
119
  export default appHeaderStyle;
@@ -39,6 +39,25 @@ const buttonStyle = [{
39
39
  key: "buttonLink",
40
40
  type: "buttonLink"
41
41
  }]
42
+ }, {
43
+ tab: "Icon",
44
+ value: "icon",
45
+ fields: [{
46
+ label: "Icon Position",
47
+ key: "iconPosition",
48
+ type: "textOptions",
49
+ options: [{
50
+ value: "start",
51
+ label: "Start"
52
+ }, {
53
+ value: "end",
54
+ label: "End"
55
+ }]
56
+ }, {
57
+ label: "Button Icons",
58
+ key: "buttonIcon",
59
+ type: "icons"
60
+ }]
42
61
  }, {
43
62
  tab: "Position",
44
63
  value: "position",
@@ -88,6 +107,23 @@ const buttonStyle = [{
88
107
  key: "borderColor",
89
108
  type: "color"
90
109
  }]
110
+ }, {
111
+ tab: "Hover Colors",
112
+ value: "hoverColors",
113
+ fields: [{
114
+ label: "Text",
115
+ key: "textColorHover",
116
+ type: "color",
117
+ needPreview: true
118
+ }, {
119
+ label: "Background",
120
+ key: "bgColorHover",
121
+ type: "color"
122
+ }, {
123
+ label: "Border",
124
+ key: "borderColorHover",
125
+ type: "color"
126
+ }]
91
127
  }, {
92
128
  tab: "Save As Template",
93
129
  value: "saveAsTemplate",
@@ -12,6 +12,9 @@ const fieldStyle = [{
12
12
  options: [{
13
13
  label: "Textbox",
14
14
  value: "text"
15
+ }, {
16
+ label: "TextArea",
17
+ value: "textArea"
15
18
  }]
16
19
  }, {
17
20
  label: "Placeholder",
@@ -19,10 +22,10 @@ const fieldStyle = [{
19
22
  type: "text"
20
23
  }]
21
24
  }, {
22
- tab: "Banner Spacing",
25
+ tab: "Padding",
23
26
  value: "bannerSpacing",
24
27
  fields: [{
25
- label: "Banner Spacing",
28
+ label: "Padding",
26
29
  key: "bannerSpacing",
27
30
  type: "bannerSpacing"
28
31
  }]
@@ -66,6 +69,11 @@ const fieldStyle = [{
66
69
  label: "Grid Size",
67
70
  key: "grid",
68
71
  type: "gridSize"
72
+ }, {
73
+ label: "Height",
74
+ key: "height",
75
+ type: "text",
76
+ placeholder: "40px"
69
77
  }]
70
78
  }];
71
79
  export default fieldStyle;
@@ -104,7 +104,7 @@ const Alignment = props => {
104
104
  row: true,
105
105
  "aria-labelledby": "demo-row-radio-buttons-group-label",
106
106
  name: "flexDirection",
107
- value: value?.flexDirection || "row",
107
+ value: value?.flexDirection || "column",
108
108
  onChange: handleChange,
109
109
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
110
110
  value: "row",
@@ -41,15 +41,22 @@ const BannerSpacing = props => {
41
41
  return /*#__PURE__*/_jsx(Grid, {
42
42
  container: true,
43
43
  padding: 4,
44
- children: /*#__PURE__*/_jsx(Grid, {
44
+ children: /*#__PURE__*/_jsxs(Grid, {
45
45
  item: true,
46
46
  xs: 12,
47
47
  sx: {
48
48
  pb: 2,
49
49
  display: "flex",
50
- justifyContent: "center"
50
+ justifyContent: "center",
51
+ flexDirection: "column",
52
+ alignItems: "center"
51
53
  },
52
- children: /*#__PURE__*/_jsxs("div", {
54
+ children: [/*#__PURE__*/_jsx("label", {
55
+ style: {
56
+ fontSize: "12px"
57
+ },
58
+ children: data?.label
59
+ }), /*#__PURE__*/_jsxs("div", {
53
60
  style: {
54
61
  width: "100px",
55
62
  height: "100px",
@@ -148,7 +155,7 @@ const BannerSpacing = props => {
148
155
  onClick: onLockSpacing,
149
156
  children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
150
157
  })]
151
- })
158
+ })]
152
159
  })
153
160
  });
154
161
  };
@@ -42,15 +42,22 @@ const BorderRadius = props => {
42
42
  return /*#__PURE__*/_jsx(Grid, {
43
43
  container: true,
44
44
  padding: 4,
45
- children: /*#__PURE__*/_jsx(Grid, {
45
+ children: /*#__PURE__*/_jsxs(Grid, {
46
46
  item: true,
47
47
  xs: 12,
48
48
  style: {
49
- display: "flex"
49
+ display: "flex",
50
+ flexDirection: "column"
50
51
  },
51
52
  justifyContent: "center",
52
53
  alignContent: "center",
53
- children: /*#__PURE__*/_jsxs("div", {
54
+ alignItems: "center",
55
+ children: [/*#__PURE__*/_jsx("label", {
56
+ style: {
57
+ fontSize: "12px"
58
+ },
59
+ children: data?.label
60
+ }), /*#__PURE__*/_jsxs("div", {
54
61
  style: {
55
62
  width: "100px",
56
63
  height: "100px",
@@ -137,7 +144,7 @@ const BorderRadius = props => {
137
144
  onClick: onLockRadius,
138
145
  children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
139
146
  })]
140
- })
147
+ })]
141
148
  })
142
149
  });
143
150
  };
@@ -0,0 +1,107 @@
1
+ import React, { useState } from "react";
2
+ import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
3
+ import * as fIcons from "@mui/icons-material";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
7
+ if (b.indexOf("Outlined") > -1) {
8
+ a.outlined.push(b);
9
+ } else if (b.indexOf("Rounded") > -1) {
10
+ a.rounded.push(b);
11
+ } else if (b.indexOf("Sharp") > -1) {
12
+ a.sharp.push(b);
13
+ } else if (b.indexOf("TwoTone") > -1) {
14
+ a.tt.push(b);
15
+ } else {
16
+ a.filled.push(b);
17
+ }
18
+ return a;
19
+ }, {
20
+ filled: [],
21
+ outlined: [],
22
+ rounded: [],
23
+ tt: [],
24
+ sharp: []
25
+ });
26
+ const Icons = props => {
27
+ const {
28
+ value,
29
+ data,
30
+ onChange
31
+ } = props;
32
+ const {
33
+ key
34
+ } = data;
35
+ const [val, setVal] = useState("");
36
+ const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
37
+ const onSelectIcon = ico => () => {
38
+ onChange({
39
+ [key]: ico
40
+ });
41
+ };
42
+ const handleChange = e => {
43
+ const keyVal = e.target.value?.toLowerCase();
44
+ setVal(keyVal);
45
+ if (keyVal) {
46
+ setList(MUIIcons.filled.filter(f => {
47
+ return f.toLowerCase().indexOf(keyVal) > -1;
48
+ }).slice(0, 90));
49
+ } else {
50
+ setList(MUIIcons.filled.slice(0, 90));
51
+ }
52
+ };
53
+ const SelectedIcon = value ? fIcons[value] : null;
54
+ return /*#__PURE__*/_jsxs(Grid, {
55
+ container: true,
56
+ children: [/*#__PURE__*/_jsx(Grid, {
57
+ item: true,
58
+ xs: 12,
59
+ children: /*#__PURE__*/_jsxs(Grid, {
60
+ container: true,
61
+ style: {
62
+ display: "flex",
63
+ alignItems: "center",
64
+ padding: "12px"
65
+ },
66
+ children: [/*#__PURE__*/_jsx(Grid, {
67
+ item: true,
68
+ xs: 10,
69
+ children: /*#__PURE__*/_jsx(TextField, {
70
+ fullWidth: true,
71
+ size: "small",
72
+ placeholder: "Search Icons...",
73
+ value: val,
74
+ onChange: handleChange
75
+ })
76
+ }), /*#__PURE__*/_jsx(Grid, {
77
+ item: true,
78
+ xs: 2,
79
+ style: {
80
+ paddingLeft: "8px"
81
+ },
82
+ children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
83
+ })]
84
+ })
85
+ }), /*#__PURE__*/_jsx(Grid, {
86
+ item: true,
87
+ xs: 12,
88
+ textAlign: "center",
89
+ style: {
90
+ maxHeight: "200px",
91
+ overflowY: "auto"
92
+ },
93
+ children: list.map(m => {
94
+ const Ico = fIcons[m];
95
+ return /*#__PURE__*/_jsx(Tooltip, {
96
+ title: m,
97
+ arrow: true,
98
+ children: /*#__PURE__*/_jsx(IconButton, {
99
+ onClick: onSelectIcon(m),
100
+ children: /*#__PURE__*/_jsx(Ico, {})
101
+ })
102
+ }, `mui_ico_${m}`);
103
+ })
104
+ })]
105
+ });
106
+ };
107
+ export default Icons;
@@ -13,6 +13,7 @@ import SaveAsTemplate from "./saveAsTemplate";
13
13
  import TextAlign from "./textAlign";
14
14
  import TextOptions from "./textOptions";
15
15
  import SelectBox from "./selectBox";
16
+ import Icons from "./icons";
16
17
  const FieldMap = {
17
18
  text: Text,
18
19
  bannerSpacing: BannerSpacing,
@@ -28,6 +29,7 @@ const FieldMap = {
28
29
  saveAsTemplate: SaveAsTemplate,
29
30
  textAlign: TextAlign,
30
31
  textOptions: TextOptions,
31
- selectBox: SelectBox
32
+ selectBox: SelectBox,
33
+ icons: Icons
32
34
  };
33
35
  export default FieldMap;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { Grid, MenuItem, Select } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
5
  const TextOptions = props => {
5
6
  const {
6
7
  value,
@@ -19,13 +20,19 @@ const TextOptions = props => {
19
20
  };
20
21
  return /*#__PURE__*/_jsx(Grid, {
21
22
  container: true,
22
- children: /*#__PURE__*/_jsx(Grid, {
23
+ children: /*#__PURE__*/_jsxs(Grid, {
23
24
  item: true,
24
25
  xs: 12,
25
26
  style: {
26
27
  padding: "10px"
27
28
  },
28
- children: /*#__PURE__*/_jsx(Select, {
29
+ children: [/*#__PURE__*/_jsx("label", {
30
+ style: {
31
+ marginBottom: "8px",
32
+ display: "flex"
33
+ },
34
+ children: data?.label
35
+ }), /*#__PURE__*/_jsx(Select, {
29
36
  onChange: handleChange,
30
37
  value: value || options[0]?.value,
31
38
  placeholder: data?.label,
@@ -37,7 +44,7 @@ const TextOptions = props => {
37
44
  children: renderOption ? renderOption(m) : m.label || m.text
38
45
  }, `${key}_${m.value}`);
39
46
  })
40
- })
47
+ })]
41
48
  })
42
49
  });
43
50
  };
@@ -80,6 +80,14 @@ const formButtonStyle = [{
80
80
  key: "borderColor",
81
81
  type: "color"
82
82
  }]
83
+ }, {
84
+ tab: "Size",
85
+ value: "gridSize",
86
+ fields: [{
87
+ label: "Grid Size",
88
+ key: "grid",
89
+ type: "gridSize"
90
+ }]
83
91
  }, {
84
92
  tab: "Save As Template",
85
93
  value: "saveAsTemplate",
@@ -1,18 +1,54 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const gridItemStyle = [{
2
- tab: "Banner Spacing",
3
+ tab: "Margin",
4
+ value: "margin",
5
+ fields: [{
6
+ label: "Margin",
7
+ key: "margin",
8
+ type: "bannerSpacing"
9
+ }]
10
+ }, {
11
+ tab: "Padding",
3
12
  value: "bannerSpacing",
4
13
  fields: [{
5
- label: "Banner Spacing",
14
+ label: "Padding",
6
15
  key: "bannerSpacing",
7
16
  type: "bannerSpacing"
8
17
  }]
9
18
  }, {
10
- tab: "Border Radius",
11
- value: "borderRadius",
19
+ tab: "Border",
20
+ value: "border",
12
21
  fields: [{
13
22
  label: "Border Radius",
14
23
  key: "borderRadius",
15
24
  type: "borderRadius"
25
+ }, {
26
+ label: "Border Width",
27
+ key: "borderWidth",
28
+ type: "text",
29
+ placeholder: "1px"
30
+ }, {
31
+ label: "Border Style",
32
+ key: "borderStyle",
33
+ type: "textOptions",
34
+ options: [{
35
+ text: "Solid",
36
+ value: "solid"
37
+ }, {
38
+ text: "Dotted",
39
+ value: "dotted"
40
+ }, {
41
+ text: "Dashed",
42
+ value: "dashed"
43
+ }],
44
+ renderOption: option => {
45
+ return /*#__PURE__*/_jsx("span", {
46
+ style: {
47
+ fontFamily: option.value
48
+ },
49
+ children: option.text
50
+ });
51
+ }
16
52
  }]
17
53
  }, {
18
54
  tab: "Colors",
@@ -31,6 +67,23 @@ const gridItemStyle = [{
31
67
  key: "borderColor",
32
68
  type: "color"
33
69
  }]
70
+ }, {
71
+ tab: "Hover Colors",
72
+ value: "hoverColors",
73
+ fields: [{
74
+ label: "Text",
75
+ key: "textColorHover",
76
+ type: "color",
77
+ needPreview: true
78
+ }, {
79
+ label: "Background",
80
+ key: "bgColorHover",
81
+ type: "color"
82
+ }, {
83
+ label: "Border",
84
+ key: "borderColorHover",
85
+ type: "color"
86
+ }]
34
87
  }, {
35
88
  tab: "Position",
36
89
  value: "position",
@@ -46,6 +99,11 @@ const gridItemStyle = [{
46
99
  label: "Grid Size",
47
100
  key: "grid",
48
101
  type: "gridSize"
102
+ }, {
103
+ label: "Grid Height",
104
+ key: "gridHeight",
105
+ type: "text",
106
+ placeholder: "100px"
49
107
  }]
50
108
  }];
51
109
  export default gridItemStyle;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const gridStyle = [{
2
3
  tab: "General",
3
4
  value: "general",
@@ -8,20 +9,47 @@ const gridStyle = [{
8
9
  placeholder: "Id should be unique for the page..."
9
10
  }]
10
11
  }, {
11
- tab: "Banner Spacing",
12
+ tab: "Padding",
12
13
  value: "bannerSpacing",
13
14
  fields: [{
14
- label: "Banner Spacing",
15
+ label: "Padding",
15
16
  key: "bannerSpacing",
16
17
  type: "bannerSpacing"
17
18
  }]
18
19
  }, {
19
- tab: "Border Radius",
20
- value: "borderRadius",
20
+ tab: "Border",
21
+ value: "border",
21
22
  fields: [{
22
- label: "Border Radius",
23
+ label: "Border",
23
24
  key: "borderRadius",
24
25
  type: "borderRadius"
26
+ }, {
27
+ label: "Border Width",
28
+ key: "borderWidth",
29
+ type: "text",
30
+ placeholder: "1px"
31
+ }, {
32
+ label: "Border Style",
33
+ key: "borderStyle",
34
+ type: "textOptions",
35
+ options: [{
36
+ text: "Solid",
37
+ value: "solid"
38
+ }, {
39
+ text: "Dotted",
40
+ value: "dotted"
41
+ }, {
42
+ text: "Dashed",
43
+ value: "dashed"
44
+ }],
45
+ renderOption: option => {
46
+ return /*#__PURE__*/_jsx("span", {
47
+ style: {
48
+ fontFamily: option.value
49
+ },
50
+ children: option.text
51
+ });
52
+ }
25
53
  }]
26
54
  }, {
27
55
  tab: "Colors",