qrcode.vue 3.9.1 → 3.10.0

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.9.1
+ * 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 } from 'vue';
+import { defineComponent, ref, computed, h, onMounted, watchEffect, Fragment } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1069,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,
@@ -1094,38 +1102,32 @@ 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; },
     },
@@ -1143,8 +1145,9 @@ 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 svgEl = ref();
         var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
@@ -1193,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%',
@@ -1220,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)),
         ]); };
     },
 });
@@ -1306,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,
             })
@@ -1321,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.9.1",
+  "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",
@@ -18,8 +18,10 @@
     "./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.5",
-    "@rstest/core": "^0.9.10",
-    "@vue/test-utils": "^2.4.10",
-    "happy-dom": "^20.9.0",
-    "rollup": "^4.60.3",
+    "@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.34"
+    "vue": "^3.5.38"
   }
 }