qrcode.vue 3.4.1 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README-ja.md +184 -0
  2. package/README-zh_cn.md +50 -11
  3. package/README.md +51 -11
  4. package/dist/index.d.ts +179 -6
  5. package/dist/qrcode.vue.browser.js +1117 -1038
  6. package/dist/qrcode.vue.browser.min.js +4 -4
  7. package/dist/qrcode.vue.cjs.js +101 -22
  8. package/dist/qrcode.vue.esm.js +98 -23
  9. package/package.json +9 -16
package/README-ja.md ADDED
@@ -0,0 +1,184 @@
1
+ # qrcode.vue
2
+
3
+ ⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue`を`3.x`にアップグレードしてください。
4
+
5
+ 🔒 Vue 2.xを使用している場合は、バージョン`1.x`を使用し続けてください。
6
+
7
+ [QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するためのVue.jsコンポーネントです。Vue 2とVue 3の両方をサポートしています。
8
+
9
+ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
10
+
11
+ [English](./README.md)
12
+
13
+ ## インストール
14
+
15
+ `qrcode.vue`コンポーネントをVue.jsアプリに使用できます。
16
+
17
+ ```bash
18
+ npm install --save qrcode.vue # yarn add qrcode.vue
19
+ ```
20
+
21
+ ```
22
+ dist/
23
+ |--- qrcode.vue.cjs.js // CommonJS
24
+ |--- qrcode.vue.esm.js // ESモジュール
25
+ |--- qrcode.vue.browser.js // ブラウザまたはrequire.jsまたはCommonJS用のUMD
26
+ |--- qrcode.vue.browser.min.js // 最小サイズのUMD
27
+ ```
28
+
29
+ ## 使用方法
30
+
31
+ 例：
32
+
33
+ ```javascript
34
+ import { createApp } from 'vue'
35
+ import QrcodeVue from 'qrcode.vue'
36
+
37
+ createApp({
38
+ data: {
39
+ value: 'https://example.com',
40
+ },
41
+ template: '<qrcode-vue :value="value"></qrcode-vue>',
42
+ components: {
43
+ QrcodeVue,
44
+ },
45
+ }).mount('#root')
46
+ ```
47
+
48
+ または、`*.vue`拡張子の単一ファイルコンポーネントで使用します：
49
+
50
+ ```html
51
+ <template>
52
+ <qrcode-vue :value="value" :size="size" level="H" />
53
+ </template>
54
+ <script>
55
+ import QrcodeVue from 'qrcode.vue'
56
+
57
+ export default {
58
+ data() {
59
+ return {
60
+ value: 'https://example.com',
61
+ size: 300,
62
+ }
63
+ },
64
+ components: {
65
+ QrcodeVue,
66
+ },
67
+ }
68
+ </script>
69
+ ```
70
+
71
+ Vue 3で`TypeScript`を使用する場合：
72
+
73
+ ```html
74
+ <template>
75
+ <qrcode-vue
76
+ :value="value"
77
+ :level="level"
78
+ :render-as="renderAs"
79
+ :background="background"
80
+ :foreground='foreground'
81
+ :image-settings='imageSettings'
82
+ />
83
+ </template>
84
+ <script setup lang="ts">
85
+ import { ref } from 'vue'
86
+ import QrcodeVue from 'qrcode.vue'
87
+ import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
88
+
89
+ const value = ref('qrcode')
90
+ const level = ref<Level>('M')
91
+ const renderAs = ref<RenderAs>('svg')
92
+ const background = ref('#ffffff')
93
+ const foreground = ref('#000000')
94
+ const margin = ref(0)
95
+ const imageSettings = ref<ImageSettings>({
96
+ src: 'https://github.com/scopewu.png',
97
+ width: 30,
98
+ height: 30,
99
+ // x: 10,
100
+ // y: 10,
101
+ excavate: true,
102
+ })
103
+ </script>
104
+ ```
105
+
106
+ ## コンポーネントプロパティ
107
+
108
+ ### `value`
109
+
110
+ - タイプ：`string`
111
+ - デフォルト：`''`
112
+
113
+ QRコードの内容。
114
+
115
+ ### `size`
116
+
117
+ - タイプ：`number`
118
+ - デフォルト：`100`
119
+
120
+ QRコード要素のサイズ。
121
+
122
+ ### `render-as`
123
+
124
+ - タイプ：`RenderAs('canvas' | 'svg')`
125
+ - デフォルト：`canvas`
126
+
127
+ `canvas`または`svg`としてQRコードを生成します。`svg`プロパティはSSRで動作します。
128
+
129
+ ### `margin`
130
+
131
+ - タイプ：`number`
132
+ - デフォルト：`0`
133
+
134
+ 静かなゾーンの幅を定義します。
135
+
136
+ ### `level`
137
+
138
+ - タイプ：`Level('L' | 'M' | 'Q' | 'H')`
139
+ - デフォルト：`H`
140
+
141
+ QRコードの誤り訂正レベル（'L'、'M'、'Q'、'H'のいずれか）。詳細については、[wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)を参照してください。
142
+
143
+ ### `background`
144
+
145
+ - タイプ：`string`
146
+ - デフォルト：`#ffffff`
147
+
148
+ QRコードの背景色。
149
+
150
+ ### `foreground`
151
+
152
+ - タイプ：`string`
153
+ - デフォルト：`#000000`
154
+
155
+ QRコードの前景色。
156
+
157
+ ### `image-settings`
158
+
159
+ - タイプ: `ImageSettings`
160
+ - デフォルト: `{}`
161
+
162
+ ```ts
163
+ export type ImageSettings = {
164
+ src: string, // The URL of image.
165
+ x?: number, // The horizontal offset. When not specified, will center the image.
166
+ y?: number, // The vertical offset. When not specified, will center the image.
167
+ height: number, // The height of image
168
+ width: number, // The height of image
169
+ excavate?: boolean, // Whether or not to "excavate" the modules around the image.
170
+ }
171
+ ```
172
+
173
+ The settings to support qrcode image logo.
174
+
175
+ ### `class`
176
+
177
+ - タイプ：`string`
178
+ - デフォルト：`''`
179
+
180
+ QRコード要素のクラス名。
181
+
182
+ ## ライセンス
183
+
184
+ copyright &copy; 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
package/README-zh_cn.md CHANGED
@@ -4,9 +4,8 @@
4
4
 
5
5
  🔒 如果你正在使用 Vue 2，请保持 `qrcode.vue` 的版本为 `1.x`;
6
6
 
7
- 一款 Vue.js 二维码组件.
7
+ 一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
8
8
 
9
- [![Build Status](https://travis-ci.org/scopewu/qrcode.vue.svg?branch=master)](https://travis-ci.org/scopewu/qrcode.vue)
10
9
  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
11
10
 
12
11
  ## 快速开始
@@ -71,17 +70,36 @@ createApp({
71
70
 
72
71
  ```html
73
72
  <template>
74
- <qrcode-vue :value="value" :level="level" :render-as="renderAs" />
73
+ <qrcode-vue
74
+ :value="value"
75
+ :level="level"
76
+ :render-as="renderAs"
77
+ :background="background"
78
+ :foreground='foreground'
79
+ :image-settings='imageSettings'
80
+ />
75
81
  </template>
76
-
77
82
  <script setup lang="ts">
78
83
  import { ref } from 'vue'
79
- import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'
80
-
81
- const value = ref<String>('qrcode')
84
+ import QrcodeVue from 'qrcode.vue'
85
+ import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
86
+
87
+ const value = ref('qrcode')
82
88
  const level = ref<Level>('M')
83
89
  const renderAs = ref<RenderAs>('svg')
90
+ const background = ref('#ffffff')
91
+ const foreground = ref('#000000')
92
+ const margin = ref(0)
93
+ const imageSettings = ref<ImageSettings>({
94
+ src: 'https://github.com/scopewu.png',
95
+ width: 30,
96
+ height: 30,
97
+ // x: 10,
98
+ // y: 10,
99
+ excavate: true,
100
+ })
84
101
  </script>
102
+ ```
85
103
 
86
104
  ## Component props
87
105
 
@@ -101,7 +119,7 @@ createApp({
101
119
 
102
120
  ### `render-as`
103
121
 
104
- - 类型：`string('canvas' | 'svg')`
122
+ - 类型：`RenderAs('canvas' | 'svg')`
105
123
  - 默认值：`canvas`
106
124
 
107
125
  生成二维码的 HTML 标签，可选 `canvas` 或 `svg`。其中 `svg` 可以用于 SSR。
@@ -115,8 +133,8 @@ createApp({
115
133
 
116
134
  ### `level`
117
135
 
118
- - 类型：`string('L' | 'M' | 'Q' | 'H')`
119
- - 默认值：`H`
136
+ - 类型：`Level('L' | 'M' | 'Q' | 'H')`
137
+ - 默认值：`L`
120
138
 
121
139
  二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。了解更多，[维基百科：QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)。
122
140
 
@@ -134,6 +152,27 @@ createApp({
134
152
 
135
153
  二维码前景颜色。
136
154
 
155
+ ### `image-settings`
156
+
157
+ - 类型: `ImageSettings`
158
+ - 默认值: `{}`
159
+
160
+ ```ts
161
+ export type ImageSettings = {
162
+ src: string, // 图片的地址。
163
+ x?: number, // 水平横向偏移。没有设定值时，图片剧中
164
+ y?: number, // 垂直竖向偏移。没有设定值时，图片剧中
165
+ height: number, // 图片的高度
166
+ width: number, // 图片的宽度
167
+ // 是否“挖掘”图像周围的模块。
168
+ // 这意味着嵌入图像重叠的任何模块都将使用背景颜色。
169
+ // 使用此选项可确保图像周围的边缘清晰。嵌入透明图像时也很有用。
170
+ excavate?: boolean,
171
+ }
172
+ ```
173
+
174
+ 二维码图片 logo 配置。
175
+
137
176
  ### `class`
138
177
 
139
178
  - 类型：`string`
@@ -143,4 +182,4 @@ createApp({
143
182
 
144
183
  ## 软件许可
145
184
 
146
- copyright &copy; 2021 scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
185
+ copyright &copy; 2021 scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
package/README.md CHANGED
@@ -4,12 +4,11 @@
4
4
 
5
5
  🔒 if you are using Vue 2.x, please keep using version `1.x`;
6
6
 
7
- A Vue.js component to generate [QRCode](https://en.wikipedia.org/wiki/QR_code).
7
+ A Vue.js component to generate [QRCode](https://en.wikipedia.org/wiki/QR_code). Both support Vue 2 and Vue 3.
8
8
 
9
- [![Build Status](https://travis-ci.org/scopewu/qrcode.vue.svg?branch=master)](https://travis-ci.org/scopewu/qrcode.vue)
10
9
  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
11
10
 
12
- [中文](./README-zh_cn.md)
11
+ [中文](./README-zh_cn.md) | [日本語](./README-ja.md)
13
12
 
14
13
  ## install
15
14
 
@@ -50,10 +49,12 @@ Or single-file components with a `*.vue` extension:
50
49
 
51
50
  ```html
52
51
  <template>
53
- <qrcode-vue :value="value" :size="size" level="H" />
52
+ <qrcode-vue :value="value" :size="size" level="H" render-as="svg" />
53
+ <qrcode-canvas :value="QRCODE.VUE 😄" :size="size" level="H" />
54
+ <qrcode-svg value="QRCODE.VUE 😄" level="H" />
54
55
  </template>
55
56
  <script>
56
- import QrcodeVue from 'qrcode.vue'
57
+ import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'
57
58
 
58
59
  export default {
59
60
  data() {
@@ -64,6 +65,8 @@ Or single-file components with a `*.vue` extension:
64
65
  },
65
66
  components: {
66
67
  QrcodeVue,
68
+ QrcodeCanvas,
69
+ QrcodeSvg,
67
70
  },
68
71
  }
69
72
  </script>
@@ -73,15 +76,34 @@ When you use the component with Vue 3 with `TypeScript`:
73
76
 
74
77
  ```html
75
78
  <template>
76
- <qrcode-vue :value="value" :level="level" :render-as="renderAs" />
79
+ <qrcode-vue
80
+ :value="value"
81
+ :level="level"
82
+ :render-as="renderAs"
83
+ :background="background"
84
+ :foreground='foreground'
85
+ :image-settings='imageSettings'
86
+ />
77
87
  </template>
78
88
  <script setup lang="ts">
79
89
  import { ref } from 'vue'
80
- import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'
90
+ import QrcodeVue from 'qrcode.vue'
91
+ import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
81
92
 
82
93
  const value = ref('qrcode')
83
94
  const level = ref<Level>('M')
84
95
  const renderAs = ref<RenderAs>('svg')
96
+ const background = ref('#ffffff')
97
+ const foreground = ref('#000000')
98
+ const margin = ref(0)
99
+ const imageSettings = ref<ImageSettings>({
100
+ src: 'https://github.com/scopewu.png',
101
+ width: 30,
102
+ height: 30,
103
+ // x: 10,
104
+ // y: 10,
105
+ excavate: true,
106
+ })
85
107
  </script>
86
108
  ```
87
109
 
@@ -103,7 +125,7 @@ The size of qrcode element.
103
125
 
104
126
  ### `render-as`
105
127
 
106
- - Type: `string('canvas' | 'svg')`
128
+ - Type: `RenderAs('canvas' | 'svg')`
107
129
  - Default: `canvas`
108
130
 
109
131
  Generate QRcode as `canvas` or `svg`. The prop `svg` can work on SSR.
@@ -117,8 +139,8 @@ Define how much wide the quiet zone should be.
117
139
 
118
140
  ### `level`
119
141
 
120
- - Type: `string('L' | 'M' | 'Q' | 'H')`
121
- - Default: `H`
142
+ - Type: `Level('L' | 'M' | 'Q' | 'H')`
143
+ - Default: `L`
122
144
 
123
145
  qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, [wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction).
124
146
 
@@ -136,6 +158,24 @@ The background color of qrcode.
136
158
 
137
159
  The foreground color of qrcode.
138
160
 
161
+ ### `image-settings`
162
+
163
+ - Type: `ImageSettings`
164
+ - Default: `{}`
165
+
166
+ ```ts
167
+ export type ImageSettings = {
168
+ src: string, // The URL of image.
169
+ x?: number, // The horizontal offset. When not specified, will center the image.
170
+ y?: number, // The vertical offset. When not specified, will center the image.
171
+ height: number, // The height of image
172
+ width: number, // The height of image
173
+ excavate?: boolean, // Whether or not to "excavate" the modules around the image.
174
+ }
175
+ ```
176
+
177
+ The settings to support qrcode image logo.
178
+
139
179
  ### `class`
140
180
 
141
181
  - Type: `string`
@@ -145,4 +185,4 @@ The class name of qrcode element.
145
185
 
146
186
  ## License
147
187
 
148
- copyright &copy; 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
188
+ copyright &copy; 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
package/dist/index.d.ts CHANGED
@@ -1,7 +1,169 @@
1
1
  import { PropType } from 'vue';
2
2
  export type Level = 'L' | 'M' | 'Q' | 'H';
3
3
  export type RenderAs = 'canvas' | 'svg';
4
- declare const QrcodeVue: import("vue").DefineComponent<{
4
+ export type ImageSettings = {
5
+ src: string;
6
+ x?: number;
7
+ y?: number;
8
+ height: number;
9
+ width: number;
10
+ excavate?: boolean;
11
+ };
12
+ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
13
+ value: {
14
+ type: StringConstructor;
15
+ required: boolean;
16
+ default: string;
17
+ };
18
+ size: {
19
+ type: NumberConstructor;
20
+ default: number;
21
+ };
22
+ level: {
23
+ type: PropType<Level>;
24
+ default: "L";
25
+ validator: (l: any) => boolean;
26
+ };
27
+ background: {
28
+ type: StringConstructor;
29
+ default: string;
30
+ };
31
+ foreground: {
32
+ type: StringConstructor;
33
+ default: string;
34
+ };
35
+ margin: {
36
+ type: NumberConstructor;
37
+ required: boolean;
38
+ default: number;
39
+ };
40
+ imageSettings: {
41
+ type: PropType<ImageSettings>;
42
+ required: boolean;
43
+ default: () => {};
44
+ };
45
+ }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
46
+ [key: string]: any;
47
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
48
+ value: {
49
+ type: StringConstructor;
50
+ required: boolean;
51
+ default: string;
52
+ };
53
+ size: {
54
+ type: NumberConstructor;
55
+ default: number;
56
+ };
57
+ level: {
58
+ type: PropType<Level>;
59
+ default: "L";
60
+ validator: (l: any) => boolean;
61
+ };
62
+ background: {
63
+ type: StringConstructor;
64
+ default: string;
65
+ };
66
+ foreground: {
67
+ type: StringConstructor;
68
+ default: string;
69
+ };
70
+ margin: {
71
+ type: NumberConstructor;
72
+ required: boolean;
73
+ default: number;
74
+ };
75
+ imageSettings: {
76
+ type: PropType<ImageSettings>;
77
+ required: boolean;
78
+ default: () => {};
79
+ };
80
+ }>> & Readonly<{}>, {
81
+ value: string;
82
+ size: number;
83
+ level: Level;
84
+ background: string;
85
+ foreground: string;
86
+ margin: number;
87
+ imageSettings: ImageSettings;
88
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
89
+ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
90
+ value: {
91
+ type: StringConstructor;
92
+ required: boolean;
93
+ default: string;
94
+ };
95
+ size: {
96
+ type: NumberConstructor;
97
+ default: number;
98
+ };
99
+ level: {
100
+ type: PropType<Level>;
101
+ default: "L";
102
+ validator: (l: any) => boolean;
103
+ };
104
+ background: {
105
+ type: StringConstructor;
106
+ default: string;
107
+ };
108
+ foreground: {
109
+ type: StringConstructor;
110
+ default: string;
111
+ };
112
+ margin: {
113
+ type: NumberConstructor;
114
+ required: boolean;
115
+ default: number;
116
+ };
117
+ imageSettings: {
118
+ type: PropType<ImageSettings>;
119
+ required: boolean;
120
+ default: () => {};
121
+ };
122
+ }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
123
+ [key: string]: any;
124
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
125
+ value: {
126
+ type: StringConstructor;
127
+ required: boolean;
128
+ default: string;
129
+ };
130
+ size: {
131
+ type: NumberConstructor;
132
+ default: number;
133
+ };
134
+ level: {
135
+ type: PropType<Level>;
136
+ default: "L";
137
+ validator: (l: any) => boolean;
138
+ };
139
+ background: {
140
+ type: StringConstructor;
141
+ default: string;
142
+ };
143
+ foreground: {
144
+ type: StringConstructor;
145
+ default: string;
146
+ };
147
+ margin: {
148
+ type: NumberConstructor;
149
+ required: boolean;
150
+ default: number;
151
+ };
152
+ imageSettings: {
153
+ type: PropType<ImageSettings>;
154
+ required: boolean;
155
+ default: () => {};
156
+ };
157
+ }>> & Readonly<{}>, {
158
+ value: string;
159
+ size: number;
160
+ level: Level;
161
+ background: string;
162
+ foreground: string;
163
+ margin: number;
164
+ imageSettings: ImageSettings;
165
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
166
+ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
5
167
  renderAs: {
6
168
  type: PropType<RenderAs>;
7
169
  required: boolean;
@@ -19,7 +181,7 @@ declare const QrcodeVue: import("vue").DefineComponent<{
19
181
  };
20
182
  level: {
21
183
  type: PropType<Level>;
22
- default: string;
184
+ default: "L";
23
185
  validator: (l: any) => boolean;
24
186
  };
25
187
  background: {
@@ -35,7 +197,12 @@ declare const QrcodeVue: import("vue").DefineComponent<{
35
197
  required: boolean;
36
198
  default: number;
37
199
  };
38
- }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
200
+ imageSettings: {
201
+ type: PropType<ImageSettings>;
202
+ required: boolean;
203
+ default: () => {};
204
+ };
205
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
39
206
  renderAs: {
40
207
  type: PropType<RenderAs>;
41
208
  required: boolean;
@@ -53,7 +220,7 @@ declare const QrcodeVue: import("vue").DefineComponent<{
53
220
  };
54
221
  level: {
55
222
  type: PropType<Level>;
56
- default: string;
223
+ default: "L";
57
224
  validator: (l: any) => boolean;
58
225
  };
59
226
  background: {
@@ -69,13 +236,19 @@ declare const QrcodeVue: import("vue").DefineComponent<{
69
236
  required: boolean;
70
237
  default: number;
71
238
  };
72
- }>>, {
239
+ imageSettings: {
240
+ type: PropType<ImageSettings>;
241
+ required: boolean;
242
+ default: () => {};
243
+ };
244
+ }>> & Readonly<{}>, {
73
245
  value: string;
74
246
  size: number;
75
247
  level: Level;
76
248
  background: string;
77
249
  foreground: string;
78
250
  margin: number;
251
+ imageSettings: ImageSettings;
79
252
  renderAs: RenderAs;
80
- }, {}>;
253
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
81
254
  export default QrcodeVue;