qrcode.vue 3.9.0 → 3.10.0

package/dist/qrcode.vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.9.0
+ * qrcode.vue v3.10.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -910,11 +910,10 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var _uid = 0;
-function getUid() {
-    if (typeof vue.useId === 'function') {
-        return "".concat(vue.useId(), "-").concat(_uid++);
-    }
-    return "vue-".concat(Math.random().toString(36).slice(2), "-").concat(_uid++);
+function getUid(id) {
+    if (id)
+        return id;
+    return "v-".concat(_uid++);
 }
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
@@ -1074,6 +1073,14 @@ function useQRCode(props) {
     });
     return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
+function downloadDataURLAsFile(data, filename) {
+    var link = document.createElement('a');
+    link.download = filename;
+    link.href = data;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
 var QRCodeProps = {
     value: {
         type: String,
@@ -1099,41 +1106,39 @@ var QRCodeProps = {
     },
     margin: {
         type: Number,
-        required: false,
         default: DEFAULT_MARGIN,
+        validator: function (m) { return m >= 0; },
     },
     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',
     },
     radius: {
         type: Number,
-        required: false,
         default: 0,
         validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
     },
+    id: {
+        type: String,
+        required: false,
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1144,9 +1149,10 @@ var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
 var QrcodeSvg = vue.defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
-    setup: function (props) {
+    setup: function (props, ctx) {
         var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
-        var uid = getUid();
+        var svgEl = vue.ref();
+        var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
         var gradientVNode = vue.computed(function () {
@@ -1194,15 +1200,32 @@ var QrcodeSvg = vue.defineComponent({
                 }),
             ]);
         });
+        var getSvgDataURL = function (svg) { return 'data:image/svg+xml;charset=utf-8,' +
+            encodeURIComponent('<?xml version="1.0" standalone="no"?>' + new XMLSerializer().serializeToString(svg)); };
+        ctx.expose({
+            toDataURL: function () {
+                var svg = svgEl.value;
+                if (!svg)
+                    return;
+                return getSvgDataURL(svg);
+            },
+            download: function (filename) {
+                if (filename === void 0) { filename = 'qrcode.svg'; }
+                var svg = svgEl.value;
+                if (!svg)
+                    return;
+                downloadDataURLAsFile(getSvgDataURL(svg), filename);
+            },
+        });
         return function () { return vue.h('svg', {
+            ref: svgEl,
             width: props.size,
             height: props.size,
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
             role: 'img',
-            'aria-label': props.value,
         }, [
-            vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
+            vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value].filter(Boolean)),
             vue.h('rect', {
                 width: '100%',
                 height: '100%',
@@ -1221,7 +1244,7 @@ var QrcodeSvg = vue.defineComponent({
                 rx: imageBorderProps.value.borderRadius,
                 ry: imageBorderProps.value.borderRadius,
             }),
-            props.imageSettings.src && imageProps.value && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
+            props.imageSettings.src && imageProps.value && vue.h('image', __assign({ href: props.imageSettings.src, crossorigin: props.imageSettings.crossOrigin, 'clip-path': imageProps.value.borderRadius > 0 ? "url(#".concat(qrLogoClipPathId, ")") : void 0 }, imageProps.value)),
         ]); };
     },
 });
@@ -1307,12 +1330,23 @@ var QrcodeCanvas = vue.defineComponent({
             }
         };
         vue.onMounted(generate);
-        vue.watchEffect(generate);
+        vue.watchEffect(generate, { flush: 'post' });
+        ctx.expose({
+            toDataURL: function (type, quality) { var _a; return (_a = canvasEl.value) === null || _a === void 0 ? void 0 : _a.toDataURL(type, quality); },
+            download: function (filename) {
+                if (filename === void 0) { filename = 'qrcode.png'; }
+                var canvas = canvasEl.value;
+                if (!canvas)
+                    return;
+                downloadDataURLAsFile(canvas.toDataURL('image/png'), filename);
+            },
+        });
         return function () { return vue.h(vue.Fragment, [
-            vue.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") }) })),
+            vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', style: __assign(__assign({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
             props.imageSettings.src && vue.h('img', {
                 ref: imageEl,
                 src: props.imageSettings.src,
+                crossorigin: props.imageSettings.crossOrigin,
                 style: { display: 'none' },
                 onLoad: generate,
             })
@@ -1322,8 +1356,14 @@ var QrcodeCanvas = vue.defineComponent({
 var QrcodeVue = vue.defineComponent({
     name: 'Qrcode',
     props: QRCodeVueProps,
-    setup: function (props) {
+    setup: function (props, ctx) {
+        var childRef = vue.ref();
+        ctx.expose({
+            toDataURL: function (type, quality) { var _a, _b; return (_b = (_a = childRef.value) === null || _a === void 0 ? void 0 : _a.toDataURL) === null || _b === void 0 ? void 0 : _b.call(_a, type, quality); },
+            download: function (filename) { var _a, _b; return (_b = (_a = childRef.value) === null || _a === void 0 ? void 0 : _a.download) === null || _b === void 0 ? void 0 : _b.call(_a, filename); },
+        });
         return function () { return vue.h(props.renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            ref: childRef,
             value: props.value,
             size: props.size,
             margin: props.margin,
@@ -1336,6 +1376,7 @@ var QrcodeVue = vue.defineComponent({
             gradientStartColor: props.gradientStartColor,
             gradientEndColor: props.gradientEndColor,
             radius: props.radius,
+            id: props.id,
         }); };
     },
 });

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.9.0
+ * qrcode.vue v3.10.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, computed, h, ref, onMounted, watchEffect, Fragment, useId } from 'vue';
+import { defineComponent, ref, computed, h, onMounted, watchEffect, Fragment } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -906,11 +906,10 @@ var 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++);
+function getUid(id) {
+    if (id)
+        return id;
+    return "v-".concat(_uid++);
 }
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
@@ -1070,6 +1069,14 @@ function useQRCode(props) {
     });
     return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
+function downloadDataURLAsFile(data, filename) {
+    var link = document.createElement('a');
+    link.download = filename;
+    link.href = data;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
 var QRCodeProps = {
     value: {
         type: String,
@@ -1095,41 +1102,39 @@ var QRCodeProps = {
     },
     margin: {
         type: Number,
-        required: false,
         default: DEFAULT_MARGIN,
+        validator: function (m) { return m >= 0; },
     },
     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',
     },
     radius: {
         type: Number,
-        required: false,
         default: 0,
         validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
     },
+    id: {
+        type: String,
+        required: false,
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1140,9 +1145,10 @@ var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
 var QrcodeSvg = defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
-    setup: function (props) {
+    setup: function (props, ctx) {
         var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
-        var uid = getUid();
+        var svgEl = ref();
+        var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
         var gradientVNode = computed(function () {
@@ -1190,15 +1196,32 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         });
+        var getSvgDataURL = function (svg) { return 'data:image/svg+xml;charset=utf-8,' +
+            encodeURIComponent('<?xml version="1.0" standalone="no"?>' + new XMLSerializer().serializeToString(svg)); };
+        ctx.expose({
+            toDataURL: function () {
+                var svg = svgEl.value;
+                if (!svg)
+                    return;
+                return getSvgDataURL(svg);
+            },
+            download: function (filename) {
+                if (filename === void 0) { filename = 'qrcode.svg'; }
+                var svg = svgEl.value;
+                if (!svg)
+                    return;
+                downloadDataURLAsFile(getSvgDataURL(svg), filename);
+            },
+        });
         return function () { return h('svg', {
+            ref: svgEl,
             width: props.size,
             height: props.size,
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
             role: 'img',
-            'aria-label': props.value,
         }, [
-            h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
+            h('defs', {}, [gradientVNode.value, clipPathVNode.value].filter(Boolean)),
             h('rect', {
                 width: '100%',
                 height: '100%',
@@ -1217,7 +1240,7 @@ var QrcodeSvg = defineComponent({
                 rx: imageBorderProps.value.borderRadius,
                 ry: imageBorderProps.value.borderRadius,
             }),
-            props.imageSettings.src && imageProps.value && 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({ href: props.imageSettings.src, crossorigin: props.imageSettings.crossOrigin, 'clip-path': imageProps.value.borderRadius > 0 ? "url(#".concat(qrLogoClipPathId, ")") : void 0 }, imageProps.value)),
         ]); };
     },
 });
@@ -1303,12 +1326,23 @@ var QrcodeCanvas = defineComponent({
             }
         };
         onMounted(generate);
-        watchEffect(generate);
+        watchEffect(generate, { flush: 'post' });
+        ctx.expose({
+            toDataURL: function (type, quality) { var _a; return (_a = canvasEl.value) === null || _a === void 0 ? void 0 : _a.toDataURL(type, quality); },
+            download: function (filename) {
+                if (filename === void 0) { filename = 'qrcode.png'; }
+                var canvas = canvasEl.value;
+                if (!canvas)
+                    return;
+                downloadDataURLAsFile(canvas.toDataURL('image/png'), filename);
+            },
+        });
         return function () { return h(Fragment, [
-            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") }) })),
+            h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', style: __assign(__assign({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
             props.imageSettings.src && h('img', {
                 ref: imageEl,
                 src: props.imageSettings.src,
+                crossorigin: props.imageSettings.crossOrigin,
                 style: { display: 'none' },
                 onLoad: generate,
             })
@@ -1318,8 +1352,14 @@ var QrcodeCanvas = defineComponent({
 var QrcodeVue = defineComponent({
     name: 'Qrcode',
     props: QRCodeVueProps,
-    setup: function (props) {
+    setup: function (props, ctx) {
+        var childRef = ref();
+        ctx.expose({
+            toDataURL: function (type, quality) { var _a, _b; return (_b = (_a = childRef.value) === null || _a === void 0 ? void 0 : _a.toDataURL) === null || _b === void 0 ? void 0 : _b.call(_a, type, quality); },
+            download: function (filename) { var _a, _b; return (_b = (_a = childRef.value) === null || _a === void 0 ? void 0 : _a.download) === null || _b === void 0 ? void 0 : _b.call(_a, filename); },
+        });
         return function () { return h(props.renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            ref: childRef,
             value: props.value,
             size: props.size,
             margin: props.margin,
@@ -1332,6 +1372,7 @@ var QrcodeVue = defineComponent({
             gradientStartColor: props.gradientStartColor,
             gradientEndColor: props.gradientEndColor,
             radius: props.radius,
+            id: props.id,
         }); };
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.9.0",
+  "version": "3.10.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,18 +8,20 @@
   "browser": "./dist/qrcode.vue.browser.js",
   "unpkg": "./dist/qrcode.vue.browser.min.js",
   "jsdelivr": "./dist/qrcode.vue.browser.min.js",
-  "types": "./dist/src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/qrcode.vue.esm.js",
       "require": "./dist/qrcode.vue.cjs.js"
     },
     "./package": "./package.json"
   },
   "scripts": {
-    "dev": "rsbuild dev",
+    "dev": "node example/scripts/generate-i18n.mjs && rsbuild dev",
     "build": "rollup -c",
+    "build:example": "node example/scripts/generate-i18n.mjs && rsbuild build",
+    "generate:i18n": "node example/scripts/generate-i18n.mjs",
     "test": "rstest"
   },
   "repository": "https://github.com/scopewu/qrcode.vue.git",
@@ -50,13 +52,13 @@
   "dependencies": {},
   "devDependencies": {
     "@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.9.0",
-    "rollup": "^4.60.2",
+    "@rsbuild/core": "^2.0.13",
+    "@rstest/core": "^0.10.4",
+    "@vue/test-utils": "^2.4.11",
+    "happy-dom": "^20.10.3",
+    "rollup": "^4.62.0",
     "rollup-plugin-typescript2": "^0.37.0",
     "typescript": "^5.9.3",
-    "vue": "^3.5.29"
+    "vue": "^3.5.38"
   }
 }

package/dist/rstest.config.d.ts

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

package/dist/src/qrcodegen.d.ts

@@ -1,95 +0,0 @@
-declare namespace qrcodegen {
-    type bit = number;
-    type byte = number;
-    type int = number;
-    export class QrCode {
-        readonly version: int;
-        readonly errorCorrectionLevel: QrCode.Ecc;
-        static encodeText(text: string, ecl: QrCode.Ecc): QrCode;
-        static encodeBinary(data: Readonly<Array<byte>>, ecl: QrCode.Ecc): QrCode;
-        static encodeSegments(segs: Readonly<Array<QrSegment>>, ecl: QrCode.Ecc, minVersion?: int, maxVersion?: int, mask?: int, boostEcl?: boolean): QrCode;
-        readonly size: int;
-        readonly mask: int;
-        private readonly modules;
-        private readonly isFunction;
-        constructor(version: int, errorCorrectionLevel: QrCode.Ecc, dataCodewords: Readonly<Array<byte>>, msk: int);
-        getModule(x: int, y: int): boolean;
-        getModules(): boolean[][];
-        private drawFunctionPatterns;
-        private drawFormatBits;
-        private drawVersion;
-        private drawFinderPattern;
-        private drawAlignmentPattern;
-        private setFunctionModule;
-        private addEccAndInterleave;
-        private drawCodewords;
-        private applyMask;
-        private getPenaltyScore;
-        private getAlignmentPatternPositions;
-        private static getNumRawDataModules;
-        private static getNumDataCodewords;
-        private static reedSolomonComputeDivisor;
-        private static reedSolomonComputeRemainder;
-        private static reedSolomonMultiply;
-        private finderPenaltyCountPatterns;
-        private finderPenaltyTerminateAndCount;
-        private finderPenaltyAddHistory;
-        static readonly MIN_VERSION: int;
-        static readonly MAX_VERSION: int;
-        private static readonly PENALTY_N1;
-        private static readonly PENALTY_N2;
-        private static readonly PENALTY_N3;
-        private static readonly PENALTY_N4;
-        private static readonly ECC_CODEWORDS_PER_BLOCK;
-        private static readonly NUM_ERROR_CORRECTION_BLOCKS;
-    }
-    export class QrSegment {
-        readonly mode: QrSegment.Mode;
-        readonly numChars: int;
-        private readonly bitData;
-        static makeBytes(data: Readonly<Array<byte>>): QrSegment;
-        static makeNumeric(digits: string): QrSegment;
-        static makeAlphanumeric(text: string): QrSegment;
-        static makeSegments(text: string): Array<QrSegment>;
-        static makeEci(assignVal: int): QrSegment;
-        static isNumeric(text: string): boolean;
-        static isAlphanumeric(text: string): boolean;
-        constructor(mode: QrSegment.Mode, numChars: int, bitData: Array<bit>);
-        getData(): Array<bit>;
-        static getTotalBits(segs: Readonly<Array<QrSegment>>, version: int): number;
-        private static toUtf8ByteArray;
-        private static readonly NUMERIC_REGEX;
-        private static readonly ALPHANUMERIC_REGEX;
-        private static readonly ALPHANUMERIC_CHARSET;
-    }
-    export {};
-}
-declare namespace qrcodegen.QrCode {
-    type int = number;
-    export class Ecc {
-        readonly ordinal: int;
-        readonly formatBits: int;
-        static readonly LOW: Ecc;
-        static readonly MEDIUM: Ecc;
-        static readonly QUARTILE: Ecc;
-        static readonly HIGH: Ecc;
-        private constructor();
-    }
-    export {};
-}
-declare namespace qrcodegen.QrSegment {
-    type int = number;
-    export class Mode {
-        readonly modeBits: int;
-        private readonly numBitsCharCount;
-        static readonly NUMERIC: Mode;
-        static readonly ALPHANUMERIC: Mode;
-        static readonly BYTE: Mode;
-        static readonly KANJI: Mode;
-        static readonly ECI: Mode;
-        private constructor();
-        numCharCountBits(ver: int): int;
-    }
-    export {};
-}
-export default qrcodegen;