@thinkpixellab-public/px-vue 4.1.21 → 4.1.23

package/bases/PxBaseSvg.vue

@@ -169,7 +169,7 @@ export default {
 
     methods: {
         transformSvgString(svg) {
-            if (isServer() || typeof DOMParser === undefined) {
+            if (isServer() || DOMParser === undefined) {
                 return svg;
             }
 

package/components/PxQrCode.vue

@@ -7,55 +7,99 @@
 -->
 <template>
     <div style="aspect-ratio: 1">
-        <client-only>
-            <qrcode-vue
-                v-if="content"
-                :value="content"
-                role="img"
-                :size="size"
-                :margin="padding"
-                :aria-label="label || content"
-                :image-settings="imageSettingsLocal"
-                level="M"
-            ></qrcode-vue>
-        </client-only>
+        <div
+            class="px-qr-code"
+            ref="qrCode"
+            :style="{ width: size + 'px', height: size + 'px' }"
+            role="img"
+            :aria-label="label || content"
+        ></div>
     </div>
 </template>
 
 <script>
-import QrcodeVue from 'qrcode.vue';
+import QRCodeStyling from 'qr-code-styling';
+
 // test
 
 export default {
     name: 'px-qr-code',
-    components: { QrcodeVue },
     props: {
         content: { type: String, default: 'Hello' },
         label: { type: String },
         padding: { type: Number, default: 0 },
         imageSettings: { type: Object, default: () => ({}) },
+        qrCodeConfig: { type: Object, default: null },
     },
     data() {
         return { size: 0 };
     },
-    computed: {
-        imageSettingsLocal() {
-            // qrcode.vue crashes if imageSettings is not an object
-            return this.imageSettings || {};
-        },
-    },
     mounted() {
         this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
 
+        const options = {
+            width: this.size,
+            height: this.size,
+            image: this.imageSettings?.src || null,
+            imageOptions: {
+                hideBackgroundDots: false,
+                imageSize: this.imageSettings?.size || 0.1,
+                margin: 0,
+                crossOrigin: 'anonymous',
+            },
+            data: this.content,
+            ...this.qrCodeConfig,
+            type: 'svg',
+        };
+
+        this.qrCode = new QRCodeStyling(options);
+
         this.onSizeChange = () => {
-            this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+            const containerSize = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+            this.size = containerSize;
+
+            if (!this.qrCode._qr) {
+                return;
+            }
+
+            // 1. Get module count
+            const moduleCount = this.qrCode._qr.getModuleCount();
+
+            const naturalModSize = containerSize / moduleCount;
+
+            // 2. the qr code lib uses integer pixel sizes, so we need to round down
+            const moduleSize = Math.floor(naturalModSize);
+
+            // 3. recalculate actual size to position the qr code in the top left corner
+            const qrSize = moduleCount * moduleSize;
+
+            // 4. Update QR options
+            options.width = qrSize;
+            options.height = qrSize;
+
+            this.qrCode.update(options);
         };
 
         this.resizeObserver = new ResizeObserver(this.onSizeChange);
         this.resizeObserver.observe(this.$el);
+
+        this.$nextTick(() => {
+            this.qrCode.append(this.$refs.qrCode);
+
+            this.onSizeChange();
+        });
     },
     beforeUnmount() {
         this.resizeObserver?.disconnect();
     },
 };
 </script>
+
+<style lang="scss">
+.px-qr-code {
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.21",
+    "version": "4.1.23",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -31,7 +31,7 @@
         "gsap": "^3.12.7",
         "highlight.js": "^11.11.1",
         "mitt": "^3.0.1",
-        "qrcode.vue": "^3.6.0",
+        "qr-code-styling": "^1.9.2",
         "sortablejs": "^1.15.6",
         "throttle-debounce": "^5.0.2",
         "tiny-date-picker": "^3.2.8",