@elementor/editor-controls 0.9.0 → 0.10.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 +11 -0
- package/dist/index.js +65 -29
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +61 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +18 -46
- package/src/controls/background-control/background-overlay/types.ts +22 -0
- package/src/controls/background-control/background-overlay/use-background-tabs-history.ts +62 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @elementor/editor-controls
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 87fa083: Preserve background repeater value history when switching tabs.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [6b064c5]
|
|
12
|
+
- @elementor/editor-props@0.9.1
|
|
13
|
+
|
|
3
14
|
## 0.9.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -1612,14 +1612,14 @@ var SvgMediaControl = createControl(() => {
|
|
|
1612
1612
|
|
|
1613
1613
|
// src/controls/background-control/background-control.tsx
|
|
1614
1614
|
var React35 = __toESM(require("react"));
|
|
1615
|
-
var
|
|
1616
|
-
var
|
|
1615
|
+
var import_editor_props23 = require("@elementor/editor-props");
|
|
1616
|
+
var import_ui31 = require("@elementor/ui");
|
|
1617
1617
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1618
1618
|
|
|
1619
1619
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1620
1620
|
var React34 = __toESM(require("react"));
|
|
1621
|
-
var
|
|
1622
|
-
var
|
|
1621
|
+
var import_editor_props22 = require("@elementor/editor-props");
|
|
1622
|
+
var import_ui30 = require("@elementor/ui");
|
|
1623
1623
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
1624
1624
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1625
1625
|
|
|
@@ -1781,8 +1781,51 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1781
1781
|
)))), isCustom ? /* @__PURE__ */ React33.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: /* @__PURE__ */ React33.createElement(import_icons12.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: /* @__PURE__ */ React33.createElement(import_icons12.ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1782
1782
|
};
|
|
1783
1783
|
|
|
1784
|
+
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
1785
|
+
var import_react11 = require("react");
|
|
1786
|
+
var import_editor_props21 = require("@elementor/editor-props");
|
|
1787
|
+
var import_ui29 = require("@elementor/ui");
|
|
1788
|
+
var useBackgroundTabsHistory = ({
|
|
1789
|
+
color: initialBackgroundColorOverlay2,
|
|
1790
|
+
image: initialBackgroundImageOverlay
|
|
1791
|
+
}) => {
|
|
1792
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props21.backgroundImageOverlayPropTypeUtil);
|
|
1793
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props21.backgroundColorOverlayPropTypeUtil);
|
|
1794
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui29.useTabs)(colorValue ? "color" : "image");
|
|
1795
|
+
const valuesHistory = (0, import_react11.useRef)({
|
|
1796
|
+
image: initialBackgroundImageOverlay,
|
|
1797
|
+
color: initialBackgroundColorOverlay2
|
|
1798
|
+
});
|
|
1799
|
+
const saveToHistory = (key, value) => {
|
|
1800
|
+
if (value) {
|
|
1801
|
+
valuesHistory.current[key] = value;
|
|
1802
|
+
}
|
|
1803
|
+
};
|
|
1804
|
+
const onTabChange = (e, tabName) => {
|
|
1805
|
+
switch (tabName) {
|
|
1806
|
+
case "image":
|
|
1807
|
+
setImageValue(valuesHistory.current.image);
|
|
1808
|
+
saveToHistory("color", colorValue);
|
|
1809
|
+
break;
|
|
1810
|
+
case "color":
|
|
1811
|
+
setColorValue(valuesHistory.current.color);
|
|
1812
|
+
saveToHistory("image", imageValue);
|
|
1813
|
+
}
|
|
1814
|
+
return getTabsProps().onChange(e, tabName);
|
|
1815
|
+
};
|
|
1816
|
+
return {
|
|
1817
|
+
getTabProps,
|
|
1818
|
+
getTabPanelProps,
|
|
1819
|
+
getTabsProps: () => ({ ...getTabsProps(), onChange: onTabChange })
|
|
1820
|
+
};
|
|
1821
|
+
};
|
|
1822
|
+
|
|
1784
1823
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1785
|
-
var
|
|
1824
|
+
var initialBackgroundColorOverlay = {
|
|
1825
|
+
$$type: "background-color-overlay",
|
|
1826
|
+
value: "#00000033"
|
|
1827
|
+
};
|
|
1828
|
+
var getInitialBackgroundOverlay = () => ({
|
|
1786
1829
|
$$type: "background-image-overlay",
|
|
1787
1830
|
value: {
|
|
1788
1831
|
image: {
|
|
@@ -1793,7 +1836,7 @@ var initialBackgroundOverlay = (backgroundPlaceholderImage) => ({
|
|
|
1793
1836
|
value: {
|
|
1794
1837
|
url: {
|
|
1795
1838
|
$$type: "url",
|
|
1796
|
-
value:
|
|
1839
|
+
value: env.background_placeholder_image
|
|
1797
1840
|
},
|
|
1798
1841
|
id: null
|
|
1799
1842
|
}
|
|
@@ -1813,7 +1856,7 @@ var backgroundResolutionOptions = [
|
|
|
1813
1856
|
{ label: (0, import_i18n17.__)("Full", "elementor"), value: "full" }
|
|
1814
1857
|
];
|
|
1815
1858
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1816
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
1859
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props22.backgroundOverlayPropTypeUtil);
|
|
1817
1860
|
return /* @__PURE__ */ React34.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React34.createElement(
|
|
1818
1861
|
Repeater,
|
|
1819
1862
|
{
|
|
@@ -1824,18 +1867,20 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1824
1867
|
Icon: ItemIcon2,
|
|
1825
1868
|
Label: ItemLabel2,
|
|
1826
1869
|
Content: ItemContent2,
|
|
1827
|
-
initialValues:
|
|
1870
|
+
initialValues: getInitialBackgroundOverlay()
|
|
1828
1871
|
}
|
|
1829
1872
|
}
|
|
1830
1873
|
));
|
|
1831
1874
|
});
|
|
1832
|
-
var ItemContent2 = ({ bind
|
|
1833
|
-
return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2,
|
|
1875
|
+
var ItemContent2 = ({ bind }) => {
|
|
1876
|
+
return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2, null));
|
|
1834
1877
|
};
|
|
1835
|
-
var Content2 = (
|
|
1836
|
-
const
|
|
1837
|
-
|
|
1838
|
-
|
|
1878
|
+
var Content2 = () => {
|
|
1879
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
1880
|
+
image: getInitialBackgroundOverlay().value,
|
|
1881
|
+
color: initialBackgroundColorOverlay.value
|
|
1882
|
+
});
|
|
1883
|
+
return /* @__PURE__ */ React34.createElement(import_ui30.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(import_ui30.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(import_ui30.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(import_ui30.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(import_ui30.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(import_ui30.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(import_ui30.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(import_ui30.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React34.createElement(import_ui30.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: import_editor_props22.backgroundColorOverlayPropTypeUtil })))));
|
|
1839
1884
|
};
|
|
1840
1885
|
var ItemIcon2 = ({ value }) => {
|
|
1841
1886
|
switch (value.$$type) {
|
|
@@ -1848,11 +1893,11 @@ var ItemIcon2 = ({ value }) => {
|
|
|
1848
1893
|
}
|
|
1849
1894
|
};
|
|
1850
1895
|
var ItemIconColor = ({ value }) => {
|
|
1851
|
-
return /* @__PURE__ */ React34.createElement(
|
|
1896
|
+
return /* @__PURE__ */ React34.createElement(import_ui30.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
|
|
1852
1897
|
};
|
|
1853
1898
|
var ItemIconImage = ({ value }) => {
|
|
1854
1899
|
const { imageUrl } = useImage(value);
|
|
1855
|
-
return /* @__PURE__ */ React34.createElement(
|
|
1900
|
+
return /* @__PURE__ */ React34.createElement(import_ui30.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
|
|
1856
1901
|
};
|
|
1857
1902
|
var ItemLabel2 = ({ value }) => {
|
|
1858
1903
|
switch (value.$$type) {
|
|
@@ -1872,8 +1917,8 @@ var ItemLabelImage = ({ value }) => {
|
|
|
1872
1917
|
return /* @__PURE__ */ React34.createElement("span", null, imageTitle);
|
|
1873
1918
|
};
|
|
1874
1919
|
var ImageOverlayContent = () => {
|
|
1875
|
-
const propContext = useBoundProp(
|
|
1876
|
-
return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React34.createElement(
|
|
1920
|
+
const propContext = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
|
|
1921
|
+
return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React34.createElement(import_ui30.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(
|
|
1877
1922
|
ImageControl,
|
|
1878
1923
|
{
|
|
1879
1924
|
resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
|
|
@@ -1881,15 +1926,6 @@ var ImageOverlayContent = () => {
|
|
|
1881
1926
|
}
|
|
1882
1927
|
)))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayAttachment, null)));
|
|
1883
1928
|
};
|
|
1884
|
-
var deriveOverlayType = (type) => {
|
|
1885
|
-
if (type === "background-color-overlay") {
|
|
1886
|
-
return "color";
|
|
1887
|
-
}
|
|
1888
|
-
if (type === "background-image-overlay") {
|
|
1889
|
-
return "image";
|
|
1890
|
-
}
|
|
1891
|
-
throw new Error(`Invalid overlay type: ${type}`);
|
|
1892
|
-
};
|
|
1893
1929
|
var useImage = (image) => {
|
|
1894
1930
|
let imageTitle, imageUrl = null;
|
|
1895
1931
|
const imageSrc = image?.value.image.value?.src.value;
|
|
@@ -1907,8 +1943,8 @@ var useImage = (image) => {
|
|
|
1907
1943
|
|
|
1908
1944
|
// src/controls/background-control/background-control.tsx
|
|
1909
1945
|
var BackgroundControl = createControl(() => {
|
|
1910
|
-
const propContext = useBoundProp(
|
|
1911
|
-
return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React35.createElement(
|
|
1946
|
+
const propContext = useBoundProp(import_editor_props23.backgroundPropTypeUtil);
|
|
1947
|
+
return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React35.createElement(import_ui31.Stack, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React35.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React35.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ColorControl, null))))));
|
|
1912
1948
|
});
|
|
1913
1949
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1914
1950
|
0 && (module.exports = {
|