@useinsider/guido 2.0.0-beta.faa7c5d → 2.0.0-beta.fb0f99d

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

@@ -0,0 +1,44 @@
+import { createPaddingsControl as r, createTextBackgroundColorControl as C, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as c, createTextColorControl as I, createTextAlignControl as R } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
+const a = R(
+  t.PRICE_ALIGN,
+  o.PRICE,
+  n
+), i = I(
+  t.PRICE_COLOR,
+  o.PRICE,
+  n
+), E = c(
+  t.PRICE_SIZE,
+  o.PRICE,
+  n
+), P = l(
+  t.PRICE_STYLE,
+  o.PRICE,
+  n
+), m = e(
+  t.PRICE_FONT_FAMILY,
+  o.PRICE,
+  n
+), s = C(
+  t.PRICE_BACKGROUND,
+  o.PRICE,
+  n
+), d = r(
+  t.PRICE_PADDINGS,
+  o.PRICE,
+  n
+), x = {
+  align: a,
+  color: i,
+  size: E,
+  style: P,
+  fontFamily: m,
+  background: s,
+  paddings: d
+};
+export {
+  x as PriceControls
+};

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

@@ -0,0 +1,204 @@
+var P = Object.defineProperty;
+var G = (o, n, t) => n in o ? P(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
+var l = (o, n, t) => G(o, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as I } from "../../../common-control.js";
+import { SPACING_STEP as N, MAX_SPACING as _, MIN_SPACING as f, DEFAULT_COLUMN_SPACING as c, DEFAULT_ROW_SPACING as b } from "../../constants/layout.js";
+import { useRecommendationExtensionStore as L } from "../../store/recommendation.js";
+import { safeGetStyle as d, safeGetParent as V } from "../../utils/tagName.js";
+import { getCurrentLayout as m } from "../main/utils.js";
+import { useDebounceFn as A } from "../../../../../node_modules/@vueuse/shared/index.js";
+const w = "recommendation-spacing-control", a = {
+  COLUMN_SPACING: "columnSpacing",
+  COLUMN_SPACING_LABEL: "columnSpacingLabel",
+  ROW_SPACING: "rowSpacing"
+}, y = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+};
+function h(o, n) {
+  if (!o)
+    return n;
+  const t = parseFloat(o);
+  return Number.isNaN(t) ? n : t;
+}
+class q extends I {
+  constructor() {
+    super(...arguments);
+    l(this, "store", L());
+    l(this, "unsubscribeOrientation", null);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    l(this, "_debouncedOnColumnSpacingChange", A((t) => {
+      this._onColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    l(this, "_debouncedOnRowSpacingChange", A((t) => {
+      this._onRowSpacingChange(t);
+    }, 300));
+  }
+  getId() {
+    return w;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)", name: a.COLUMN_SPACING_LABEL }),
+      this._GuCounter({
+        name: a.COLUMN_SPACING,
+        minValue: f,
+        maxValue: _,
+        step: N
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: a.ROW_SPACING,
+        minValue: f,
+        maxValue: _,
+        step: N
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
+  }
+  /**
+   * Updates column spacing visibility based on layout orientation
+   * Column spacing is hidden for horizontal layout (products are stacked vertically)
+   * Reads from store first for reliability, falls back to DOM
+   */
+  _updateColumnSpacingVisibility() {
+    const i = (this.store.recommendationConfigs.orientation || m(this.currentNode)) === "vertical";
+    this.api.setVisibility(a.COLUMN_SPACING, i), this.api.setVisibility(a.COLUMN_SPACING_LABEL, i);
+  }
+  /**
+   * Reads spacing values from data attributes or returns defaults
+   */
+  _setFormValues() {
+    const t = this._getStoredColumnSpacing(), e = this._getStoredRowSpacing();
+    this.api.updateValues({
+      [a.COLUMN_SPACING]: t,
+      [a.ROW_SPACING]: e
+    });
+  }
+  /**
+   * Gets stored column spacing from the first attribute row cell's padding.
+   * For vertical layout: cells inside .recommendation-attribute-row have padding applied.
+   * For horizontal 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;
+    if (m(this.currentNode) === "vertical") {
+      const r = this.currentNode.querySelector(".recommendation-attribute-row"), O = r == null ? void 0 : r.querySelector("td"), S = d(O, "padding");
+      if (!S)
+        return c;
+      const C = S.trim().split(/\s+/);
+      return C.length < 2 ? c : h(C[1], c / 2) * 2;
+    }
+    const e = this.currentNode.querySelector(".product-card-wrapper"), i = V(e), u = d(i, "padding");
+    if (!u)
+      return c;
+    const s = u.trim().split(/\s+/);
+    return s.length < 2 ? c : h(s[1], c / 2) * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return b;
+    const t = this.currentNode.querySelector(".spacer"), e = d(t, "height");
+    return h(e, b);
+  }
+  /**
+   * Handles column spacing changes.
+   * For vertical layout: applies horizontal padding to all cells inside attribute rows.
+   * For horizontal layout: applies padding to parent of product card wrappers.
+   */
+  _onColumnSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    this._storeColumnSpacing(t);
+    const e = m(this.currentNode), i = this.api.getDocumentModifier(), s = `0 ${t / 2}px`;
+    e === "vertical" ? Array.from(
+      this.currentNode.querySelectorAll(".attribute-cell")
+    ).forEach((r) => {
+      i.modifyHtml(r).setStyle("padding", s);
+    }) : Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    ).forEach((r) => {
+      "parent" in r && r.parent() && i.modifyHtml(r.parent()).setStyle("padding", s);
+    }), i.apply(new p(`Update column spacing to ${t}px`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    this._storeRowSpacing(t);
+    const e = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (!e.length)
+      return;
+    const i = this.api.getDocumentModifier(), u = `${t}px`;
+    e.forEach((s) => {
+      i.modifyHtml(s).setStyle("height", u);
+    }), i.apply(new p(`Update row spacing to ${t}px`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(y.COLUMN_SPACING, t.toString()).apply(new p("Store column spacing"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(y.ROW_SPACING, t.toString()).apply(new p("Store row spacing"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(a.COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
+    }), this.api.onValueChanged(a.ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    });
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates column 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._updateColumnSpacingVisibility();
+    });
+  }
+}
+export {
+  w as SPACING_CONTROL_ID,
+  q 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/recommendation.css.js

@@ -13,6 +13,11 @@ const n = `/* Utils */
 .container:has(.recommendation-controls-container) {
     padding: 0
 }
+
+/* Hide drag icon for horizontal layout (ordering disabled) */
+ue-orderable.orderable-disabled .droppable-icon {
+    display: none;
+}
 `;
 export {
   n as default

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

@@ -1,117 +1,173 @@
-import { SettingsPanelRegistry as N, SettingsPanelTab as _, SettingsTab as E, ContainerControls as S, TextControls as L } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+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 { COMPOSITION_CONTROL_BLOCK_ID as C } from "./cardCompositionControl.js";
-import { RecommendationBlockId as I, RecommendationControlId as T } from "./constants.js";
-import { CONTROL_BLOCK_ID as e } from "./control.js";
-class G extends N {
+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 {
   registerBlockControls(O) {
     O[R] = [
-      new _(
-        E.SETTINGS,
+      new I(
+        T.SETTINGS,
         [
-          e,
-          S.EXTERNAL_INDENTS
+          L,
+          E.EXTERNAL_INDENTS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          L.TEXT_BLOCK_BACKGROUND_COLOR
+          C.TEXT_BLOCK_BACKGROUND_COLOR,
+          B,
+          D,
+          U
         ]
       ),
-      new _(
+      new I(
         "Card Composition",
         [
-          C
+          A
         ]
       ).withLabel("Card Composition")
-    ], O[I.NAME] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.NAME] = [
+      new I(
+        T.SETTINGS,
         [
-          T.NAME_BACKGROUND,
-          T.NAME_COLOR,
-          T.NAME_SIZE,
-          T.NAME_STYLE,
-          T.NAME_FONT_FAMILY
+          _.NAME_STYLE,
+          _.NAME_ALIGN,
+          _.NAME_TEXT_TRIM,
+          _.NAME_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.NAME_ALIGN,
-          T.NAME_PADDINGS
+          _.NAME_BACKGROUND,
+          _.NAME_FONT_FAMILY,
+          _.NAME_SIZE,
+          _.NAME_COLOR
         ]
       )
-    ], O[I.PRICE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.PRICE_BACKGROUND,
-          T.PRICE_COLOR,
-          T.PRICE_SIZE,
-          T.PRICE_STYLE,
-          T.PRICE_FONT_FAMILY
+          _.PRICE_STYLE,
+          _.PRICE_ALIGN,
+          _.PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.PRICE_ALIGN,
-          T.PRICE_PADDINGS
+          _.PRICE_BACKGROUND,
+          _.PRICE_FONT_FAMILY,
+          _.PRICE_SIZE,
+          _.PRICE_COLOR
         ]
       )
-    ], O[I.OLD_PRICE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OLD_PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.OLD_PRICE_BACKGROUND,
-          T.OLD_PRICE_COLOR,
-          T.OLD_PRICE_SIZE,
-          T.OLD_PRICE_STYLE,
-          T.OLD_PRICE_FONT_FAMILY
+          _.OLD_PRICE_STYLE,
+          _.OLD_PRICE_ALIGN,
+          _.OLD_PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.OLD_PRICE_ALIGN,
-          T.OLD_PRICE_PADDINGS
+          _.OLD_PRICE_BACKGROUND,
+          _.OLD_PRICE_FONT_FAMILY,
+          _.OLD_PRICE_SIZE,
+          _.OLD_PRICE_COLOR
         ]
       )
-    ], O[I.BUTTON] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OMNIBUS_PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.BUTTON_TEXT,
-          T.BUTTON_ALIGN,
-          T.BUTTON_MARGINS,
-          T.BUTTON_PADDINGS
+          _.OMNIBUS_PRICE_TEXT_BEFORE,
+          _.OMNIBUS_PRICE_TEXT_AFTER,
+          _.OMNIBUS_PRICE_STYLE,
+          _.OMNIBUS_PRICE_ALIGN,
+          _.OMNIBUS_PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.BUTTON_COLOR,
-          T.BUTTON_FONT_FAMILY,
-          T.BUTTON_TEXT_SIZE,
-          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          T.BUTTON_FIT_TO_CONTENT,
-          T.BUTTON_BORDER_RADIUS,
-          T.BUTTON_BORDER
+          _.OMNIBUS_PRICE_BACKGROUND,
+          _.OMNIBUS_PRICE_FONT_FAMILY,
+          _.OMNIBUS_PRICE_SIZE,
+          _.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], O[I.IMAGE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OMNIBUS_DISCOUNT] = [
+      new I(
+        T.SETTINGS,
         [
-          T.IMAGE_SIZE,
-          T.IMAGE_MARGINS
+          _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
+          _.OMNIBUS_DISCOUNT_TEXT_AFTER,
+          _.OMNIBUS_DISCOUNT_STYLE,
+          _.OMNIBUS_DISCOUNT_ALIGN,
+          _.OMNIBUS_DISCOUNT_PADDINGS
+        ]
+      ),
+      new I(
+        T.STYLES,
+        [
+          _.OMNIBUS_DISCOUNT_BACKGROUND,
+          _.OMNIBUS_DISCOUNT_FONT_FAMILY,
+          _.OMNIBUS_DISCOUNT_SIZE,
+          _.OMNIBUS_DISCOUNT_COLOR
+        ]
+      )
+    ], O[N.BUTTON] = [
+      new I(
+        T.SETTINGS,
+        [
+          _.BUTTON_TEXT,
+          _.BUTTON_ALIGN,
+          _.BUTTON_PADDINGS,
+          _.BUTTON_MARGINS
+        ]
+      ),
+      new I(
+        T.STYLES,
+        [
+          _.BUTTON_COLOR,
+          _.BUTTON_FONT_FAMILY,
+          _.BUTTON_TEXT_SIZE,
+          _.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+          _.BUTTON_FIT_TO_CONTENT,
+          _.BUTTON_BORDER_RADIUS,
+          _.BUTTON_BORDER
+        ]
+      )
+    ], O[N.IMAGE] = [
+      new I(
+        T.SETTINGS,
+        [
+          _.IMAGE_SIZE,
+          _.IMAGE_MARGINS
         ]
       )
     ];
   }
 }
 export {
-  G as SettingsPanel
+  s as SettingsPanel
 };