@thinkpixellab-public/px-vue 3.0.22 → 3.0.23

package/components/PxCardGrid.vue

@@ -202,6 +202,7 @@ export default {
         debug: { type: Boolean, default: false },
         getItemCountFn: { default: null },
         getItemFn: { default: null },
+        centerSingleRow: { type: Boolean, default: true },
     },
 
     data() {
@@ -212,14 +213,23 @@ export default {
     },
     computed: {
         gridStyle() {
+            let rowCount = this.rows?.length || 0;
+            let colCount = this.columnCount;
+
+            if (this.centerSingleRow && rowCount == 1) {
+                colCount = 0;
+                this.rows[0].forEach(sp => {
+                    colCount += sp.name == 'wide' ? 2 : 1;
+                });
+            }
+
             const defAspect = aspect(this.cardAspect);
             const wideAspect = (this.cardMinWidth * 2 + this.gap) / (this.cardMinWidth / defAspect);
-            const maxGridWidth =
-                this.cardMaxWidth * this.columnCount + this.gap * (this.columnCount - 1);
+            const maxGridWidth = this.cardMaxWidth * colCount + this.gap * (this.columnCount - 1);
 
             return {
                 // prettier-ignore
-                gridTemplateColumns: `repeat(${this.columnCount}, 1fr)`,
+                gridTemplateColumns: `repeat(${colCount}, 1fr)`,
                 maxWidth: this.cssPx(maxGridWidth),
                 '--gap': this.cssPx(this.gap),
                 '--aspect': defAspect,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.22",
+    "version": "3.0.23",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",