@useinsider/guido 2.2.0-beta.8abc7b6 → 2.2.0-beta.953ff70

package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js

@@ -0,0 +1,188 @@
+var C = Object.defineProperty;
+var g = (i, r, e) => r in i ? C(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var S = (i, r, e) => g(i, typeof r != "symbol" ? r + "" : r, e);
+import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../common-control.js";
+import { useDebounceFn as d } from "../../../../node_modules/@vueuse/shared/index.js";
+const _ = "recommendation-spacing-control", c = {
+  COLUMN_SPACING: "columnSpacing",
+  ROW_SPACING: "rowSpacing"
+}, N = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+}, n = {
+  COLUMN_SPACING: 10,
+  // 5px on each side = 10px total
+  ROW_SPACING: 20
+}, p = {
+  MIN_SPACING: 0,
+  MAX_SPACING: 50,
+  STEP: 5
+};
+class G extends m {
+  constructor() {
+    super(...arguments);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnColumnSpacingChange", d((e) => {
+      this._onColumnSpacingChange(e);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnRowSpacingChange", d((e) => {
+      this._onRowSpacingChange(e);
+    }, 300));
+  }
+  getId() {
+    return _;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)" }),
+      this._GuCounter({
+        name: c.COLUMN_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: c.ROW_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  /**
+   * Reads spacing values from data attributes or returns defaults
+   */
+  _setFormValues() {
+    const e = this._getStoredColumnSpacing(), t = this._getStoredRowSpacing();
+    this.api.updateValues({
+      [c.COLUMN_SPACING]: e,
+      [c.ROW_SPACING]: t
+    });
+  }
+  /**
+   * Gets stored column spacing from the first product card wrapper's parent element's padding
+   * Reads the actual padding value instead of relying on data attributes
+   *
+   * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
+   * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
+   */
+  _getStoredColumnSpacing() {
+    if (!this.currentNode)
+      return n.COLUMN_SPACING;
+    const e = this.currentNode.querySelector(".product-card-wrapper");
+    if (!e || !("parent" in e) || typeof e.parent != "function")
+      return n.COLUMN_SPACING;
+    const t = e.parent();
+    if (!t || !("getStyle" in t))
+      return n.COLUMN_SPACING;
+    const o = t.getStyle("padding");
+    if (!o)
+      return n.COLUMN_SPACING;
+    const u = o.trim().split(/\s+/);
+    if (u.length < 2)
+      return n.COLUMN_SPACING;
+    const [, a] = u, s = parseFloat(a);
+    return Number.isNaN(s) ? n.COLUMN_SPACING : s * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   * Reads the actual height value instead of relying on data attributes
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return n.ROW_SPACING;
+    const e = this.currentNode.querySelector(".spacer");
+    if (!e || !("getStyle" in e))
+      return n.ROW_SPACING;
+    const t = e.getStyle("height");
+    if (!t)
+      return n.ROW_SPACING;
+    const o = parseFloat(t);
+    return Number.isNaN(o) ? n.ROW_SPACING : o;
+  }
+  /**
+   * Handles column spacing changes
+   * Applies horizontal padding to all product card wrappers
+   */
+  _onColumnSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    );
+    if (!t)
+      return;
+    const o = this.api.getDocumentModifier(), a = `0 ${e / 2}px`;
+    console.debug("padding", a), t.forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), o.apply(new l(`Update column spacing to ${e}px`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    this._storeRowSpacing(e);
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (console.debug("spacerCells", t), console.debug("spacing", e), !t.length)
+      return;
+    const o = this.api.getDocumentModifier(), u = `${e}px`;
+    t.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", u);
+    }), o.apply(new l(`Update row spacing to ${e}px`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.COLUMN_SPACING, e.toString()).apply(new l("Store column spacing"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.ROW_SPACING, e.toString()).apply(new l("Store row spacing"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(c.COLUMN_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnColumnSpacingChange(t);
+    }), this.api.onValueChanged(c.ROW_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnRowSpacingChange(t);
+    });
+  }
+}
+export {
+  _ as SPACING_CONTROL_ID,
+  G as SpacingControl
+};

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,42 +1,19 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as m } from "./block.js";
-import { RecommendationBlockControl as n } from "./controls/main/index.js";
-import "./store/recommendation.js";
-import { NameControls as i } from "./controls/name/index.js";
-import { PriceControls as e } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
-import { OmnibusPriceControls as s } from "./controls/omnibusPrice/index.js";
-import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
-import { ButtonControls as p } from "./controls/button/index.js";
-import { ImageControls as c } from "./controls/image/index.js";
-import { SpacingControl as C } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as d } from "./controls/cardBackground/index.js";
-import { LayoutControl as f } from "./controls/layout/index.js";
-import { RecommendationCardCompositionControl as u } from "./controls/cardComposition/index.js";
-import { RecommendationIconsRegistry as g } from "./iconsRegistry.js";
-import R from "./recommendation.css.js";
-import { SettingsPanel as y } from "./settingsPanel.js";
-const B = [
-  i,
-  e,
-  l,
-  s,
-  a,
-  p,
-  c
-], P = [
-  n,
-  d,
-  f,
-  C,
-  u
-], b = [
-  ...P,
-  ...B.flatMap((o) => Object.values(o))
-], F = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(y)
-).addStyles(R).withIconsRegistry(g).build();
+import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlock as t } from "./block.js";
+import { RecommendationCardCompositionControl as n } from "./cardCompositionControl.js";
+import { RecommendationBlockControl as r } from "./control.js";
+import { ButtonAlignControl as l, ButtonBorderControl as d, ButtonBorderRadiusControl as C, ButtonColorControl as i, ButtonFitToContentControl as a, ButtonFontFamilyControl as e, ButtonMarginsControl as m, ButtonPaddingsControl as s, ButtonTextControl as c, ButtonTextSizeControl as u, ButtonTextStyleAndFontColorControl as P, ImageMarginsControl as g, ImageSizeControl as B, NameAlignControl as O, NameBackgroundControl as f, NameColorControl as b, NameFontFamilyControl as p, NamePaddingsControl as y, NameSizeControl as S, NameStyleControl as F, OldPriceAlignControl as x, OldPriceBackgroundControl as T, OldPriceColorControl as k, OldPriceFontFamilyControl as A, OldPricePaddingsControl as D, OldPriceSizeControl as N, OldPriceStyleControl as R, OmnibusPriceAlignControl as z, OmnibusPriceBackgroundControl as I, OmnibusPriceColorControl as w, OmnibusPriceFontFamilyControl as h, OmnibusPricePaddingsControl as M, OmnibusPriceSizeControl as E, OmnibusPriceStyleControl as j, OmnibusDiscountAlignControl as q, OmnibusDiscountBackgroundControl as v, OmnibusDiscountColorControl as G, OmnibusDiscountFontFamilyControl as H, OmnibusDiscountPaddingsControl as J, OmnibusDiscountSizeControl as K, OmnibusDiscountStyleControl as L, PriceAlignControl as Q, PriceBackgroundControl as U, PriceColorControl as V, PriceFontFamilyControl as W, PricePaddingsControl as X, PriceSizeControl as Y, PriceStyleControl as Z } from "./controls/index.js";
+import { RecommendationIconsRegistry as _ } from "./iconsRegistry.js";
+import $ from "./recommendation.css.js";
+import { SettingsPanel as oo } from "./settingsPanel.js";
+import { CardBackgroundColorControl as to } from "./controls/cardBackgroundColorControl.js";
+import { SpacingControl as no } from "./controls/spacingControl.js";
+import { NameTextTrimControl as ro } from "./controls/nameTextTrimControl.js";
+import { OmnibusPriceTextBeforeControl as lo } from "./controls/omnibusPriceTextBeforeControl.js";
+import { OmnibusPriceTextAfterControl as Co } from "./controls/omnibusPriceTextAfterControl.js";
+import { OmnibusDiscountTextBeforeControl as io } from "./controls/omnibusDiscountTextBeforeControl.js";
+import { OmnibusDiscountTextAfterControl as ao } from "./controls/omnibusDiscountTextAfterControl.js";
+const xo = new o().addBlock(t).withSettingsPanelRegistry(oo).addControl(r).addControl(to).addControl(no).addControl(l).addControl(d).addControl(C).addControl(i).addControl(a).addControl(e).addControl(m).addControl(s).addControl(c).addControl(u).addControl(P).addControl(g).addControl(B).addControl(O).addControl(f).addControl(b).addControl(p).addControl(y).addControl(S).addControl(F).addControl(ro).addControl(x).addControl(T).addControl(k).addControl(A).addControl(D).addControl(N).addControl(R).addControl(z).addControl(I).addControl(w).addControl(h).addControl(M).addControl(E).addControl(j).addControl(lo).addControl(Co).addControl(q).addControl(v).addControl(G).addControl(H).addControl(J).addControl(K).addControl(L).addControl(io).addControl(ao).addControl(Q).addControl(U).addControl(V).addControl(W).addControl(X).addControl(Y).addControl(Z).addControl(n).addStyles($).withIconsRegistry(_).build();
 export {
-  F as default
+  xo as default
 };

package/dist/extensions/Blocks/Recommendation/iconsRegistry.js

@@ -1,5 +1,5 @@
-import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class o extends r {
+import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class n extends o {
   registerIconsSvg(C) {
     C["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -43,25 +43,9 @@ class o extends r {
                 3.40029 12.0082 3.25285 11.7656 3.15234C11.365 2.98638 11.0001 2.64849 11 2.21484V2Z" 
                 fill="currentColor"/>
             </svg>
-        `, C["grid-orientation"] = `
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-                <rect x="1" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-                <rect x="12" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-                <rect x="1" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-                <rect x="12" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-            </svg>
-        `, C["list-orientation"] = `
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-                <circle cx="3" cy="4" r="1" stroke="currentColor" stroke-width="1"/>
-                <rect x="7" y="3" width="11" height="2" rx="1"/>
-                <circle cx="3" cy="10" r="1" stroke="currentColor" stroke-width="1"/>
-                <rect x="7" y="9" width="11" height="2" rx="1"/>
-                <circle cx="3" cy="16" r="1" stroke="currentColor" stroke-width="1"/>
-                <rect x="7" y="15" width="11" height="2" rx="1"/>
-            </svg>
         `;
   }
 }
 export {
-  o as RecommendationIconsRegistry
+  n as RecommendationIconsRegistry
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -1,27 +1,18 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls - Main settings panel separators */
-.recommendation-controls-container > div {
-    border-bottom: 1px solid #e0e0e0;
+/* Recommendation Controls */
+.recommendation-controls-container > .container {
+    padding: 16px;
 }
 
-.recommendation-controls-container > div:first-child {
+.recommendation-controls-container > .container:first-child {
     padding-top: 0;
 }
 
-.recommendation-controls-container > div:last-child {
-    border-bottom: none;
-}
-
 .container:has(.recommendation-controls-container) {
     padding: 0
 }
-
-/* Hide drag icon for list layout (ordering disabled) */
-ue-orderable.orderable-disabled .droppable-icon {
-    display: none;
-}
 `;
 export {
   n as default

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,27 +1,17 @@
 import { SettingsPanelRegistry as S, SettingsPanelTab as I, SettingsTab as T, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as R } from "./block.js";
-import { RecommendationBlockId as N } from "./constants/blockIds.js";
-import { RecommendationControlId as _ } from "./constants/controlIds.js";
-import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
-import "./store/recommendation.js";
-import "./controls/name/index.js";
-import "./controls/price/index.js";
-import "./controls/oldPrice/index.js";
-import "./controls/omnibusPrice/index.js";
-import "./controls/omnibusDiscount/index.js";
-import "./controls/button/index.js";
-import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as U } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackground/index.js";
-import { LAYOUT_CONTROL_ID as D } from "./controls/layout/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as A } from "./controls/cardComposition/index.js";
-class s extends S {
+import { COMPOSITION_CONTROL_BLOCK_ID as L } from "./cardCompositionControl.js";
+import { RecommendationBlockId as N, RecommendationControlId as _ } from "./constants.js";
+import { CONTROL_BLOCK_ID as U } from "./control.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackgroundColorControl.js";
+import { SPACING_CONTROL_ID as D } from "./controls/spacingControl.js";
+class m extends S {
   registerBlockControls(O) {
     O[R] = [
       new I(
         T.SETTINGS,
         [
-          L,
+          U,
           E.EXTERNAL_INDENTS
         ]
       ),
@@ -30,14 +20,13 @@ class s extends S {
         [
           C.TEXT_BLOCK_BACKGROUND_COLOR,
           B,
-          D,
-          U
+          D
         ]
       ),
       new I(
         "Card Composition",
         [
-          A
+          L
         ]
       ).withLabel("Card Composition")
     ], O[N.NAME] = [
@@ -169,5 +158,5 @@ class s extends S {
   }
 }
 export {
-  s as SettingsPanel
+  m as SettingsPanel
 };