@elementor/editor-controls 0.18.0 → 0.19.0
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.
- package/CHANGELOG.md +21 -0
- package/dist/index.js +24 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +33 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/control-label.tsx +2 -6
- package/src/components/control-toggle-button-group.tsx +2 -4
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +6 -1
- package/src/controls/box-shadow-repeater-control.tsx +3 -5
- package/src/controls/equal-unequal-sizes-control.tsx +1 -1
- package/src/controls/gap-control.tsx +3 -3
- package/src/controls/linked-dimensions-control.tsx +5 -5
package/dist/index.mjs
CHANGED
|
@@ -155,9 +155,9 @@ var resolveUnionPropType = (propType, key) => {
|
|
|
155
155
|
|
|
156
156
|
// src/components/control-label.tsx
|
|
157
157
|
import * as React3 from "react";
|
|
158
|
-
import {
|
|
158
|
+
import { FormLabel } from "@elementor/ui";
|
|
159
159
|
var ControlLabel = ({ children }) => {
|
|
160
|
-
return /* @__PURE__ */ React3.createElement(
|
|
160
|
+
return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, children);
|
|
161
161
|
};
|
|
162
162
|
|
|
163
163
|
// src/create-control.tsx
|
|
@@ -621,7 +621,7 @@ var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createEleme
|
|
|
621
621
|
// src/controls/box-shadow-repeater-control.tsx
|
|
622
622
|
import * as React22 from "react";
|
|
623
623
|
import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
|
|
624
|
-
import {
|
|
624
|
+
import { FormLabel as FormLabel2, Grid as Grid4, UnstableColorIndicator } from "@elementor/ui";
|
|
625
625
|
import { __ as __5 } from "@wordpress/i18n";
|
|
626
626
|
|
|
627
627
|
// src/components/popover-content.tsx
|
|
@@ -651,7 +651,7 @@ import {
|
|
|
651
651
|
Popover,
|
|
652
652
|
Stack as Stack5,
|
|
653
653
|
Tooltip,
|
|
654
|
-
Typography
|
|
654
|
+
Typography,
|
|
655
655
|
UnstableTag,
|
|
656
656
|
usePopupState as usePopupState2
|
|
657
657
|
} from "@elementor/ui";
|
|
@@ -816,7 +816,7 @@ var Repeater = ({
|
|
|
816
816
|
});
|
|
817
817
|
});
|
|
818
818
|
};
|
|
819
|
-
return /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(
|
|
819
|
+
return /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": __4("Add item", "elementor") }, /* @__PURE__ */ React21.createElement(PlusIcon, { fontSize: SIZE }))), 0 < uniqueKeys.length && /* @__PURE__ */ React21.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
|
|
820
820
|
const value = items[index];
|
|
821
821
|
if (!value) {
|
|
822
822
|
return null;
|
|
@@ -957,7 +957,7 @@ var Control2 = ({
|
|
|
957
957
|
bind,
|
|
958
958
|
children,
|
|
959
959
|
sx
|
|
960
|
-
}) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(Grid4, { container: true, gap:
|
|
960
|
+
}) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, children))));
|
|
961
961
|
var ItemLabel = ({ value }) => {
|
|
962
962
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
963
963
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -1016,7 +1016,6 @@ import {
|
|
|
1016
1016
|
var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
|
|
1017
1017
|
${({ justify }) => `justify-content: ${justify};`}
|
|
1018
1018
|
`;
|
|
1019
|
-
var MAX_VISIBLE_ITEMS = 4;
|
|
1020
1019
|
var ControlToggleButtonGroup = ({
|
|
1021
1020
|
justify = "end",
|
|
1022
1021
|
size = "tiny",
|
|
@@ -1040,8 +1039,8 @@ var ControlToggleButtonGroup = ({
|
|
|
1040
1039
|
sx: {
|
|
1041
1040
|
direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */",
|
|
1042
1041
|
display: "grid",
|
|
1043
|
-
gridTemplateColumns: `repeat(${items.length},
|
|
1044
|
-
width:
|
|
1042
|
+
gridTemplateColumns: `repeat(${items.length}, minmax(0, 25%))`,
|
|
1043
|
+
width: `100%`
|
|
1045
1044
|
}
|
|
1046
1045
|
},
|
|
1047
1046
|
items.map(
|
|
@@ -1230,7 +1229,7 @@ function EqualUnequalSizesControl({
|
|
|
1230
1229
|
/* @__PURE__ */ React26.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[3] }))))
|
|
1231
1230
|
));
|
|
1232
1231
|
}
|
|
1233
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap:
|
|
1232
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
|
|
1234
1233
|
|
|
1235
1234
|
// src/controls/linked-dimensions-control.tsx
|
|
1236
1235
|
import * as React27 from "react";
|
|
@@ -1253,7 +1252,7 @@ var LinkedDimensionsControl = createControl(
|
|
|
1253
1252
|
const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
|
|
1254
1253
|
const onLinkToggle = () => {
|
|
1255
1254
|
if (!isLinked) {
|
|
1256
|
-
setSizeValue(dimensionsValue["block-start"]?.value);
|
|
1255
|
+
setSizeValue(dimensionsValue["block-start"]?.value ?? null);
|
|
1257
1256
|
return;
|
|
1258
1257
|
}
|
|
1259
1258
|
const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
|
|
@@ -1279,7 +1278,7 @@ var LinkedDimensionsControl = createControl(
|
|
|
1279
1278
|
onChange: onLinkToggle
|
|
1280
1279
|
},
|
|
1281
1280
|
/* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1282
|
-
))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap:
|
|
1281
|
+
))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1283
1282
|
Control3,
|
|
1284
1283
|
{
|
|
1285
1284
|
bind: "block-start",
|
|
@@ -1287,7 +1286,7 @@ var LinkedDimensionsControl = createControl(
|
|
|
1287
1286
|
isLinked,
|
|
1288
1287
|
extendedValues
|
|
1289
1288
|
}
|
|
1290
|
-
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap:
|
|
1289
|
+
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1291
1290
|
Control3,
|
|
1292
1291
|
{
|
|
1293
1292
|
bind: "inline-end",
|
|
@@ -1295,7 +1294,7 @@ var LinkedDimensionsControl = createControl(
|
|
|
1295
1294
|
isLinked,
|
|
1296
1295
|
extendedValues
|
|
1297
1296
|
}
|
|
1298
|
-
)))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap:
|
|
1297
|
+
)))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1299
1298
|
Control3,
|
|
1300
1299
|
{
|
|
1301
1300
|
bind: "block-end",
|
|
@@ -1303,7 +1302,7 @@ var LinkedDimensionsControl = createControl(
|
|
|
1303
1302
|
isLinked,
|
|
1304
1303
|
extendedValues
|
|
1305
1304
|
}
|
|
1306
|
-
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap:
|
|
1305
|
+
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1307
1306
|
Control3,
|
|
1308
1307
|
{
|
|
1309
1308
|
bind: "inline-start",
|
|
@@ -1345,7 +1344,7 @@ import {
|
|
|
1345
1344
|
Stack as Stack8,
|
|
1346
1345
|
styled as styled4,
|
|
1347
1346
|
TextField as TextField5,
|
|
1348
|
-
Typography as
|
|
1347
|
+
Typography as Typography2,
|
|
1349
1348
|
UnstableTag as UnstableTag2,
|
|
1350
1349
|
usePopupState as usePopupState4
|
|
1351
1350
|
} from "@elementor/ui";
|
|
@@ -1407,7 +1406,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1407
1406
|
...bindPopover3(popoverState),
|
|
1408
1407
|
onClose: handleClose
|
|
1409
1408
|
},
|
|
1410
|
-
/* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(
|
|
1409
|
+
/* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(Typography2, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
|
|
1411
1410
|
TextField5,
|
|
1412
1411
|
{
|
|
1413
1412
|
fullWidth: true,
|
|
@@ -1427,8 +1426,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1427
1426
|
handleClose,
|
|
1428
1427
|
fontFamily
|
|
1429
1428
|
}
|
|
1430
|
-
) : /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Box2, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(
|
|
1431
|
-
|
|
1429
|
+
) : /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Box2, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
|
|
1430
|
+
Typography2,
|
|
1432
1431
|
{
|
|
1433
1432
|
variant: "subtitle2",
|
|
1434
1433
|
color: "text.secondary",
|
|
@@ -1447,7 +1446,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1447
1446
|
searchValue
|
|
1448
1447
|
),
|
|
1449
1448
|
/* @__PURE__ */ React28.createElement("span", null, "\u201D.")
|
|
1450
|
-
)), /* @__PURE__ */ React28.createElement(
|
|
1449
|
+
)), /* @__PURE__ */ React28.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
|
|
1451
1450
|
Link,
|
|
1452
1451
|
{
|
|
1453
1452
|
color: "secondary",
|
|
@@ -1916,7 +1915,7 @@ var GapControl = createControl(({ label }) => {
|
|
|
1916
1915
|
const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
|
|
1917
1916
|
const onLinkToggle = () => {
|
|
1918
1917
|
if (!isLinked) {
|
|
1919
|
-
setSizeValue(directionValue?.column?.value);
|
|
1918
|
+
setSizeValue(directionValue?.column?.value ?? null);
|
|
1920
1919
|
return;
|
|
1921
1920
|
}
|
|
1922
1921
|
const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
|
|
@@ -1940,7 +1939,7 @@ var GapControl = createControl(({ label }) => {
|
|
|
1940
1939
|
onChange: onLinkToggle
|
|
1941
1940
|
},
|
|
1942
1941
|
/* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1943
|
-
))), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap:
|
|
1942
|
+
))), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
|
|
1944
1943
|
});
|
|
1945
1944
|
var Control4 = ({ bind, isLinked }) => {
|
|
1946
1945
|
if (isLinked) {
|
|
@@ -2519,7 +2518,18 @@ var Content2 = () => {
|
|
|
2519
2518
|
color: initialBackgroundColorOverlay.value,
|
|
2520
2519
|
gradient: initialBackgroundGradientOverlay.value
|
|
2521
2520
|
});
|
|
2522
|
-
return /* @__PURE__ */ React40.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React40.createElement(
|
|
2521
|
+
return /* @__PURE__ */ React40.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React40.createElement(
|
|
2522
|
+
Tabs,
|
|
2523
|
+
{
|
|
2524
|
+
size: "small",
|
|
2525
|
+
variant: "fullWidth",
|
|
2526
|
+
...getTabsProps(),
|
|
2527
|
+
"aria-label": __17("Background Overlay", "elementor")
|
|
2528
|
+
},
|
|
2529
|
+
/* @__PURE__ */ React40.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }),
|
|
2530
|
+
/* @__PURE__ */ React40.createElement(Tab, { label: __17("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
2531
|
+
/* @__PURE__ */ React40.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") })
|
|
2532
|
+
)), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React40.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ColorOverlayContent, null))));
|
|
2523
2533
|
};
|
|
2524
2534
|
var ItemIcon2 = ({ value }) => {
|
|
2525
2535
|
switch (value.$$type) {
|