@thinkpixellab-public/px-vue 3.0.23 → 3.0.25

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

@@ -305,7 +305,7 @@ export default {
                 rowIndex++;
             }
 
-            if (!this.padOrphans && itemIndex > itemCount) {
+            if (rows?.length && !this.padOrphans && itemIndex > itemCount) {
                 // remove empty
                 rows[rows.length - 1] = rows[rows.length - 1].filter(sp => {
                     sp.cards = sp.cards.filter(card => !!card);

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() {},
         onValidChanged(isValid, id) {
             this.$set(this.validation, id, isValid);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.23",
+    "version": "3.0.25",
     "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.
      */