@orion-studios/payload-studio 0.6.0-beta.160 → 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 +36 -9
  2. package/dist/builder-v2/client.mjs +36 -9
  3. package/dist/builder-v2/styles.css +8 -0
  4. package/package.json +1 -1
package/dist/builder-v2/client.js CHANGED
@@ -1422,6 +1422,9 @@ var decorateBuilderNumericSteppers = (root = document) => {
1422
1422
  if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
1423
1423
  event.preventDefault();
1424
1424
  event.stopImmediatePropagation();
1425
+ if (!input.dataset.orionRawValue) {
1426
+ input.dataset.orionPaddingBase = input.value || "0";
1427
+ }
1425
1428
  const inserted = event.key === "-" ? "-" : event.key;
1426
1429
  const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
1427
1430
  const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
@@ -1933,7 +1936,13 @@ var readStylePanelColor = (property) => {
1933
1936
  return swatchColor;
1934
1937
  };
1935
1938
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1936
- var negativePaddingMarginProperty = (property) => property === "padding-top" ? "margin-top" : property === "padding-right" ? "margin-right" : property === "padding-bottom" ? "margin-bottom" : property === "padding-left" ? "margin-left" : "";
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
+ ];
1937
1946
  var propertyNameFromStyleControl = (element) => {
1938
1947
  const property = element?.closest(".gjs-sm-property");
1939
1948
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2549,23 +2558,41 @@ function GrapesPageEditor({
2549
2558
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2550
2559
  selectedComponentRef.current = selected;
2551
2560
  lastSelectedComponentRef.current = selected;
2552
- const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
2553
- selected.addStyle?.(
2554
- negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
2555
- );
2561
+ if (property.startsWith("padding-") && !value.startsWith("-")) {
2562
+ clearNegativePaddingForProperty(selected, property);
2563
+ }
2564
+ selected.addStyle?.({ [property]: value });
2556
2565
  editorRef.current?.select?.(selected);
2557
2566
  };
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
+ };
2558
2579
  const applyNegativePaddingInput = (property, value) => {
2559
- const negativePaddingMargin = negativePaddingMarginProperty(property);
2560
2580
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2561
- if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
2581
+ const variable = negativePaddingVariableForProperty(property);
2582
+ if (!selected || !variable || !value.startsWith("-")) {
2562
2583
  return;
2563
2584
  }
2564
2585
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2565
- const styleValue = `${value}${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}`;
2566
2592
  selectedComponentRef.current = selected;
2567
2593
  lastSelectedComponentRef.current = selected;
2568
- selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
2594
+ selected.addClass?.("orion-builder-v2-has-negative-padding");
2595
+ selected.addStyle?.({ [property]: "0px", [variable]: styleValue });
2569
2596
  editorRef.current?.select?.(selected);
2570
2597
  };
2571
2598
  const updateSelectedOrionBlock = (updates) => {
package/dist/builder-v2/client.mjs CHANGED
@@ -1298,6 +1298,9 @@ var decorateBuilderNumericSteppers = (root = document) => {
1298
1298
  if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
1299
1299
  event.preventDefault();
1300
1300
  event.stopImmediatePropagation();
1301
+ if (!input.dataset.orionRawValue) {
1302
+ input.dataset.orionPaddingBase = input.value || "0";
1303
+ }
1301
1304
  const inserted = event.key === "-" ? "-" : event.key;
1302
1305
  const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
1303
1306
  const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
@@ -1809,7 +1812,13 @@ var readStylePanelColor = (property) => {
1809
1812
  return swatchColor;
1810
1813
  };
1811
1814
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1812
- var negativePaddingMarginProperty = (property) => property === "padding-top" ? "margin-top" : property === "padding-right" ? "margin-right" : property === "padding-bottom" ? "margin-bottom" : property === "padding-left" ? "margin-left" : "";
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
+ ];
1813
1822
  var propertyNameFromStyleControl = (element) => {
1814
1823
  const property = element?.closest(".gjs-sm-property");
1815
1824
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2425,23 +2434,41 @@ function GrapesPageEditor({
2425
2434
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2426
2435
  selectedComponentRef.current = selected;
2427
2436
  lastSelectedComponentRef.current = selected;
2428
- const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
2429
- selected.addStyle?.(
2430
- negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
2431
- );
2437
+ if (property.startsWith("padding-") && !value.startsWith("-")) {
2438
+ clearNegativePaddingForProperty(selected, property);
2439
+ }
2440
+ selected.addStyle?.({ [property]: value });
2432
2441
  editorRef.current?.select?.(selected);
2433
2442
  };
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
+ };
2434
2455
  const applyNegativePaddingInput = (property, value) => {
2435
- const negativePaddingMargin = negativePaddingMarginProperty(property);
2436
2456
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2437
- if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
2457
+ const variable = negativePaddingVariableForProperty(property);
2458
+ if (!selected || !variable || !value.startsWith("-")) {
2438
2459
  return;
2439
2460
  }
2440
2461
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2441
- const styleValue = `${value}${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}`;
2442
2468
  selectedComponentRef.current = selected;
2443
2469
  lastSelectedComponentRef.current = selected;
2444
- selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
2470
+ selected.addClass?.("orion-builder-v2-has-negative-padding");
2471
+ selected.addStyle?.({ [property]: "0px", [variable]: styleValue });
2445
2472
  editorRef.current?.select?.(selected);
2446
2473
  };
2447
2474
  const updateSelectedOrionBlock = (updates) => {
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.160",
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",