@useinsider/guido 2.1.0-beta.e2d48fe → 2.1.0-beta.e4c3fa1

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

@@ -0,0 +1,345 @@
+var G = Object.defineProperty;
+var R = (u, c, t) => c in u ? G(u, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[c] = t;
+var h = (u, c, t) => R(u, 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 p } 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(u, c) {
+  if (!u)
+    return c;
+  const t = parseFloat(u);
+  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)
+   * - 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 = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, o = (t.layout || e || b(this.currentNode)) === "grid", r = this._isMobileMode(), a = t.cardsInRow > 1, l = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && a), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && a), this.api.setVisibility(i.ROW_SPACING, !r), this.api.setVisibility(i.ROW_SPACING_LABEL, !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && l), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && l), this.api.setVisibility(i.MOBILE_ROW_SPACING, r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, 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 = p.hasConfig(this.currentNode), e = p.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 d = t.querySelector(".recommendation-attribute-row"), s = d == null ? void 0 : d.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), r = A(o, "padding");
+    if (!r)
+      return C;
+    const a = r.trim().split(/\s+/);
+    return a.length < 2 ? C : L(a[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;
+    p.updateConfig(
+      this.api,
+      this.currentNode,
+      { columnSpacing: t },
+      `Changed column spacing to ${t}px`
+    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), a = `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", a);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), 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;
+    p.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(), r = `${t}px`;
+    n.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", r);
+    }), 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;
+    p.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileColumnSpacing: t },
+      `Changed mobile column spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), a = `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", a);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), 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;
+    p.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(), r = `${t}px`;
+    n.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", r);
+    }), 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,19 +1,42 @@
-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();
+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 {
-  xo 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