@thinkpixellab-public/px-vue 3.0.20 → 3.0.22

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-const QRCode = require('qrcode-svg');
+const QRCode = require('qrcode');
 import PxBaseResize from './PxBaseResize.vue';
 
 export default {
@@ -18,8 +18,8 @@ export default {
     mixins: [PxBaseResize],
     props: {
         content: { type: String, default: 'Hello' },
-        color: { type: String, default: '#000000' },
-        background: { type: String, default: 'transparent' },
+        foreground: { type: String, default: '#000000' },
+        background: { type: String, default: '#FFFFFF' },
         padding: { type: Number, default: 0 },
         ecl: { type: String, default: 'L' },
     },
@@ -30,7 +30,7 @@ export default {
         content() {
             this.updateSvg();
         },
-        color() {
+        foreground() {
             this.updateSvg();
         },
         background() {
@@ -39,36 +39,35 @@ export default {
         padding() {
             this.updateSvg();
         },
-        ecl() {
-            this.updateSvg();
-        },
     },
     mounted() {
-        this.resize();
+        this.updateSvg();
     },
     methods: {
-        resize() {
-            this.size = this.$el.offsetWidth;
-            this.updateSvg();
-        },
         updateSvg() {
-            this.svg = new QRCode({
-                content: this.content,
-                width: this.size,
-                height: this.size,
-                padding: this.padding,
-                color: this.color,
-                background: this.background,
-                ecl: this.ecl,
-                join: true,
-            }).svg();
+            QRCode.toString(
+                this.content,
+                {
+                    type: 'svg',
+                    margin: this.padding,
+                    color: {
+                        dark: this.foreground,
+                        light: this.background,
+                    },
+                },
+                (err, str) => {
+                    if (err) {
+                        console.warn('Error creating QR Code. \n' + err);
+                    }
+                    this.svg = str;
+                }
+            );
         },
     },
 };
 </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.20",
+    "version": "3.0.22",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.7.4",
+        "@thinkpixellab-public/px-styles": "^3.7.6",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",
@@ -22,7 +22,7 @@
         "dateformat": "^5.0.3",
         "debounce": "^1.2.1",
         "gsap": "^3.10.4",
-        "qrcode-svg": "^1.1.0",
+        "qrcode": "^1.5.1",
         "tiny-date-picker": "^3.2.8",
         "tiny-swiper": "^2.2.0",
         "vue-inline-svg": "^2.1.0"