@elementor/editor-variables 4.1.0-785 → 4.1.0-787

package/dist/index.js

@@ -47,7 +47,7 @@ var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
 // src/components/global-styles-import-listener.tsx
@@ -999,6 +999,9 @@ var hasVariable = (key) => {
   return getVariables()[key] !== void 0;
 };
 var useVariable = (key) => {
+  return getVariable(key);
+};
+function getVariable(key) {
   const variables = getVariables();
   if (!variables?.[key]) {
     return null;
@@ -1007,7 +1010,7 @@ var useVariable = (key) => {
     ...variables[key],
     key
   };
-};
+}
 var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
@@ -4175,14 +4178,45 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 var import_editor_controls17 = require("@elementor/editor-controls");
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
 var React39 = __toESM(require("react"));
+var import_editor_props8 = require("@elementor/editor-props");
+
+// src/utils/size-value.ts
+var import_editor_props7 = require("@elementor/editor-props");
+
+// src/prop-types/custom-size-variable-prop-type.ts
 var import_editor_props6 = require("@elementor/editor-props");
+var import_schema5 = require("@elementor/schema");
+var customSizeVariablePropTypeUtil = (0, import_editor_props6.createPropUtils)("global-custom-size-variable", import_schema5.z.string());
+
+// src/utils/size-value.ts
+var DEFAULT_UNIT = "px";
+var CUSTOM_SIZE_LABEL = "fx";
+function sizeValue(value) {
+  if (sizeVariablePropTypeUtil.isValid(value) || customSizeVariablePropTypeUtil.isValid(value)) {
+    const variable = getVariable(value?.value);
+    return variable?.value;
+  }
+  if (import_editor_props7.sizePropTypeUtil.isValid(value)) {
+    const { size, unit } = value.value;
+    if ("custom" !== unit) {
+      return `${size ?? 0}${unit ?? DEFAULT_UNIT}`;
+    }
+    if (!size) {
+      return CUSTOM_SIZE_LABEL;
+    }
+    return size;
+  }
+  return "";
+}
+
+// src/components/variables-repeater-item-slot.tsx
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
-  return useVariable(variableId || "");
+  return getVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
@@ -4196,11 +4230,23 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
+var BoxShadowRepeaterLabel = ({ value }) => {
+  const shadowPropValue = import_editor_props8.shadowPropTypeUtil.extract(value) || {};
+  const labels = [];
+  for (const key of ["hOffset", "vOffset", "blur", "spread"]) {
+    const rendered = sizeValue(shadowPropValue[key]);
+    if (rendered) {
+      labels.push(rendered);
+    }
+  }
+  const positionLabel = shadowPropValue.position?.value || "outset";
+  return /* @__PURE__ */ React39.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
+};
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
   const variableId = prop?.value?.size?.value || "";
-  const variable = useVariable(variableId);
-  if (variable && import_editor_props6.selectionSizePropTypeUtil.isValid(prop)) {
+  const variable = getVariable(variableId);
+  if (variable && import_editor_props8.selectionSizePropTypeUtil.isValid(prop)) {
     const selection = prop.value?.selection?.value?.key?.value;
     if (selection) {
       label += `${selection}: `;
@@ -4210,11 +4256,6 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
   return /* @__PURE__ */ React39.createElement("span", null, label);
 };
 
-// src/prop-types/custom-size-variable-prop-type.ts
-var import_editor_props7 = require("@elementor/editor-props");
-var import_schema5 = require("@elementor/schema");
-var customSizeVariablePropTypeUtil = (0, import_editor_props7.createPropUtils)("global-custom-size-variable", import_schema5.z.string());
-
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
@@ -4226,14 +4267,14 @@ var backgroundOverlayRepeaterInjections = () => {
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(import_editor_props8.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+      return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(import_editor_props8.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+      return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
 };
@@ -4242,7 +4283,16 @@ var boxShadowRepeaterInjections = () => {
     id: "color-variables-box-shadow-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(import_editor_props8.shadowPropTypeUtil.extract(value)?.color);
+      const { color } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
+      return hasAssignedColorVariable(color);
+    }
+  });
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
+    id: "color-variables-box-shadow-label",
+    component: BoxShadowRepeaterLabel,
+    condition: ({ value }) => {
+      const { hOffset, vOffset, blur, spread } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
+      return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
     }
   });
 };
@@ -4251,7 +4301,7 @@ var transitionsRepeaterInjections = () => {
     id: "transition-size-variables-label",
     component: TransitionsSizeVariableLabel,
     condition: ({ value }) => {
-      return hasAssignedSizeVariable(import_editor_props8.selectionSizePropTypeUtil.extract(value)?.size);
+      return hasAssignedSizeVariable(import_editor_props9.selectionSizePropTypeUtil.extract(value)?.size);
     }
   });
 };
@@ -4312,7 +4362,7 @@ function init() {
   (0, import_editor_panels2.__registerPanel)(panel);
 }
 function hasVariableAssigned(value) {
-  if ((0, import_editor_props9.isTransformable)(value)) {
+  if ((0, import_editor_props10.isTransformable)(value)) {
     return hasVariableType(value.$$type);
   }
   return false;