@propeller-commerce/propeller-v2-vue-ui 0.3.15 → 0.3.18

package/CHANGELOG.md

@@ -8,6 +8,74 @@ 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.18] - 2026-06-19
+
+### Added
+
+- **`GridFiltersPanel`** — a responsive wrapper around `GridFilters`. At `lg`
+  (1024px) and up it renders the filters as the inline sidebar; below `lg` it
+  collapses them behind a "Filters" button that opens a left slide-in drawer
+  (dimmed backdrop, close button, "Show results" to dismiss). A single
+  `GridFilters` instance backs both layouts — no duplicate fetch or state.
+  Replaces the host's `<aside><GridFilters/></aside>`. New label keys:
+  `filtersButton`, `applyFilters`, `closeFilters`. Optional `activeFilterCount`
+  shows a badge on the button.
+
+## [0.3.17] - 2026-06-19
+
+### Fixed
+
+- **Product card list view broke on desktop after the 0.3.16 mobile
+  redesign.** The mobile-first footer (`flex-col`, full-width `AddToCart`
+  controls) leaked into the desktop row layout because the `md:` overrides
+  lost the cross-Tailwind cascade. The desktop (≥768px) row intent is now
+  restated on the BEM hook classes in `styles.css` — footer back to a row,
+  `__footer-meta` to `display: contents`, and the `AddToCart` controls back to
+  a single nowrap row with a fixed-width quantity input.
+- **Price clipped in the mobile grid card.** The stock + price meta row could
+  overflow a narrow (~190px) grid card. The row now wraps and the price is
+  allowed to shrink (`min-w-0`, right-aligned) instead of being cut off.
+
+### Changed
+
+- **`ClusterCard` gets the same responsive footer as `ProductCard`.** Below
+  768px the list view uses a 2-row footer (stock/price, then full-width "View
+  cluster" button) and the grid view pairs stock/price in a wrapping meta row;
+  desktop (≥768px) is unchanged.
+
+## [0.3.16] - 2026-06-19
+
+### Changed
+
+- **Mobile product card layout (below 768px).** On narrow viewports the
+  `ProductCard` action area no longer overflows the card edge — the quantity
+  stepper and "Add to cart" button were clipped. Below `md` (768px):
+  - **List view** (`columns === 1`): the footer becomes two rows — stock and
+    price share the first row (`justify-between`), and the full-width
+    `AddToCart` (stepper + button) sits on the second row.
+  - **Grid view** (`columns > 1`): the footer becomes three rows — stock ↔
+    price, then a full-width stepper, then a full-width button.
+
+  At `md` and up the previous desktop layout is unchanged. This flows through
+  every surface that renders `ProductCard` / `ProductGrid` (catalog, search,
+  product slider). Implemented purely with responsive Tailwind classes — no
+  JavaScript width detection.
+
+### Added
+
+- **Cart icon in the `AddToCart` button.** The submit button now renders a
+  built-in cart glyph (`.propeller-add-to-cart__icon`) before its label, drawn
+  with `currentColor` and `em` sizing so consumers can restyle its size,
+  colour and stroke via CSS.
+
+### Fixed
+
+- **`CartItem` lost its card border and delete button.** Vue coerces an
+  unpassed `Boolean` prop to `false`, so the on-by-default `cardFrame` and
+  `showDelete` props evaluated to `false` and hid the card frame and the
+  delete (trash) button. Both now default to `true` explicitly via
+  `withDefaults`.
+
 ## [0.3.15] - 2026-06-11
 
 ### Fixed

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

@@ -168,6 +168,8 @@ declare const __VLS_component: import('vue').DefineComponent<CartItemProps, {},
     titleLinkable: boolean;
     showSku: boolean;
     enableIncrementDecrement: boolean;
+    cardFrame: boolean;
+    showDelete: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -198,6 +198,19 @@ declare function __VLS_template(): {
             showAvailability: boolean;
             labels: Record<string, string> | undefined;
         }): any;
+        stock?(_: {
+            cluster: Cluster;
+            inventory: import('@propeller-commerce/propeller-sdk-v2').ProductInventory;
+            showAvailability: boolean;
+            labels: Record<string, string> | undefined;
+        }): any;
+        price?(_: {
+            cluster: Cluster;
+            price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice | undefined;
+            includeTax: boolean;
+            currency: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
         price?(_: {
             cluster: Cluster;
             price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice | undefined;

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

@@ -0,0 +1,13 @@
+import { GridFiltersProps } from './GridFilters.vue';
+export interface GridFiltersPanelProps extends GridFiltersProps {
+    /**
+     * Number of active filters, shown as a badge on the mobile trigger button.
+     * The host computes this from its active filter state. Omit or 0 to hide
+     * the badge.
+     */
+    activeFilterCount?: number;
+    /** Extra CSS class on the outer panel root. */
+    wrapperClassName?: string;
+}
+declare const _default: import('vue').DefineComponent<GridFiltersPanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<GridFiltersPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -280,6 +280,19 @@ declare function __VLS_template(): {
             showAvailability: boolean;
             labels: Record<string, string> | undefined;
         }): any;
+        stock?(_: {
+            product: Product;
+            inventory: import('@propeller-commerce/propeller-sdk-v2').ProductInventory | undefined;
+            showAvailability: boolean;
+            labels: Record<string, string> | undefined;
+        }): any;
+        price?(_: {
+            product: Product;
+            price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice;
+            includeTax: boolean;
+            currency: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
         price?(_: {
             product: Product;
             price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice;