@flozy/editor 1.7.5 → 1.7.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +30 -12
- package/dist/Editor/DialogWrapper.js +2 -10
- package/dist/Editor/Editor.css +105 -0
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +20 -5
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +9 -6
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +15 -49
- package/dist/Editor/Elements/Color Picker/Styles.js +27 -6
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Image.js +25 -31
- package/dist/Editor/Elements/Embed/Video.js +49 -40
- package/dist/Editor/Elements/Form/Workflow/Styles.js +3 -2
- package/dist/Editor/Elements/Grid/Grid.js +67 -114
- package/dist/Editor/Elements/Grid/GridItem.js +9 -23
- package/dist/Editor/Elements/Grid/templates/default_grid.js +0 -23
- package/dist/Editor/Elements/Link/Link.js +58 -20
- package/dist/Editor/Elements/Link/LinkButton.js +37 -97
- package/dist/Editor/Elements/Link/LinkPopup.js +106 -0
- package/dist/Editor/Elements/List/CheckList.js +28 -22
- package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +11 -5
- package/dist/Editor/Elements/Signature/SignaturePopup.js +15 -4
- package/dist/Editor/Elements/SimpleText.js +30 -26
- package/dist/Editor/MiniEditor.js +4 -6
- package/dist/Editor/Styles/EditorStyles.js +72 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -1
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +3 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +4 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +96 -19
- package/dist/Editor/Toolbar/toolbarGroups.js +1 -1
- package/dist/Editor/common/Icon.js +7 -4
- package/dist/Editor/common/Section/index.js +118 -0
- package/dist/Editor/common/Shorthands/elements.js +1 -1
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +44 -51
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +2 -24
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -3
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +52 -62
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +100 -74
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +41 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +27 -77
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +19 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +67 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +21 -32
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +37 -41
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +26 -24
- package/dist/Editor/common/StyleBuilder/formStyle.js +0 -6
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +38 -54
- package/dist/Editor/common/StyleBuilder/gridStyle.js +20 -26
- package/dist/Editor/common/StyleBuilder/index.js +14 -58
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +16 -0
- package/dist/Editor/helper/index.js +63 -1
- package/dist/Editor/utils/Decorators/index.js +5 -0
- package/dist/Editor/utils/Decorators/link.js +26 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +36 -8
- package/dist/Editor/utils/accordion.js +17 -4
- package/dist/Editor/utils/button.js +15 -1
- package/dist/Editor/utils/customHooks/useElement.js +28 -0
- package/dist/Editor/utils/embed.js +1 -7
- package/dist/Editor/utils/events.js +92 -43
- package/dist/Editor/utils/gridItem.js +1 -1
- package/dist/Editor/utils/link.js +10 -9
- package/package.json +1 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid, Slider } from "@mui/material";
|
2
|
+
import { Grid, Slider, Typography } from "@mui/material";
|
3
3
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const GridSize = props => {
|
@@ -16,26 +16,30 @@ const GridSize = props => {
|
|
16
16
|
[key]: e.target.value
|
17
17
|
});
|
18
18
|
};
|
19
|
-
return /*#__PURE__*/
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
19
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
20
|
+
item: true,
|
21
|
+
xs: 12,
|
22
|
+
children: [/*#__PURE__*/_jsxs(Typography, {
|
23
|
+
variant: "body1",
|
24
|
+
color: "primary",
|
25
|
+
sx: {
|
26
|
+
fontSize: "14px",
|
27
|
+
fontWeight: 500,
|
28
|
+
marginBottom: "5px"
|
29
|
+
},
|
30
|
+
children: ["Grid Size: ", value || 12]
|
31
|
+
}), /*#__PURE__*/_jsx("div", {
|
32
|
+
className: "sld-wrpr",
|
33
|
+
children: /*#__PURE__*/_jsx(Slider, {
|
31
34
|
defaultValue: 12,
|
32
35
|
value: value || 12,
|
36
|
+
className: "spacingSlider",
|
33
37
|
step: 1,
|
34
38
|
min: 1,
|
35
39
|
max: 12,
|
36
40
|
onChange: handleChange
|
37
|
-
})
|
38
|
-
})
|
41
|
+
})
|
42
|
+
})]
|
39
43
|
});
|
40
44
|
};
|
41
45
|
export default GridSize;
|
@@ -3,6 +3,7 @@ import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
|
|
3
3
|
import * as fIcons from "@mui/icons-material";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
7
|
const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
|
7
8
|
if (b.indexOf("Outlined") > -1) {
|
8
9
|
a.outlined.push(b);
|
@@ -56,8 +57,7 @@ const Icons = props => {
|
|
56
57
|
});
|
57
58
|
};
|
58
59
|
const SelectedIcon = value ? fIcons[value] : null;
|
59
|
-
return /*#__PURE__*/_jsxs(
|
60
|
-
container: true,
|
60
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
61
61
|
children: [/*#__PURE__*/_jsx(Grid, {
|
62
62
|
item: true,
|
63
63
|
xs: 12,
|
@@ -6,8 +6,8 @@ export const radiusStyle = {
|
|
6
6
|
width: "30px",
|
7
7
|
height: "30px",
|
8
8
|
margin: "auto",
|
9
|
-
borderTop: `
|
10
|
-
borderLeft: `
|
9
|
+
borderTop: `2px solid #2563eb`,
|
10
|
+
borderLeft: `2px solid #2563eb`,
|
11
11
|
borderRight: `none`,
|
12
12
|
borderBottom: `none`,
|
13
13
|
fontSize: "14px",
|
@@ -19,8 +19,8 @@ export const radiusStyle = {
|
|
19
19
|
right: "-25px",
|
20
20
|
width: "30px",
|
21
21
|
height: "30px",
|
22
|
-
borderTop: `
|
23
|
-
borderRight: `
|
22
|
+
borderTop: `2px solid #2563eb`,
|
23
|
+
borderRight: `2px solid #2563eb`,
|
24
24
|
borderBottom: `none`,
|
25
25
|
borderLeft: `none`,
|
26
26
|
fontSize: "14px"
|
@@ -31,8 +31,8 @@ export const radiusStyle = {
|
|
31
31
|
bottom: "-28px",
|
32
32
|
width: "30px",
|
33
33
|
height: "30px",
|
34
|
-
borderBottom: `
|
35
|
-
borderLeft: `
|
34
|
+
borderBottom: `2px solid #2563eb`,
|
35
|
+
borderLeft: `2px solid #2563eb`,
|
36
36
|
borderRight: `none`,
|
37
37
|
borderTop: `none`,
|
38
38
|
fontSize: "14px"
|
@@ -43,10 +43,69 @@ export const radiusStyle = {
|
|
43
43
|
right: "-25px",
|
44
44
|
width: "30px",
|
45
45
|
height: "30px",
|
46
|
-
borderBottom: `
|
47
|
-
borderRight: `
|
46
|
+
borderBottom: `2px solid #2563eb`,
|
47
|
+
borderRight: `2px solid #2563eb`,
|
48
48
|
borderTop: "none",
|
49
49
|
borderLeft: "none",
|
50
50
|
fontSize: "14px"
|
51
51
|
}
|
52
|
+
};
|
53
|
+
export const squreStyle = {
|
54
|
+
topLeft: {
|
55
|
+
position: "absolute",
|
56
|
+
left: "-35px",
|
57
|
+
top: "50%",
|
58
|
+
transform: "translateY(-50%)",
|
59
|
+
width: "30px",
|
60
|
+
height: "30px",
|
61
|
+
margin: "auto",
|
62
|
+
// borderTop: `2px solid #2563eb`,
|
63
|
+
// borderLeft: `2px solid #2563eb`,
|
64
|
+
border: `none`,
|
65
|
+
// borderBottom: `none`,
|
66
|
+
fontSize: "14px",
|
67
|
+
textAlign: "center"
|
68
|
+
},
|
69
|
+
topRight: {
|
70
|
+
position: "absolute",
|
71
|
+
// top: "-28px",
|
72
|
+
left: "50%",
|
73
|
+
transform: "translateX(-50%)",
|
74
|
+
top: "-35px",
|
75
|
+
width: "30px",
|
76
|
+
height: "30px",
|
77
|
+
// borderTop: `2px solid #2563eb`,
|
78
|
+
// borderRight: `2px solid #2563eb`,
|
79
|
+
border: `none`,
|
80
|
+
borderLeft: `none`,
|
81
|
+
fontSize: "14px"
|
82
|
+
},
|
83
|
+
bottomLeft: {
|
84
|
+
position: "absolute",
|
85
|
+
// left: "-25px",
|
86
|
+
top: "50%",
|
87
|
+
transform: "translateY(-50%)",
|
88
|
+
right: "-35px",
|
89
|
+
width: "30px",
|
90
|
+
height: "30px",
|
91
|
+
// borderBottom: `2px solid #2563eb`,
|
92
|
+
// borderLeft: `2px solid #2563eb`,
|
93
|
+
border: `none`,
|
94
|
+
borderTop: `none`,
|
95
|
+
fontSize: "14px"
|
96
|
+
},
|
97
|
+
bottomRight: {
|
98
|
+
position: "absolute",
|
99
|
+
bottom: "-35px",
|
100
|
+
// right: "-25px",
|
101
|
+
left: "50%",
|
102
|
+
transform: "translateX(-50%)",
|
103
|
+
width: "30px",
|
104
|
+
height: "30px",
|
105
|
+
// borderBottom: `2px solid #2563eb`,
|
106
|
+
// borderRight: `2px solid #2563eb`,
|
107
|
+
border: "none",
|
108
|
+
borderLeft: "none",
|
109
|
+
fontSize: "14px"
|
110
|
+
}
|
52
111
|
};
|
@@ -5,6 +5,7 @@ import { convertBase64 } from "../../../utils/helper";
|
|
5
5
|
import { uploadFile } from "../../../service/fileupload";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
9
|
const SaveAsTemplate = props => {
|
9
10
|
const {
|
10
11
|
value,
|
@@ -71,9 +72,7 @@ const SaveAsTemplate = props => {
|
|
71
72
|
onSaveTemplate(formData, params);
|
72
73
|
handleClose();
|
73
74
|
};
|
74
|
-
return /*#__PURE__*/_jsxs(
|
75
|
-
container: true,
|
76
|
-
spacing: 2,
|
75
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
77
76
|
children: [/*#__PURE__*/_jsx(Grid, {
|
78
77
|
item: true,
|
79
78
|
xs: 12,
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Grid, TextField, Typography } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
5
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
5
|
const Text = props => {
|
7
6
|
const {
|
@@ -11,44 +10,34 @@ const Text = props => {
|
|
11
10
|
} = props;
|
12
11
|
const {
|
13
12
|
key,
|
14
|
-
placeholder
|
13
|
+
placeholder,
|
14
|
+
width
|
15
15
|
} = data;
|
16
16
|
const handleChange = e => {
|
17
17
|
onChange({
|
18
18
|
[key]: e.target.value
|
19
19
|
});
|
20
20
|
};
|
21
|
-
return /*#__PURE__*/_jsxs(
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
21
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
22
|
+
item: true,
|
23
|
+
xs: width || 12,
|
24
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
25
|
+
variant: "body1",
|
26
|
+
color: "primary",
|
27
|
+
sx: {
|
28
|
+
fontSize: "14px",
|
29
|
+
fontWeight: "500",
|
30
|
+
marginBottom: "8px"
|
27
31
|
},
|
28
|
-
children:
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
38
|
-
item: true,
|
39
|
-
xs: 12,
|
40
|
-
style: {
|
41
|
-
marginBottom: "16px"
|
42
|
-
},
|
43
|
-
children: /*#__PURE__*/_jsx(TextField, {
|
44
|
-
name: key,
|
45
|
-
placeholder: placeholder || "",
|
46
|
-
type: "text",
|
47
|
-
value: value,
|
48
|
-
onChange: handleChange,
|
49
|
-
size: "small",
|
50
|
-
fullWidth: true
|
51
|
-
})
|
32
|
+
children: data?.label
|
33
|
+
}), /*#__PURE__*/_jsx(TextField, {
|
34
|
+
name: key,
|
35
|
+
placeholder: placeholder || "",
|
36
|
+
type: "text",
|
37
|
+
value: value,
|
38
|
+
onChange: handleChange,
|
39
|
+
size: "small",
|
40
|
+
fullWidth: true
|
52
41
|
})]
|
53
42
|
});
|
54
43
|
};
|
@@ -18,48 +18,44 @@ const TextAlign = props => {
|
|
18
18
|
});
|
19
19
|
};
|
20
20
|
return /*#__PURE__*/_jsx(Grid, {
|
21
|
-
|
22
|
-
|
23
|
-
children: /*#__PURE__*/
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
className: "
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
className: `${value === "right" && "active"}`,
|
58
|
-
control: /*#__PURE__*/_jsx(Radio, {}),
|
59
|
-
label: /*#__PURE__*/_jsx(TextRightAlign, {})
|
60
|
-
})]
|
21
|
+
item: true,
|
22
|
+
xs: 12,
|
23
|
+
children: /*#__PURE__*/_jsxs(FormControl, {
|
24
|
+
children: [/*#__PURE__*/_jsx(FormLabel, {
|
25
|
+
id: "demo-row-radio-buttons-group-label",
|
26
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
27
|
+
variant: "body1",
|
28
|
+
color: "primary",
|
29
|
+
style: {
|
30
|
+
fontWeight: 500,
|
31
|
+
fontSize: "14px"
|
32
|
+
},
|
33
|
+
children: "Text Alignment"
|
34
|
+
})
|
35
|
+
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
36
|
+
row: true,
|
37
|
+
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
38
|
+
name: "textAlign",
|
39
|
+
value: value || "left",
|
40
|
+
onChange: handleChange,
|
41
|
+
className: "iconRadioButton",
|
42
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
43
|
+
value: "left",
|
44
|
+
className: `${value === "left" && "active"}`,
|
45
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
46
|
+
label: /*#__PURE__*/_jsx(TextLeftAlign, {})
|
47
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
48
|
+
value: "center",
|
49
|
+
className: `${value === "center" && "active"}`,
|
50
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
51
|
+
label: /*#__PURE__*/_jsx(TextCenterAlign, {})
|
52
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
53
|
+
value: "right",
|
54
|
+
className: `${value === "right" && "active"}`,
|
55
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
56
|
+
label: /*#__PURE__*/_jsx(TextRightAlign, {})
|
61
57
|
})]
|
62
|
-
})
|
58
|
+
})]
|
63
59
|
})
|
64
60
|
});
|
65
61
|
};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Grid, MenuItem, Select, Typography } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
5
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
6
|
const TextOptions = props => {
|
7
7
|
const {
|
8
8
|
value,
|
@@ -13,45 +13,47 @@ const TextOptions = props => {
|
|
13
13
|
const {
|
14
14
|
key,
|
15
15
|
options,
|
16
|
-
renderOption
|
16
|
+
renderOption,
|
17
|
+
width
|
17
18
|
} = data;
|
18
19
|
const handleChange = e => {
|
19
20
|
onChange({
|
20
21
|
[key]: e.target.value
|
21
22
|
});
|
22
23
|
};
|
23
|
-
return /*#__PURE__*/
|
24
|
-
children:
|
24
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
25
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
25
26
|
item: true,
|
26
|
-
xs: 12,
|
27
|
+
xs: width || 12,
|
27
28
|
style: {
|
28
29
|
marginBottom: "5px"
|
29
30
|
},
|
30
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
31
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
31
32
|
variant: "body1",
|
32
33
|
color: "primary",
|
33
34
|
sx: {
|
34
35
|
fontSize: "14px",
|
35
|
-
fontWeight: "500"
|
36
|
+
fontWeight: "500",
|
37
|
+
marginBottom: "4px"
|
36
38
|
},
|
37
39
|
children: data?.label
|
38
|
-
})
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
}
|
53
|
-
})
|
54
|
-
})
|
40
|
+
}), /*#__PURE__*/_jsx(Select, {
|
41
|
+
onChange: handleChange,
|
42
|
+
value: value || options[0]?.value,
|
43
|
+
placeholder: data?.label,
|
44
|
+
fullWidth: true,
|
45
|
+
size: "small",
|
46
|
+
style: {
|
47
|
+
marginBottom: "16px"
|
48
|
+
},
|
49
|
+
children: options.map(m => {
|
50
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
51
|
+
value: m.value,
|
52
|
+
children: renderOption ? renderOption(m, elementProps) : m.label || m.text
|
53
|
+
}, `${key}_${m.value}`);
|
54
|
+
})
|
55
|
+
})]
|
56
|
+
})
|
55
57
|
});
|
56
58
|
};
|
57
59
|
export default TextOptions;
|
@@ -37,9 +37,6 @@ const formStyle = [{
|
|
37
37
|
options: fontOptions,
|
38
38
|
renderOption: option => {
|
39
39
|
return /*#__PURE__*/_jsx("span", {
|
40
|
-
style: {
|
41
|
-
fontFamily: option.value
|
42
|
-
},
|
43
40
|
children: option.text
|
44
41
|
});
|
45
42
|
}
|
@@ -85,9 +82,6 @@ const formStyle = [{
|
|
85
82
|
}],
|
86
83
|
renderOption: option => {
|
87
84
|
return /*#__PURE__*/_jsx("span", {
|
88
|
-
style: {
|
89
|
-
fontFamily: option.value
|
90
|
-
},
|
91
85
|
children: option.text
|
92
86
|
});
|
93
87
|
}
|
@@ -3,11 +3,6 @@ const gridItemStyle = [{
|
|
3
3
|
tab: "Colors",
|
4
4
|
value: "colors",
|
5
5
|
fields: [{
|
6
|
-
label: "Text Color",
|
7
|
-
key: "textColor",
|
8
|
-
type: "color",
|
9
|
-
needPreview: false
|
10
|
-
}, {
|
11
6
|
label: "Background Color",
|
12
7
|
key: "bgColor",
|
13
8
|
type: "color"
|
@@ -16,47 +11,6 @@ const gridItemStyle = [{
|
|
16
11
|
key: "borderColor",
|
17
12
|
type: "color"
|
18
13
|
}]
|
19
|
-
}, {
|
20
|
-
tab: "Hover Colors",
|
21
|
-
value: "hoverColors",
|
22
|
-
fields: [{
|
23
|
-
label: "Hover Background Color",
|
24
|
-
key: "bgColorHover",
|
25
|
-
type: "color"
|
26
|
-
}, {
|
27
|
-
label: "Hover Border Color",
|
28
|
-
key: "borderColorHover",
|
29
|
-
type: "color"
|
30
|
-
}]
|
31
|
-
}, {
|
32
|
-
tab: "Animation",
|
33
|
-
value: "animation",
|
34
|
-
fields: [{
|
35
|
-
label: "Choose Animation",
|
36
|
-
key: "animation",
|
37
|
-
type: "textOptions",
|
38
|
-
options: [{
|
39
|
-
text: "No Animation",
|
40
|
-
value: "No Animation"
|
41
|
-
}, {
|
42
|
-
text: "Fade In",
|
43
|
-
value: "animate__animated animate__fadeIn"
|
44
|
-
}, {
|
45
|
-
text: "Zoom In",
|
46
|
-
value: "animate__animated animate__zoomIn"
|
47
|
-
}, {
|
48
|
-
text: "Bounce In Left",
|
49
|
-
value: "animate__animated animate__bounceInLeft"
|
50
|
-
}],
|
51
|
-
renderOption: option => {
|
52
|
-
return /*#__PURE__*/_jsx("span", {
|
53
|
-
style: {
|
54
|
-
fontFamily: option.value
|
55
|
-
},
|
56
|
-
children: option.text
|
57
|
-
});
|
58
|
-
}
|
59
|
-
}]
|
60
14
|
}, {
|
61
15
|
tab: "Position",
|
62
16
|
value: "position",
|
@@ -77,7 +31,7 @@ const gridItemStyle = [{
|
|
77
31
|
tab: "Padding",
|
78
32
|
value: "bannerSpacing",
|
79
33
|
fields: [{
|
80
|
-
label: "
|
34
|
+
label: "Banner Spacing",
|
81
35
|
key: "bannerSpacing",
|
82
36
|
type: "bannerSpacing"
|
83
37
|
}]
|
@@ -109,9 +63,6 @@ const gridItemStyle = [{
|
|
109
63
|
}],
|
110
64
|
renderOption: option => {
|
111
65
|
return /*#__PURE__*/_jsx("span", {
|
112
|
-
style: {
|
113
|
-
fontFamily: option.value
|
114
|
-
},
|
115
66
|
children: option.text
|
116
67
|
});
|
117
68
|
}
|
@@ -123,11 +74,44 @@ const gridItemStyle = [{
|
|
123
74
|
label: "Grid Size",
|
124
75
|
key: "grid",
|
125
76
|
type: "gridSize"
|
77
|
+
}]
|
78
|
+
}, {
|
79
|
+
tab: "Animation",
|
80
|
+
value: "animation",
|
81
|
+
fields: [{
|
82
|
+
label: "Animation",
|
83
|
+
key: "animation",
|
84
|
+
type: "textOptions",
|
85
|
+
options: [{
|
86
|
+
text: "No Animation",
|
87
|
+
value: "No Animation"
|
88
|
+
}, {
|
89
|
+
text: "Fade In",
|
90
|
+
value: "animate__animated animate__fadeIn"
|
91
|
+
}, {
|
92
|
+
text: "Zoom In",
|
93
|
+
value: "animate__animated animate__zoomIn"
|
94
|
+
}, {
|
95
|
+
text: "Bounce In Left",
|
96
|
+
value: "animate__animated animate__bounceInLeft"
|
97
|
+
}],
|
98
|
+
renderOption: option => {
|
99
|
+
return /*#__PURE__*/_jsx("span", {
|
100
|
+
children: option.text
|
101
|
+
});
|
102
|
+
}
|
103
|
+
}]
|
104
|
+
}, {
|
105
|
+
tab: "Hover Colors",
|
106
|
+
value: "hoverColors",
|
107
|
+
fields: [{
|
108
|
+
label: "Hover Background Color",
|
109
|
+
key: "bgColorHover",
|
110
|
+
type: "color"
|
126
111
|
}, {
|
127
|
-
label: "
|
128
|
-
key: "
|
129
|
-
type: "
|
130
|
-
placeholder: "100px"
|
112
|
+
label: "Hover Border Color",
|
113
|
+
key: "borderColorHover",
|
114
|
+
type: "color"
|
131
115
|
}]
|
132
116
|
}];
|
133
117
|
export default gridItemStyle;
|