@thinkpixellab-public/px-vue 3.0.22 → 3.0.24

package/components/PxArrowScroller.vue

@@ -3,29 +3,48 @@
     to scroll to the beginning or end of the container.
 
     <px-arrow-scroller :arrow-start-src="require(...)" :arrow-end-src="require(...)">
+
+        <template #button>
+            // this can look like a button but it will ultimately be wrapped by a button
+            // element so it should probably be a span
+        </template>
         ...
     </px-arrow-scroller>
+ar
+
 
 -->
 <template>
     <div :class="bem()">
-        <px-icon-button
-            :class="[bem('arrow', { start: true, visible: arrowStartVisible }), arrowClass]"
-            :src="arrowStartSrc"
-            size="0.8em"
-            @click="scrollTo(0)"
-        />
+        <button
+            :class="[bem('button', { start: true, visible: arrowStartVisible }), buttonClass]"
+            @click="scrollPages(-1)"
+            aria-label="Scroll to previous"
+            :disabled="!arrowStartVisible"
+        >
+            <slot name="button" :location="'start'">
+                <span :class="bem('arrow-icon')">
+                    <px-icon :src="arrowStartSrc" size="0.8em" />
+                </span>
+            </slot>
+        </button>
 
         <div :class="bem('scroller')" ref="scroller" @scroll="updateScrollArrows">
             <slot />
         </div>
 
-        <px-icon-button
-            :class="[bem('arrow', { end: true, visible: arrowEndVisible }), arrowClass]"
-            :src="arrowEndSrc"
-            size="0.8em"
-            @click="scrollTo(100000)"
-        />
+        <button
+            :class="[bem('button', { end: true, visible: arrowEndVisible }), buttonClass]"
+            @click="scrollPages(1)"
+            aria-label="Scroll to next"
+            :disabled="!arrowEndVisible"
+        >
+            <slot name="button" :location="'end'">
+                <span :class="bem('arrow-icon')">
+                    <px-icon :src="arrowEndSrc" size="0.8em" />
+                </span>
+            </slot>
+        </button>
     </div>
 </template>
 
@@ -34,16 +53,16 @@
 // import Component from '~/components/Component.vue';
 // import Mixin from '~/components/Mixin.vue';
 import PxBaseResize from './PxBaseResize.vue';
-import PxIconButton from '@thinkpixellab-public/px-vue/components/PxIconButton.vue';
+import PxIcon from '@thinkpixellab-public/px-vue/components/PxIcon.vue';
 
 export default {
     name: 'px-arrow-scroller',
-    components: { PxIconButton },
-    mixins: [PxBaseResize, PxIconButton],
+    components: { PxIcon },
+    mixins: [PxBaseResize, PxIcon],
     props: {
-        arrowStartSrc: { type: String, default: null },
-        arrowEndSrc: { type: String, default: null },
-        arrowClass: { type: String, default: null },
+        arrowStartSrc: { type: String, default: require('../assets/icons/nav-prev.svg') },
+        arrowEndSrc: { type: String, default: require('../assets/icons/nav-next.svg') },
+        buttonClass: { type: String, default: null },
     },
     data() {
         return {
@@ -74,6 +93,14 @@ export default {
             this.arrowEndVisible = fromEnd > 2;
         },
 
+        scrollPages(pageCount) {
+            if (this.$refs.scroller) {
+                let pageSize = this.$refs.scroller.offsetWidth;
+                let scrollX = Math.max(0, this.$refs.scroller.scrollLeft + pageSize * pageCount);
+                this.scrollTo(scrollX);
+            }
+        },
+
         scrollTo(x) {
             if (this.$refs.scroller) {
                 this.$refs.scroller.scrollTo({
@@ -96,8 +123,9 @@ export default {
         'arrow-start | scroller | arrow-end | auto'
     ));
 
-    &__arrow {
-        padding: 0.1em 1em 0.25em;
+    &__button {
+        position: relative;
+        align-self: center;
 
         &--start {
             grid-area: arrow-start;
@@ -115,6 +143,18 @@ export default {
             opacity: 1;
             pointer-events: visible;
         }
+
+        .px-arrow-scroller__arrow-icon {
+            @include button-icon(
+                (
+                    padding: 0.1em 1em 0.25em,
+                    cursor: pointer,
+                    display: block,
+                    alignItems: center,
+                    min-height: null,
+                )
+            );
+        }
     }
 
     &__scroller {

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/components/PxStylesPreview.vue

@@ -81,7 +81,6 @@ export default {
 
         try {
             this.config = JSON.parse(configStr);
-            console.log(`this.config: 👉 ${JSON.stringify(this.config, null, 4)}`);
         } catch {
             console.error('Could not parse px-styles config string.');
         }

package/components/PxVueTest.vue

@@ -664,9 +664,7 @@ export default {
         },
     },
     methods: {
-        toggleButtonChange(nv) {
-            console.log(`selectedKeys: 👉 ${JSON.stringify(nv, null, 4)}`);
-        },
+        toggleButtonChange(nv) {},
         onValidChanged(isValid, id) {
             this.$set(this.validation, id, isValid);
         },

package/package.json

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

package/utils/utils.js

@@ -81,6 +81,25 @@ export default {
         }
     },
 
+    /**
+     * Breaks an array into "chunks" of n items. Returns an array of arrays.
+     * @param  {} arr The array
+     * @param  {} size The number of items in each chunk
+     */
+    arrayChunk: function (arr, size) {
+        if (!arr || arr.length == 0) {
+            return [[]];
+        }
+
+        const chunks = [];
+
+        for (let i = 0; i < arr.length; i += size) {
+            chunks.push(arr.slice(i, i + size));
+        }
+
+        return chunks;
+    },
+
     /**
      * Returns an object representing the current query string parameters.
      */