@useinsider/guido 2.1.0-beta.e13d291 → 2.1.0-beta.e2153c2

package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js

@@ -1,45 +1,60 @@
-var u = Object.defineProperty;
-var a = (i, e, t) => e in i ? u(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var n = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
-import { CommonControl as c } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as _, MAX_PRODUCTS_PER_ROW as h } from "../../constants/layout.js";
+var _ = Object.defineProperty;
+var c = (i, o, t) => o in i ? _(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
+var d = (i, o, t) => c(i, typeof o != "symbol" ? o + "" : o, t);
+import { EditorStatePropertyType as u, PreviewDeviceMode as R } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as C, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
 import { RecommendationConfigService as s } from "../../services/configService.js";
-import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
-import { getCurrentLayout as C, regenerateProductRowsWithStyles as m } from "./utils.js";
-import { useDebounceFn as p } from "../../../../../node_modules/@vueuse/shared/index.js";
-const O = "recommendation-product-layout-control", o = {
+import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
+import { ensureMobileCssRulesExist as O } from "../mobileLayout/cssRules.js";
+import { getCurrentLayout as I, regenerateMobileProductRows as g, regenerateProductRowsWithStyles as b } from "./utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const P = "recommendation-product-layout-control", e = {
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
-  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel"
+  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
+  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
 };
-class I extends c {
+class S extends h {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    n(this, "store", R());
-    n(this, "storeUnsubscription", () => {
+    d(this, "store", l());
+    d(this, "storeUnsubscription", () => {
     });
-    n(this, "_debouncedRegenerateProductRows", p(() => {
+    d(this, "_debouncedRegenerateProductRows", N(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return O;
+    return P;
   }
   getTemplate() {
     return `
             <div class="product-layout-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: o.PRODUCT_COUNT, maxValue: _ }),
-      this._GuLabel({ text: "Products in One Row", name: o.PRODUCT_IN_ROW_LABEL }),
-      this._GuCounter({ name: o.PRODUCT_IN_ROW, maxValue: h })
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: C }),
+      this._GuLabel({
+        text: "Products in One Row on Desktop",
+        name: e.PRODUCT_IN_ROW_LABEL
+      }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
+      this._GuLabel({
+        text: "Products in One Row on Mobile",
+        name: e.MOBILE_CARDS_IN_ROW_LABEL
+      }),
+      this._GuCounter({
+        name: e.MOBILE_CARDS_IN_ROW,
+        maxValue: m
+      })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._subscribeToEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
@@ -50,18 +65,40 @@ class I extends c {
   _setFormValues() {
     const t = s.getConfig(this.currentNode);
     this.api.updateValues({
-      [o.PRODUCT_COUNT]: t.size,
-      [o.PRODUCT_IN_ROW]: t.cardsInRow
+      [e.PRODUCT_COUNT]: t.size,
+      [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.MOBILE_CARDS_IN_ROW]: t.mobileCardsInRow
     });
   }
   /**
-   * Updates "Products in One Row" visibility based on layout orientation
-   * This control is hidden for list layout (products always take full width)
-   * Reads from node config first, falls back to DOM
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[u.previewDeviceMode] === R.MOBILE;
+  }
+  /**
+   * Updates counter visibility based on layout orientation and editor mode.
+   * - List layout: hide both counters (products always full-width)
+   * - Grid + desktop mode: show desktop counter, hide mobile counter
+   * - Grid + mobile mode: show mobile counter, hide desktop counter
    */
   _updateProductsInRowVisibility() {
-    const d = (s.getConfig(this.currentNode).layout || C(this.currentNode)) === "grid";
-    this.api.setVisibility(o.PRODUCT_IN_ROW, d), this.api.setVisibility(o.PRODUCT_IN_ROW_LABEL, d);
+    const r = (s.getConfig(this.currentNode).layout || I(this.currentNode)) === "grid", n = this._isMobileMode();
+    this.api.setVisibility(e.PRODUCT_IN_ROW, r && !n), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r && !n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, r && n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, r && n);
+  }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * When the user switches between desktop/mobile preview, toggles
+   * which "Products in One Row" counter is visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      u.previewDeviceMode,
+      () => {
+        this._updateProductsInRowVisibility();
+      }
+    );
   }
   _onProductCountChange(t) {
     this.currentNode && (s.updateConfig(
@@ -69,11 +106,7 @@ class I extends c {
       this.currentNode,
       { size: t },
       `Changed product count to ${t}`
-    ), this.store.$patch({
-      recommendationConfigs: {
-        size: t
-      }
-    }), this._debouncedRegenerateProductRows());
+    ), this.store.patchCurrentBlockConfig({ size: t }), this._debouncedRegenerateProductRows());
   }
   _onProductsInRowChange(t) {
     this.currentNode && (s.updateConfig(
@@ -81,23 +114,32 @@ class I extends c {
       this.currentNode,
       { cardsInRow: t },
       `Changed products per row to ${t}`
-    ), this.store.$patch({
-      recommendationConfigs: {
-        cardsInRow: t
-      }
-    }), this._debouncedRegenerateProductRows());
+    ), this.store.patchCurrentBlockConfig({ cardsInRow: t }), this._debouncedRegenerateProductRows());
+  }
+  _onMobileCardsInRowChange(t) {
+    this.currentNode && (s.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileCardsInRow: t },
+      `Changed mobile products per row to ${t}`
+    ), O(this.api), g({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier()
+    }));
   }
   _regenerateProductRows() {
-    m({
+    b({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(o.PRODUCT_COUNT, (t) => {
+    this.api.onValueChanged(e.PRODUCT_COUNT, (t) => {
       this._onProductCountChange(t.toString());
-    }), this.api.onValueChanged(o.PRODUCT_IN_ROW, (t) => {
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
       this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.MOBILE_CARDS_IN_ROW, (t) => {
+      this._onMobileCardsInRowChange(Number(t));
     });
   }
   /**
@@ -107,12 +149,12 @@ class I extends c {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const r = this.store.recommendationConfigs.orientation;
-      r !== t && (t = r, this._updateProductsInRowVisibility());
+      const a = this.store.recommendationConfigs.orientation;
+      a !== t && (t = a, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  O as PRODUCT_LAYOUT_CONTROL_ID,
-  I as ProductLayoutControl
+  P as PRODUCT_LAYOUT_CONTROL_ID,
+  S as ProductLayoutControl
 };

package/dist/extensions/Blocks/Recommendation/controls/main/shuffle.js

@@ -1,21 +1,21 @@
 var r = Object.defineProperty;
 var u = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
 var n = (o, t, e) => u(o, typeof t != "symbol" ? t + "" : t, e);
-import { UEAttr as f } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as l } from "../../../common-control.js";
+import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
 import { RecommendationConfigService as i } from "../../services/configService.js";
 import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
-const a = "recommendation-shuffle-control", s = {
+const h = "recommendation-shuffle-control", s = {
   SHUFFLE_PRODUCTS: "shuffleProducts"
 };
-class C extends l {
+class g extends f {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching
     n(this, "store", d());
   }
   getId() {
-    return a;
+    return h;
   }
   getTemplate() {
     return `
@@ -43,7 +43,7 @@ class C extends l {
     const e = i.getConfig(this.currentNode);
     this.api.setUIEAttribute(
       s.SHUFFLE_PRODUCTS,
-      f.SELECTPICKER.items,
+      l.SELECTPICKER.items,
       e.shuffleProducts
     );
   }
@@ -53,11 +53,7 @@ class C extends l {
       this.currentNode,
       { shuffleProducts: e },
       `${e ? "Enabled" : "Disabled"} product shuffle`
-    ), this.store.$patch({
-      recommendationConfigs: {
-        shuffleProducts: e
-      }
-    }));
+    ), this.store.patchCurrentBlockConfig({ shuffleProducts: e }));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(s.SHUFFLE_PRODUCTS, (e) => {
@@ -66,6 +62,6 @@ class C extends l {
   }
 }
 export {
-  a as SHUFFLE_CONTROL_ID,
-  C as ShuffleControl
+  h as SHUFFLE_CONTROL_ID,
+  g as ShuffleControl
 };