qrcode.vue 3.5.1 → 3.7.0

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.7.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, ref, onUpdated, h, onMounted, Fragment } from 'vue';
+import { defineComponent, ref, watch, h, onMounted, Fragment } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -20,7 +20,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -906,6 +906,9 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var defaultErrorCorrectLevel = 'L';
+var DEFAULT_QR_SIZE = 100;
+var DEFAULT_MARGIN = 0;
+var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -925,16 +928,52 @@ 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 ops = [];
+    var path = '';
     modules.forEach(function (row, y) {
         var start = null;
         row.forEach(function (cell, x) {
             if (!cell && start !== null) {
                 // M0 0h7v1H0z injects the space with the move and drops the comma,
                 // saving a char per operation
-                ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+                path += "M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z");
                 start = null;
                 return;
             }
@@ -947,11 +986,11 @@ function generatePath(modules, margin) {
                 }
                 if (start === null) {
                     // Just a single dark module.
-                    ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+                    path += "M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z");
                 }
                 else {
                     // Otherwise finish the current line.
-                    ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+                    path += "M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z");
                 }
                 return;
             }
@@ -960,12 +999,12 @@ function generatePath(modules, margin) {
             }
         });
     });
-    return ops.join('');
+    return path;
 }
 function getImageSettings(cells, size, margin, imageSettings) {
     var width = imageSettings.width, height = imageSettings.height, imageX = imageSettings.x, imageY = imageSettings.y;
     var numCells = cells.length + margin * 2;
-    var defaultSize = Math.floor(size * 0.1);
+    var defaultSize = Math.floor(size * DEFAULT_IMAGE_SIZE_RATIO);
     var scale = numCells / size;
     var w = (width || defaultSize) * scale;
     var h = (height || defaultSize) * scale;
@@ -977,20 +1016,34 @@ function getImageSettings(cells, size, margin, imageSettings) {
         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 };
+        var borderRadius = (imageSettings.borderRadius || 0) * scale;
+        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
     }
     return { x: x, y: y, h: h, w: w, excavation: excavation };
 }
 function excavateModules(modules, excavation) {
-    return modules.slice().map(function (row, y) {
-        if (y < excavation.y || y >= excavation.y + excavation.h) {
-            return row;
-        }
+    var borderRadius = 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 (x < excavation.x || x >= excavation.x + excavation.w) {
+            if (!cell)
                 return cell;
-            }
-            return false;
+            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
+            return inExcavation ? false : cell;
         });
     });
 }
@@ -1002,7 +1055,7 @@ var QRCodeProps = {
     },
     size: {
         type: Number,
-        default: 100,
+        default: DEFAULT_QR_SIZE,
     },
     level: {
         type: String,
@@ -1020,13 +1073,34 @@ var QRCodeProps = {
     margin: {
         type: Number,
         required: false,
-        default: 0,
+        default: DEFAULT_MARGIN,
     },
     imageSettings: {
         type: Object,
         required: false,
         default: function () { return ({}); },
     },
+    gradient: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    gradientType: {
+        type: String,
+        required: false,
+        default: 'linear',
+        validator: function (t) { return ['linear', 'radial'].indexOf(t) > -1; },
+    },
+    gradientStartColor: {
+        type: String,
+        required: false,
+        default: '#000',
+    },
+    gradientEndColor: {
+        type: String,
+        required: false,
+        default: '#fff',
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1067,8 +1141,53 @@ var QrcodeSvg = defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var renderGradient = function () {
+            if (!props.gradient)
+                return null;
+            var gradientProps = props.gradientType === 'linear'
+                ? {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%',
+                }
+                : {
+                    cx: '50%',
+                    cy: '50%',
+                    r: '50%',
+                    fx: '50%',
+                    fy: '50%',
+                };
+            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+                h('stop', {
+                    offset: '0%',
+                    style: { stopColor: props.gradientStartColor },
+                }),
+                h('stop', {
+                    offset: '100%',
+                    style: { stopColor: props.gradientEndColor },
+                }),
+            ]);
+        };
+        var renderClipPath = function () {
+            var borderRadius = props.imageSettings.borderRadius || 0;
+            if (!props.imageSettings.src)
+                return null;
+            if (borderRadius <= 0)
+                return null;
+            return h('clipPath', { id: 'qr-logo-clip' }, [
+                h('rect', {
+                    x: imageProps.x,
+                    y: imageProps.y,
+                    width: imageProps.width,
+                    height: imageProps.height,
+                    rx: borderRadius,
+                    ry: borderRadius,
+                }),
+            ]);
+        };
         generate();
-        onUpdated(generate);
+        watch(props, generate, { deep: true });
         return function () { return h('svg', {
             width: props.size,
             height: props.size,
@@ -1076,12 +1195,17 @@ var QrcodeSvg = defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            h('path', {
+            h('defs', {}, [renderGradient(), renderClipPath()]),
+            h('rect', {
+                width: '100%',
+                height: '100%',
                 fill: props.background,
-                d: "M0,0 h".concat(numCells.value, "v").concat(numCells.value, "H0z"),
             }),
-            h('path', { fill: props.foreground, d: fgPath.value }),
-            props.imageSettings.src && h('image', __assign({ href: props.imageSettings.src }, imageProps)),
+            h('path', {
+                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                d: fgPath.value,
+            }),
+            props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (props.imageSettings.borderRadius ? { 'clip-path': 'url(#qr-logo-clip)' } : {}))),
         ]); };
     },
 });
@@ -1092,7 +1216,7 @@ var QrcodeCanvas = defineComponent({
         var canvasEl = ref(null);
         var imageRef = ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground;
+            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 canvas = canvasEl.value;
@@ -1120,13 +1244,27 @@ var QrcodeCanvas = defineComponent({
                     cells = excavateModules(cells, imageSettings.excavation);
                 }
             }
-            var devicePixelRatio = window.devicePixelRatio || 1;
+            var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
             var scale = (size / numCells) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
             ctx.scale(scale, scale);
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, numCells, numCells);
-            ctx.fillStyle = foreground;
+            if (gradient) {
+                var grad = void 0;
+                if (gradientType === 'linear') {
+                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                }
+                else {
+                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                }
+                grad.addColorStop(0, gradientStartColor);
+                grad.addColorStop(1, gradientEndColor);
+                ctx.fillStyle = grad;
+            }
+            else {
+                ctx.fillStyle = foreground;
+            }
             if (SUPPORTS_PATH2D) {
                 ctx.fill(new Path2D(generatePath(cells, margin)));
             }
@@ -1140,11 +1278,28 @@ var QrcodeCanvas = defineComponent({
                 });
             }
             if (showImage) {
-                ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                var borderRadius = props.imageSettings.borderRadius || 0;
+                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();
+                }
+                else {
+                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                }
             }
         };
         onMounted(generate);
-        onUpdated(generate);
+        watch(props, generate, { deep: true });
         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") }) })),
@@ -1160,8 +1315,20 @@ 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;
-        return h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, { value: value, size: size, margin: margin, level: level, background: background, foreground: foreground, imageSettings: imageSettings });
+        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,
 });

package/dist/rstest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@rstest/core").RstestConfig;
+export default _default;

package/dist/{index.d.ts → src/index.d.ts}

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
 export type Level = 'L' | 'M' | 'Q' | 'H';
 export type RenderAs = 'canvas' | 'svg';
+export type GradientType = 'linear' | 'radial';
 export type ImageSettings = {
     src: string;
     x?: number;
@@ -8,6 +9,7 @@ export type ImageSettings = {
     height: number;
     width: number;
     excavate?: boolean;
+    borderRadius?: number;
 };
 export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
@@ -42,6 +44,27 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, () => 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<{
@@ -77,6 +100,27 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -85,6 +129,10 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
@@ -119,6 +167,27 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, () => 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<{
@@ -154,6 +223,27 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -162,6 +252,10 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     renderAs: {
@@ -202,6 +296,27 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     renderAs: {
         type: PropType<RenderAs>;
@@ -241,6 +356,27 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -249,6 +385,10 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
     renderAs: RenderAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default QrcodeVue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.5.1",
+  "version": "3.7.0",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",
@@ -8,10 +8,10 @@
   "browser": "./dist/qrcode.vue.browser.js",
   "unpkg": "./dist/qrcode.vue.browser.min.js",
   "jsdelivr": "./dist/qrcode.vue.browser.min.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/qrcode.vue.esm.js",
       "require": "./dist/qrcode.vue.cjs.js"
     },
@@ -19,7 +19,8 @@
   },
   "scripts": {
     "dev": "rsbuild dev",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "rstest"
   },
   "repository": "https://github.com/scopewu/qrcode.vue.git",
   "keywords": [
@@ -48,10 +49,13 @@
   "dependencies": {},
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
-    "@rsbuild/core": "^1.0.14",
-    "rollup": "^4.24.0",
+    "@rsbuild/core": "^1.7.2",
+    "@rstest/core": "^0.8.1",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.4.0",
+    "rollup": "^4.57.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.6.3",
-    "vue": "^3.5.12"
+    "typescript": "^5.9.3",
+    "vue": "^3.5.27"
   }
 }