@thinkpixellab-public/px-vue 4.1.31 → 5.0.0

package/components/PxQrCode.vue

@@ -45,14 +45,14 @@ export default {
             const rectEls = svg?.querySelectorAll(':scope > rect');
             const imageEls = svg?.querySelectorAll(':scope > image');
 
-            const marginPx = (this.percentageMargin / 100) * svg.clientWidth;
-            const scale = (svg.clientWidth - marginPx * 2) / svg.clientWidth;
+            const marginPx = (this.percentageMargin / 100) * svg?.clientWidth;
+            const scale = (svg?.clientWidth - marginPx * 2) / svg?.clientWidth;
 
             // the second rect is the qrcode
             const qrRect = rectEls?.[1];
             const qrImage = imageEls?.[0];
 
-            if (!qrRect || !qrImage) {
+            if (!qrRect || !qrImage || !svg) {
                 if (retryCount < MAX_RETRIES) {
                     setTimeout(() => {
                         this.setScale(retryCount + 1);
@@ -69,86 +69,106 @@ export default {
             qrRect.style.transform = `scale(${scale})`;
             qrImage.style.transform = `scale(${scale})`;
         },
-    },
-    mounted() {
-        this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
-
-        const { margin, ...rest } = this.qrCodeConfig || {};
-
-        // margin is a percentage of the svg width
-        this.percentageMargin = margin ? Math.min(Math.max(0, margin), 100) : 0;
-
-        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,
-            ...rest,
-            type: 'svg',
-        };
-
-        if (!this.percentageMargin) {
-            this.isRendered = true;
-        }
-
-        this.qrCode = new QRCodeStyling(options);
+        setupQRCode() {
+            this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+
+            if (this.size <= 0) {
+                // setup a size observer to wait for a size, if size is 0 the qr code throws an exception
+                this.setupSizeObserver = new ResizeObserver(entries => {
+                    const size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+                    if (size > 0) {
+                        this.setupSizeObserver.disconnect();
+                        this.setupSizeObserver = null;
+                        this.setupQRCode();
+                    }
+                });
 
-        this.onSizeChange = () => {
-            const containerSize = Math.min(this.$el.clientWidth, this.$el.clientHeight);
-            this.size = containerSize;
+                this.setupSizeObserver.observe(this.$el);
 
-            if (!this.qrCode._qr) {
                 return;
             }
 
-            // 1. Get module count
-            const moduleCount = this.qrCode._qr.getModuleCount();
+            const { margin, ...rest } = this.qrCodeConfig || {};
+
+            // margin is a percentage of the svg width
+            this.percentageMargin = margin ? Math.min(Math.max(0, margin), 100) : 0;
+
+            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,
+                ...rest,
+                type: 'svg',
+            };
 
-            const naturalModSize = containerSize / moduleCount;
+            if (!this.percentageMargin) {
+                this.isRendered = true;
+            }
 
-            // 2. the qr code lib uses integer pixel sizes, so we need to round down
-            const moduleSize = Math.floor(naturalModSize);
+            this.qrCode = new QRCodeStyling(options);
 
-            // 3. recalculate actual size to position the qr code in the top left corner
-            const qrSize = moduleCount * moduleSize;
+            this.onSizeChange = () => {
+                const containerSize = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+                this.size = containerSize;
 
-            // 4. Update QR options
-            options.width = qrSize;
-            options.height = qrSize;
+                if (!this.qrCode._qr) {
+                    return;
+                }
 
-            this.qrCode.update(options);
+                // 1. Get module count
+                const moduleCount = this.qrCode._qr.getModuleCount();
 
-            this.$nextTick(() => {
-                this.setScale();
-            });
-        };
+                const naturalModSize = containerSize / moduleCount;
 
-        this.resizeObserver = new ResizeObserver(this.onSizeChange);
-        this.resizeObserver.observe(this.$el);
+                // 2. the qr code lib uses integer pixel sizes, so we need to round down
+                const moduleSize = Math.floor(naturalModSize);
 
-        this.$nextTick(() => {
-            this.qrCode.append(this.$refs.qrCode);
+                // 3. recalculate actual size to position the qr code in the top left corner
+                const qrSize = moduleCount * moduleSize;
 
-            this.onSizeChange();
+                // 4. Update QR options
+                options.width = qrSize;
+                options.height = qrSize;
 
-            if (this.percentageMargin) {
-                this.qrCode.getRawData('svg').then(() => {
-                    // QR code has been rendered
-                    this.$nextTick(() => {
-                        this.setScale();
-                    });
+                this.qrCode.update(options);
+
+                this.$nextTick(() => {
+                    this.setScale();
                 });
-            }
-        });
+            };
+
+            this.resizeObserver = new ResizeObserver(this.onSizeChange);
+            this.resizeObserver.observe(this.$el);
+
+            this.$nextTick(() => {
+                this.qrCode.append(this.$refs.qrCode);
+
+                this.onSizeChange();
+
+                if (this.percentageMargin) {
+                    this.qrCode.getRawData('svg').then(() => {
+                        // QR code has been rendered
+                        this.$nextTick(() => {
+                            this.setScale();
+                        });
+                    });
+                }
+            });
+        },
+    },
+    mounted() {
+        this.setupQRCode();
     },
     beforeUnmount() {
         this.resizeObserver?.disconnect();
+        this.setupSizeObserver?.disconnect();
     },
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.31",
+    "version": "5.0.0",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -43,7 +43,7 @@
     "devDependencies": {
         "@babel/core": "^7.26.10",
         "@chromatic-com/storybook": "^3.2.6",
-        "@nuxt/kit": "^3.15.4",
+        "@nuxt/kit": "^4.2.1",
         "@rushstack/eslint-patch": "^1.11.0",
         "@storybook/addon-essentials": "^8.6.7",
         "@storybook/addon-interactions": "^8.6.7",