@orion-studios/payload-studio 0.6.0-beta.161 → 0.6.0-beta.162

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.
Files changed (4) hide show
  1. package/dist/builder-v2/client.js +35 -17
  2. package/dist/builder-v2/client.mjs +35 -17
  3. package/dist/builder-v2/styles.css +8 -0
  4. package/package.json +1 -1
package/dist/builder-v2/client.js CHANGED
@@ -1434,7 +1434,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1434
1434
  input.setSelectionRange(nextCursor2, nextCursor2);
1435
1435
  window.dispatchEvent(
1436
1436
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1437
- detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1437
+ detail: { property, value: nextValue2 }
1438
1438
  })
1439
1439
  );
1440
1440
  return;
@@ -1936,14 +1936,13 @@ var readStylePanelColor = (property) => {
1936
1936
  return swatchColor;
1937
1937
  };
1938
1938
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1939
- var cssPixelValue = (value) => {
1940
- const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
1941
- if (!match) {
1942
- return null;
1943
- }
1944
- const parsed = Number.parseFloat(match[1]);
1945
- return Number.isFinite(parsed) ? parsed : null;
1946
- };
1939
+ var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
1940
+ var negativePaddingVariables = [
1941
+ "--orion-builder-negative-padding-top",
1942
+ "--orion-builder-negative-padding-right",
1943
+ "--orion-builder-negative-padding-bottom",
1944
+ "--orion-builder-negative-padding-left"
1945
+ ];
1947
1946
  var propertyNameFromStyleControl = (element) => {
1948
1947
  const property = element?.closest(".gjs-sm-property");
1949
1948
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2559,22 +2558,41 @@ function GrapesPageEditor({
2559
2558
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2560
2559
  selectedComponentRef.current = selected;
2561
2560
  lastSelectedComponentRef.current = selected;
2561
+ if (property.startsWith("padding-") && !value.startsWith("-")) {
2562
+ clearNegativePaddingForProperty(selected, property);
2563
+ }
2562
2564
  selected.addStyle?.({ [property]: value });
2563
2565
  editorRef.current?.select?.(selected);
2564
2566
  };
2565
- const applyNegativePaddingInput = (property, value, baseValue) => {
2567
+ const clearNegativePaddingForProperty = (component, property) => {
2568
+ const variable = negativePaddingVariableForProperty(property);
2569
+ if (!variable) {
2570
+ return;
2571
+ }
2572
+ component.removeStyle?.(variable);
2573
+ const style = component.getStyle?.() || {};
2574
+ const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
2575
+ if (!hasNegativePadding) {
2576
+ component.removeClass?.("orion-builder-v2-has-negative-padding");
2577
+ }
2578
+ };
2579
+ const applyNegativePaddingInput = (property, value) => {
2566
2580
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2567
- if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2581
+ const variable = negativePaddingVariableForProperty(property);
2582
+ if (!selected || !variable || !value.startsWith("-")) {
2568
2583
  return;
2569
2584
  }
2570
2585
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2571
- const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2572
- const adjustment = Number.parseFloat(value);
2573
- const next = Math.max(0, base + (Number.isFinite(adjustment) ? adjustment : 0));
2574
- const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2586
+ const amount = Math.abs(Number.parseFloat(value));
2587
+ if (!Number.isFinite(amount) || amount <= 0) {
2588
+ clearNegativePaddingForProperty(selected, property);
2589
+ return;
2590
+ }
2591
+ const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
2575
2592
  selectedComponentRef.current = selected;
2576
2593
  lastSelectedComponentRef.current = selected;
2577
- selected.addStyle?.({ [property]: styleValue });
2594
+ selected.addClass?.("orion-builder-v2-has-negative-padding");
2595
+ selected.addStyle?.({ [property]: "0px", [variable]: styleValue });
2578
2596
  editorRef.current?.select?.(selected);
2579
2597
  };
2580
2598
  const updateSelectedOrionBlock = (updates) => {
@@ -3704,7 +3722,7 @@ function GrapesPageEditor({
3704
3722
  if (!detail.property || !detail.value) {
3705
3723
  return;
3706
3724
  }
3707
- applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3725
+ applyNegativePaddingInput(detail.property, detail.value);
3708
3726
  };
3709
3727
  const observer = new MutationObserver(() => {
3710
3728
  decorateBuilderControls();
package/dist/builder-v2/client.mjs CHANGED
@@ -1310,7 +1310,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1310
1310
  input.setSelectionRange(nextCursor2, nextCursor2);
1311
1311
  window.dispatchEvent(
1312
1312
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1313
- detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1313
+ detail: { property, value: nextValue2 }
1314
1314
  })
1315
1315
  );
1316
1316
  return;
@@ -1812,14 +1812,13 @@ var readStylePanelColor = (property) => {
1812
1812
  return swatchColor;
1813
1813
  };
1814
1814
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1815
- var cssPixelValue = (value) => {
1816
- const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
1817
- if (!match) {
1818
- return null;
1819
- }
1820
- const parsed = Number.parseFloat(match[1]);
1821
- return Number.isFinite(parsed) ? parsed : null;
1822
- };
1815
+ var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
1816
+ var negativePaddingVariables = [
1817
+ "--orion-builder-negative-padding-top",
1818
+ "--orion-builder-negative-padding-right",
1819
+ "--orion-builder-negative-padding-bottom",
1820
+ "--orion-builder-negative-padding-left"
1821
+ ];
1823
1822
  var propertyNameFromStyleControl = (element) => {
1824
1823
  const property = element?.closest(".gjs-sm-property");
1825
1824
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2435,22 +2434,41 @@ function GrapesPageEditor({
2435
2434
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2436
2435
  selectedComponentRef.current = selected;
2437
2436
  lastSelectedComponentRef.current = selected;
2437
+ if (property.startsWith("padding-") && !value.startsWith("-")) {
2438
+ clearNegativePaddingForProperty(selected, property);
2439
+ }
2438
2440
  selected.addStyle?.({ [property]: value });
2439
2441
  editorRef.current?.select?.(selected);
2440
2442
  };
2441
- const applyNegativePaddingInput = (property, value, baseValue) => {
2443
+ const clearNegativePaddingForProperty = (component, property) => {
2444
+ const variable = negativePaddingVariableForProperty(property);
2445
+ if (!variable) {
2446
+ return;
2447
+ }
2448
+ component.removeStyle?.(variable);
2449
+ const style = component.getStyle?.() || {};
2450
+ const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
2451
+ if (!hasNegativePadding) {
2452
+ component.removeClass?.("orion-builder-v2-has-negative-padding");
2453
+ }
2454
+ };
2455
+ const applyNegativePaddingInput = (property, value) => {
2442
2456
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2443
- if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2457
+ const variable = negativePaddingVariableForProperty(property);
2458
+ if (!selected || !variable || !value.startsWith("-")) {
2444
2459
  return;
2445
2460
  }
2446
2461
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2447
- const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2448
- const adjustment = Number.parseFloat(value);
2449
- const next = Math.max(0, base + (Number.isFinite(adjustment) ? adjustment : 0));
2450
- const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2462
+ const amount = Math.abs(Number.parseFloat(value));
2463
+ if (!Number.isFinite(amount) || amount <= 0) {
2464
+ clearNegativePaddingForProperty(selected, property);
2465
+ return;
2466
+ }
2467
+ const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
2451
2468
  selectedComponentRef.current = selected;
2452
2469
  lastSelectedComponentRef.current = selected;
2453
- selected.addStyle?.({ [property]: styleValue });
2470
+ selected.addClass?.("orion-builder-v2-has-negative-padding");
2471
+ selected.addStyle?.({ [property]: "0px", [variable]: styleValue });
2454
2472
  editorRef.current?.select?.(selected);
2455
2473
  };
2456
2474
  const updateSelectedOrionBlock = (updates) => {
@@ -3580,7 +3598,7 @@ function GrapesPageEditor({
3580
3598
  if (!detail.property || !detail.value) {
3581
3599
  return;
3582
3600
  }
3583
- applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3601
+ applyNegativePaddingInput(detail.property, detail.value);
3584
3602
  };
3585
3603
  const observer = new MutationObserver(() => {
3586
3604
  decorateBuilderControls();
package/dist/builder-v2/styles.css CHANGED
@@ -2385,6 +2385,14 @@
2385
2385
  letter-spacing: 0;
2386
2386
  }
2387
2387
 
2388
+ .orion-builder-v2-has-negative-padding > .xo-builder-preview,
2389
+ .orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
2390
+ margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
2391
+ margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
2392
+ margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
2393
+ margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
2394
+ }
2395
+
2388
2396
  .xo-builder-preview *,
2389
2397
  .xo-builder-preview *::before,
2390
2398
  .xo-builder-preview *::after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.161",
3
+ "version": "0.6.0-beta.162",
4
4
  "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",