@thinkpixellab-public/px-vue 4.1.28 → 4.1.30

package/components/PxIconButton.vue

@@ -139,7 +139,9 @@ export default {
                 min-height: 0,
             )
         );
-        outline: 1px dashed currentColor;
+        @include focus() {
+            outline: 1px dashed currentColor;
+        }
     }
 
     &--toggles.px-icon-button--unchecked {

package/components/PxQrCode.vue

@@ -10,7 +10,7 @@
         <div
             class="px-qr-code"
             ref="qrCode"
-            :style="{ width: size + 'px', height: size + 'px' }"
+            :style="{ width: size + 'px', height: size + 'px', opacity: isRendered ? 1 : 0 }"
             role="img"
             :aria-label="label || content"
         ></div>
@@ -20,8 +20,6 @@
 <script>
 import QRCodeStyling from 'qr-code-styling';
 
-// test
-
 export default {
     name: 'px-qr-code',
     props: {
@@ -32,11 +30,54 @@ export default {
         qrCodeConfig: { type: Object, default: null },
     },
     data() {
-        return { size: 0 };
+        return { size: 0, isRendered: false, percentageMargin: 0 };
+    },
+    methods: {
+        setScale(retryCount = 0) {
+            if (!this.percentageMargin) {
+                this.isRendered = true;
+                return;
+            }
+
+            const MAX_RETRIES = 10;
+
+            const svg = this.$refs.qrCode?.querySelector('svg');
+            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;
+
+            // the second rect is the qrcode
+            const qrRect = rectEls?.[1];
+            const qrImage = imageEls?.[0];
+
+            if (!qrRect || !qrImage) {
+                if (retryCount < MAX_RETRIES) {
+                    setTimeout(() => {
+                        this.setScale(retryCount + 1);
+                    }, 25);
+                } else {
+                    // Optionally, log a warning or handle the error
+                    // console.warn('QR rect or image not found after maximum retries.');
+                }
+                return;
+            }
+
+            this.isRendered = true;
+
+            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,
@@ -48,10 +89,14 @@ export default {
                 crossOrigin: 'anonymous',
             },
             data: this.content,
-            ...this.qrCodeConfig,
+            ...rest,
             type: 'svg',
         };
 
+        if (!this.percentageMargin) {
+            this.isRendered = true;
+        }
+
         this.qrCode = new QRCodeStyling(options);
 
         this.onSizeChange = () => {
@@ -78,6 +123,10 @@ export default {
             options.height = qrSize;
 
             this.qrCode.update(options);
+
+            this.$nextTick(() => {
+                this.setScale();
+            });
         };
 
         this.resizeObserver = new ResizeObserver(this.onSizeChange);
@@ -87,6 +136,15 @@ export default {
             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();
+                    });
+                });
+            }
         });
     },
     beforeUnmount() {
@@ -100,6 +158,11 @@ export default {
     svg {
         width: 100%;
         height: 100%;
+
+        rect,
+        image {
+            transform-origin: center;
+        }
     }
 }
 </style>

package/package.json

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