@thinkpixellab-public/px-vue 3.0.21 → 3.0.23

package/components/PxArrowScroller.vue

@@ -0,0 +1,126 @@
+<!--
+    Creates a horizontally scrolling container with an invisible scrollbar and arrows on either side
+    to scroll to the beginning or end of the container.
+
+    <px-arrow-scroller :arrow-start-src="require(...)" :arrow-end-src="require(...)">
+        ...
+    </px-arrow-scroller>
+
+-->
+<template>
+    <div :class="bem()">
+        <px-icon-button
+            :class="[bem('arrow', { start: true, visible: arrowStartVisible }), arrowClass]"
+            :src="arrowStartSrc"
+            size="0.8em"
+            @click="scrollTo(0)"
+        />
+
+        <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)"
+        />
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// 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';
+
+export default {
+    name: 'px-arrow-scroller',
+    components: { PxIconButton },
+    mixins: [PxBaseResize, PxIconButton],
+    props: {
+        arrowStartSrc: { type: String, default: null },
+        arrowEndSrc: { type: String, default: null },
+        arrowClass: { type: String, default: null },
+    },
+    data() {
+        return {
+            arrowsVisible: false,
+            arrowStartVisible: false,
+            arrowEndVisible: false,
+        };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        resize() {
+            this.updateScrollArrows();
+        },
+        updateScrollArrows() {
+            const scroller = this.$refs.scroller;
+
+            if (!scroller) {
+                return;
+            }
+
+            const fromStart = scroller.scrollLeft;
+            const fromEnd = scroller.scrollWidth - scroller.scrollLeft - scroller.clientWidth;
+
+            this.arrowsVisible = scroller.clientWidth > scroller.scrollWidth;
+            this.arrowStartVisible = fromStart > 2;
+            this.arrowEndVisible = fromEnd > 2;
+        },
+
+        scrollTo(x) {
+            if (this.$refs.scroller) {
+                this.$refs.scroller.scrollTo({
+                    left: x,
+                    behavior: 'smooth',
+                });
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-arrow-scroller {
+    // prettier-ignore
+    @include grid-art((
+        'auto       | 1fr      | auto |',
+        'arrow-start | scroller | arrow-end | auto'
+    ));
+
+    &__arrow {
+        padding: 0.1em 1em 0.25em;
+
+        &--start {
+            grid-area: arrow-start;
+        }
+
+        &--end {
+            grid-area: arrow-end;
+        }
+
+        @include transition(opacity, $dur: 200ms);
+        opacity: 0;
+        pointer-events: none;
+
+        &--visible {
+            opacity: 1;
+            pointer-events: visible;
+        }
+    }
+
+    &__scroller {
+        grid-area: scroller;
+        overflow-x: auto;
+        @include invisible-scrollbar;
+    }
+}
+</style>

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/PxQrCode.vue

@@ -68,7 +68,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/styles/include.scss';
 .px-qr-code {
     aspect-ratio: 1;
     width: 256px;

package/package.json

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