qrcode.vue 3.5.1 → 3.6.0

package/README-ja.md

@@ -1,18 +1,18 @@
 # qrcode.vue
 
-⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue`を`3.x`にアップグレードしてください。
+⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue` を`3.x`にアップグレードしてください。
 
-🔒 Vue 2.xを使用している場合は、バージョン`1.x`を使用し続けてください。
+🔒 Vue 2.xを使用している場合は、バージョン `1.x` を使用し続けてください。
 
-[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するためのVue.jsコンポーネントです。Vue 2とVue 3の両方をサポートしています。
+[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するための Vue.js コンポーネントです。Vue 2 と Vue 3 の両方をサポートしています。
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
 
 [English](./README.md)
 
 ## インストール
 
-`qrcode.vue`コンポーネントをVue.jsアプリに使用できます。
+`qrcode.vue`コンポーネントを Vue.js アプリに使用できます。
 
 ```bash
 npm install --save qrcode.vue # yarn add qrcode.vue
@@ -28,7 +28,7 @@ dist/
 
 ## 使用方法
 
-例：
+e.g.
 
 ```javascript
 import { createApp } from 'vue'
@@ -45,7 +45,7 @@ createApp({
 }).mount('#root')
 ```
 
-または、`*.vue`拡張子の単一ファイルコンポーネントで使用します：
+または、`*.vue` 拡張子の単一ファイルコンポーネントで使用します：
 
 ```html
 <template>
@@ -68,7 +68,7 @@ createApp({
 </script>
 ```
 
-Vue 3で`TypeScript`を使用する場合：
+Vue 3で `TypeScript` を使用する場合：
 
 ```html
 <template>
@@ -78,13 +78,17 @@ Vue 3で`TypeScript`を使用する場合：
     :render-as="renderAs"
     :background="background"
     :foreground='foreground'
+    :gradient="gradient"
+    :gradient-type="gradientType"
+    :gradient-start-color="gradientStartColor"
+    :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
   />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
@@ -92,6 +96,8 @@ Vue 3で`TypeScript`を使用する場合：
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
+  
+  // 画像の設定
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -100,6 +106,12 @@ Vue 3で`TypeScript`を使用する場合：
     // y: 10,
     excavate: true,
   })
+
+  // グラデーション
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -172,6 +184,34 @@ QRコードの前景色。
 
 The settings to support qrcode image logo.
 
+### `gradient`
+
+- タイプ：`boolean`
+- デフォルト：`false`
+
+QRコードのグラデーション塗りつぶしを有効にします。
+
+### `gradient-type`
+
+- タイプ：`GradientType('linear' | 'radial')`
+- デフォルト：`linear`
+
+グラデーションの種類を指定します。
+
+### `gradient-start-color`
+
+- タイプ：`string`
+- デフォルト：`#000000`
+
+グラデーションの開始色。
+
+### `gradient-end-color`
+
+- タイプ：`string`
+- デフォルト：`#ffffff`
+
+グラデーションの終了色。
+
 ### `class`
 
 - タイプ：`string`
@@ -179,6 +219,49 @@ The settings to support qrcode image logo.
 
 QRコード要素のクラス名。
 
+## `QrcodeVue` 3.5+
+
+`QrcodeVue` 3.5+ exports separate `QrcodeCanvas` and `QrcodeSvg` components, for which the rollup configuration has been modified:
+
+```
+// rollup.config.js
+
+-    exports: 'default',
++    exports: 'named',
+```
+
+Direct references to `QrcodeVue` in common.js and cdn now require the `default` field:
+
+```js
+const QrcodeVue = require('qrcode.vue').default
+const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
+```
+
+```html
+<!--With HTML-->
+<div id="root">
+  <p class="flex space-x">
+  <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
+  <qrcode-canvas :value="test"></qrcode-canvas>
+  </p>
+  <p><input v-model="test" /></p>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>
+
+<script>
+Vue.createApp({
+  data() { return {
+    test: 'Hello World',
+  }},
+  components: {
+    QrcodeVue: QrcodeVue.default,
+    QrcodeCanvas: QrcodeVue.QrcodeCanvas,
+  },
+}).mount('#root')
+</script>
+```
+
 ## ライセンス
 
 copyright &copy; 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)

package/README-zh_cn.md

@@ -6,7 +6,7 @@
 
 一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
 
 ## 快速开始
 
@@ -76,13 +76,17 @@ createApp({
     :render-as="renderAs"
     :background="background"
     :foreground='foreground'
+    :gradient="gradient"
+    :gradient-type="gradientType"
+    :gradient-start-color="gradientStartColor"
+    :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
   />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
@@ -90,6 +94,8 @@ createApp({
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
+  
+  // 可传入二维码图片相关的属性，支持二维码 LOGO；
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -98,6 +104,12 @@ createApp({
     // y: 10,
     excavate: true,
   })
+
+  // 可传入渐变相关的属性，支持渐变：
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -173,6 +185,34 @@ createApp({
 
 二维码图片 logo 配置。
 
+### `gradient`
+
+- 类型: `boolean`
+- 默认值: `false`
+
+启用二维码的渐变填充。
+
+### `gradient-type`
+
+- 类型: `GradientType('linear' | 'radial')`
+- 默认值: `linear`
+
+指定渐变类型。
+
+### `gradient-start-color`
+
+- 类型: `string`
+- 默认值: `#000000`
+
+渐变的起始颜色。
+
+### `gradient-end-color`
+
+- 类型: `string`
+- 默认值: `#ffffff`
+
+渐变的结束颜色。
+
 ### `class`
 
 - 类型：`string`
@@ -191,20 +231,20 @@ createApp({
 +    exports: 'named',
 ```
 
-
 现在在 common.js 和 cdn 直接引用 `QrcodeVue` 需要使用 `default` 字段：
 
 ```js
 const QrcodeVue = require('qrcode.vue').default
 const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
 ```
+
 ```html
 <!--With HTML-->
 <div id="root">
   <p class="flex space-x">
   <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
-<qrcode-canvas :value="test"></qrcode-canvas>
-</p>
+  <qrcode-canvas :value="test"></qrcode-canvas>
+  </p>
 <p><input v-model="test" /></p>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>

package/README.md

@@ -6,8 +6,6 @@
 
 A Vue.js component to generate [QRCode](https://en.wikipedia.org/wiki/QR_code). Both support Vue 2 and Vue 3.
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
-
 [中文](./README-zh_cn.md) | [日本語](./README-ja.md)
 
 ## install
@@ -82,13 +80,17 @@ When you use the component with Vue 3 with `TypeScript`:
     :render-as="renderAs"
     :background="background"
     :foreground='foreground'
+    :gradient="gradient"
+    :gradient-type="gradientType"
+    :gradient-start-color="gradientStartColor"
+    :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
   />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
@@ -96,6 +98,7 @@ When you use the component with Vue 3 with `TypeScript`:
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
+  
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -104,6 +107,11 @@ When you use the component with Vue 3 with `TypeScript`:
     // y: 10,
     excavate: true,
   })
+
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -176,6 +184,34 @@ The foreground color of qrcode.
 
 The settings to support qrcode image logo.
 
+### `gradient`
+
+- Type: `boolean`
+- Default: `false`
+
+Enable gradient fill for the QR code.
+
+### `gradient-type`
+
+- Type: `GradientType('linear' | 'radial')`
+- Default: `linear`
+
+Specify the type of gradient.
+
+### `gradient-start-color`
+
+- Type: `string`
+- Default: `#000000`
+
+The start color of the gradient.
+
+### `gradient-end-color`
+
+- Type: `string`
+- Default: `#ffffff`
+
+The end color of the gradient.
+
 ### `class`
 
 - Type: `string`
@@ -200,14 +236,15 @@ Direct references to `QrcodeVue` in common.js and cdn now require the `default`
 const QrcodeVue = require('qrcode.vue').default
 const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
 ```
+
 ```html
 <!--With HTML-->
 <div id="root">
   <p class="flex space-x">
   <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
-<qrcode-canvas :value="test"></qrcode-canvas>
-</p>
-<p><input v-model="test" /></p>
+  <qrcode-canvas :value="test"></qrcode-canvas>
+  </p>
+  <p><input v-model="test" /></p>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
 export type Level = 'L' | 'M' | 'Q' | 'H';
 export type RenderAs = 'canvas' | 'svg';
+export type GradientType = 'linear' | 'radial';
 export type ImageSettings = {
     src: string;
     x?: number;
@@ -42,6 +43,27 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -77,6 +99,27 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -85,6 +128,10 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
@@ -119,6 +166,27 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -154,6 +222,27 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -162,6 +251,10 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     renderAs: {
@@ -202,6 +295,27 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     renderAs: {
         type: PropType<RenderAs>;
@@ -241,6 +355,27 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
         required: boolean;
         default: () => {};
     };
+    gradient: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    gradientType: {
+        type: PropType<GradientType>;
+        required: boolean;
+        default: string;
+        validator: (t: any) => boolean;
+    };
+    gradientStartColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    gradientEndColor: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     value: string;
     size: number;
@@ -249,6 +384,10 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
     foreground: string;
     margin: number;
     imageSettings: ImageSettings;
+    gradient: boolean;
+    gradientType: GradientType;
+    gradientStartColor: string;
+    gradientEndColor: string;
     renderAs: RenderAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default QrcodeVue;

package/dist/qrcode.vue.browser.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.6.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -24,7 +24,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -1031,6 +1031,27 @@ var QRCodeProps = {
         required: false,
         default: function () { return ({}); },
     },
+    gradient: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    gradientType: {
+        type: String,
+        required: false,
+        default: 'linear',
+        validator: function (t) { return ['linear', 'radial'].indexOf(t) > -1; },
+    },
+    gradientStartColor: {
+        type: String,
+        required: false,
+        default: '#000',
+    },
+    gradientEndColor: {
+        type: String,
+        required: false,
+        default: '#fff',
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1071,6 +1092,34 @@ var QrcodeSvg = vue.defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var renderGradient = function () {
+            if (!props.gradient)
+                return null;
+            var gradientProps = props.gradientType === 'linear'
+                ? {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%',
+                }
+                : {
+                    cx: '50%',
+                    cy: '50%',
+                    r: '50%',
+                    fx: '50%',
+                    fy: '50%',
+                };
+            return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+                vue.h('stop', {
+                    offset: '0%',
+                    style: { stopColor: props.gradientStartColor },
+                }),
+                vue.h('stop', {
+                    offset: '100%',
+                    style: { stopColor: props.gradientEndColor },
+                }),
+            ]);
+        };
         generate();
         vue.onUpdated(generate);
         return function () { return vue.h('svg', {
@@ -1080,11 +1129,16 @@ var QrcodeSvg = vue.defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            vue.h('path', {
+            vue.h('defs', {}, [renderGradient()]),
+            vue.h('rect', {
+                width: '100%',
+                height: '100%',
                 fill: props.background,
-                d: "M0,0 h".concat(numCells.value, "v").concat(numCells.value, "H0z"),
             }),
-            vue.h('path', { fill: props.foreground, d: fgPath.value }),
+            vue.h('path', {
+                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                d: fgPath.value,
+            }),
             props.imageSettings.src && vue.h('image', __assign({ href: props.imageSettings.src }, imageProps)),
         ]); };
     },
@@ -1096,7 +1150,7 @@ var QrcodeCanvas = vue.defineComponent({
         var canvasEl = vue.ref(null);
         var imageRef = vue.ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground;
+            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var margin = _margin >>> 0;
             var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var canvas = canvasEl.value;
@@ -1130,7 +1184,21 @@ var QrcodeCanvas = vue.defineComponent({
             ctx.scale(scale, scale);
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, numCells, numCells);
-            ctx.fillStyle = foreground;
+            if (gradient) {
+                var grad = void 0;
+                if (gradientType === 'linear') {
+                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                }
+                else {
+                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                }
+                grad.addColorStop(0, gradientStartColor);
+                grad.addColorStop(1, gradientEndColor);
+                ctx.fillStyle = grad;
+            }
+            else {
+                ctx.fillStyle = foreground;
+            }
             if (SUPPORTS_PATH2D) {
                 ctx.fill(new Path2D(generatePath(cells, margin)));
             }
@@ -1164,8 +1232,20 @@ var QrcodeCanvas = vue.defineComponent({
 var QrcodeVue = vue.defineComponent({
     name: 'Qrcode',
     render: function () {
-        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings;
-        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, { value: value, size: size, margin: margin, level: level, background: background, foreground: foreground, imageSettings: imageSettings });
+        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings, gradient = _a.gradient, gradientType = _a.gradientType, gradientStartColor = _a.gradientStartColor, gradientEndColor = _a.gradientEndColor;
+        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            value: value,
+            size: size,
+            margin: margin,
+            level: level,
+            background: background,
+            foreground: foreground,
+            imageSettings: imageSettings,
+            gradient: gradient,
+            gradientType: gradientType,
+            gradientStartColor: gradientStartColor,
+            gradientEndColor: gradientEndColor,
+        });
     },
     props: QRCodeVueProps,
 });

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

@@ -1,7 +1,7 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.6.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).QrcodeVue={},t.Vue)}(this,(function(t,e){"use strict";var r,n=function(){return n=Object.assign||function(t){for(var e,r=1,n=arguments.length;n>r;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(t){var e=function(){function e(t,r,n,i){if(this.version=t,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],e.MIN_VERSION>t||t>e.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*t+17;for(var a=[],s=0;this.size>s;s++)a.push(!1);for(s=0;this.size>s;s++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var u=this.addEccAndInterleave(n);if(this.drawCodewords(u),-1==i){var h=1e9;for(s=0;8>s;s++){this.applyMask(s),this.drawFormatBits(s);var l=this.getPenaltyScore();h>l&&(i=s,h=l),this.applyMask(s)}}o(i>=0&&7>=i),this.mask=i,this.applyMask(i),this.drawFormatBits(i),this.isFunction=[]}return e.encodeText=function(r,n){var o=t.QrSegment.makeSegments(r);return e.encodeSegments(o,n)},e.encodeBinary=function(r,n){var o=t.QrSegment.makeBytes(r);return e.encodeSegments([o],n)},e.encodeSegments=function(t,n,a,s,u,h){if(void 0===a&&(a=1),void 0===s&&(s=40),void 0===u&&(u=-1),void 0===h&&(h=!0),e.MIN_VERSION>a||a>s||s>e.MAX_VERSION||-1>u||u>7)throw new RangeError("Invalid value");var l,c;for(l=a;;l++){var f=8*e.getNumDataCodewords(l,n),d=i.getTotalBits(t,l);if(f>=d){c=d;break}if(l>=s)throw new RangeError("Data too long")}for(var g=0,v=[e.Ecc.MEDIUM,e.Ecc.QUARTILE,e.Ecc.HIGH];v.length>g;g++){var m=v[g];h&&c<=8*e.getNumDataCodewords(l,m)&&(n=m)}for(var p=[],E=0,w=t;w.length>E;E++){var M=w[E];r(M.mode.modeBits,4,p),r(M.numChars,M.mode.numCharCountBits(l),p);for(var C=0,y=M.getData();y.length>C;C++){p.push(y[C])}}o(p.length==c);var R=8*e.getNumDataCodewords(l,n);o(R>=p.length),r(0,Math.min(4,R-p.length),p),r(0,(8-p.length%8)%8,p),o(p.length%8==0);for(var N=236;R>p.length;N^=253)r(N,8,p);for(var A=[];p.length>8*A.length;)A.push(0);return p.forEach((function(t,e){return A[e>>>3]|=t<<7-(7&e)})),new e(l,n,A,u)},e.prototype.getModule=function(t,e){return t>=0&&this.size>t&&e>=0&&this.size>e&&this.modules[e][t]},e.prototype.getModules=function(){return this.modules},e.prototype.drawFunctionPatterns=function(){for(var t=0;this.size>t;t++)this.setFunctionModule(6,t,t%2==0),this.setFunctionModule(t,6,t%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var e=this.getAlignmentPatternPositions(),r=e.length;for(t=0;r>t;t++)for(var n=0;r>n;n++)0==t&&0==n||0==t&&n==r-1||t==r-1&&0==n||this.drawAlignmentPattern(e[t],e[n]);this.drawFormatBits(0),this.drawVersion()},e.prototype.drawFormatBits=function(t){for(var e=this.errorCorrectionLevel.formatBits<<3|t,r=e,i=0;10>i;i++)r=r<<1^1335*(r>>>9);var a=21522^(e<<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)},e.prototype.drawVersion=function(){if(this.version>=7){for(var t=this.version,e=0;12>e;e++)t=t<<1^7973*(t>>>11);var r=this.version<<12|t;o(r>>>18==0);for(e=0;18>e;e++){var i=n(r,e),a=this.size-11+e%3,s=Math.floor(e/3);this.setFunctionModule(a,s,i),this.setFunctionModule(s,a,i)}}},e.prototype.drawFinderPattern=function(t,e){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=t+n,a=e+r;i>=0&&this.size>i&&a>=0&&this.size>a&&this.setFunctionModule(i,a,2!=o&&4!=o)}},e.prototype.drawAlignmentPattern=function(t,e){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(t+n,e+r,1!=Math.max(Math.abs(n),Math.abs(r)))},e.prototype.setFunctionModule=function(t,e,r){this.modules[e][t]=r,this.isFunction[e][t]=!0},e.prototype.addEccAndInterleave=function(t){var r=this.version,n=this.errorCorrectionLevel;if(t.length!=e.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var i=e.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=e.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],s=Math.floor(e.getNumRawDataModules(r)/8),u=i-s%i,h=Math.floor(s/i),l=[],c=e.reedSolomonComputeDivisor(a),f=0,d=0;i>f;f++){var g=t.slice(d,d+h-a+(u>f?0:1));d+=g.length;var v=e.reedSolomonComputeRemainder(g,c);u>f&&g.push(0),l.push(g.concat(v))}var m=[],p=function(t){l.forEach((function(e,r){t==h-a&&u>r||m.push(e[t])}))};for(f=0;l[0].length>f;f++)p(f);return o(m.length==s),m},e.prototype.drawCodewords=function(t){if(t.length!=Math.floor(e.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 s=0;2>s;s++){var u=i-s,h=!(i+1&2)?this.size-1-a:a;!this.isFunction[h][u]&&8*t.length>r&&(this.modules[h][u]=n(t[r>>>3],7-(7&r)),r++)}}o(r==8*t.length)},e.prototype.applyMask=function(t){if(0>t||t>7)throw new RangeError("Mask value out of range");for(var e=0;this.size>e;e++)for(var r=0;this.size>r;r++){var n=void 0;switch(t){case 0:n=(r+e)%2==0;break;case 1:n=e%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+e)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(e/2))%2==0;break;case 5:n=r*e%2+r*e%3==0;break;case 6:n=(r*e%2+r*e%3)%2==0;break;case 7:n=((r+e)%2+r*e%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[e][r]&&n&&(this.modules[e][r]=!this.modules[e][r])}},e.prototype.getPenaltyScore=function(){for(var t=0,r=0;this.size>r;r++){for(var n=!1,i=0,a=[0,0,0,0,0,0,0],s=0;this.size>s;s++)this.modules[r][s]==n?5==++i?t+=e.PENALTY_N1:i>5&&t++:(this.finderPenaltyAddHistory(i,a),n||(t+=this.finderPenaltyCountPatterns(a)*e.PENALTY_N3),n=this.modules[r][s],i=1);t+=this.finderPenaltyTerminateAndCount(n,i,a)*e.PENALTY_N3}for(s=0;this.size>s;s++){n=!1;var u=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][s]==n?5==++u?t+=e.PENALTY_N1:u>5&&t++:(this.finderPenaltyAddHistory(u,a),n||(t+=this.finderPenaltyCountPatterns(a)*e.PENALTY_N3),n=this.modules[r][s],u=1);t+=this.finderPenaltyTerminateAndCount(n,u,a)*e.PENALTY_N3}for(r=0;this.size-1>r;r++)for(s=0;this.size-1>s;s++){var h=this.modules[r][s];h==this.modules[r][s+1]&&h==this.modules[r+1][s]&&h==this.modules[r+1][s+1]&&(t+=e.PENALTY_N2)}for(var l=0,c=0,f=this.modules;f.length>c;c++){l=f[c].reduce((function(t,e){return t+(e?1:0)}),l)}var d=this.size*this.size,g=Math.ceil(Math.abs(20*l-10*d)/d)-1;return o(g>=0&&9>=g),o((t+=g*e.PENALTY_N4)>=0&&2568888>=t),t},e.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var t=Math.floor(this.version/7)+2,e=2*Math.floor((8*this.version+3*t+5)/(4*t-4)),r=[6],n=this.size-7;t>r.length;n-=e)r.splice(1,0,n);return r},e.getNumRawDataModules=function(t){if(e.MIN_VERSION>t||t>e.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*t+128)*t+64;if(t>=2){var n=Math.floor(t/7)+2;r-=(25*n-10)*n-55,7>t||(r-=36)}return o(r>=208&&29648>=r),r},e.getNumDataCodewords=function(t,r){return Math.floor(e.getNumRawDataModules(t)/8)-e.ECC_CODEWORDS_PER_BLOCK[r.ordinal][t]*e.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][t]},e.reedSolomonComputeDivisor=function(t){if(1>t||t>255)throw new RangeError("Degree out of range");for(var r=[],n=0;t-1>n;n++)r.push(0);r.push(1);var o=1;for(n=0;t>n;n++){for(var i=0;r.length>i;i++)r[i]=e.reedSolomonMultiply(r[i],o),r.length>i+1&&(r[i]^=r[i+1]);o=e.reedSolomonMultiply(o,2)}return r},e.reedSolomonComputeRemainder=function(t,r){for(var n=r.map((function(t){return 0})),o=function(t){var o=t^n.shift();n.push(0),r.forEach((function(t,r){return n[r]^=e.reedSolomonMultiply(t,o)}))},i=0,a=t;a.length>i;i++){o(a[i])}return n},e.reedSolomonMultiply=function(t,e){if(t>>>8!=0||e>>>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^=(e>>>n&1)*t;return o(r>>>8==0),r},e.prototype.finderPenaltyCountPatterns=function(t){var e=t[1];o(3*this.size>=e);var r=e>0&&t[2]==e&&t[3]==3*e&&t[4]==e&&t[5]==e;return(!r||4*e>t[0]||e>t[6]?0:1)+(!r||4*e>t[6]||e>t[0]?0:1)},e.prototype.finderPenaltyTerminateAndCount=function(t,e,r){return t&&(this.finderPenaltyAddHistory(e,r),e=0),this.finderPenaltyAddHistory(e+=this.size,r),this.finderPenaltyCountPatterns(r)},e.prototype.finderPenaltyAddHistory=function(t,e){0==e[0]&&(t+=this.size),e.pop(),e.unshift(t)},e.MIN_VERSION=1,e.MAX_VERSION=40,e.PENALTY_N1=3,e.PENALTY_N2=3,e.PENALTY_N3=40,e.PENALTY_N4=10,e.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]],e.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]],e}();function r(t,e,r){if(0>e||e>31||t>>>e!=0)throw new RangeError("Value out of range");for(var n=e-1;n>=0;n--)r.push(t>>>n&1)}function n(t,e){return!!(t>>>e&1)}function o(t){if(!t)throw Error("Assertion error")}t.QrCode=e;var i=function(){function t(t,e,r){if(this.mode=t,this.numChars=e,this.bitData=r,0>e)throw new RangeError("Invalid argument");this.bitData=r.slice()}return t.makeBytes=function(e){for(var n=[],o=0,i=e;i.length>o;o++){r(i[o],8,n)}return new t(t.Mode.BYTE,e.length,n)},t.makeNumeric=function(e){if(!t.isNumeric(e))throw new RangeError("String contains non-numeric characters");for(var n=[],o=0;e.length>o;){var i=Math.min(e.length-o,3);r(parseInt(e.substring(o,o+i),10),3*i+1,n),o+=i}return new t(t.Mode.NUMERIC,e.length,n)},t.makeAlphanumeric=function(e){if(!t.isAlphanumeric(e))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,o=[];for(n=0;e.length>=n+2;n+=2){var i=45*t.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n));r(i+=t.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n+1)),11,o)}return e.length>n&&r(t.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n)),6,o),new t(t.Mode.ALPHANUMERIC,e.length,o)},t.makeSegments=function(e){return""==e?[]:t.isNumeric(e)?[t.makeNumeric(e)]:t.isAlphanumeric(e)?[t.makeAlphanumeric(e)]:[t.makeBytes(t.toUtf8ByteArray(e))]},t.makeEci=function(e){var n=[];if(0>e)throw new RangeError("ECI assignment value out of range");if(128>e)r(e,8,n);else if(16384>e)r(2,2,n),r(e,14,n);else{if(e>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(e,21,n)}return new t(t.Mode.ECI,0,n)},t.isNumeric=function(e){return t.NUMERIC_REGEX.test(e)},t.isAlphanumeric=function(e){return t.ALPHANUMERIC_REGEX.test(e)},t.prototype.getData=function(){return this.bitData.slice()},t.getTotalBits=function(t,e){for(var r=0,n=0,o=t;o.length>n;n++){var i=o[n],a=i.mode.numCharCountBits(e);if(i.numChars>=1<<a)return 1/0;r+=4+a+i.bitData.length}return r},t.toUtf8ByteArray=function(t){t=encodeURI(t);for(var e=[],r=0;t.length>r;r++)"%"!=t.charAt(r)?e.push(t.charCodeAt(r)):(e.push(parseInt(t.substring(r+1,r+3),16)),r+=2);return e},t.NUMERIC_REGEX=/^[0-9]*$/,t.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,t.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",t}();t.QrSegment=i}(r||(r={})),function(t){var e,r;e=t.QrCode||(t.QrCode={}),r=function(){function t(t,e){this.ordinal=t,this.formatBits=e}return t.LOW=new t(0,1),t.MEDIUM=new t(1,0),t.QUARTILE=new t(2,3),t.HIGH=new t(3,2),t}(),e.Ecc=r}(r||(r={})),function(t){var e,r;e=t.QrSegment||(t.QrSegment={}),r=function(){function t(t,e){this.modeBits=t,this.numBitsCharCount=e}return t.prototype.numCharCountBits=function(t){return this.numBitsCharCount[Math.floor((t+7)/17)]},t.NUMERIC=new t(1,[10,12,14]),t.ALPHANUMERIC=new t(2,[9,11,13]),t.BYTE=new t(4,[8,16,16]),t.KANJI=new t(8,[8,10,12]),t.ECI=new t(7,[0,0,0]),t}(),e.Mode=r}(r||(r={}));var o=r,i={L:o.QrCode.Ecc.LOW,M:o.QrCode.Ecc.MEDIUM,Q:o.QrCode.Ecc.QUARTILE,H:o.QrCode.Ecc.HIGH},a=function(){try{(new Path2D).addPath(new Path2D)}catch(t){return!1}return!0}();function s(t){return t in i}function u(t,e){void 0===e&&(e=0);var r=[];return t.forEach((function(t,n){var o=null;t.forEach((function(i,a){if(!i&&null!==o)return r.push("M".concat(o+e," ").concat(n+e,"h").concat(a-o,"v1H").concat(o+e,"z")),void(o=null);if(a!==t.length-1)i&&null===o&&(o=a);else{if(!i)return;r.push(null===o?"M".concat(a+e,",").concat(n+e," h1v1H").concat(a+e,"z"):"M".concat(o+e,",").concat(n+e," h").concat(a+1-o,"v1H").concat(o+e,"z"))}}))})),r.join("")}function h(t,e,r,n){var o=n.width,i=n.height,a=n.x,s=n.y,u=t.length+2*r,h=Math.floor(.1*e),l=u/e,c=(o||h)*l,f=(i||h)*l,d=null==a?t.length/2-c/2:a*l,g=null==s?t.length/2-f/2:s*l,v=null;if(n.excavate){var m=Math.floor(d),p=Math.floor(g);v={x:m,y:p,w:Math.ceil(c+d-m),h:Math.ceil(f+g-p)}}return{x:d,y:g,h:f,w:c,excavation:v}}function l(t,e){return t.slice().map((function(t,r){return e.y>r||r>=e.y+e.h?t:t.map((function(t,r){return(e.x>r||r>=e.x+e.w)&&t}))}))}var c={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(t){return s(t)}},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{}}}},f=n(n({},c),{renderAs:{type:String,required:!1,default:"canvas",validator:function(t){return["canvas","svg"].indexOf(t)>-1}}}),d=e.defineComponent({name:"QRCodeSvg",props:c,setup:function(t){var r,a=e.ref(0),c=e.ref(""),f=function(){var e=t.value,n=t.level,f=t.margin>>>0,d=s(n)?n:"L",g=o.QrCode.encodeText(e,i[d]).getModules();if(a.value=g.length+2*f,t.imageSettings.src){var v=h(g,t.size,f,t.imageSettings);r={x:v.x+f,y:v.y+f,width:v.w,height:v.h},v.excavation&&(g=l(g,v.excavation))}c.value=u(g,f)};return f(),e.onUpdated(f),function(){return e.h("svg",{width:t.size,height:t.size,"shape-rendering":"crispEdges",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(a.value," ").concat(a.value)},[e.h("path",{fill:t.background,d:"M0,0 h".concat(a.value,"v").concat(a.value,"H0z")}),e.h("path",{fill:t.foreground,d:c.value}),t.imageSettings.src&&e.h("image",n({href:t.imageSettings.src},r))])}}}),g=e.defineComponent({name:"QRCodeCanvas",props:c,setup:function(t,r){var c=e.ref(null),f=e.ref(null),d=function(){var e=t.value,r=t.level,n=t.size,d=t.background,g=t.foreground,v=t.margin>>>0,m=s(r)?r:"L",p=c.value;if(p){var E=p.getContext("2d");if(E){var w=o.QrCode.encodeText(e,i[m]).getModules(),M=w.length+2*v,C=f.value,y={x:0,y:0,width:0,height:0},R=t.imageSettings.src&&null!=C&&0!==C.naturalWidth&&0!==C.naturalHeight;if(R){var N=h(w,t.size,v,t.imageSettings);y={x:N.x+v,y:N.y+v,width:N.w,height:N.h},N.excavation&&(w=l(w,N.excavation))}var A=window.devicePixelRatio||1,S=n/M*A;p.height=p.width=n*A,E.scale(S,S),E.fillStyle=d,E.fillRect(0,0,M,M),E.fillStyle=g,a?E.fill(new Path2D(u(w,v))):w.forEach((function(t,e){t.forEach((function(t,r){t&&E.fillRect(r+v,e+v,1,1)}))})),R&&E.drawImage(C,y.x,y.y,y.width,y.height)}}};e.onMounted(d),e.onUpdated(d);var g=r.attrs.style;return function(){return e.h(e.Fragment,[e.h("canvas",n(n({},r.attrs),{ref:c,style:n(n({},g),{width:"".concat(t.size,"px"),height:"".concat(t.size,"px")})})),t.imageSettings.src&&e.h("img",{ref:f,src:t.imageSettings.src,style:{display:"none"},onLoad:d})])}}}),v=e.defineComponent({name:"Qrcode",render:function(){var t=this.$props;return e.h("svg"===t.renderAs?d:g,{value:t.value,size:t.size,margin:t.margin,level:t.level,background:t.background,foreground:t.foreground,imageSettings:t.imageSettings})},props:f});t.QrcodeCanvas=g,t.QrcodeSvg=d,t.default=v,Object.defineProperty(t,"__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=[],s=0;this.size>s;s++)a.push(!1);for(s=0;this.size>s;s++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var u=this.addEccAndInterleave(n);if(this.drawCodewords(u),-1==i){var h=1e9;for(s=0;8>s;s++){this.applyMask(s),this.drawFormatBits(s);var l=this.getPenaltyScore();h>l&&(i=s,h=l),this.applyMask(s)}}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,s,u,h){if(void 0===a&&(a=1),void 0===s&&(s=40),void 0===u&&(u=-1),void 0===h&&(h=!0),t.MIN_VERSION>a||a>s||s>t.MAX_VERSION||-1>u||u>7)throw new RangeError("Invalid value");var l,d;for(l=a;;l++){var f=8*t.getNumDataCodewords(l,n),c=i.getTotalBits(e,l);if(f>=c){d=c;break}if(l>=s)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 p=v[g];h&&d<=8*t.getNumDataCodewords(l,p)&&(n=p)}for(var m=[],E=0,C=e;C.length>E;E++){var y=C[E];r(y.mode.modeBits,4,m),r(y.numChars,y.mode.numCharCountBits(l),m);for(var w=0,M=y.getData();M.length>w;w++){m.push(M[w])}}o(m.length==d);var R=8*t.getNumDataCodewords(l,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 N=[];m.length>8*N.length;)N.push(0);return m.forEach((function(e,t){return N[t>>>3]|=e<<7-(7&t)})),new t(l,n,N,u)},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,s=Math.floor(t/3);this.setFunctionModule(a,s,i),this.setFunctionModule(s,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],s=Math.floor(t.getNumRawDataModules(r)/8),u=i-s%i,h=Math.floor(s/i),l=[],d=t.reedSolomonComputeDivisor(a),f=0,c=0;i>f;f++){var g=e.slice(c,c+h-a+(u>f?0:1));c+=g.length;var v=t.reedSolomonComputeRemainder(g,d);u>f&&g.push(0),l.push(g.concat(v))}var p=[],m=function(e){l.forEach((function(t,r){e==h-a&&u>r||p.push(t[e])}))};for(f=0;l[0].length>f;f++)m(f);return o(p.length==s),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 s=0;2>s;s++){var u=i-s,h=!(i+1&2)?this.size-1-a:a;!this.isFunction[h][u]&&8*e.length>r&&(this.modules[h][u]=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],s=0;this.size>s;s++)this.modules[r][s]==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][s],i=1);e+=this.finderPenaltyTerminateAndCount(n,i,a)*t.PENALTY_N3}for(s=0;this.size>s;s++){n=!1;var u=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][s]==n?5==++u?e+=t.PENALTY_N1:u>5&&e++:(this.finderPenaltyAddHistory(u,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][s],u=1);e+=this.finderPenaltyTerminateAndCount(n,u,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(s=0;this.size-1>s;s++){var h=this.modules[r][s];h==this.modules[r][s+1]&&h==this.modules[r+1][s]&&h==this.modules[r+1][s+1]&&(e+=t.PENALTY_N2)}for(var l=0,d=0,f=this.modules;f.length>d;d++){l=f[d].reduce((function(e,t){return e+(t?1:0)}),l)}var c=this.size*this.size,g=Math.ceil(Math.abs(20*l-10*c)/c)-1;return o(g>=0&&9>=g),o((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 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={L:o.QrCode.Ecc.LOW,M:o.QrCode.Ecc.MEDIUM,Q:o.QrCode.Ecc.QUARTILE,H:o.QrCode.Ecc.HIGH},a=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in i}function u(e,t){void 0===t&&(t=0);var r=[];return e.forEach((function(e,n){var o=null;e.forEach((function(i,a){if(!i&&null!==o)return r.push("M".concat(o+t," ").concat(n+t,"h").concat(a-o,"v1H").concat(o+t,"z")),void(o=null);if(a!==e.length-1)i&&null===o&&(o=a);else{if(!i)return;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"))}}))})),r.join("")}function h(e,t,r,n){var o=n.width,i=n.height,a=n.x,s=n.y,u=e.length+2*r,h=Math.floor(.1*t),l=u/t,d=(o||h)*l,f=(i||h)*l,c=null==a?e.length/2-d/2:a*l,g=null==s?e.length/2-f/2:s*l,v=null;if(n.excavate){var p=Math.floor(c),m=Math.floor(g);v={x:p,y:m,w:Math.ceil(d+c-p),h:Math.ceil(f+g-m)}}return{x:c,y:g,h:f,w:d,excavation:v}}function l(e,t){return e.slice().map((function(e,r){return t.y>r||r>=t.y+t.h?e:e.map((function(e,r){return(t.x>r||r>=t.x+t.w)&&e}))}))}var d={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"}},f=n(n({},d),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:d,setup:function(e){var r,a=t.ref(0),d=t.ref(""),f=function(){var t=e.value,n=e.level,f=e.margin>>>0,c=s(n)?n:"L",g=o.QrCode.encodeText(t,i[c]).getModules();if(a.value=g.length+2*f,e.imageSettings.src){var v=h(g,e.size,f,e.imageSettings);r={x:v.x+f,y:v.y+f,width:v.w,height:v.h},v.excavation&&(g=l(g,v.excavation))}d.value=u(g,f)};return f(),t.onUpdated(f),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(a.value," ").concat(a.value)},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:"qr-gradient"},"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]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#qr-gradient)":e.foreground,d:d.value}),e.imageSettings.src&&t.h("image",n({href:e.imageSettings.src},r))])}}}),g=t.defineComponent({name:"QRCodeCanvas",props:d,setup:function(e,r){var d=t.ref(null),f=t.ref(null),c=function(){var t=e.value,r=e.level,n=e.size,c=e.background,g=e.foreground,v=e.gradient,p=e.gradientType,m=e.gradientStartColor,E=e.gradientEndColor,C=e.margin>>>0,y=s(r)?r:"L",w=d.value;if(w){var M=w.getContext("2d");if(M){var R=o.QrCode.encodeText(t,i[y]).getModules(),S=R.length+2*C,N=f.value,A={x:0,y:0,width:0,height:0},P=e.imageSettings.src&&null!=N&&0!==N.naturalWidth&&0!==N.naturalHeight;if(P){var I=h(R,e.size,C,e.imageSettings);A={x:I.x+C,y:I.y+C,width:I.w,height:I.h},I.excavation&&(R=l(R,I.excavation))}var _=window.devicePixelRatio||1,z=n/S*_;if(w.height=w.width=n*_,M.scale(z,z),M.fillStyle=c,M.fillRect(0,0,S,S),v){var O=void 0;(O="linear"===p?M.createLinearGradient(0,0,S,S):M.createRadialGradient(S/2,S/2,0,S/2,S/2,S/2)).addColorStop(0,m),O.addColorStop(1,E),M.fillStyle=O}else M.fillStyle=g;a?M.fill(new Path2D(u(R,C))):R.forEach((function(e,t){e.forEach((function(e,r){e&&M.fillRect(r+C,t+C,1,1)}))})),P&&M.drawImage(N,A.x,A.y,A.width,A.height)}}};t.onMounted(c),t.onUpdated(c);var g=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:d,style:n(n({},g),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:f,src:e.imageSettings.src,style:{display:"none"},onLoad:c})])}}}),v=t.defineComponent({name:"Qrcode",render:function(){var e=this.$props;return t.h("svg"===e.renderAs?c:g,{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})},props:f});e.QrcodeCanvas=g,e.QrcodeSvg=c,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));

package/dist/qrcode.vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.6.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -24,7 +24,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -1031,6 +1031,27 @@ var QRCodeProps = {
         required: false,
         default: function () { return ({}); },
     },
+    gradient: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    gradientType: {
+        type: String,
+        required: false,
+        default: 'linear',
+        validator: function (t) { return ['linear', 'radial'].indexOf(t) > -1; },
+    },
+    gradientStartColor: {
+        type: String,
+        required: false,
+        default: '#000',
+    },
+    gradientEndColor: {
+        type: String,
+        required: false,
+        default: '#fff',
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1071,6 +1092,34 @@ var QrcodeSvg = vue.defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var renderGradient = function () {
+            if (!props.gradient)
+                return null;
+            var gradientProps = props.gradientType === 'linear'
+                ? {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%',
+                }
+                : {
+                    cx: '50%',
+                    cy: '50%',
+                    r: '50%',
+                    fx: '50%',
+                    fy: '50%',
+                };
+            return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+                vue.h('stop', {
+                    offset: '0%',
+                    style: { stopColor: props.gradientStartColor },
+                }),
+                vue.h('stop', {
+                    offset: '100%',
+                    style: { stopColor: props.gradientEndColor },
+                }),
+            ]);
+        };
         generate();
         vue.onUpdated(generate);
         return function () { return vue.h('svg', {
@@ -1080,11 +1129,16 @@ var QrcodeSvg = vue.defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            vue.h('path', {
+            vue.h('defs', {}, [renderGradient()]),
+            vue.h('rect', {
+                width: '100%',
+                height: '100%',
                 fill: props.background,
-                d: "M0,0 h".concat(numCells.value, "v").concat(numCells.value, "H0z"),
             }),
-            vue.h('path', { fill: props.foreground, d: fgPath.value }),
+            vue.h('path', {
+                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                d: fgPath.value,
+            }),
             props.imageSettings.src && vue.h('image', __assign({ href: props.imageSettings.src }, imageProps)),
         ]); };
     },
@@ -1096,7 +1150,7 @@ var QrcodeCanvas = vue.defineComponent({
         var canvasEl = vue.ref(null);
         var imageRef = vue.ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground;
+            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var margin = _margin >>> 0;
             var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var canvas = canvasEl.value;
@@ -1130,7 +1184,21 @@ var QrcodeCanvas = vue.defineComponent({
             ctx.scale(scale, scale);
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, numCells, numCells);
-            ctx.fillStyle = foreground;
+            if (gradient) {
+                var grad = void 0;
+                if (gradientType === 'linear') {
+                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                }
+                else {
+                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                }
+                grad.addColorStop(0, gradientStartColor);
+                grad.addColorStop(1, gradientEndColor);
+                ctx.fillStyle = grad;
+            }
+            else {
+                ctx.fillStyle = foreground;
+            }
             if (SUPPORTS_PATH2D) {
                 ctx.fill(new Path2D(generatePath(cells, margin)));
             }
@@ -1164,8 +1232,20 @@ var QrcodeCanvas = vue.defineComponent({
 var QrcodeVue = vue.defineComponent({
     name: 'Qrcode',
     render: function () {
-        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings;
-        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, { value: value, size: size, margin: margin, level: level, background: background, foreground: foreground, imageSettings: imageSettings });
+        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings, gradient = _a.gradient, gradientType = _a.gradientType, gradientStartColor = _a.gradientStartColor, gradientEndColor = _a.gradientEndColor;
+        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            value: value,
+            size: size,
+            margin: margin,
+            level: level,
+            background: background,
+            foreground: foreground,
+            imageSettings: imageSettings,
+            gradient: gradient,
+            gradientType: gradientType,
+            gradientStartColor: gradientStartColor,
+            gradientEndColor: gradientEndColor,
+        });
     },
     props: QRCodeVueProps,
 });

package/dist/qrcode.vue.esm.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.6.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -20,7 +20,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -1027,6 +1027,27 @@ var QRCodeProps = {
         required: false,
         default: function () { return ({}); },
     },
+    gradient: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    gradientType: {
+        type: String,
+        required: false,
+        default: 'linear',
+        validator: function (t) { return ['linear', 'radial'].indexOf(t) > -1; },
+    },
+    gradientStartColor: {
+        type: String,
+        required: false,
+        default: '#000',
+    },
+    gradientEndColor: {
+        type: String,
+        required: false,
+        default: '#fff',
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1067,6 +1088,34 @@ var QrcodeSvg = defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var renderGradient = function () {
+            if (!props.gradient)
+                return null;
+            var gradientProps = props.gradientType === 'linear'
+                ? {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%',
+                }
+                : {
+                    cx: '50%',
+                    cy: '50%',
+                    r: '50%',
+                    fx: '50%',
+                    fy: '50%',
+                };
+            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+                h('stop', {
+                    offset: '0%',
+                    style: { stopColor: props.gradientStartColor },
+                }),
+                h('stop', {
+                    offset: '100%',
+                    style: { stopColor: props.gradientEndColor },
+                }),
+            ]);
+        };
         generate();
         onUpdated(generate);
         return function () { return h('svg', {
@@ -1076,11 +1125,16 @@ var QrcodeSvg = defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            h('path', {
+            h('defs', {}, [renderGradient()]),
+            h('rect', {
+                width: '100%',
+                height: '100%',
                 fill: props.background,
-                d: "M0,0 h".concat(numCells.value, "v").concat(numCells.value, "H0z"),
             }),
-            h('path', { fill: props.foreground, d: fgPath.value }),
+            h('path', {
+                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                d: fgPath.value,
+            }),
             props.imageSettings.src && h('image', __assign({ href: props.imageSettings.src }, imageProps)),
         ]); };
     },
@@ -1092,7 +1146,7 @@ var QrcodeCanvas = defineComponent({
         var canvasEl = ref(null);
         var imageRef = ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground;
+            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var margin = _margin >>> 0;
             var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var canvas = canvasEl.value;
@@ -1126,7 +1180,21 @@ var QrcodeCanvas = defineComponent({
             ctx.scale(scale, scale);
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, numCells, numCells);
-            ctx.fillStyle = foreground;
+            if (gradient) {
+                var grad = void 0;
+                if (gradientType === 'linear') {
+                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                }
+                else {
+                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                }
+                grad.addColorStop(0, gradientStartColor);
+                grad.addColorStop(1, gradientEndColor);
+                ctx.fillStyle = grad;
+            }
+            else {
+                ctx.fillStyle = foreground;
+            }
             if (SUPPORTS_PATH2D) {
                 ctx.fill(new Path2D(generatePath(cells, margin)));
             }
@@ -1160,8 +1228,20 @@ var QrcodeCanvas = defineComponent({
 var QrcodeVue = defineComponent({
     name: 'Qrcode',
     render: function () {
-        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings;
-        return h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, { value: value, size: size, margin: margin, level: level, background: background, foreground: foreground, imageSettings: imageSettings });
+        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings, gradient = _a.gradient, gradientType = _a.gradientType, gradientStartColor = _a.gradientStartColor, gradientEndColor = _a.gradientEndColor;
+        return h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            value: value,
+            size: size,
+            margin: margin,
+            level: level,
+            background: background,
+            foreground: foreground,
+            imageSettings: imageSettings,
+            gradient: gradient,
+            gradientType: gradientType,
+            gradientStartColor: gradientStartColor,
+            gradientEndColor: gradientEndColor,
+        });
     },
     props: QRCodeVueProps,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",
@@ -48,8 +48,10 @@
   "dependencies": {},
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
-    "@rsbuild/core": "^1.0.14",
-    "rollup": "^4.24.0",
+    "@rsbuild/core": "^1.0.19",
+    "@rsbuild/plugin-sass": "^1.1.0",
+    "bootstrap": "^5.3.3",
+    "rollup": "^4.24.3",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.6.3",
     "vue": "^3.5.12"