qrcode.vue 3.8.1 → 3.9.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [3.9.1]
+
+### Bugfix
+
+- Remove static `useId` import to fix build errors for Vue < 3.5 (`No matching export for import "useId"`).
+
+### Feature
+
+- Add `id` prop for SSR hydration consistency. Pass `useId()` to ensure matching IDs between server and client.
+
+## [3.9.0]
+
+### Feature
+
+- Support `radius` prop for QRCode module corner rounding. The rounding is context-aware, keeping inner corners sharp while rounding outer corners. Supports both SVG and Canvas rendering modes.
+
 ## [3.8.0] - 2026-02-02
 
 ### Performance

package/README-zh_cn.md

@@ -81,6 +81,7 @@ createApp({
     :gradient-start-color="gradientStartColor"
     :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
+    :radius="radius"
   />
 </template>
 <script setup lang="ts">
@@ -110,6 +111,8 @@ createApp({
   const gradientType = ref<GradientType>('linear')
   const gradientStartColor = ref('#000000')
   const gradientEndColor = ref('#38bdf8')
+  // 可传入圆角半径：
+  const radius = ref(0)
 </script>
 ```
 
@@ -186,6 +189,44 @@ createApp({
 
 二维码图片 logo 配置。
 
+### `radius`
+
+- 类型：`number`
+- 默认值：`0`
+
+每个二维码模块的圆角半径，相对于模块宽度的比例。接受 `0` 到 `0.5` 的值。
+
+- `0`（默认）- 方形模块，直角
+- `0.5` - 最大圆角，模块变为圆形
+
+圆角是上下文感知的：相邻深色模块之间的内角保持直角，外角则圆角化。
+
+```html
+<qrcode-vue value="test" :radius="0.35" />
+```
+
+### `id`
+
+- 类型：`string`
+- 默认值：`undefined`
+
+自定义 SVG 内部元素（渐变、裁剪路径）的 ID。SSR 水合一致性需要此属性 — 传入 `useId()` 以确保服务端和客户端生成匹配的 ID。
+
+```html
+<script setup>
+  // 仅 vue 3.5+
+  import { useId } from 'vue'
+  const uid = useId()
+
+  // vue 3.4 及以下版本
+  // const uid = 'qrcode-1'
+  // const uid2 = 'qrcode-2'
+</script>
+<qrcode-svg value="test" :id="uid" render-as="svg" />
+```
+
+省略时使用模块级计数器，该计数器在多请求的 SSR 环境中不安全。
+
 ### `gradient`
 
 - 类型: `boolean`

package/README.md

@@ -85,6 +85,7 @@ When you use the component with Vue 3 with `TypeScript`:
     :gradient-start-color="gradientStartColor"
     :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
+    :radius="radius"
   />
 </template>
 <script setup lang="ts">
@@ -112,6 +113,7 @@ When you use the component with Vue 3 with `TypeScript`:
   const gradientType = ref<GradientType>('linear')
   const gradientStartColor = ref('#000000')
   const gradientEndColor = ref('#38bdf8')
+  const radius = ref(0)
 </script>
 ```
 
@@ -185,6 +187,44 @@ The foreground color of qrcode.
 
 The settings to support qrcode image logo.
 
+### `radius`
+
+- Type: `number`
+- Default: `0`
+
+The corner radius of each QR module, as a ratio of the module width. Accepts values from `0` to `0.5`.
+
+- `0` (default) - square modules with sharp corners
+- `0.5` - maximum rounding, modules become circles
+
+The rounding is context-aware: inner corners between adjacent dark modules remain sharp, while outer corners are rounded.
+
+```html
+<qrcode-vue value="test" :radius="0.35" />
+```
+
+### `id`
+
+- Type: `string`
+- Default: `undefined`
+
+Custom ID for SVG internal elements (gradients, clip-paths). Required for SSR hydration consistency — pass `useId()` to ensure server and client generate matching IDs.
+
+```html
+<script setup>
+  // vue 3.5+ only
+  import { useId } from 'vue'
+  const uid = useId()
+
+  // older vue versions (3.4 and below)
+  // const uid = 'qrcode-1'
+  // const uid2 = 'qrcode-2'
+</script>
+<qrcode-svg value="test" :id="uid" render-as="svg" />
+```
+
+When omitted, a module-level counter is used, which is not SSR-safe across multiple requests.
+
 ### `gradient`
 
 - Type: `boolean`

package/dist/{src/index.d.ts → 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,19 @@ 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;
+    };
+    id: {
+        type: StringConstructor;
+        required: 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 +131,16 @@ 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;
+    };
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -133,8 +153,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 +209,19 @@ 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;
+    };
+    id: {
+        type: StringConstructor;
+        required: 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 +275,16 @@ 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;
+    };
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -256,8 +297,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,9 +359,19 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
+    id: {
+        type: StringConstructor;
+        required: 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<{
     renderAs: {
         type: PropType<RenderAs>;
         required: boolean;
@@ -379,6 +431,16 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: string;
     };
+    radius: {
+        type: NumberConstructor;
+        required: boolean;
+        default: number;
+        validator: (r: any) => boolean;
+    };
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -391,6 +453,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/dist/qrcode.vue.browser.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.8.1
+ * qrcode.vue v3.9.1
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -910,6 +910,11 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var _uid = 0;
+function getUid(id) {
+    if (id)
+        return id;
+    return "v-".concat(_uid++);
+}
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
@@ -934,6 +939,51 @@ 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 pathSegments = [];
@@ -982,15 +1032,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 = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
@@ -999,11 +1041,15 @@ function useQRCode(props) {
         return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
     });
     var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
-    var fgPath = vue.computed(function () { return generatePath(cells.value, margin.value); });
-    var imageProps = vue.computed(function () {
-        if (!props.imageSettings.src) {
-            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+    var fgPath = vue.computed(function () {
+        if (props.radius > 0) {
+            return generateRoundedPath(cells.value, margin.value, props.radius);
         }
+        return generatePath(cells.value, margin.value);
+    });
+    var imageProps = vue.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,
@@ -1014,7 +1060,7 @@ function useQRCode(props) {
         };
     });
     var imageBorderProps = vue.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 {
@@ -1081,6 +1127,16 @@ var QRCodeProps = {
         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,
@@ -1093,10 +1149,10 @@ var QrcodeSvg = vue.defineComponent({
     props: QRCodeProps,
     setup: function (props) {
         var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
-        var uid = _uid++;
+        var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
-        var renderGradient = function () {
+        var gradientVNode = vue.computed(function () {
             if (!props.gradient)
                 return null;
             var gradientProps = props.gradientType === 'linear'
@@ -1123,11 +1179,11 @@ var QrcodeSvg = vue.defineComponent({
                     style: { stopColor: props.gradientEndColor },
                 }),
             ]);
-        };
-        var renderClipPath = function () {
-            var borderRadius = imageProps.value.borderRadius;
-            if (!props.imageSettings.src)
+        });
+        var clipPathVNode = vue.computed(function () {
+            if (!imageProps.value)
                 return null;
+            var borderRadius = imageProps.value.borderRadius;
             if (borderRadius <= 0)
                 return null;
             return vue.h('clipPath', { id: qrLogoClipPathId }, [
@@ -1140,17 +1196,16 @@ var QrcodeSvg = vue.defineComponent({
                     ry: borderRadius,
                 }),
             ]);
-        };
+        });
         return function () { return vue.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,
         }, [
-            vue.h('defs', {}, [renderGradient(), renderClipPath()]),
+            vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
             vue.h('rect', {
                 width: '100%',
                 height: '100%',
@@ -1169,7 +1224,7 @@ var QrcodeSvg = vue.defineComponent({
                 rx: imageBorderProps.value.borderRadius,
                 ry: imageBorderProps.value.borderRadius,
             }),
-            props.imageSettings.src && 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(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1179,7 +1234,7 @@ var QrcodeCanvas = vue.defineComponent({
     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 = vue.ref(null);
-        var imageRef = vue.ref(null);
+        var imageEl = vue.ref(null);
         var drawRoundedRect = function (ctx, x, y, width, height, radius) {
             ctx.beginPath();
             if (ctx.roundRect) {
@@ -1199,11 +1254,11 @@ var QrcodeCanvas = vue.defineComponent({
             if (!canvasCtx) {
                 return;
             }
-            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) {
@@ -1234,7 +1289,7 @@ var QrcodeCanvas = vue.defineComponent({
                 });
             }
             var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
+            if (showImage && imageProps.value) {
                 if (imageBorderProps.value) {
                     var imageBorder = imageBorderProps.value;
                     canvasCtx.fillStyle = props.background;
@@ -1256,11 +1311,10 @@ var QrcodeCanvas = vue.defineComponent({
         };
         vue.onMounted(generate);
         vue.watchEffect(generate);
-        var style = ctx.attrs.style;
         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({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
+            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") }) })),
             props.imageSettings.src && vue.h('img', {
-                ref: imageRef,
+                ref: imageEl,
                 src: props.imageSettings.src,
                 style: { display: 'none' },
                 onLoad: generate,
@@ -1284,6 +1338,8 @@ var QrcodeVue = vue.defineComponent({
             gradientType: props.gradientType,
             gradientStartColor: props.gradientStartColor,
             gradientEndColor: props.gradientEndColor,
+            radius: props.radius,
+            id: props.id,
         }); };
     },
 });

package/dist/qrcode.vue.browser.min.js

@@ -1,7 +1,7 @@
 /*!
- * qrcode.vue v3.8.1
+ * qrcode.vue v3.9.1
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,o){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>o||o>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var a=[],u=0;this.size>u;u++)a.push(!1);for(u=0;this.size>u;u++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var s=this.addEccAndInterleave(n);if(this.drawCodewords(s),-1==o){var l=1e9;for(u=0;8>u;u++){this.applyMask(u),this.drawFormatBits(u);var h=this.getPenaltyScore();l>h&&(o=u,l=h),this.applyMask(u)}}i(o>=0&&7>=o),this.mask=o,this.applyMask(o),this.drawFormatBits(o),this.isFunction=[]}return t.encodeText=function(r,n){var i=e.QrSegment.makeSegments(r);return t.encodeSegments(i,n)},t.encodeBinary=function(r,n){var i=e.QrSegment.makeBytes(r);return t.encodeSegments([i],n)},t.encodeSegments=function(e,n,a,u,s,l){if(void 0===a&&(a=1),void 0===u&&(u=40),void 0===s&&(s=-1),void 0===l&&(l=!0),t.MIN_VERSION>a||a>u||u>t.MAX_VERSION||-1>s||s>7)throw new RangeError("Invalid value");var h,d;for(h=a;;h++){var c=8*t.getNumDataCodewords(h,n),f=o.getTotalBits(e,h);if(c>=f){d=f;break}if(h>=u)throw new RangeError("Data too long")}for(var g=0,v=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];v.length>g;g++){var m=v[g];l&&d<=8*t.getNumDataCodewords(h,m)&&(n=m)}for(var p=[],y=0,E=e;E.length>y;y++){var w=E[y];r(w.mode.modeBits,4,p),r(w.numChars,w.mode.numCharCountBits(h),p);for(var C=0,M=w.getData();M.length>C;C++){p.push(M[C])}}i(p.length==d);var R=8*t.getNumDataCodewords(h,n);i(R>=p.length),r(0,Math.min(4,R-p.length),p),r(0,(8-p.length%8)%8,p),i(p.length%8==0);for(var S=236;R>p.length;S^=253)r(S,8,p);for(var N=[];p.length>8*N.length;)N.push(0);return p.forEach(function(e,t){return N[t>>>3]|=e<<7-(7&t)}),new t(h,n,N,s)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,o=0;10>o;o++)r=r<<1^1335*(r>>>9);var a=21522^(t<<10|r);i(a>>>15==0);for(o=0;5>=o;o++)this.setFunctionModule(8,o,n(a,o));this.setFunctionModule(8,7,n(a,6)),this.setFunctionModule(8,8,n(a,7)),this.setFunctionModule(7,8,n(a,8));for(o=9;15>o;o++)this.setFunctionModule(14-o,8,n(a,o));for(o=0;8>o;o++)this.setFunctionModule(this.size-1-o,8,n(a,o));for(o=8;15>o;o++)this.setFunctionModule(8,this.size-15+o,n(a,o));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;i(r>>>18==0);for(t=0;18>t;t++){var o=n(r,t),a=this.size-11+t%3,u=Math.floor(t/3);this.setFunctionModule(a,u,o),this.setFunctionModule(u,a,o)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var i=Math.max(Math.abs(n),Math.abs(r)),o=e+n,a=t+r;o>=0&&this.size>o&&a>=0&&this.size>a&&this.setFunctionModule(o,a,2!=i&&4!=i)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var o=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],u=Math.floor(t.getNumRawDataModules(r)/8),s=o-u%o,l=Math.floor(u/o),h=[],d=t.reedSolomonComputeDivisor(a),c=0,f=0;o>c;c++){var g=e.slice(f,f+l-a+(s>c?0:1));f+=g.length;var v=t.reedSolomonComputeRemainder(g,d);s>c&&g.push(0),h.push(g.concat(v))}var m=[],p=function(e){h.forEach(function(t,r){e==l-a&&s>r||m.push(t[e])})};for(c=0;h[0].length>c;c++)p(c);return i(m.length==u),m},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,o=this.size-1;o>=1;o-=2){6==o&&(o=5);for(var a=0;this.size>a;a++)for(var u=0;2>u;u++){var s=o-u,l=!(o+1&2)?this.size-1-a:a;!this.isFunction[l][s]&&8*e.length>r&&(this.modules[l][s]=n(e[r>>>3],7-(7&r)),r++)}}i(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,o=0,a=[0,0,0,0,0,0,0],u=0;this.size>u;u++)this.modules[r][u]==n?5==++o?e+=t.PENALTY_N1:o>5&&e++:(this.finderPenaltyAddHistory(o,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],o=1);e+=this.finderPenaltyTerminateAndCount(n,o,a)*t.PENALTY_N3}for(u=0;this.size>u;u++){n=!1;var s=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][u]==n?5==++s?e+=t.PENALTY_N1:s>5&&e++:(this.finderPenaltyAddHistory(s,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],s=1);e+=this.finderPenaltyTerminateAndCount(n,s,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(u=0;this.size-1>u;u++){var l=this.modules[r][u];l==this.modules[r][u+1]&&l==this.modules[r+1][u]&&l==this.modules[r+1][u+1]&&(e+=t.PENALTY_N2)}for(var h=0,d=0,c=this.modules;c.length>d;d++){h=c[d].reduce(function(e,t){return e+(t?1:0)},h)}var f=this.size*this.size,g=Math.ceil(Math.abs(20*h-10*f)/f)-1;return i(g>=0&&9>=g),i((e+=g*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return i(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var i=1;for(n=0;e>n;n++){for(var o=0;r.length>o;o++)r[o]=t.reedSolomonMultiply(r[o],i),r.length>o+1&&(r[o]^=r[o+1]);i=t.reedSolomonMultiply(i,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),i=function(e){var i=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,i)})},o=0,a=e;a.length>o;o++){i(a[o])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return i(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];i(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function i(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var o=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],i=0,o=t;o.length>i;i++){r(o[i],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],i=0;t.length>i;){var o=Math.min(t.length-i,3);r(parseInt(t.substring(i,i+o),10),3*o+1,n),i+=o}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,i=[];for(n=0;t.length>=n+2;n+=2){var o=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(o+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,i)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,i),new e(e.Mode.ALPHANUMERIC,t.length,i)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,i=e;i.length>n;n++){var o=i[n],a=o.mode.numCharCountBits(t);if(o.numChars>=1<<a)return 1/0;r+=4+a+o.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=o}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var i=r,o=0,a={L:i.QrCode.Ecc.LOW,M:i.QrCode.Ecc.MEDIUM,Q:i.QrCode.Ecc.QUARTILE,H:i.QrCode.Ecc.HIGH},u=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in a}function l(e){var r=t.computed(function(){var t;return(null!==(t=e.margin)&&void 0!==t?t:0)>>>0}),n=t.computed(function(){var t=s(e.level)?e.level:"L";return i.QrCode.encodeText(e.value,a[t]).getModules()}),o=t.computed(function(){return n.value.length+2*r.value}),u=t.computed(function(){return function(e,t){void 0===t&&(t=0);for(var r=[],n=0;e.length>n;n++)for(var i=e[n],o=null,a=0;i.length>a;a++){var u=i[a];if(u||null===o)if(a!==i.length-1)u&&null===o&&(o=a);else{if(!u)continue;r.push(null===o?"M".concat(a+t,",").concat(n+t," h1v1H").concat(a+t,"z"):"M".concat(o+t,",").concat(n+t," h").concat(a+1-o,"v1H").concat(o+t,"z"))}else r.push("M".concat(o+t," ").concat(n+t,"h").concat(a-o,"v1H").concat(o+t,"z")),o=null}return r.join("")}(n.value,r.value)}),l=t.computed(function(){if(!e.imageSettings.src)return{x:0,y:0,width:0,height:0,borderRadius:0};var t=function(e,t,r,n){var i=n.width,o=n.height,a=n.x,u=n.y,s=e.length+2*r,l=Math.floor(.1*t),h=s/t,d=(i||l)*h,c=(o||l)*h,f=null==a?e.length/2-d/2:a*h,g=null==u?e.length/2-c/2:u*h,v=(n.borderRadius||0)*h,m=null;if(n.excavate){var p=Math.floor(f),y=Math.floor(g);m={x:p,y:y,w:Math.ceil(d+f-p),h:Math.ceil(c+g-y)}}return{x:f,y:g,h:c,w:d,borderRadius:v,excavation:m}}(n.value,e.size,r.value,e.imageSettings);return{x:t.x+r.value,y:t.y+r.value,width:t.w,height:t.h,borderRadius:t.borderRadius}}),h=t.computed(function(){if(!e.imageSettings.excavate||!e.imageSettings.src)return null;var t=2/(e.size/o.value);return{x:l.value.x-t,y:l.value.y-t,width:l.value.width+2*t,height:l.value.height+2*t,borderRadius:l.value.borderRadius}});return{margin:r,numCells:o,cells:n,fgPath:u,imageProps:l,imageBorderProps:h}}var h={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"}},d=n(n({},h),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:h,setup:function(e){var r=l(e),i=r.numCells,a=r.fgPath,u=r.imageProps,s=r.imageBorderProps,h=o++,d="qrcode.vue-gradient-".concat(h),c="qrcode.vue-logo-clip-path-".concat(h);return function(){return t.h("svg",{width:e.size,height:e.size,"shape-rendering":"crispEdges",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(i.value," ").concat(i.value),role:"img","aria-label":e.value},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:d},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null,(r=u.value.borderRadius,e.imageSettings.src&&r>0?t.h("clipPath",{id:c},[t.h("rect",{x:u.value.x,y:u.value.y,width:u.value.width,height:u.value.height,rx:r,ry:r})]):null)]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(d,")"):e.foreground,d:a.value}),s.value&&t.h("rect",{x:s.value.x,y:s.value.y,width:s.value.width,height:s.value.height,fill:e.background,rx:s.value.borderRadius,ry:s.value.borderRadius}),e.imageSettings.src&&t.h("image",n(n({href:e.imageSettings.src},u.value),u.value.borderRadius>0?{"clip-path":"url(#".concat(c,")")}:{}))]);var r}}}),f=t.defineComponent({name:"QRCodeCanvas",props:h,setup:function(e,r){var i=l(e),o=i.margin,a=i.cells,s=i.numCells,h=i.fgPath,d=i.imageProps,c=i.imageBorderProps,f=t.ref(null),g=t.ref(null),v=function(e,t,r,n,i,o){e.beginPath(),e.roundRect?e.roundRect(t,r,n,i,o):e.rect(t,r,n,i)},m=function(){var t=e.size,r=e.background,n=e.foreground,i=e.gradient,l=e.gradientType,m=e.gradientStartColor,p=e.gradientEndColor,y=f.value;if(y){var E=y.getContext("2d");if(E){var w=g.value,C="undefined"!=typeof window&&window.devicePixelRatio||1,M=t/s.value*C;if(y.height=y.width=t*C,E.scale(M,M),E.fillStyle=r,E.fillRect(0,0,s.value,s.value),i){var R=void 0;(R="linear"===l?E.createLinearGradient(0,0,s.value,s.value):E.createRadialGradient(s.value/2,s.value/2,0,s.value/2,s.value/2,s.value/2)).addColorStop(0,m),R.addColorStop(1,p),E.fillStyle=R}else E.fillStyle=n;if(u?E.fill(new Path2D(h.value)):a.value.forEach(function(e,t){e.forEach(function(e,r){e&&E.fillRect(r+o.value,t+o.value,1,1)})}),e.imageSettings.src&&w&&0!==w.naturalWidth&&0!==w.naturalHeight){if(c.value){var S=c.value;E.fillStyle=e.background,v(E,S.x,S.y,S.width,S.height,S.borderRadius),E.fill()}var N=d.value.borderRadius;N>0?(E.save(),v(E,d.value.x,d.value.y,d.value.width,d.value.height,N),E.clip(),E.drawImage(w,d.value.x,d.value.y,d.value.width,d.value.height),E.restore()):E.drawImage(w,d.value.x,d.value.y,d.value.width,d.value.height)}}}};t.onMounted(m),t.watchEffect(m);var p=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:f,role:"img","aria-label":e.value,style:n(n({},p),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:g,src:e.imageSettings.src,style:{display:"none"},onLoad:m})])}}}),g=t.defineComponent({name:"Qrcode",props:d,setup:function(e){return function(){return t.h("svg"===e.renderAs?c:f,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor})}}});e.QrcodeCanvas=f,e.QrcodeSvg=c,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,i){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>i||i>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var a=[],u=0;this.size>u;u++)a.push(!1);for(u=0;this.size>u;u++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var s=this.addEccAndInterleave(n);if(this.drawCodewords(s),-1==i){var l=1e9;for(u=0;8>u;u++){this.applyMask(u),this.drawFormatBits(u);var d=this.getPenaltyScore();l>d&&(i=u,l=d),this.applyMask(u)}}o(i>=0&&7>=i),this.mask=i,this.applyMask(i),this.drawFormatBits(i),this.isFunction=[]}return t.encodeText=function(r,n){var o=e.QrSegment.makeSegments(r);return t.encodeSegments(o,n)},t.encodeBinary=function(r,n){var o=e.QrSegment.makeBytes(r);return t.encodeSegments([o],n)},t.encodeSegments=function(e,n,a,u,s,l){if(void 0===a&&(a=1),void 0===u&&(u=40),void 0===s&&(s=-1),void 0===l&&(l=!0),t.MIN_VERSION>a||a>u||u>t.MAX_VERSION||-1>s||s>7)throw new RangeError("Invalid value");var d,c;for(d=a;;d++){var h=8*t.getNumDataCodewords(d,n),f=i.getTotalBits(e,d);if(h>=f){c=f;break}if(d>=u)throw new RangeError("Data too long")}for(var v=0,g=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];g.length>v;v++){var p=g[v];l&&c<=8*t.getNumDataCodewords(d,p)&&(n=p)}for(var m=[],y=0,w=e;w.length>y;y++){var E=w[y];r(E.mode.modeBits,4,m),r(E.numChars,E.mode.numCharCountBits(d),m);for(var C=0,M=E.getData();M.length>C;C++){m.push(M[C])}}o(m.length==c);var R=8*t.getNumDataCodewords(d,n);o(R>=m.length),r(0,Math.min(4,R-m.length),m),r(0,(8-m.length%8)%8,m),o(m.length%8==0);for(var S=236;R>m.length;S^=253)r(S,8,m);for(var A=[];m.length>8*A.length;)A.push(0);return m.forEach(function(e,t){return A[t>>>3]|=e<<7-(7&t)}),new t(d,n,A,s)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,i=0;10>i;i++)r=r<<1^1335*(r>>>9);var a=21522^(t<<10|r);o(a>>>15==0);for(i=0;5>=i;i++)this.setFunctionModule(8,i,n(a,i));this.setFunctionModule(8,7,n(a,6)),this.setFunctionModule(8,8,n(a,7)),this.setFunctionModule(7,8,n(a,8));for(i=9;15>i;i++)this.setFunctionModule(14-i,8,n(a,i));for(i=0;8>i;i++)this.setFunctionModule(this.size-1-i,8,n(a,i));for(i=8;15>i;i++)this.setFunctionModule(8,this.size-15+i,n(a,i));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;o(r>>>18==0);for(t=0;18>t;t++){var i=n(r,t),a=this.size-11+t%3,u=Math.floor(t/3);this.setFunctionModule(a,u,i),this.setFunctionModule(u,a,i)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var o=Math.max(Math.abs(n),Math.abs(r)),i=e+n,a=t+r;i>=0&&this.size>i&&a>=0&&this.size>a&&this.setFunctionModule(i,a,2!=o&&4!=o)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var i=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],u=Math.floor(t.getNumRawDataModules(r)/8),s=i-u%i,l=Math.floor(u/i),d=[],c=t.reedSolomonComputeDivisor(a),h=0,f=0;i>h;h++){var v=e.slice(f,f+l-a+(s>h?0:1));f+=v.length;var g=t.reedSolomonComputeRemainder(v,c);s>h&&v.push(0),d.push(v.concat(g))}var p=[],m=function(e){d.forEach(function(t,r){e==l-a&&s>r||p.push(t[e])})};for(h=0;d[0].length>h;h++)m(h);return o(p.length==u),p},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,i=this.size-1;i>=1;i-=2){6==i&&(i=5);for(var a=0;this.size>a;a++)for(var u=0;2>u;u++){var s=i-u,l=!(i+1&2)?this.size-1-a:a;!this.isFunction[l][s]&&8*e.length>r&&(this.modules[l][s]=n(e[r>>>3],7-(7&r)),r++)}}o(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,i=0,a=[0,0,0,0,0,0,0],u=0;this.size>u;u++)this.modules[r][u]==n?5==++i?e+=t.PENALTY_N1:i>5&&e++:(this.finderPenaltyAddHistory(i,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],i=1);e+=this.finderPenaltyTerminateAndCount(n,i,a)*t.PENALTY_N3}for(u=0;this.size>u;u++){n=!1;var s=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][u]==n?5==++s?e+=t.PENALTY_N1:s>5&&e++:(this.finderPenaltyAddHistory(s,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],s=1);e+=this.finderPenaltyTerminateAndCount(n,s,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(u=0;this.size-1>u;u++){var l=this.modules[r][u];l==this.modules[r][u+1]&&l==this.modules[r+1][u]&&l==this.modules[r+1][u+1]&&(e+=t.PENALTY_N2)}for(var d=0,c=0,h=this.modules;h.length>c;c++){d=h[c].reduce(function(e,t){return e+(t?1:0)},d)}var f=this.size*this.size,v=Math.ceil(Math.abs(20*d-10*f)/f)-1;return o(v>=0&&9>=v),o((e+=v*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return o(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var o=1;for(n=0;e>n;n++){for(var i=0;r.length>i;i++)r[i]=t.reedSolomonMultiply(r[i],o),r.length>i+1&&(r[i]^=r[i+1]);o=t.reedSolomonMultiply(o,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),o=function(e){var o=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,o)})},i=0,a=e;a.length>i;i++){o(a[i])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return o(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];o(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function o(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var i=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],o=0,i=t;i.length>o;o++){r(i[o],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],o=0;t.length>o;){var i=Math.min(t.length-o,3);r(parseInt(t.substring(o,o+i),10),3*i+1,n),o+=i}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,o=[];for(n=0;t.length>=n+2;n+=2){var i=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(i+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,o)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,o),new e(e.Mode.ALPHANUMERIC,t.length,o)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,o=e;o.length>n;n++){var i=o[n],a=i.mode.numCharCountBits(t);if(i.numChars>=1<<a)return 1/0;r+=4+a+i.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=i}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var o=r,i=0;var a={L:o.QrCode.Ecc.LOW,M:o.QrCode.Ecc.MEDIUM,Q:o.QrCode.Ecc.QUARTILE,H:o.QrCode.Ecc.HIGH},u=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in a}function l(e,t,r){var n=t>0&&e[t-1][r],o=e.length-1>t&&e[t+1][r],i=r>0&&e[t][r-1],a=e[t].length-1>r&&e[t][r+1];return{nw:!n&&!i,ne:!n&&!a,se:!o&&!a,sw:!o&&!i}}function d(e){var r=t.computed(function(){var t;return(null!==(t=e.margin)&&void 0!==t?t:0)>>>0}),n=t.computed(function(){var t=s(e.level)?e.level:"L";return o.QrCode.encodeText(e.value,a[t]).getModules()}),i=t.computed(function(){return n.value.length+2*r.value}),u=t.computed(function(){return e.radius>0?function(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0);for(var n=[],o=Math.min(r,.5),i=0;e.length>i;i++)for(var a=0;e[i].length>a;a++)if(e[i][a]){var u=l(e,i,a),s=u.nw,d=u.ne,c=u.se,h=u.sw,f=a+t,v=i+t;n.push("M".concat(f+(s?o:0)," ").concat(v),"L".concat(f+1-(d?o:0)," ").concat(v)),d&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+1," ").concat(v+o)),n.push("L".concat(f+1," ").concat(v+1-(c?o:0))),c&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+1-o," ").concat(v+1)),n.push("L".concat(f+(h?o:0)," ").concat(v+1)),h&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f," ").concat(v+1-o)),n.push("L".concat(f," ").concat(v+(s?o:0))),s&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+o," ").concat(v)),n.push("z")}return n.join("")}(n.value,r.value,e.radius):function(e,t){void 0===t&&(t=0);for(var r=[],n=0;e.length>n;n++)for(var o=e[n],i=null,a=0;o.length>a;a++){var u=o[a];if(u||null===i)if(a!==o.length-1)u&&null===i&&(i=a);else{if(!u)continue;r.push(null===i?"M".concat(a+t,",").concat(n+t," h1v1H").concat(a+t,"z"):"M".concat(i+t,",").concat(n+t," h").concat(a+1-i,"v1H").concat(i+t,"z"))}else r.push("M".concat(i+t," ").concat(n+t,"h").concat(a-i,"v1H").concat(i+t,"z")),i=null}return r.join("")}(n.value,r.value)}),d=t.computed(function(){if(!e.imageSettings.src)return null;var t=function(e,t,r,n){var o=n.width,i=n.height,a=n.x,u=n.y,s=e.length+2*r,l=Math.floor(.1*t),d=s/t,c=(o||l)*d,h=(i||l)*d;return{x:null==a?e.length/2-c/2:a*d,y:null==u?e.length/2-h/2:u*d,h:h,w:c,borderRadius:(n.borderRadius||0)*d}}(n.value,e.size,r.value,e.imageSettings);return{x:t.x+r.value,y:t.y+r.value,width:t.w,height:t.h,borderRadius:t.borderRadius}}),c=t.computed(function(){if(!e.imageSettings.excavate||!d.value)return null;var t=2/(e.size/i.value);return{x:d.value.x-t,y:d.value.y-t,width:d.value.width+2*t,height:d.value.height+2*t,borderRadius:d.value.borderRadius}});return{margin:r,numCells:i,cells:n,fgPath:u,imageProps:d,imageBorderProps:c}}var c={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"},radius:{type:Number,required:!1,default:0,validator:function(e){return!isNaN(e)&&e>=0&&.5>=e}},id:{type:String,required:!1}},h=n(n({},c),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),f=t.defineComponent({name:"QRCodeSvg",props:c,setup:function(e){var r=d(e),o=r.numCells,a=r.fgPath,u=r.imageProps,s=r.imageBorderProps,l=e.id||"v-".concat(i++),c="qrcode.vue-gradient-".concat(l),h="qrcode.vue-logo-clip-path-".concat(l),f=t.computed(function(){return e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:c},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null}),v=t.computed(function(){if(!u.value)return null;var e=u.value.borderRadius;return e>0?t.h("clipPath",{id:h},[t.h("rect",{x:u.value.x,y:u.value.y,width:u.value.width,height:u.value.height,rx:e,ry:e})]):null});return function(){return t.h("svg",{width:e.size,height:e.size,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(o.value," ").concat(o.value),role:"img","aria-label":e.value},[t.h("defs",{},[f.value,v.value]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(c,")"):e.foreground,d:a.value}),s.value&&t.h("rect",{x:s.value.x,y:s.value.y,width:s.value.width,height:s.value.height,fill:e.background,rx:s.value.borderRadius,ry:s.value.borderRadius}),e.imageSettings.src&&u.value&&t.h("image",n(n({href:e.imageSettings.src},u.value),u.value.borderRadius>0?{"clip-path":"url(#".concat(h,")")}:{}))])}}}),v=t.defineComponent({name:"QRCodeCanvas",props:c,setup:function(e,r){var o=d(e),i=o.margin,a=o.cells,s=o.numCells,l=o.fgPath,c=o.imageProps,h=o.imageBorderProps,f=t.ref(null),v=t.ref(null),g=function(e,t,r,n,o,i){e.beginPath(),e.roundRect?e.roundRect(t,r,n,o,i):e.rect(t,r,n,o)},p=function(){var t=e.size,r=e.background,n=e.foreground,o=e.gradient,d=e.gradientType,p=e.gradientStartColor,m=e.gradientEndColor,y=f.value;if(y){var w=y.getContext("2d");if(w){var E=v.value,C="undefined"!=typeof window&&window.devicePixelRatio||1,M=t/s.value*C;if(y.height=y.width=t*C,w.setTransform(M,0,0,M,0,0),w.fillStyle=r,w.fillRect(0,0,s.value,s.value),o){var R=void 0;(R="linear"===d?w.createLinearGradient(0,0,s.value,s.value):w.createRadialGradient(s.value/2,s.value/2,0,s.value/2,s.value/2,s.value/2)).addColorStop(0,p),R.addColorStop(1,m),w.fillStyle=R}else w.fillStyle=n;if(u?w.fill(new Path2D(l.value)):a.value.forEach(function(e,t){e.forEach(function(e,r){e&&w.fillRect(r+i.value,t+i.value,1,1)})}),e.imageSettings.src&&E&&0!==E.naturalWidth&&0!==E.naturalHeight&&c.value){if(h.value){var S=h.value;w.fillStyle=e.background,g(w,S.x,S.y,S.width,S.height,S.borderRadius),w.fill()}var A=c.value.borderRadius;A>0?(w.save(),g(w,c.value.x,c.value.y,c.value.width,c.value.height,A),w.clip(),w.drawImage(E,c.value.x,c.value.y,c.value.width,c.value.height),w.restore()):w.drawImage(E,c.value.x,c.value.y,c.value.width,c.value.height)}}}};return t.onMounted(p),t.watchEffect(p),function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:f,role:"img","aria-label":e.value,style:n(n({},r.attrs.style),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:v,src:e.imageSettings.src,style:{display:"none"},onLoad:p})])}}}),g=t.defineComponent({name:"Qrcode",props:h,setup:function(e){return function(){return t.h("svg"===e.renderAs?f:v,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor,radius:e.radius,id:e.id})}}});e.QrcodeCanvas=v,e.QrcodeSvg=f,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})});

package/dist/qrcode.vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.8.1
+ * qrcode.vue v3.9.1
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -910,6 +910,11 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var _uid = 0;
+function getUid(id) {
+    if (id)
+        return id;
+    return "v-".concat(_uid++);
+}
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
@@ -934,6 +939,51 @@ 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 pathSegments = [];
@@ -982,15 +1032,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 = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
@@ -999,11 +1041,15 @@ function useQRCode(props) {
         return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
     });
     var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
-    var fgPath = vue.computed(function () { return generatePath(cells.value, margin.value); });
-    var imageProps = vue.computed(function () {
-        if (!props.imageSettings.src) {
-            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+    var fgPath = vue.computed(function () {
+        if (props.radius > 0) {
+            return generateRoundedPath(cells.value, margin.value, props.radius);
         }
+        return generatePath(cells.value, margin.value);
+    });
+    var imageProps = vue.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,
@@ -1014,7 +1060,7 @@ function useQRCode(props) {
         };
     });
     var imageBorderProps = vue.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 {
@@ -1081,6 +1127,16 @@ var QRCodeProps = {
         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,
@@ -1093,10 +1149,10 @@ var QrcodeSvg = vue.defineComponent({
     props: QRCodeProps,
     setup: function (props) {
         var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
-        var uid = _uid++;
+        var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
-        var renderGradient = function () {
+        var gradientVNode = vue.computed(function () {
             if (!props.gradient)
                 return null;
             var gradientProps = props.gradientType === 'linear'
@@ -1123,11 +1179,11 @@ var QrcodeSvg = vue.defineComponent({
                     style: { stopColor: props.gradientEndColor },
                 }),
             ]);
-        };
-        var renderClipPath = function () {
-            var borderRadius = imageProps.value.borderRadius;
-            if (!props.imageSettings.src)
+        });
+        var clipPathVNode = vue.computed(function () {
+            if (!imageProps.value)
                 return null;
+            var borderRadius = imageProps.value.borderRadius;
             if (borderRadius <= 0)
                 return null;
             return vue.h('clipPath', { id: qrLogoClipPathId }, [
@@ -1140,17 +1196,16 @@ var QrcodeSvg = vue.defineComponent({
                     ry: borderRadius,
                 }),
             ]);
-        };
+        });
         return function () { return vue.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,
         }, [
-            vue.h('defs', {}, [renderGradient(), renderClipPath()]),
+            vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
             vue.h('rect', {
                 width: '100%',
                 height: '100%',
@@ -1169,7 +1224,7 @@ var QrcodeSvg = vue.defineComponent({
                 rx: imageBorderProps.value.borderRadius,
                 ry: imageBorderProps.value.borderRadius,
             }),
-            props.imageSettings.src && 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(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1179,7 +1234,7 @@ var QrcodeCanvas = vue.defineComponent({
     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 = vue.ref(null);
-        var imageRef = vue.ref(null);
+        var imageEl = vue.ref(null);
         var drawRoundedRect = function (ctx, x, y, width, height, radius) {
             ctx.beginPath();
             if (ctx.roundRect) {
@@ -1199,11 +1254,11 @@ var QrcodeCanvas = vue.defineComponent({
             if (!canvasCtx) {
                 return;
             }
-            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) {
@@ -1234,7 +1289,7 @@ var QrcodeCanvas = vue.defineComponent({
                 });
             }
             var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
+            if (showImage && imageProps.value) {
                 if (imageBorderProps.value) {
                     var imageBorder = imageBorderProps.value;
                     canvasCtx.fillStyle = props.background;
@@ -1256,11 +1311,10 @@ var QrcodeCanvas = vue.defineComponent({
         };
         vue.onMounted(generate);
         vue.watchEffect(generate);
-        var style = ctx.attrs.style;
         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({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
+            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") }) })),
             props.imageSettings.src && vue.h('img', {
-                ref: imageRef,
+                ref: imageEl,
                 src: props.imageSettings.src,
                 style: { display: 'none' },
                 onLoad: generate,
@@ -1284,6 +1338,8 @@ var QrcodeVue = vue.defineComponent({
             gradientType: props.gradientType,
             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.8.1
+ * qrcode.vue v3.9.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, h, ref, onMounted, watchEffect, Fragment, computed } from 'vue';
+import { defineComponent, computed, h, ref, onMounted, watchEffect, Fragment } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -906,6 +906,11 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var _uid = 0;
+function getUid(id) {
+    if (id)
+        return id;
+    return "v-".concat(_uid++);
+}
 var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
@@ -930,6 +935,51 @@ 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 pathSegments = [];
@@ -978,15 +1028,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; });
@@ -995,11 +1037,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,
@@ -1010,7 +1056,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 {
@@ -1077,6 +1123,16 @@ var QRCodeProps = {
         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,
@@ -1089,10 +1145,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 uid = _uid++;
+        var uid = getUid(props.id);
         var qrGradientId = "qrcode.vue-gradient-".concat(uid);
         var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
-        var renderGradient = function () {
+        var gradientVNode = computed(function () {
             if (!props.gradient)
                 return null;
             var gradientProps = props.gradientType === 'linear'
@@ -1119,11 +1175,11 @@ var QrcodeSvg = defineComponent({
                     style: { stopColor: props.gradientEndColor },
                 }),
             ]);
-        };
-        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 }, [
@@ -1136,17 +1192,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%',
@@ -1165,7 +1220,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, ")") } : {}))),
         ]); };
     },
 });
@@ -1175,7 +1230,7 @@ var QrcodeCanvas = defineComponent({
     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 imageEl = ref(null);
         var drawRoundedRect = function (ctx, x, y, width, height, radius) {
             ctx.beginPath();
             if (ctx.roundRect) {
@@ -1195,11 +1250,11 @@ var QrcodeCanvas = defineComponent({
             if (!canvasCtx) {
                 return;
             }
-            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) {
@@ -1230,7 +1285,7 @@ var QrcodeCanvas = defineComponent({
                 });
             }
             var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
+            if (showImage && imageProps.value) {
                 if (imageBorderProps.value) {
                     var imageBorder = imageBorderProps.value;
                     canvasCtx.fillStyle = props.background;
@@ -1252,11 +1307,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, role: 'img', 'aria-label': props.value, 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,
@@ -1280,6 +1334,8 @@ var QrcodeVue = defineComponent({
             gradientType: props.gradientType,
             gradientStartColor: props.gradientStartColor,
             gradientEndColor: props.gradientEndColor,
+            radius: props.radius,
+            id: props.id,
         }); };
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.8.1",
+  "version": "3.9.1",
   "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/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"
     },
@@ -50,13 +50,13 @@
   "dependencies": {},
   "devDependencies": {
     "@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.8.9",
-    "rollup": "^4.60.1",
+    "@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",
     "rollup-plugin-typescript2": "^0.37.0",
     "typescript": "^5.9.3",
-    "vue": "^3.5.29"
+    "vue": "^3.5.34"
   }
 }

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;