@orion-studios/payload-studio 0.6.0-beta.176 → 0.6.0-beta.178
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/dist/builder-v2/client.js +41 -12
- package/dist/builder-v2/client.mjs +41 -12
- package/package.json +1 -1
|
@@ -2025,6 +2025,16 @@ var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${s
|
|
|
2025
2025
|
var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
|
|
2026
2026
|
var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
|
|
2027
2027
|
var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
|
|
2028
|
+
var hasNegativePaddingState = (attrs, style) => negativePaddingSides.some((side) => Boolean(attrs[negativePaddingAttributeForSide(side)] || style[negativePaddingVariableForSide(side)]));
|
|
2029
|
+
var getStoredOrionBackgroundColor = (attrs, style) => {
|
|
2030
|
+
const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
|
|
2031
|
+
return firstString(
|
|
2032
|
+
attrs[negativePaddingBackgroundAttribute],
|
|
2033
|
+
style[negativePaddingBackgroundVariable],
|
|
2034
|
+
attrs["data-orion-background-color"],
|
|
2035
|
+
block.backgroundColor
|
|
2036
|
+
);
|
|
2037
|
+
};
|
|
2028
2038
|
var spacingTargetForComponent = (component) => {
|
|
2029
2039
|
const element = component?.getEl?.();
|
|
2030
2040
|
return element || null;
|
|
@@ -2614,13 +2624,16 @@ function GrapesPageEditor({
|
|
|
2614
2624
|
if (side) {
|
|
2615
2625
|
const attrs = selected.getAttributes?.() || {};
|
|
2616
2626
|
const selectedStyle = selected.getStyle?.() || {};
|
|
2617
|
-
const
|
|
2618
|
-
(paddingSide) =>
|
|
2627
|
+
const nextNegativePaddingBySide = Object.fromEntries(
|
|
2628
|
+
negativePaddingSides.map((paddingSide) => [
|
|
2629
|
+
paddingSide,
|
|
2630
|
+
paddingSide === side ? "" : firstString(attrs[negativePaddingAttributeForSide(paddingSide)])
|
|
2631
|
+
])
|
|
2619
2632
|
);
|
|
2620
|
-
const
|
|
2621
|
-
|
|
2622
|
-
selectedStyle[negativePaddingBackgroundVariable]
|
|
2633
|
+
const hasOtherNegativePadding = negativePaddingSides.some(
|
|
2634
|
+
(paddingSide) => Boolean(nextNegativePaddingBySide[paddingSide])
|
|
2623
2635
|
);
|
|
2636
|
+
const negativePaddingBackground = getStoredOrionBackgroundColor(attrs, selectedStyle);
|
|
2624
2637
|
selected.removeStyle?.(negativePaddingVariableForSide(side));
|
|
2625
2638
|
selected.removeAttributes?.(negativePaddingAttributeForSide(side));
|
|
2626
2639
|
selected.removeClass?.(`is-orion-negative-padding-${side}`);
|
|
@@ -2630,7 +2643,18 @@ function GrapesPageEditor({
|
|
|
2630
2643
|
}
|
|
2631
2644
|
selected.removeStyle?.(negativePaddingBackgroundVariable);
|
|
2632
2645
|
selected.removeAttributes?.(negativePaddingBackgroundAttribute);
|
|
2646
|
+
negativePaddingSides.forEach((paddingSide) => {
|
|
2647
|
+
selected.removeStyle?.(negativePaddingVariableForSide(paddingSide));
|
|
2648
|
+
selected.removeAttributes?.(negativePaddingAttributeForSide(paddingSide));
|
|
2649
|
+
selected.removeClass?.(`is-orion-negative-padding-${paddingSide}`);
|
|
2650
|
+
});
|
|
2633
2651
|
selected.removeClass?.("orion-builder-v2-negative-padding");
|
|
2652
|
+
} else if (negativePaddingBackground) {
|
|
2653
|
+
selected.addStyle?.({
|
|
2654
|
+
[negativePaddingBackgroundVariable]: negativePaddingBackground,
|
|
2655
|
+
"background-color": "transparent"
|
|
2656
|
+
});
|
|
2657
|
+
selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
|
|
2634
2658
|
}
|
|
2635
2659
|
}
|
|
2636
2660
|
}
|
|
@@ -2658,9 +2682,9 @@ function GrapesPageEditor({
|
|
|
2658
2682
|
const side = negativePaddingSideFromProperty(property);
|
|
2659
2683
|
const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
|
|
2660
2684
|
const currentStyle = selected.getStyle?.() || {};
|
|
2685
|
+
const currentAttributes = selected.getAttributes?.() || {};
|
|
2661
2686
|
const backgroundColor = firstString(
|
|
2662
|
-
currentStyle
|
|
2663
|
-
selected.getAttributes?.()[negativePaddingBackgroundAttribute],
|
|
2687
|
+
getStoredOrionBackgroundColor(currentAttributes, currentStyle),
|
|
2664
2688
|
getStyleColorValue(currentStyle, "background-color")
|
|
2665
2689
|
);
|
|
2666
2690
|
selected.addClass?.("orion-builder-v2-negative-padding");
|
|
@@ -2869,15 +2893,18 @@ function GrapesPageEditor({
|
|
|
2869
2893
|
return;
|
|
2870
2894
|
}
|
|
2871
2895
|
const panelBackgroundColor = normalizeCssColorValue(readStylePanelColor("background-color"));
|
|
2872
|
-
const
|
|
2873
|
-
const
|
|
2896
|
+
const targetStyle = target.getStyle?.() || {};
|
|
2897
|
+
const componentStyle = component?.getStyle?.() || targetStyle;
|
|
2898
|
+
const styleBackgroundColor = getStyleColorValue(componentStyle || targetStyle, "background-color");
|
|
2899
|
+
const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
|
|
2900
|
+
const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
|
|
2874
2901
|
if (!backgroundColor) {
|
|
2875
2902
|
return;
|
|
2876
2903
|
}
|
|
2877
|
-
if (getStyleColorValue(
|
|
2904
|
+
if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
|
|
2878
2905
|
target.addStyle?.({ "background-color": backgroundColor });
|
|
2879
2906
|
}
|
|
2880
|
-
if (component && component !== target && getStyleColorValue(
|
|
2907
|
+
if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
|
|
2881
2908
|
component.addStyle?.({ "background-color": backgroundColor });
|
|
2882
2909
|
}
|
|
2883
2910
|
target.addAttributes?.({
|
|
@@ -2903,7 +2930,9 @@ function GrapesPageEditor({
|
|
|
2903
2930
|
if (Object.keys(block).length === 0) {
|
|
2904
2931
|
return;
|
|
2905
2932
|
}
|
|
2906
|
-
const
|
|
2933
|
+
const style = component.getStyle?.() || {};
|
|
2934
|
+
const negativePaddingActive = hasNegativePaddingState(attrs, style);
|
|
2935
|
+
const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
|
|
2907
2936
|
if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
|
|
2908
2937
|
return;
|
|
2909
2938
|
}
|
|
@@ -1901,6 +1901,16 @@ var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${s
|
|
|
1901
1901
|
var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
|
|
1902
1902
|
var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
|
|
1903
1903
|
var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
|
|
1904
|
+
var hasNegativePaddingState = (attrs, style) => negativePaddingSides.some((side) => Boolean(attrs[negativePaddingAttributeForSide(side)] || style[negativePaddingVariableForSide(side)]));
|
|
1905
|
+
var getStoredOrionBackgroundColor = (attrs, style) => {
|
|
1906
|
+
const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
|
|
1907
|
+
return firstString(
|
|
1908
|
+
attrs[negativePaddingBackgroundAttribute],
|
|
1909
|
+
style[negativePaddingBackgroundVariable],
|
|
1910
|
+
attrs["data-orion-background-color"],
|
|
1911
|
+
block.backgroundColor
|
|
1912
|
+
);
|
|
1913
|
+
};
|
|
1904
1914
|
var spacingTargetForComponent = (component) => {
|
|
1905
1915
|
const element = component?.getEl?.();
|
|
1906
1916
|
return element || null;
|
|
@@ -2490,13 +2500,16 @@ function GrapesPageEditor({
|
|
|
2490
2500
|
if (side) {
|
|
2491
2501
|
const attrs = selected.getAttributes?.() || {};
|
|
2492
2502
|
const selectedStyle = selected.getStyle?.() || {};
|
|
2493
|
-
const
|
|
2494
|
-
(paddingSide) =>
|
|
2503
|
+
const nextNegativePaddingBySide = Object.fromEntries(
|
|
2504
|
+
negativePaddingSides.map((paddingSide) => [
|
|
2505
|
+
paddingSide,
|
|
2506
|
+
paddingSide === side ? "" : firstString(attrs[negativePaddingAttributeForSide(paddingSide)])
|
|
2507
|
+
])
|
|
2495
2508
|
);
|
|
2496
|
-
const
|
|
2497
|
-
|
|
2498
|
-
selectedStyle[negativePaddingBackgroundVariable]
|
|
2509
|
+
const hasOtherNegativePadding = negativePaddingSides.some(
|
|
2510
|
+
(paddingSide) => Boolean(nextNegativePaddingBySide[paddingSide])
|
|
2499
2511
|
);
|
|
2512
|
+
const negativePaddingBackground = getStoredOrionBackgroundColor(attrs, selectedStyle);
|
|
2500
2513
|
selected.removeStyle?.(negativePaddingVariableForSide(side));
|
|
2501
2514
|
selected.removeAttributes?.(negativePaddingAttributeForSide(side));
|
|
2502
2515
|
selected.removeClass?.(`is-orion-negative-padding-${side}`);
|
|
@@ -2506,7 +2519,18 @@ function GrapesPageEditor({
|
|
|
2506
2519
|
}
|
|
2507
2520
|
selected.removeStyle?.(negativePaddingBackgroundVariable);
|
|
2508
2521
|
selected.removeAttributes?.(negativePaddingBackgroundAttribute);
|
|
2522
|
+
negativePaddingSides.forEach((paddingSide) => {
|
|
2523
|
+
selected.removeStyle?.(negativePaddingVariableForSide(paddingSide));
|
|
2524
|
+
selected.removeAttributes?.(negativePaddingAttributeForSide(paddingSide));
|
|
2525
|
+
selected.removeClass?.(`is-orion-negative-padding-${paddingSide}`);
|
|
2526
|
+
});
|
|
2509
2527
|
selected.removeClass?.("orion-builder-v2-negative-padding");
|
|
2528
|
+
} else if (negativePaddingBackground) {
|
|
2529
|
+
selected.addStyle?.({
|
|
2530
|
+
[negativePaddingBackgroundVariable]: negativePaddingBackground,
|
|
2531
|
+
"background-color": "transparent"
|
|
2532
|
+
});
|
|
2533
|
+
selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
|
|
2510
2534
|
}
|
|
2511
2535
|
}
|
|
2512
2536
|
}
|
|
@@ -2534,9 +2558,9 @@ function GrapesPageEditor({
|
|
|
2534
2558
|
const side = negativePaddingSideFromProperty(property);
|
|
2535
2559
|
const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
|
|
2536
2560
|
const currentStyle = selected.getStyle?.() || {};
|
|
2561
|
+
const currentAttributes = selected.getAttributes?.() || {};
|
|
2537
2562
|
const backgroundColor = firstString(
|
|
2538
|
-
currentStyle
|
|
2539
|
-
selected.getAttributes?.()[negativePaddingBackgroundAttribute],
|
|
2563
|
+
getStoredOrionBackgroundColor(currentAttributes, currentStyle),
|
|
2540
2564
|
getStyleColorValue(currentStyle, "background-color")
|
|
2541
2565
|
);
|
|
2542
2566
|
selected.addClass?.("orion-builder-v2-negative-padding");
|
|
@@ -2745,15 +2769,18 @@ function GrapesPageEditor({
|
|
|
2745
2769
|
return;
|
|
2746
2770
|
}
|
|
2747
2771
|
const panelBackgroundColor = normalizeCssColorValue(readStylePanelColor("background-color"));
|
|
2748
|
-
const
|
|
2749
|
-
const
|
|
2772
|
+
const targetStyle = target.getStyle?.() || {};
|
|
2773
|
+
const componentStyle = component?.getStyle?.() || targetStyle;
|
|
2774
|
+
const styleBackgroundColor = getStyleColorValue(componentStyle || targetStyle, "background-color");
|
|
2775
|
+
const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
|
|
2776
|
+
const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
|
|
2750
2777
|
if (!backgroundColor) {
|
|
2751
2778
|
return;
|
|
2752
2779
|
}
|
|
2753
|
-
if (getStyleColorValue(
|
|
2780
|
+
if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
|
|
2754
2781
|
target.addStyle?.({ "background-color": backgroundColor });
|
|
2755
2782
|
}
|
|
2756
|
-
if (component && component !== target && getStyleColorValue(
|
|
2783
|
+
if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
|
|
2757
2784
|
component.addStyle?.({ "background-color": backgroundColor });
|
|
2758
2785
|
}
|
|
2759
2786
|
target.addAttributes?.({
|
|
@@ -2779,7 +2806,9 @@ function GrapesPageEditor({
|
|
|
2779
2806
|
if (Object.keys(block).length === 0) {
|
|
2780
2807
|
return;
|
|
2781
2808
|
}
|
|
2782
|
-
const
|
|
2809
|
+
const style = component.getStyle?.() || {};
|
|
2810
|
+
const negativePaddingActive = hasNegativePaddingState(attrs, style);
|
|
2811
|
+
const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
|
|
2783
2812
|
if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
|
|
2784
2813
|
return;
|
|
2785
2814
|
}
|
package/package.json
CHANGED