@propeller-commerce/propeller-v2-vue-ui 0.3.21 → 0.3.22

package/CHANGELOG.md

@@ -8,6 +8,26 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.3.22] - 2026-06-25
+
+### Added
+
+- **Payment-method logos in `CartPaymethods`.** The component now renders each
+  method's `logo` (SDK `CartPaymethod.logo`, available in
+  `@propeller-commerce/propeller-sdk-v2` `^0.11.3`) as a square tile — logo on
+  top, name below — matching the carrier tiles. Falls back to the method name
+  when a method has no logo. New `showPaymethodLogo?: boolean` prop (default
+  `true`) mirrors `CartCarriers`' `showCarrierLogo`. Mirrors React UI 0.4.13.
+
+### Changed
+
+- **`CartPaymethods` and `CartCarriers` now lay out as a square logo grid**
+  (`grid-cols-2 sm:3 lg:4`, `aspect-square` tiles, centered logo + name, price
+  badge in the corner) instead of the previous single-column name rows. Same
+  selection behaviour, BEM classes, and `data-selected` hooks.
+- **Bumped `@propeller-commerce/propeller-sdk-v2` to `^0.11.3`** — adds the
+  `logo` field to `CartPaymethod`.
+
 ## [0.3.21] - 2026-06-24
 
 ### Changed

package/dist/components/CartPaymethods.vue.d.ts

@@ -10,6 +10,8 @@ export interface CartPaymethodsProps {
     paymentsContainerClass?: string;
     /** Display the on account payment method for anonymous users */
     showOnAccountForGuests?: boolean;
+    /** Display the payment method logo (default: true). Falls back to the name when no logo is set. */
+    showPaymethodLogo?: boolean;
     /** Action when a payment method is selected */
     onPaymethodSelect?: (paymethod: CartPaymethod) => void;
     /** Custom price formatting function */
@@ -19,5 +21,6 @@ export interface CartPaymethodsProps {
 }
 declare const _default: import('vue').DefineComponent<CartPaymethodsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CartPaymethodsProps> & Readonly<{}>, {
     showOnAccountForGuests: boolean;
+    showPaymethodLogo: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/index.cjs

@@ -3054,7 +3054,7 @@ const _hoisted_6$I = {
 };
 const _hoisted_7$I = ["value", "placeholder", "disabled"];
 const _hoisted_8$E = { class: "propeller-login-form__field space-y-2" };
-const _hoisted_9$D = { class: "flex items-center justify-between" };
+const _hoisted_9$C = { class: "flex items-center justify-between" };
 const _hoisted_10$A = {
   for: "login-password",
   class: "propeller-login-form__label text-sm font-medium leading-none"
@@ -3242,7 +3242,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
             displayForgotPassword: __props.displayForgotPasswordLink !== false && !__props.accountHeaderLoginForm
           }, () => [
             vue.createElementVNode("div", _hoisted_8$E, [
-              vue.createElementVNode("div", _hoisted_9$D, [
+              vue.createElementVNode("div", _hoisted_9$C, [
                 vue.createElementVNode("label", _hoisted_10$A, vue.toDisplayString(passwordLabel.value), 1),
                 showForgotPassword.value && !__props.accountHeaderLoginForm ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
@@ -3386,7 +3386,7 @@ const _hoisted_5$I = { class: "propeller-account-menu__user-name font-medium tex
 const _hoisted_6$H = { class: "propeller-account-menu__nav py-2" };
 const _hoisted_7$H = { class: "propeller-account-menu__list space-y-0.5" };
 const _hoisted_8$D = ["onClick", "data-active"];
-const _hoisted_9$C = { class: "propeller-account-menu__logout-wrapper px-4 py-3 border-t border-border" };
+const _hoisted_9$B = { class: "propeller-account-menu__logout-wrapper px-4 py-3 border-t border-border" };
 const _hoisted_10$z = ["aria-label", "data-open"];
 const _hoisted_11$v = {
   fill: "none",
@@ -3594,7 +3594,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                 }), 128))
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_9$C, [
+            vue.createElementVNode("div", _hoisted_9$B, [
               vue.createElementVNode("button", {
                 type: "button",
                 class: "propeller-account-menu__logout-btn flex w-full items-center gap-3 px-3 py-2 text-sm font-medium text-primary hover:bg-secondary/5 rounded-[var(--radius-control)] transition-colors",
@@ -3719,7 +3719,7 @@ const _hoisted_8$C = {
   key: 1,
   class: "flex gap-2"
 };
-const _hoisted_9$B = ["value", "placeholder", "disabled"];
+const _hoisted_9$A = ["value", "placeholder", "disabled"];
 const _hoisted_10$y = ["disabled"];
 const _hoisted_11$u = {
   key: 2,
@@ -3853,7 +3853,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
               onKeydown: _cache[2] || (_cache[2] = async (e) => handleKeyDown(e)),
               placeholder: getLabel("placeholder", "Enter action code"),
               disabled: vue.unref(loading)
-            }, null, 40, _hoisted_9$B),
+            }, null, 40, _hoisted_9$A),
             vue.createElementVNode("button", {
               type: "button",
               class: "propeller-action-code__submit bg-secondary text-primary-foreground text-sm font-medium px-4 py-2 rounded-[var(--radius-control)] hover:bg-secondary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap",
@@ -3885,7 +3885,7 @@ const _hoisted_5$G = ["min", "step", "value"];
 const _hoisted_6$F = ["disabled"];
 const _hoisted_7$F = ["min", "step", "value"];
 const _hoisted_8$B = ["disabled"];
-const _hoisted_9$A = {
+const _hoisted_9$z = {
   class: "propeller-add-to-cart__icon w-[1.1em] h-[1.1em] flex-shrink-0",
   viewBox: "0 0 24 24",
   fill: "none",
@@ -4239,7 +4239,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             onClick: _cache[4] || (_cache[4] = async (event) => handleAddToCart()),
             disabled: vue.unref(loading)
           }, [
-            (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$A, [..._cache[11] || (_cache[11] = [
+            (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$z, [..._cache[11] || (_cache[11] = [
               vue.createElementVNode("circle", {
                 cx: "8",
                 cy: "21",
@@ -4453,7 +4453,7 @@ const _hoisted_5$F = {
 const _hoisted_6$E = { class: "propeller-add-to-favorite__modal-content bg-card rounded-[var(--radius-container)] max-w-md w-full shadow-lg border" };
 const _hoisted_7$E = { class: "propeller-add-to-favorite__modal-header flex justify-between items-center p-6 pb-4" };
 const _hoisted_8$A = { class: "propeller-add-to-favorite__modal-title text-xl font-bold" };
-const _hoisted_9$z = { class: "propeller-add-to-favorite__modal-body px-6 pb-6 space-y-4" };
+const _hoisted_9$y = { class: "propeller-add-to-favorite__modal-body px-6 pb-6 space-y-4" };
 const _hoisted_10$w = { class: "propeller-add-to-favorite__member-lists space-y-2" };
 const _hoisted_11$s = ["onClick", "disabled"];
 const _hoisted_12$s = { class: "text-sm font-medium" };
@@ -4652,7 +4652,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
                 ], -1)
               ])])
             ]),
-            vue.createElementVNode("div", _hoisted_9$z, [
+            vue.createElementVNode("div", _hoisted_9$y, [
               getMemberLists().length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                 vue.createElementVNode("div", _hoisted_10$w, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getMemberLists(), (list, index2) => {
@@ -4766,7 +4766,7 @@ const _hoisted_8$z = {
   key: 1,
   class: "propeller-address-card__city text-muted-foreground"
 };
-const _hoisted_9$y = { class: "propeller-address-card__country text-muted-foreground" };
+const _hoisted_9$x = { class: "propeller-address-card__country text-muted-foreground" };
 const _hoisted_10$v = {
   key: 4,
   class: "propeller-address-card__email text-muted-foreground"
@@ -5144,7 +5144,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
               address: addr.value,
               countryName: getCountryName(addr.value?.country)
             }, () => [
-              vue.createElementVNode("div", _hoisted_9$y, vue.toDisplayString(getCountryName(addr.value?.country)), 1)
+              vue.createElementVNode("div", _hoisted_9$x, vue.toDisplayString(getCountryName(addr.value?.country)), 1)
             ]) : vue.createCommentVNode("", true),
             !!__props.showEmail && addr.value?.email ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$v, vue.toDisplayString(addr.value?.email), 1)) : vue.createCommentVNode("", true),
             !!__props.showPhone && addr.value?.phone ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$r, vue.toDisplayString(addr.value?.phone), 1)) : vue.createCommentVNode("", true),
@@ -5668,7 +5668,7 @@ const _hoisted_5$D = {
 const _hoisted_6$C = { class: "propeller-address-selector__list grid grid-cols-2 gap-4" };
 const _hoisted_7$C = ["onClick", "data-selected"];
 const _hoisted_8$y = { class: "propeller-address-selector__modal-actions flex justify-end mt-6 pt-4 border-t border-border-subtle" };
-const _hoisted_9$x = ["disabled"];
+const _hoisted_9$w = ["disabled"];
 const _hoisted_10$u = {
   key: 0,
   fill: "none",
@@ -5837,7 +5837,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
                   ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                     vue.createTextVNode(vue.toDisplayString(getLabel("useThisAddress", "Use this address")), 1)
                   ], 64))
-                ], 8, _hoisted_9$x)
+                ], 8, _hoisted_9$w)
               ])
             ], 64)) : vue.createCommentVNode("", true)
           ])
@@ -5864,7 +5864,7 @@ const _hoisted_7$B = {
   class: "propeller-cart-bonus-item__sku font-mono text-xs text-foreground-subtle"
 };
 const _hoisted_8$x = { class: "propeller-cart-bonus-item__title font-semibold text-sm md:text-base text-foreground line-clamp-2" };
-const _hoisted_9$w = { class: "propeller-cart-bonus-item__qty text-sm text-muted-foreground whitespace-nowrap" };
+const _hoisted_9$v = { class: "propeller-cart-bonus-item__qty text-sm text-muted-foreground whitespace-nowrap" };
 const _hoisted_10$t = { class: "propeller-cart-bonus-item__price font-semibold text-foreground whitespace-nowrap" };
 const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "CartBonusItems",
@@ -5926,7 +5926,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
                 item.product?.sku ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$B, vue.toDisplayString(getLabel("sku", "SKU")) + ": " + vue.toDisplayString(item.product.sku), 1)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("p", _hoisted_8$x, vue.toDisplayString(getItemName(item)), 1)
               ]),
-              vue.createElementVNode("div", _hoisted_9$w, vue.toDisplayString(item.quantity) + " × ", 1),
+              vue.createElementVNode("div", _hoisted_9$v, vue.toDisplayString(item.quantity) + " × ", 1),
               vue.createElementVNode("div", _hoisted_10$t, vue.toDisplayString(getItemTotal(item)), 1)
             ]);
           }), 128))
@@ -5937,22 +5937,24 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$H = {
   key: 0,
-  class: "propeller-cart-carriers__grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
+  class: "propeller-cart-carriers__grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"
 };
 const _hoisted_2$G = ["onClick", "data-selected"];
-const _hoisted_3$G = { class: "propeller-cart-carriers__carrier-row flex justify-between items-center" };
-const _hoisted_4$C = { class: "flex items-center gap-2" };
-const _hoisted_5$B = ["src", "alt"];
-const _hoisted_6$A = { class: "propeller-cart-carriers__carrier-name font-medium" };
-const _hoisted_7$A = {
+const _hoisted_3$G = {
   key: 0,
-  class: "propeller-cart-carriers__carrier-price text-xs bg-surface-hover text-muted-foreground px-2 py-1 rounded-full"
+  class: "propeller-cart-carriers__carrier-price absolute top-2 right-2 text-xs bg-surface-hover text-muted-foreground px-2 py-0.5 rounded-full"
 };
-const _hoisted_8$w = {
-  key: 0,
+const _hoisted_4$C = {
+  key: 1,
+  class: "propeller-cart-carriers__carrier-logo-wrap flex items-center justify-center h-10 w-full"
+};
+const _hoisted_5$B = ["src", "alt"];
+const _hoisted_6$A = { class: "propeller-cart-carriers__carrier-name font-medium text-sm" };
+const _hoisted_7$A = {
+  key: 2,
   class: "propeller-cart-carriers__carrier-deadline text-xs text-muted-foreground"
 };
-const _hoisted_9$v = {
+const _hoisted_8$w = {
   key: 1,
   class: "propeller-cart-carriers__empty text-muted-foreground italic"
 };
@@ -6024,25 +6026,22 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
               key: `${carrier.name}-${index2}`,
               onClick: async (event) => handleSelect(carrier),
               "data-selected": selectedName.value === carrier.name ? "true" : "false",
-              class: vue.normalizeClass(`propeller-cart-carriers__carrier cursor-pointer border border-border rounded-[var(--radius-container)] p-4 flex flex-col gap-2 transition-all ${selectedName.value === carrier.name ? "border-secondary bg-secondary/5 shadow-sm" : "hover:border-secondary/30"}`)
+              class: vue.normalizeClass(`propeller-cart-carriers__carrier relative cursor-pointer border rounded-[var(--radius-container)] p-3 flex flex-col items-center justify-center gap-2 text-center aspect-square transition-all ${selectedName.value === carrier.name ? "border-secondary bg-secondary/5 shadow-sm" : "border-border hover:border-secondary/30"}`)
             }, [
-              vue.createElementVNode("div", _hoisted_3$G, [
-                vue.createElementVNode("div", _hoisted_4$C, [
-                  showLogo.value && getLogoUrl(carrier) ? (vue.openBlock(), vue.createElementBlock("img", {
-                    key: 0,
-                    class: "propeller-cart-carriers__carrier-logo h-6 w-auto",
-                    src: getLogoUrl(carrier),
-                    alt: carrier.name
-                  }, null, 8, _hoisted_5$B)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("span", _hoisted_6$A, vue.toDisplayString(carrier.name), 1)
-                ]),
-                __props.showPrice !== false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$A, vue.toDisplayString(formatCarrierPrice(carrier.price)), 1)) : vue.createCommentVNode("", true)
-              ]),
-              carrier.deliveryDeadline ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_8$w, vue.toDisplayString(getLabel("deliveryDeadline", "Delivery deadline:")) + vue.toDisplayString(carrier.deliveryDeadline), 1)) : vue.createCommentVNode("", true)
+              __props.showPrice !== false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$G, vue.toDisplayString(formatCarrierPrice(carrier.price)), 1)) : vue.createCommentVNode("", true),
+              showLogo.value && getLogoUrl(carrier) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$C, [
+                vue.createElementVNode("img", {
+                  class: "propeller-cart-carriers__carrier-logo max-h-10 max-w-[80%] w-auto object-contain",
+                  src: getLogoUrl(carrier),
+                  alt: carrier.name
+                }, null, 8, _hoisted_5$B)
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("span", _hoisted_6$A, vue.toDisplayString(carrier.name), 1),
+              carrier.deliveryDeadline ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$A, vue.toDisplayString(getLabel("deliveryDeadline", "Delivery deadline:")) + vue.toDisplayString(carrier.deliveryDeadline), 1)) : vue.createCommentVNode("", true)
             ], 10, _hoisted_2$G);
           }), 128))
         ])) : vue.createCommentVNode("", true),
-        carriers.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$v, vue.toDisplayString(getLabel("noCarriers", "No carriers available.")), 1)) : vue.createCommentVNode("", true)
+        carriers.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_8$w, vue.toDisplayString(getLabel("noCarriers", "No carriers available.")), 1)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
@@ -7550,16 +7549,19 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$D = {
   key: 0,
-  class: "propeller-cart-paymethods__grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
+  class: "propeller-cart-paymethods__grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"
 };
 const _hoisted_2$C = ["onClick", "data-selected"];
-const _hoisted_3$C = { class: "propeller-cart-paymethods__method-row flex justify-between items-center" };
-const _hoisted_4$y = { class: "flex items-center gap-2" };
-const _hoisted_5$x = { class: "propeller-cart-paymethods__method-name font-medium" };
-const _hoisted_6$w = {
+const _hoisted_3$C = {
   key: 0,
-  class: "propeller-cart-paymethods__method-price text-xs bg-surface-hover text-muted-foreground px-2 py-1 rounded-full"
+  class: "propeller-cart-paymethods__method-price absolute top-2 right-2 text-xs bg-surface-hover text-muted-foreground px-2 py-0.5 rounded-full"
 };
+const _hoisted_4$y = {
+  key: 1,
+  class: "propeller-cart-paymethods__method-logo-wrap flex items-center justify-center h-10 w-full"
+};
+const _hoisted_5$x = ["src", "alt"];
+const _hoisted_6$w = { class: "propeller-cart-paymethods__method-name font-medium text-sm" };
 const _hoisted_7$w = {
   key: 1,
   class: "propeller-cart-paymethods__empty text-muted-foreground italic"
@@ -7572,6 +7574,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     user: {},
     paymentsContainerClass: {},
     showOnAccountForGuests: { type: Boolean, default: false },
+    showPaymethodLogo: { type: Boolean, default: true },
     onPaymethodSelect: {},
     formatPrice: {},
     labels: {}
@@ -7586,6 +7589,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     const showOnAccountForGuests = vue.computed(() => {
       return props.showOnAccountForGuests !== void 0 ? props.showOnAccountForGuests : false;
     });
+    const showLogo = vue.computed(() => {
+      return props.showPaymethodLogo !== void 0 ? props.showPaymethodLogo : true;
+    });
     const isGuest = vue.computed(() => {
       return !infra.user;
     });
@@ -7627,6 +7633,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
       }
       return index.formatPrice(price || 0, { symbol: infra.currency ?? "€" });
     }
+    function getLogoUrl(method) {
+      return method.logo || "";
+    }
     function handleSelect(method) {
       selectedCode.value = method.code;
       if (props.onPaymethodSelect) {
@@ -7643,14 +7652,17 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
               key: method.code,
               onClick: async (event) => handleSelect(method),
               "data-selected": selectedCode.value === method.code ? "true" : "false",
-              class: vue.normalizeClass(`propeller-cart-paymethods__method cursor-pointer border border-border rounded-[var(--radius-container)] p-4 flex flex-col gap-2 transition-all ${selectedCode.value === method.code ? "border-secondary bg-secondary/5 shadow-sm" : "hover:border-secondary/30"}`)
+              class: vue.normalizeClass(`propeller-cart-paymethods__method relative cursor-pointer border rounded-[var(--radius-container)] p-3 flex flex-col items-center justify-center gap-2 text-center aspect-square transition-all ${selectedCode.value === method.code ? "border-secondary bg-secondary/5 shadow-sm" : "border-border hover:border-secondary/30"}`)
             }, [
-              vue.createElementVNode("div", _hoisted_3$C, [
-                vue.createElementVNode("div", _hoisted_4$y, [
-                  vue.createElementVNode("span", _hoisted_5$x, vue.toDisplayString(method.name || method.code), 1)
-                ]),
-                method.price > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$w, vue.toDisplayString(formatMethodPrice(method.price)), 1)) : vue.createCommentVNode("", true)
-              ])
+              method.price > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$C, vue.toDisplayString(formatMethodPrice(method.price)), 1)) : vue.createCommentVNode("", true),
+              showLogo.value && getLogoUrl(method) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$y, [
+                vue.createElementVNode("img", {
+                  class: "propeller-cart-paymethods__method-logo max-h-10 max-w-[80%] w-auto object-contain",
+                  src: getLogoUrl(method),
+                  alt: method.name || method.code
+                }, null, 8, _hoisted_5$x)
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("span", _hoisted_6$w, vue.toDisplayString(method.name || method.code), 1)
             ], 10, _hoisted_2$C);
           }), 128))
         ])) : vue.createCommentVNode("", true),