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

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 (3) hide show
  1. package/dist/builder-v2/client.js +21 -12
  2. package/dist/builder-v2/client.mjs +21 -12
  3. 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");
@@ -1431,7 +1434,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1431
1434
  input.setSelectionRange(nextCursor2, nextCursor2);
1432
1435
  window.dispatchEvent(
1433
1436
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1434
- detail: { property, value: nextValue2 }
1437
+ detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1435
1438
  })
1436
1439
  );
1437
1440
  return;
@@ -1933,7 +1936,14 @@ 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 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
+ };
1937
1947
  var propertyNameFromStyleControl = (element) => {
1938
1948
  const property = element?.closest(".gjs-sm-property");
1939
1949
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2549,23 +2559,22 @@ function GrapesPageEditor({
2549
2559
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2550
2560
  selectedComponentRef.current = selected;
2551
2561
  lastSelectedComponentRef.current = selected;
2552
- const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
2553
- selected.addStyle?.(
2554
- negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
2555
- );
2562
+ selected.addStyle?.({ [property]: value });
2556
2563
  editorRef.current?.select?.(selected);
2557
2564
  };
2558
- const applyNegativePaddingInput = (property, value) => {
2559
- const negativePaddingMargin = negativePaddingMarginProperty(property);
2565
+ const applyNegativePaddingInput = (property, value, baseValue) => {
2560
2566
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2561
- if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
2567
+ if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2562
2568
  return;
2563
2569
  }
2564
2570
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2565
- const styleValue = `${value}${unit}`;
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}`;
2566
2575
  selectedComponentRef.current = selected;
2567
2576
  lastSelectedComponentRef.current = selected;
2568
- selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
2577
+ selected.addStyle?.({ [property]: styleValue });
2569
2578
  editorRef.current?.select?.(selected);
2570
2579
  };
2571
2580
  const updateSelectedOrionBlock = (updates) => {
@@ -3695,7 +3704,7 @@ function GrapesPageEditor({
3695
3704
  if (!detail.property || !detail.value) {
3696
3705
  return;
3697
3706
  }
3698
- applyNegativePaddingInput(detail.property, detail.value);
3707
+ applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3699
3708
  };
3700
3709
  const observer = new MutationObserver(() => {
3701
3710
  decorateBuilderControls();
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");
@@ -1307,7 +1310,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1307
1310
  input.setSelectionRange(nextCursor2, nextCursor2);
1308
1311
  window.dispatchEvent(
1309
1312
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1310
- detail: { property, value: nextValue2 }
1313
+ detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1311
1314
  })
1312
1315
  );
1313
1316
  return;
@@ -1809,7 +1812,14 @@ 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 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
+ };
1813
1823
  var propertyNameFromStyleControl = (element) => {
1814
1824
  const property = element?.closest(".gjs-sm-property");
1815
1825
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2425,23 +2435,22 @@ function GrapesPageEditor({
2425
2435
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2426
2436
  selectedComponentRef.current = selected;
2427
2437
  lastSelectedComponentRef.current = selected;
2428
- const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
2429
- selected.addStyle?.(
2430
- negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
2431
- );
2438
+ selected.addStyle?.({ [property]: value });
2432
2439
  editorRef.current?.select?.(selected);
2433
2440
  };
2434
- const applyNegativePaddingInput = (property, value) => {
2435
- const negativePaddingMargin = negativePaddingMarginProperty(property);
2441
+ const applyNegativePaddingInput = (property, value, baseValue) => {
2436
2442
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2437
- if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
2443
+ if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2438
2444
  return;
2439
2445
  }
2440
2446
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2441
- const styleValue = `${value}${unit}`;
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}`;
2442
2451
  selectedComponentRef.current = selected;
2443
2452
  lastSelectedComponentRef.current = selected;
2444
- selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
2453
+ selected.addStyle?.({ [property]: styleValue });
2445
2454
  editorRef.current?.select?.(selected);
2446
2455
  };
2447
2456
  const updateSelectedOrionBlock = (updates) => {
@@ -3571,7 +3580,7 @@ function GrapesPageEditor({
3571
3580
  if (!detail.property || !detail.value) {
3572
3581
  return;
3573
3582
  }
3574
- applyNegativePaddingInput(detail.property, detail.value);
3583
+ applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3575
3584
  };
3576
3585
  const observer = new MutationObserver(() => {
3577
3586
  decorateBuilderControls();
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.161",
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",