qrcode.vue 3.8.0 → 3.9.0

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.8.0
+ * qrcode.vue v3.9.0
  * 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, h, ref, onMounted, watchEffect, Fragment, computed } from 'vue';
+import { defineComponent, computed, h, ref, onMounted, watchEffect, Fragment, useId } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -905,6 +905,13 @@ var qrcodegen;
 })(qrcodegen || (qrcodegen = {}));
 var QR = qrcodegen;
 
+var _uid = 0;
+function getUid() {
+    if (typeof useId === 'function') {
+        return "".concat(useId(), "-").concat(_uid++);
+    }
+    return "vue-".concat(Math.random().toString(36).slice(2), "-").concat(_uid++);
+}
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
@@ -929,42 +936,88 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
+function getNeighborFlags(modules, row, col) {
+    var north = row > 0 ? modules[row - 1][col] : false;
+    var south = row < modules.length - 1 ? modules[row + 1][col] : false;
+    var west = col > 0 ? modules[row][col - 1] : false;
+    var east = col < modules[row].length - 1 ? modules[row][col + 1] : false;
+    return {
+        nw: !north && !west,
+        ne: !north && !east,
+        se: !south && !east,
+        sw: !south && !west,
+    };
+}
+function generateRoundedPath(modules, margin, radius) {
+    if (margin === void 0) { margin = 0; }
+    if (radius === void 0) { radius = 0; }
+    var pathSegments = [];
+    var r = Math.min(radius, 0.5);
+    for (var row = 0; row < modules.length; row++) {
+        for (var col = 0; col < modules[row].length; col++) {
+            if (!modules[row][col])
+                continue;
+            var _a = getNeighborFlags(modules, row, col), nw = _a.nw, ne = _a.ne, se = _a.se, sw = _a.sw;
+            var x = col + margin;
+            var y = row + margin;
+            pathSegments.push("M".concat(x + (nw ? r : 0), " ").concat(y), "L".concat(x + 1 - (ne ? r : 0), " ").concat(y));
+            if (ne) {
+                pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1, " ").concat(y + r));
+            }
+            pathSegments.push("L".concat(x + 1, " ").concat(y + 1 - (se ? r : 0)));
+            if (se) {
+                pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1 - r, " ").concat(y + 1));
+            }
+            pathSegments.push("L".concat(x + (sw ? r : 0), " ").concat(y + 1));
+            if (sw) {
+                pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x, " ").concat(y + 1 - r));
+            }
+            pathSegments.push("L".concat(x, " ").concat(y + (nw ? r : 0)));
+            if (nw) {
+                pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + r, " ").concat(y));
+            }
+            pathSegments.push('z');
+        }
+    }
+    return pathSegments.join('');
+}
 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;
@@ -976,15 +1029,7 @@ function getImageSettings(cells, size, margin, imageSettings) {
     var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
     var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
     var borderRadius = (imageSettings.borderRadius || 0) * scale;
-    var excavation = null;
-    if (imageSettings.excavate) {
-        var floorX = Math.floor(x);
-        var floorY = Math.floor(y);
-        var ceilW = Math.ceil(w + x - floorX);
-        var ceilH = Math.ceil(h + y - floorY);
-        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
-    }
-    return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
+    return { x: x, y: y, h: h, w: w, borderRadius: borderRadius };
 }
 function useQRCode(props) {
     var margin = computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
@@ -993,11 +1038,15 @@ function useQRCode(props) {
         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 fgPath = computed(function () {
+        if (props.radius > 0) {
+            return generateRoundedPath(cells.value, margin.value, props.radius);
         }
+        return generatePath(cells.value, margin.value);
+    });
+    var imageProps = computed(function () {
+        if (!props.imageSettings.src)
+            return null;
         var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
         return {
             x: settings.x + margin.value,
@@ -1008,7 +1057,7 @@ function useQRCode(props) {
         };
     });
     var imageBorderProps = computed(function () {
-        if (!props.imageSettings.excavate || !props.imageSettings.src)
+        if (!props.imageSettings.excavate || !imageProps.value)
             return null;
         var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
         return {
@@ -1075,6 +1124,12 @@ var QRCodeProps = {
         required: false,
         default: '#fff',
     },
+    radius: {
+        type: Number,
+        required: false,
+        default: 0,
+        validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1087,8 +1142,10 @@ var QrcodeSvg = defineComponent({
     props: QRCodeProps,
     setup: function (props) {
         var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
-        var qrGradientId = 'qrcode.vue-gradient';
-        var renderGradient = function () {
+        var uid = getUid();
+        var qrGradientId = "qrcode.vue-gradient-".concat(uid);
+        var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
+        var gradientVNode = computed(function () {
             if (!props.gradient)
                 return null;
             var gradientProps = props.gradientType === 'linear'
@@ -1115,12 +1172,11 @@ var QrcodeSvg = defineComponent({
                     style: { stopColor: props.gradientEndColor },
                 }),
             ]);
-        };
-        var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
-        var renderClipPath = function () {
-            var borderRadius = imageProps.value.borderRadius;
-            if (!props.imageSettings.src)
+        });
+        var clipPathVNode = computed(function () {
+            if (!imageProps.value)
                 return null;
+            var borderRadius = imageProps.value.borderRadius;
             if (borderRadius <= 0)
                 return null;
             return h('clipPath', { id: qrLogoClipPathId }, [
@@ -1133,15 +1189,16 @@ var QrcodeSvg = defineComponent({
                     ry: borderRadius,
                 }),
             ]);
-        };
+        });
         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('defs', {}, [gradientVNode.value, clipPathVNode.value]),
             h('rect', {
                 width: '100%',
                 height: '100%',
@@ -1160,7 +1217,7 @@ var QrcodeSvg = defineComponent({
                 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, ")") } : {}))),
+            props.imageSettings.src && imageProps.value && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1168,9 +1225,18 @@ var QrcodeCanvas = defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
-        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
+        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 imageEl = 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 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;
@@ -1181,12 +1247,11 @@ var QrcodeCanvas = defineComponent({
             if (!canvasCtx) {
                 return;
             }
-            var qrCells = cells.value;
-            var image = imageRef.value;
+            var image = imageEl.value;
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
             var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            canvasCtx.scale(scale, scale);
+            canvasCtx.setTransform(scale, 0, 0, scale, 0, 0);
             canvasCtx.fillStyle = background;
             canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
@@ -1205,10 +1270,10 @@ var QrcodeCanvas = defineComponent({
                 canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                canvasCtx.fill(new Path2D(generatePath(qrCells, margin.value)));
+                canvasCtx.fill(new Path2D(fgPath.value));
             }
             else {
-                qrCells.forEach(function (row, rdx) {
+                cells.value.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
                             canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
@@ -1217,16 +1282,7 @@ var QrcodeCanvas = defineComponent({
                 });
             }
             var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                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);
-                    }
-                };
+            if (showImage && imageProps.value) {
                 if (imageBorderProps.value) {
                     var imageBorder = imageBorderProps.value;
                     canvasCtx.fillStyle = props.background;
@@ -1248,11 +1304,10 @@ var QrcodeCanvas = defineComponent({
         };
         onMounted(generate);
         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({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
             props.imageSettings.src && h('img', {
-                ref: imageRef,
+                ref: imageEl,
                 src: props.imageSettings.src,
                 style: { display: 'none' },
                 onLoad: generate,
@@ -1262,23 +1317,23 @@ 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,
+            radius: props.radius,
+        }); };
+    },
 });
 
 export { QrcodeCanvas, QrcodeSvg, QrcodeVue as default };

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 export type Level = 'L' | 'M' | 'Q' | 'H';
 export type RenderAs = 'canvas' | 'svg';
 export type GradientType = 'linear' | 'radial';
@@ -6,12 +6,12 @@ export type ImageSettings = {
     src: string;
     x?: number;
     y?: number;
-    height: number;
-    width: number;
+    height?: number;
+    width?: number;
     excavate?: boolean;
     borderRadius?: number;
 };
-export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare const QrcodeSvg: import("vue").DefineComponent<ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: boolean;
@@ -65,9 +65,15 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
 }>, () => 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<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: boolean;
@@ -121,6 +127,12 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -133,8 +145,9 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
     gradientType: GradientType;
     gradientStartColor: string;
     gradientEndColor: string;
+    radius: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare const QrcodeCanvas: import("vue").DefineComponent<ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: boolean;
@@ -188,9 +201,15 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
 }>, () => 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<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: boolean;
@@ -244,6 +263,12 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -256,8 +281,9 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
     gradientType: GradientType;
     gradientStartColor: string;
     gradientEndColor: string;
+    radius: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const QrcodeVue: import("vue").DefineComponent<ExtractPropTypes<{
     renderAs: {
         type: PropType<RenderAs>;
         required: boolean;
@@ -317,7 +343,15 @@ 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<{
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     renderAs: {
         type: PropType<RenderAs>;
         required: boolean;
@@ -377,6 +411,12 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -389,6 +429,7 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
     gradientType: GradientType;
     gradientStartColor: string;
     gradientEndColor: string;
+    radius: number;
     renderAs: RenderAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default QrcodeVue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "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.1",
+    "@rstest/core": "^0.9.9",
     "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.4.0",
-    "rollup": "^4.57.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "happy-dom": "^20.9.0",
+    "rollup": "^4.60.2",
+    "rollup-plugin-typescript2": "^0.37.0",
     "typescript": "^5.9.3",
-    "vue": "^3.5.27"
+    "vue": "^3.5.29"
   }
 }