qrcode.vue 3.7.1 → 3.8.1

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.7.1
+ * qrcode.vue v3.8.1
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-import { defineComponent, ref, watch, h, onMounted, Fragment } from 'vue';
+import { defineComponent, h, ref, onMounted, watchEffect, Fragment, computed } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -905,10 +905,12 @@ var qrcodegen;
 })(qrcodegen || (qrcodegen = {}));
 var QR = qrcodegen;
 
+var _uid = 0;
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
 var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
+var IMAGE_EXCAVATE_THICKNESS = 2;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -928,78 +930,43 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
-function isPointInRoundedRect(px, py, rx, ry, rw, rh, r) {
-    // Fast check: point outside the bounding box
-    if (px < rx || px > rx + rw || py < ry || py > ry + rh) {
-        return false;
-    }
-    // If no border radius or point is in the center rectangle
-    if (r <= 0 || (px > rx + r && px < rx + rw - r) || (py > ry + r && py < ry + rh - r)) {
-        return true;
-    }
-    // Check the four corners
-    // Top-left corner
-    if (px < rx + r && py < ry + r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Top-right corner
-    if (px > rx + rw - r && py < ry + r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-left corner
-    if (px < rx + r && py > ry + rh - r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-right corner
-    if (px > rx + rw - r && py > ry + rh - r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    return true;
-}
 function generatePath(modules, margin) {
     if (margin === void 0) { margin = 0; }
-    var path = '';
-    modules.forEach(function (row, y) {
+    var pathSegments = [];
+    for (var y = 0; y < modules.length; y++) {
+        var row = modules[y];
         var start = null;
-        row.forEach(function (cell, x) {
+        for (var x = 0; x < row.length; x++) {
+            var cell = row[x];
             if (!cell && start !== null) {
                 // M0 0h7v1H0z injects the space with the move and drops the comma,
-                // saving a char per operation
-                path += "M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z");
+                pathSegments.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
                 start = null;
-                return;
+                continue;
             }
             // end of row, clean up or skip
             if (x === row.length - 1) {
                 if (!cell) {
                     // We would have closed the op above already so this can only mean
                     // 2+ light modules in a row.
-                    return;
+                    continue;
                 }
                 if (start === null) {
                     // Just a single dark module.
-                    path += "M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z");
+                    pathSegments.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
                 }
                 else {
                     // Otherwise finish the current line.
-                    path += "M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z");
+                    pathSegments.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
                 }
-                return;
+                continue;
             }
             if (cell && start === null) {
                 start = x;
             }
-        });
-    });
-    return path;
+        }
+    }
+    return pathSegments.join('');
 }
 function getImageSettings(cells, size, margin, imageSettings) {
     var width = imageSettings.width, height = imageSettings.height, imageX = imageSettings.x, imageY = imageSettings.y;
@@ -1021,30 +988,40 @@ function getImageSettings(cells, size, margin, imageSettings) {
     }
     return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation, borderRadius) {
-    // If no border radius, use simple rectangular excavation
-    if (!borderRadius || borderRadius <= 0) {
-        return modules.map(function (row, y) {
-            if (y < excavation.y || y >= excavation.y + excavation.h) {
-                return row;
-            }
-            return row.map(function (cell, x) {
-                if (x < excavation.x || x >= excavation.x + excavation.w) {
-                    return cell;
-                }
-                return false;
-            });
-        });
-    }
-    // For rounded corners, check each module against the rounded rectangle shape
-    return modules.map(function (row, y) {
-        return row.map(function (cell, x) {
-            if (!cell)
-                return cell;
-            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
-            return inExcavation ? false : cell;
-        });
+function useQRCode(props) {
+    var margin = computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
+    var cells = computed(function () {
+        var level = validErrorCorrectLevel(props.level) ? props.level : defaultErrorCorrectLevel;
+        return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
+    });
+    var numCells = computed(function () { return cells.value.length + margin.value * 2; });
+    var fgPath = computed(function () { return generatePath(cells.value, margin.value); });
+    var imageProps = computed(function () {
+        if (!props.imageSettings.src) {
+            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+        }
+        var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
+        return {
+            x: settings.x + margin.value,
+            y: settings.y + margin.value,
+            width: settings.w,
+            height: settings.h,
+            borderRadius: settings.borderRadius,
+        };
+    });
+    var imageBorderProps = computed(function () {
+        if (!props.imageSettings.excavate || !props.imageSettings.src)
+            return null;
+        var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
+        return {
+            x: imageProps.value.x - borderThickness,
+            y: imageProps.value.y - borderThickness,
+            width: imageProps.value.width + borderThickness * 2,
+            height: imageProps.value.height + borderThickness * 2,
+            borderRadius: imageProps.value.borderRadius,
+        };
     });
+    return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
 var QRCodeProps = {
     value: {
@@ -1111,37 +1088,10 @@ var QrcodeSvg = defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
     setup: function (props) {
-        var numCells = ref(0);
-        var fgPath = ref('');
-        var imageProps = ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
-        var generate = function () {
-            var value = props.value, _level = props.level, _margin = props.margin;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            numCells.value = cells.length + margin * 2;
-            if (props.imageSettings.src) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps.value = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
-            // Drawing strategy: instead of a rect per module, we're going to create a
-            // single path for the dark modules and layer that on top of a light rect,
-            // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-            // way faster than DOM ops.
-            // For level 1, 441 nodes -> 2
-            // For level 40, 31329 -> 2
-            fgPath.value = generatePath(cells, margin);
-        };
-        var qrGradientId = 'qrcode.vue-gradient';
+        var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
+        var uid = _uid++;
+        var qrGradientId = "qrcode.vue-gradient-".concat(uid);
+        var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
         var renderGradient = function () {
             if (!props.gradient)
                 return null;
@@ -1170,7 +1120,6 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         };
-        var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
         var renderClipPath = function () {
             var borderRadius = imageProps.value.borderRadius;
             if (!props.imageSettings.src)
@@ -1188,14 +1137,14 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         };
-        generate();
-        watch(props, generate, { deep: true });
         return function () { return h('svg', {
             width: props.size,
             height: props.size,
             'shape-rendering': "crispEdges",
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
+            role: 'img',
+            'aria-label': props.value,
         }, [
             h('defs', {}, [renderGradient(), renderClipPath()]),
             h('rect', {
@@ -1207,6 +1156,15 @@ var QrcodeSvg = defineComponent({
                 fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
+            imageBorderProps.value && h('rect', {
+                x: imageBorderProps.value.x,
+                y: imageBorderProps.value.y,
+                width: imageBorderProps.value.width,
+                height: imageBorderProps.value.height,
+                fill: props.background,
+                rx: imageBorderProps.value.borderRadius,
+                ry: imageBorderProps.value.borderRadius,
+            }),
             props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
@@ -1215,97 +1173,88 @@ var QrcodeCanvas = defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
+        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var canvasEl = ref(null);
         var imageRef = ref(null);
+        var drawRoundedRect = function (ctx, x, y, width, height, radius) {
+            ctx.beginPath();
+            if (ctx.roundRect) {
+                ctx.roundRect(x, y, width, height, radius);
+            }
+            else {
+                ctx.rect(x, y, width, height);
+            }
+        };
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
+            var size = props.size, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var canvas = canvasEl.value;
             if (!canvas) {
                 return;
             }
-            var ctx = canvas.getContext('2d');
-            if (!ctx) {
+            var canvasCtx = canvas.getContext('2d');
+            if (!canvasCtx) {
                 return;
             }
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            var numCells = cells.length + margin * 2;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
-            var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-            var scale = (size / numCells) * devicePixelRatio;
+            var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            ctx.scale(scale, scale);
-            ctx.fillStyle = background;
-            ctx.fillRect(0, 0, numCells, numCells);
+            canvasCtx.scale(scale, scale);
+            canvasCtx.fillStyle = background;
+            canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
                 var grad = void 0;
                 if (gradientType === 'linear') {
-                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                    grad = canvasCtx.createLinearGradient(0, 0, numCells.value, numCells.value);
                 }
                 else {
-                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                    grad = canvasCtx.createRadialGradient(numCells.value / 2, numCells.value / 2, 0, numCells.value / 2, numCells.value / 2, numCells.value / 2);
                 }
                 grad.addColorStop(0, gradientStartColor);
                 grad.addColorStop(1, gradientEndColor);
-                ctx.fillStyle = grad;
+                canvasCtx.fillStyle = grad;
             }
             else {
-                ctx.fillStyle = foreground;
+                canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                ctx.fill(new Path2D(generatePath(cells, margin)));
+                canvasCtx.fill(new Path2D(fgPath.value));
             }
             else {
-                cells.forEach(function (row, rdx) {
+                cells.value.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
-                            ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+                            canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
                         }
                     });
                 });
             }
+            var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
             if (showImage) {
-                var borderRadius = imageProps.borderRadius;
+                if (imageBorderProps.value) {
+                    var imageBorder = imageBorderProps.value;
+                    canvasCtx.fillStyle = props.background;
+                    drawRoundedRect(canvasCtx, imageBorder.x, imageBorder.y, imageBorder.width, imageBorder.height, imageBorder.borderRadius);
+                    canvasCtx.fill();
+                }
+                var borderRadius = imageProps.value.borderRadius;
                 if (borderRadius > 0) {
-                    ctx.save();
-                    ctx.beginPath();
-                    if (ctx.roundRect) {
-                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
-                    }
-                    else {
-                        // Fallback for browsers without roundRect support
-                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    }
-                    ctx.clip();
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    ctx.restore();
+                    canvasCtx.save();
+                    drawRoundedRect(canvasCtx, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height, borderRadius);
+                    canvasCtx.clip();
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
+                    canvasCtx.restore();
                 }
                 else {
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
                 }
             }
         };
         onMounted(generate);
-        watch(props, generate, { deep: true });
+        watchEffect(generate);
         var style = ctx.attrs.style;
         return function () { return h(Fragment, [
-            h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
+            h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
             props.imageSettings.src && h('img', {
                 ref: imageRef,
                 src: props.imageSettings.src,
@@ -1317,23 +1266,22 @@ var QrcodeCanvas = defineComponent({
 });
 var QrcodeVue = defineComponent({
     name: 'Qrcode',
-    render: function () {
-        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings, gradient = _a.gradient, gradientType = _a.gradientType, gradientStartColor = _a.gradientStartColor, gradientEndColor = _a.gradientEndColor;
-        return h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
-            value: value,
-            size: size,
-            margin: margin,
-            level: level,
-            background: background,
-            foreground: foreground,
-            imageSettings: imageSettings,
-            gradient: gradient,
-            gradientType: gradientType,
-            gradientStartColor: gradientStartColor,
-            gradientEndColor: gradientEndColor,
-        });
-    },
     props: QRCodeVueProps,
+    setup: function (props) {
+        return function () { return h(props.renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            value: props.value,
+            size: props.size,
+            margin: props.margin,
+            level: props.level,
+            background: props.background,
+            foreground: props.foreground,
+            imageSettings: props.imageSettings,
+            gradient: props.gradient,
+            gradientType: props.gradientType,
+            gradientStartColor: props.gradientStartColor,
+            gradientEndColor: props.gradientEndColor,
+        }); };
+    },
 });
 
 export { QrcodeCanvas, QrcodeSvg, QrcodeVue as default };

package/dist/src/index.d.ts

@@ -317,7 +317,9 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: string;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     renderAs: {
         type: PropType<RenderAs>;
         required: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",
@@ -49,14 +49,14 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rsbuild/core": "^1.7.2",
-    "@rstest/core": "^0.8.1",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rsbuild/core": "^2.0.0-rc.0",
+    "@rstest/core": "^0.9.6",
     "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.4.0",
-    "rollup": "^4.57.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "happy-dom": "^20.8.9",
+    "rollup": "^4.60.1",
+    "rollup-plugin-typescript2": "^0.37.0",
     "typescript": "^5.9.3",
-    "vue": "^3.5.27"
+    "vue": "^3.5.29"
   }
 }