qrcode.vue 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## [3.5.0] - 2024-09-26
+
+### Feature
+
+- Support logo image for Qrcode.
+- Exports separate `QrcodeCanvas` and `QrcodeSvg` components
+
+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>
+<qrcode-svg :value="test" :image-settings="imageSettings"></qrcode-svg>
+</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',
+    imageSettings: {
+      src: 'https://avatars.githubusercontent.com/u/15811268',
+      width: 30,
+      height: 30,
+      excavate: true,
+    },
+  }},
+  components: {
+    QrcodeVue: QrcodeVue.default,
+    QrcodeCanvas: QrcodeVue.QrcodeCanvas,
+    QrcodeSvg: QrcodeVue.QrcodeSvg,
+  },
+}).mount('#root')
+</script>
+```
+
 ## [3.4.1] - 2023-08-05
 
 ### BUGFIX

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`
@@ -180,6 +220,49 @@ createApp({
 
 传递给二维码根元素的类名。
 
+## `QrcodeVue` 3.5+
+
+`QrcodeVue` 3.5+ 后导出独立的 `QrcodeCanvas` 和 `QrcodeSvg` 组件，为此修改了 rollup 的配置：
+
+```
+// rollup.config.js
+
+-    exports: 'default',
++    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>
+<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.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`
@@ -183,6 +219,49 @@ The settings to support qrcode image logo.
 
 The class name of qrcode element.
 
+## `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>
+```
+
 ## License
 
 copyright &copy; 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)

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.0
+ * 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,
@@ -1046,7 +1067,9 @@ var QrcodeSvg = vue.defineComponent({
         var fgPath = vue.ref('');
         var imageProps;
         var generate = function () {
-            var value = props.value, level = props.level, margin = props.margin;
+            var value = props.value, _level = props.level, _margin = props.margin;
+            var margin = _margin >>> 0;
+            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
             numCells.value = cells.length + margin * 2;
             if (props.imageSettings.src) {
@@ -1069,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', {
@@ -1078,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)),
         ]); };
     },
@@ -1094,7 +1150,9 @@ 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;
             if (!canvas) {
                 return;
@@ -1126,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)));
             }
@@ -1160,11 +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;
-        var size = _size >>> 0;
-        var margin = _margin >>> 0;
-        var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-        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.0
+ * 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),s=e.ref(""),c=function(){var e=t.margin,n=o.QrCode.encodeText(t.value,i[t.level]).getModules();if(a.value=n.length+2*e,t.imageSettings.src){var c=h(n,t.size,e,t.imageSettings);r={x:c.x+e,y:c.y+e,width:c.w,height:c.h},c.excavation&&(n=l(n,c.excavation))}s.value=u(n,e)};return c(),e.onUpdated(c),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:s.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 s=e.ref(null),c=e.ref(null),f=function(){var e=t.value,r=t.level,n=t.size,f=t.margin,d=t.background,g=t.foreground,v=s.value;if(v){var m=v.getContext("2d");if(m){var p=o.QrCode.encodeText(e,i[r]).getModules(),E=p.length+2*f,w=c.value,M={x:0,y:0,width:0,height:0},C=t.imageSettings.src&&null!=w&&0!==w.naturalWidth&&0!==w.naturalHeight;if(C){var y=h(p,t.size,f,t.imageSettings);M={x:y.x+f,y:y.y+f,width:y.w,height:y.h},y.excavation&&(p=l(p,y.excavation))}var R=window.devicePixelRatio||1,N=n/E*R;v.height=v.width=n*R,m.scale(N,N),m.fillStyle=d,m.fillRect(0,0,E,E),m.fillStyle=g,a?m.fill(new Path2D(u(p,f))):p.forEach((function(t,e){t.forEach((function(t,r){t&&m.fillRect(r+f,e+f,1,1)}))})),C&&m.drawImage(w,M.x,M.y,M.width,M.height)}}};e.onMounted(f),e.onUpdated(f);var d=r.attrs.style;return function(){return e.h(e.Fragment,[e.h("canvas",n(n({},r.attrs),{ref:s,style:n(n({},d),{width:"".concat(t.size,"px"),height:"".concat(t.size,"px")})})),t.imageSettings.src&&e.h("img",{ref:c,src:t.imageSettings.src,style:{display:"none"},onLoad:f})])}}}),v=e.defineComponent({name:"Qrcode",render:function(){var t=this.$props,r=t.renderAs,n=t.value,o=t.level,i=t.background,a=t.foreground,u=t.imageSettings,h=t.size>>>0,l=t.margin>>>0,c=s(o)?o:"L";return e.h("svg"===r?d:g,{value:n,size:h,margin:l,level:c,background:i,foreground:a,imageSettings:u})},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.0
+ * 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,
@@ -1046,7 +1067,9 @@ var QrcodeSvg = vue.defineComponent({
         var fgPath = vue.ref('');
         var imageProps;
         var generate = function () {
-            var value = props.value, level = props.level, margin = props.margin;
+            var value = props.value, _level = props.level, _margin = props.margin;
+            var margin = _margin >>> 0;
+            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
             numCells.value = cells.length + margin * 2;
             if (props.imageSettings.src) {
@@ -1069,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', {
@@ -1078,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)),
         ]); };
     },
@@ -1094,7 +1150,9 @@ 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;
             if (!canvas) {
                 return;
@@ -1126,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)));
             }
@@ -1160,11 +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;
-        var size = _size >>> 0;
-        var margin = _margin >>> 0;
-        var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-        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.0
+ * 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,
@@ -1042,7 +1063,9 @@ var QrcodeSvg = defineComponent({
         var fgPath = ref('');
         var imageProps;
         var generate = function () {
-            var value = props.value, level = props.level, margin = props.margin;
+            var value = props.value, _level = props.level, _margin = props.margin;
+            var margin = _margin >>> 0;
+            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
             var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
             numCells.value = cells.length + margin * 2;
             if (props.imageSettings.src) {
@@ -1065,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', {
@@ -1074,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)),
         ]); };
     },
@@ -1090,7 +1146,9 @@ 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;
             if (!canvas) {
                 return;
@@ -1122,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)));
             }
@@ -1156,11 +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;
-        var size = _size >>> 0;
-        var margin = _margin >>> 0;
-        var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-        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.0",
+  "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",
@@ -21,13 +21,10 @@
     "dev": "rsbuild dev",
     "build": "rollup -c"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/scopewu/qrcode.vue.git"
-  },
+  "repository": "https://github.com/scopewu/qrcode.vue.git",
   "keywords": [
     "vue",
-    "vue-component",
+    "vue qrcode",
     "component",
     "code",
     "qrcode",
@@ -51,10 +48,12 @@
   "dependencies": {},
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
-    "@rsbuild/core": "^1.0.7",
-    "rollup": "^4.22.4",
+    "@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.2",
-    "vue": "^3.5.8"
+    "typescript": "^5.6.3",
+    "vue": "^3.5.12"
   }
 }