@useinsider/guido 2.1.0 → 2.2.0-beta.071f000

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -0,0 +1,346 @@
+var G = Object.defineProperty;
+var R = (p, c, t) => c in p ? G(p, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[c] = t;
+var h = (p, c, t) => R(p, typeof c != "symbol" ? c + "" : c, t);
+import { EditorStatePropertyType as y, PreviewDeviceMode as w, ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as V } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as E } from "../../constants/selectors.js";
+import { SPACING_STEP as S, MAX_SPACING as _, MIN_SPACING as N, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as P } from "../../constants/layout.js";
+import { RecommendationConfigService as d } from "../../services/configService.js";
+import { useRecommendationExtensionStore as B } from "../../store/recommendation.js";
+import { safeGetStyle as A, safeGetParent as U } from "../../utils/tagName.js";
+import { getCurrentLayout as b, getBlockElement as x } from "../main/utils.js";
+import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
+const W = "recommendation-spacing-control", i = {
+  COLUMN_SPACING: "columnSpacing",
+  COLUMN_SPACING_LABEL: "columnSpacingLabel",
+  ROW_SPACING: "rowSpacing",
+  ROW_SPACING_LABEL: "rowSpacingLabel",
+  MOBILE_COLUMN_SPACING: "mobileColumnSpacing",
+  MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
+  MOBILE_ROW_SPACING: "mobileRowSpacing",
+  MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
+}, O = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing",
+  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
+  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
+};
+function L(p, c) {
+  if (!p)
+    return c;
+  const t = parseFloat(p);
+  return Number.isNaN(t) ? c : t;
+}
+class X extends V {
+  constructor() {
+    super(...arguments);
+    h(this, "store", B());
+    h(this, "unsubscribeOrientation", null);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
+      this._onColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     */
+    h(this, "_debouncedOnRowSpacingChange", f((t) => {
+      this._onRowSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onMobileColumnSpacingChange
+     */
+    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+      this._onMobileColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onMobileRowSpacingChange
+     */
+    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+      this._onMobileRowSpacingChange(t);
+    }, 300));
+  }
+  getId() {
+    return W;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
+      this._GuCounter({
+        name: i.COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
+      this._GuCounter({
+        name: i.ROW_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({
+        text: "Column Spacing on Mobile (px)",
+        name: i.MOBILE_COLUMN_SPACING_LABEL
+      }),
+      this._GuCounter({
+        name: i.MOBILE_COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({ text: "Row Spacing on Mobile (px)", name: i.MOBILE_ROW_SPACING_LABEL }),
+      this._GuCounter({
+        name: i.MOBILE_ROW_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._updateSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges(), this._subscribeToEditorModeChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateSpacingVisibility();
+  }
+  onDestroy() {
+    this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
+  }
+  /**
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[y.previewDeviceMode] === w.MOBILE;
+  }
+  /**
+   * Updates spacing control visibility based on layout orientation, editor mode,
+   * and products-per-row count.
+   * - List layout: hide column spacing (products are full-width), hide ALL mobile
+   *   spacing controls (list is responsive — single row spacing applies to both views)
+   * - Desktop mode: show desktop spacing, hide mobile spacing
+   * - Mobile mode: show mobile spacing, hide desktop spacing
+   * - 1 product per row: hide column spacing (no gap between single column)
+   */
+  _updateSpacingVisibility() {
+    if (!this.api)
+      return;
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || b(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), l = t.cardsInRow > 1, u = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && l), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && l), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && u), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && u), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
+  }
+  /**
+   * Reads spacing values from node config first, falls back to DOM styles.
+   * DOM fallback is only used for legacy templates that lack node config.
+   */
+  _setFormValues() {
+    if (!this.api)
+      return;
+    const t = d.hasConfig(this.currentNode), e = d.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), o = t ? e.rowSpacing : this._getStoredRowSpacing();
+    this.api.updateValues({
+      [i.COLUMN_SPACING]: n,
+      [i.ROW_SPACING]: o,
+      [i.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [i.MOBILE_ROW_SPACING]: e.mobileRowSpacing
+    });
+  }
+  /**
+   * Gets stored column spacing from the first attribute row cell's padding.
+   * Scoped to the desktop container for accurate readings.
+   * For grid layout: cells inside .recommendation-attribute-row have padding applied.
+   * For list layout: the parent of .product-card-wrapper has the padding.
+   * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
+   */
+  _getStoredColumnSpacing() {
+    if (!this.currentNode)
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (b(this.currentNode) === "grid") {
+      const u = t.querySelector(".recommendation-attribute-row"), s = u == null ? void 0 : u.querySelector("td"), I = A(s, "padding");
+      if (!I)
+        return C;
+      const M = I.trim().split(/\s+/);
+      return M.length < 2 ? C : L(M[1], C / 2) * 2;
+    }
+    const n = t.querySelector(".product-card-wrapper"), o = U(n), a = A(o, "padding");
+    if (!a)
+      return C;
+    const r = a.trim().split(/\s+/);
+    return r.length < 2 ? C : L(r[1], C / 2) * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   * Scoped to the desktop container for accurate readings.
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return P;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
+    return L(n, P);
+  }
+  // ========================================================================
+  // Desktop Spacing Handlers
+  // ========================================================================
+  /**
+   * Handles column spacing changes for desktop.
+   * Applies horizontal padding only to the desktop container elements.
+   */
+  _onColumnSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { columnSpacing: t },
+      `Changed column spacing to ${t}px`
+    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(m);
+    l && (n === "grid" ? Array.from(
+      l.querySelectorAll(".attribute-cell")
+    ).forEach((s) => {
+      o.modifyHtml(s).setStyle("padding", r);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
+    }), o.apply(new g(`Update column spacing to ${t}px`)));
+  }
+  /**
+   * Handles row spacing changes for desktop.
+   * Applies height only to spacer elements in the desktop container.
+   */
+  _onRowSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { rowSpacing: t },
+      `Changed row spacing to ${t}px`
+    ), this._storeDataAttribute(O.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier(), a = `${t}px`;
+    n.forEach((r) => {
+      o.modifyHtml(r).setStyle("height", a);
+    }), o.apply(new g(`Update row spacing to ${t}px`));
+  }
+  // ========================================================================
+  // Mobile Spacing Handlers
+  // ========================================================================
+  /**
+   * Handles column spacing changes for mobile.
+   * Applies horizontal padding only to the mobile container elements.
+   */
+  _onMobileColumnSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileColumnSpacing: t },
+      `Changed mobile column spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(E);
+    l && (n === "grid" ? Array.from(
+      l.querySelectorAll(".attribute-cell")
+    ).forEach((s) => {
+      o.modifyHtml(s).setStyle("padding", r);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
+    }), o.apply(new g(`Update mobile column spacing to ${t}px`)));
+  }
+  /**
+   * Handles row spacing changes for mobile.
+   * Applies height only to spacer elements in the mobile container.
+   */
+  _onMobileRowSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileRowSpacing: t },
+      `Changed mobile row spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(E);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier(), a = `${t}px`;
+    n.forEach((r) => {
+      o.modifyHtml(r).setStyle("height", a);
+    }), o.apply(new g(`Update mobile row spacing to ${t}px`));
+  }
+  // ========================================================================
+  // Data Attribute Storage
+  // ========================================================================
+  /**
+   * Stores a spacing value as a data attribute on the block root element
+   */
+  _storeDataAttribute(t, e) {
+    const n = x(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+  }
+  // ========================================================================
+  // Event Listeners
+  // ========================================================================
+  _listenToFormUpdates() {
+    this.api.onValueChanged(i.COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
+    }), this.api.onValueChanged(i.ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
+    });
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates spacing visibility when layout changes via the layout control
+   */
+  _subscribeToOrientationChanges() {
+    this.unsubscribeOrientation && this.unsubscribeOrientation(), this.unsubscribeOrientation = this.store.$subscribe((t) => {
+      t.type === "patch object" && (this._updateSpacingVisibility(), this._setFormValues());
+    });
+  }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * Toggles which spacing controls (desktop/mobile) are visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      y.previewDeviceMode,
+      () => {
+        this._updateSpacingVisibility();
+      }
+    );
+  }
+}
+export {
+  W as SPACING_CONTROL_ID,
+  X as SpacingControl
+};

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

@@ -1,45 +1,42 @@
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as r } from "./block.js";
-import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as d } from "./controls/button/align.js";
-import { ButtonBorderControl as l } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as m } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as C } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as a } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as c } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as s } from "./controls/button/textStyleAndFontColor.js";
-import { ImageMarginsControl as g } from "./controls/image/margins.js";
-import { ImageSizeControl as B } from "./controls/image/size.js";
-import { NameAlignControl as P } from "./controls/name/align.js";
-import { NameBackgroundControl as u } from "./controls/name/background.js";
-import { NameColorControl as y } from "./controls/name/color.js";
-import { NameFontFamilyControl as S } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as F } from "./controls/name/paddings.js";
-import { NameSizeControl as R } from "./controls/name/size.js";
-import { NameStyleControl as N } from "./controls/name/style.js";
-import { OldPriceAlignControl as O } from "./controls/oldPrice/align.js";
-import { OldPriceBackgroundControl as k } from "./controls/oldPrice/background.js";
-import { OldPriceColorControl as x } from "./controls/oldPrice/color.js";
-import { OldPriceFontFamilyControl as z } from "./controls/oldPrice/fontFamily.js";
-import { OldPricePaddingsControl as A } from "./controls/oldPrice/paddings.js";
-import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
-import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
-import { PriceAlignControl as w } from "./controls/price/align.js";
-import { PriceBackgroundControl as h } from "./controls/price/background.js";
-import { PriceColorControl as M } from "./controls/price/color.js";
-import { PriceFontFamilyControl as b } from "./controls/price/fontFamily.js";
-import { PricePaddingsControl as E } from "./controls/price/paddings.js";
-import { PriceSizeControl as j } from "./controls/price/size.js";
-import { PriceStyleControl as q } from "./controls/price/style.js";
-import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
-import D from "./recommendation.css.js";
-import { SettingsPanel as G } from "./settingsPanel.js";
-const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(M).addControl(b).addControl(E).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).build();
+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();
 export {
-  Io as default
+  F as default
 };

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

@@ -1,5 +1,5 @@
-import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class n extends o {
+import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class o extends r {
   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,9 +43,25 @@ class n extends o {
                 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 {
-  n as RecommendationIconsRegistry
+  o as RecommendationIconsRegistry
 };

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

@@ -1,18 +1,27 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls */
-.recommendation-controls-container > .container {
-    padding: 16px;
+/* Recommendation Controls - Main settings panel separators */
+.recommendation-controls-container > div {
+    border-bottom: 1px solid #e0e0e0;
 }
 
-.recommendation-controls-container > .container:first-child {
+.recommendation-controls-container > div: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