@useinsider/guido 3.0.0-beta.7a5aecd → 3.0.0-beta.7d3a300

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

@@ -1,15 +1,15 @@
-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";
+var R = Object.defineProperty;
+var w = (u, s, t) => s in u ? R(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var C = (u, s, t) => w(u, typeof s != "symbol" ? s + "" : s, t);
+import { EditorStatePropertyType as E, PreviewDeviceMode as V, ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as B } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as P } from "../../constants/selectors.js";
+import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as G } 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";
+import { useRecommendationExtensionStore as U } from "../../store/recommendation.js";
+import { safeGetStyle as L, safeGetParent as I } from "../../utils/tagName.js";
+import { getCurrentLayout as f, getBlockElement as x } from "../main/utils.js";
+import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
 const W = "recommendation-spacing-control", i = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
@@ -19,46 +19,46 @@ const W = "recommendation-spacing-control", i = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, O = {
+}, A = {
   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;
+function M(u, s) {
+  if (!u)
+    return s;
+  const t = parseFloat(u);
+  return Number.isNaN(t) ? s : t;
 }
-class X extends V {
+class X extends B {
   constructor() {
     super(...arguments);
-    h(this, "store", B());
-    h(this, "unsubscribeOrientation", null);
+    C(this, "store", U());
+    C(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    h(this, "_debouncedOnRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnRowSpacingChange", O((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
@@ -72,16 +72,16 @@ class X extends V {
       this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
       this._GuCounter({
         name: i.COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
       this._GuCounter({
         name: i.ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: "Column Spacing on Mobile (px)",
@@ -89,16 +89,16 @@ class X extends V {
       }),
       this._GuCounter({
         name: i.MOBILE_COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       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
+        minValue: b,
+        maxValue: N,
+        step: _
       })
     ])}
             </div>
@@ -118,7 +118,7 @@ class X extends V {
    * using Stripo's EditorStatePropertyType API.
    */
   _isMobileMode() {
-    return this.api.getEditorState()[y.previewDeviceMode] === w.MOBILE;
+    return this.api.getEditorState()[E.previewDeviceMode] === V.MOBILE;
   }
   /**
    * Updates spacing control visibility based on layout orientation, editor mode,
@@ -132,8 +132,8 @@ class X extends V {
   _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);
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || f(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), c = t.cardsInRow > 1, l = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && c), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && c), 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 && l), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && l), 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.
@@ -159,20 +159,20 @@ class X extends V {
    */
   _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;
+      return g;
+    const t = this.currentNode.querySelector(S) ?? this.currentNode;
+    if (f(this.currentNode) === "grid") {
+      const l = t.querySelector(".recommendation-attribute-row"), p = l == null ? void 0 : l.querySelector("td"), h = L(p, "padding");
+      if (!h)
+        return g;
+      const y = h.trim().split(/\s+/);
+      return y.length < 2 ? g : M(y[1], g / 2) * 2;
     }
-    const n = t.querySelector(".product-card-wrapper"), o = U(n), a = A(o, "padding");
+    const n = t.querySelector(".product-card-wrapper"), o = I(n), a = L(o, "padding");
     if (!a)
-      return C;
+      return g;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? C : L(r[1], C / 2) * 2;
+    return r.length < 2 ? g : M(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -180,9 +180,9 @@ class X extends V {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return P;
-    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
-    return L(n, P);
+      return G;
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer"), n = L(e, "height");
+    return M(n, G);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -199,17 +199,18 @@ class X extends V {
       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);
+    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((p) => {
+      o.modifyHtml(p).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`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((p) => {
+      const h = I(p);
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -223,8 +224,8 @@ class X extends V {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(O.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(m);
+    ), this._storeDataAttribute(A.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(S);
     if (!e)
       return;
     const n = Array.from(
@@ -235,7 +236,7 @@ class X extends V {
     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`));
+    }), o.apply(new m(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -252,17 +253,18 @@ class X extends V {
       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);
+    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(P);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((p) => {
+      o.modifyHtml(p).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`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((p) => {
+      const h = I(p);
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -276,8 +278,8 @@ class X extends V {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(E);
+    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(P);
     if (!e)
       return;
     const n = Array.from(
@@ -288,7 +290,7 @@ class X extends V {
     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`));
+    }), o.apply(new m(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -298,7 +300,7 @@ class X extends V {
    */
   _storeDataAttribute(t, e) {
     const n = x(this.currentNode);
-    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners
@@ -333,7 +335,7 @@ class X extends V {
    */
   _subscribeToEditorModeChanges() {
     this.api.onEditorStatePropUpdated(
-      y.previewDeviceMode,
+      E.previewDeviceMode,
       () => {
         this._updateSpacingVisibility();
       }

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

@@ -8,35 +8,37 @@ 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 { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as c } from "./controls/customAttribute/index.js";
+import { SpacingControl as f } 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 = [
+import { LayoutControl as u } from "./controls/layout/index.js";
+import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
+import { RecommendationIconsRegistry as R } from "./iconsRegistry.js";
+import y from "./recommendation.css.js";
+import { SettingsPanel as B } from "./settingsPanel.js";
+const b = [
   i,
   e,
   l,
   s,
   a,
   p,
+  C,
   c
 ], P = [
   n,
   d,
+  u,
   f,
-  C,
-  u
-], b = [
+  g
+], k = [
   ...P,
-  ...B.flatMap((o) => Object.values(o))
-], F = b.reduce(
+  ...b.flatMap((o) => Object.values(o))
+], J = k.reduce(
   (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(y)
-).addStyles(R).withIconsRegistry(g).build();
+  new r().addBlock(m).withSettingsPanelRegistry(B)
+).addStyles(y).withIconsRegistry(R).build();
 export {
-  F as default
+  J as default
 };

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

@@ -3,7 +3,7 @@ const n = `/* Utils */
 
 /* Recommendation Controls - Main settings panel separators */
 .recommendation-controls-container > div {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid #eee;
 }
 
 .recommendation-controls-container > div:first-child {
@@ -18,11 +18,135 @@ const n = `/* Utils */
     padding: 0
 }
 
-/* Hide drag icon for list layout (ordering disabled) */
+/* Hide drag icon for list layout (ordering disabled) — legacy UE-ORDERABLE */
 ue-orderable.orderable-disabled .droppable-icon {
     display: none;
 }
 
+/* =============================================
+   Custom Orderable List (replaces UE-ORDERABLE)
+   ============================================= */
+
+/* Card Composition Description */
+.card-composition-description {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+    margin: 0;
+    line-height: 1.4;
+}
+
+/* Add Attribute button */
+#guido__btn-add-attribute {
+    margin: 16px;
+}
+
+#guido__btn-add-attribute .button {
+    background: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border: none;
+}
+
+#guido__btn-add-attribute .button:not(.disabled):hover {
+    background: var(--guido-color-primary-0);
+}
+
+#guido__btn-add-attribute .button.disabled {
+    background: var(--guido-color-gray-100);
+    color: var(--guido-color-gray-500);
+}
+
+/* Custom attribute select wrapper (inside orderable item) */
+.custom-attr-select-wrap {
+    flex: 1;
+    min-width: 0;
+}
+
+.custom-attr-select-wrap ue-select {
+    width: 270px;
+}
+
+/* Orderable List */
+.orderable-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.orderable-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 16px;
+    min-height: 72px;
+    background: var(--guido-color-white);
+    border-top: 1px solid #eee;
+    cursor: default;
+    transition: background 0.15s;
+    box-sizing: border-box;
+}
+
+.orderable-item:first-child {
+    border-top: none;
+}
+
+.orderable-item:hover {
+    background: #fafafa;
+}
+
+.orderable-item.dragging {
+    opacity: 0.5;
+    background: var(--guido-color-gray-1);
+}
+
+.orderable-item.drag-over {
+    border-top: 2px solid var(--guido-color-primary-500, #0A2ECC);
+}
+
+.drag-handle {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.drag-handle .drag-handle-btn .button {
+    padding: 0;
+    min-width: auto;
+    cursor: move;
+}
+
+.drag-handle .drag-handle-btn .button .icon-button {
+    color: var(--guido-color-gray-600);
+}
+
+.item-label {
+    flex: 1;
+    font-size: 13px;
+    line-height: 16px;
+    color: #333;
+}
+
+.item-action {
+    display: flex;
+    align-items: center;
+}
+
+/* Custom attribute delete button */
+.custom-attr-delete .button .icon-button {
+    color: var(--guido-color-danger-500);
+}
+
+/* Disable drag for list layout */
+.orderable-list.orderable-disabled .drag-handle {
+    display: none;
+}
+
+.orderable-list.orderable-disabled .orderable-item {
+    cursor: default;
+}
+
 /* ─── Migration Info Box ─────────────────────────────────────────────── */
 /* Shown in the settings panel title when a block was migrated from legacy */