├── .gitattributes ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.vue ├── lib ├── cjs.js ├── cjs.min.js ├── es2015.js ├── es2015.min.js ├── esm.js ├── esm.min.js ├── src │ ├── index.d.ts │ ├── index.d.ts.map │ ├── index.js │ └── index.js.map ├── umd.js └── umd.min.js ├── package.json ├── qrcode.gif └── src └── index.ts /.gitattributes: -------------------------------------------------------------------------------- 1 | *.vue linguist-detectable=true 2 | *.js linguist-detectable=false 3 | *.html linguist-detectable=false 4 | *.xml linguist-detectable=false 5 | *.typescript linguist-detectable=false 6 | *.TypeScript linguist-detectable=false 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS Files 2 | .DS_Store 3 | Thumbs.db 4 | 5 | # Dependencies 6 | node_modules/ 7 | 8 | # Dev/Build Artifacts 9 | /dist/ 10 | /tests/e2e/videos/ 11 | /tests/e2e/screenshots/ 12 | /tests/unit/coverage/ 13 | jsconfig.json 14 | 15 | # Local Env Files 16 | .env.local 17 | .env.*.local 18 | 19 | # Log Files 20 | *.log 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Unconfigured Editors 26 | .idea 27 | *.suo 28 | *.ntvs* 29 | *.njsproj 30 | *.sln 31 | *.sw* 32 | #Yarn 33 | yarn.lock 34 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 1.0.0 (JULY 16, 2020) 2 | Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 WeblineIndia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue QRCode Generator 2 | 3 | A Vue.js component for QR code generation. Designed to create QR Code image for any text supplied to the library. Free for everyone, even use it for commercial purposes and on unlimited applications. 4 | 5 | ## Table of contents 6 | 7 | - [Vue QRCode Generator](#vue-qrcode-generator) 8 | - [Table of contents](#table-of-contents) 9 | - [Browser Support](#browser-support) 10 | - [Demo](#demo) 11 | - [Getting started](#getting-started) 12 | - [Usage](#usage) 13 | - [Available Props](#available-props) 14 | - [Want to Contribute?](#want-to-contribute) 15 | - [Need Help?](#need-help) 16 | - [Collection of Components](#collection-of-components) 17 | - [Changelog](#changelog) 18 | - [Credits](#credits) 19 | - [License](#license) 20 | - [Keywords](#keywords) 21 | 22 | ## Browser Support 23 | 24 | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | 25 | --- | --- | --- | --- | --- | 26 | 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ | 27 | 28 | ## Demo 29 | [![](qrcode.gif)](https://github.com/weblineindia/Vue-QRCode/qrcode.gif) 30 | 31 | ## Getting started 32 | 33 | Install the npm package: 34 | 35 | ``` bash 36 | npm install vue-weblineindia-qrcode 37 | #OR 38 | yarn add vue-weblineindia-qrcode 39 | ``` 40 | 41 | ## Usage 42 | 43 | Use the ` component: 44 | 45 | ```vue 46 | 49 | 50 | 60 | ``` 61 | 62 | ## Available Props 63 | 64 | | prop | type (range) | default value | 65 | | ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- | 66 | | `version` | `number` (1-40) | N/A | 67 | | `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'` | 68 | | `maskPattern` | `number` (0-7) | N/A | 69 | | `toSJISFunc` | `Function` | N/A | 70 | | `margin` | `number` | `4` | 71 | | `scale` | `number` | `4` | 72 | | `width` | `number` | N/A | 73 | | `color` | `{ dark: string; light:string }` | `{ dark: '#000000ff', light: '#ffffffff' }` | 74 | | `type` | `string` ('image/png', 'image/jpeg', 'image/webp') | `'image/png'` | 75 | | `quality` | `number`(0-1) | `0.92` | 76 | | `value` | `string | Array<{ data: string; mode?: string }>` | N/A | 77 | 78 | 79 | ----- 80 | 81 | ## Want to Contribute? 82 | 83 | - Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part). 84 | - [Fork it](http://help.github.com/forking/). 85 | - Create new branch to contribute your changes. 86 | - Commit all your changes to your branch. 87 | - Submit a [pull request](http://help.github.com/pull-requests/). 88 | 89 | ----- 90 | 91 | ## Need Help? 92 | 93 | We also provide a free, basic support for all users who want to use this VueJS QRCode generator in their software project. In case you want to customize this QRCode generator to suit your development needs, then feel free to contact our [VueJS developers](https://www.weblineindia.com/hire-vuejs-developer.html). 94 | 95 | ----- 96 | 97 | ## Collection of Components 98 | 99 | We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/communities.html). 100 | 101 | ------ 102 | 103 | ## Changelog 104 | 105 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 106 | 107 | ## Credits 108 | 109 | vue-weblineindia-qrcode is inspired by the [vue-qrcode](https://www.npmjs.com/package/vue-qrcode). 110 | 111 | ## License 112 | 113 | [MIT](LICENSE) 114 | 115 | [mit]: https://github.com/weblineindia/Vue-QRCode/blob/master/LICENSE 116 | 117 | ## Keywords 118 | 119 | vue-weblineindia-qrcode, vue-qrcode, qrcode, qrcodegen, vue 120 | -------------------------------------------------------------------------------- /index.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lib/cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 6 | 7 | var QRCode = _interopDefault(require('qrcode')); 8 | 9 | /*! ***************************************************************************** 10 | Copyright (c) Microsoft Corporation. All rights reserved. 11 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 12 | this file except in compliance with the License. You may obtain a copy of the 13 | License at http://www.apache.org/licenses/LICENSE-2.0 14 | 15 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 16 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 17 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 18 | MERCHANTABLITY OR NON-INFRINGEMENT. 19 | 20 | See the Apache Version 2.0 License for specific language governing permissions 21 | and limitations under the License. 22 | ***************************************************************************** */ 23 | 24 | var __assign = function() { 25 | __assign = Object.assign || function __assign(t) { 26 | for (var s, i = 1, n = arguments.length; i < n; i++) { 27 | s = arguments[i]; 28 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 29 | } 30 | return t; 31 | }; 32 | return __assign.apply(this, arguments); 33 | }; 34 | 35 | function __rest(s, e) { 36 | var t = {}; 37 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 38 | t[p] = s[p]; 39 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 40 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 41 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 42 | t[p[i]] = s[p[i]]; 43 | } 44 | return t; 45 | } 46 | 47 | var LEVELS = [ 48 | 'low', 49 | 'medium', 50 | 'quartile', 51 | 'high', 52 | 'L', 53 | 'M', 54 | 'Q', 55 | 'H', 56 | ]; 57 | // eslint-disable-next-line @typescript-eslint/no-magic-numbers 58 | var MASK_PATTERNS = [0, 1, 2, 3, 4, 5, 6, 7]; 59 | var MODES = ['alphanumeric', 'numeric', 'kanji', 'byte']; 60 | var TYPES = ['image/png', 'image/jpeg', 'image/webp']; 61 | var MAX_QR_VERSION = 40; 62 | var index = { 63 | props: { 64 | version: { 65 | type: Number, 66 | validator: function (version) { 67 | return version === parseInt(String(version), 10) && 68 | version >= 1 && 69 | version <= MAX_QR_VERSION; 70 | }, 71 | }, 72 | errorCorrectionLevel: { 73 | type: String, 74 | validator: function (level) { return LEVELS.includes(level); }, 75 | }, 76 | maskPattern: { 77 | type: Number, 78 | validator: function (maskPattern) { 79 | return MASK_PATTERNS.includes(maskPattern); 80 | }, 81 | }, 82 | toSJISFunc: Function, 83 | margin: Number, 84 | scale: Number, 85 | width: Number, 86 | color: { 87 | type: Object, 88 | validator: function (color) { 89 | return ['dark', 'light'].every(function (c) { 90 | return ['string', 'undefined'].includes(typeof color[c]); 91 | }); 92 | }, 93 | }, 94 | type: { 95 | type: String, 96 | validator: function (type) { return TYPES.includes(type); }, 97 | }, 98 | quality: { 99 | type: Number, 100 | validator: function (quality) { 101 | return quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1; 102 | }, 103 | }, 104 | value: { 105 | type: [String, Array], 106 | required: true, 107 | validator: function (value) { 108 | if (typeof value === 'string') { 109 | return true; 110 | } 111 | return value.every(function (_a) { 112 | var data = _a.data, mode = _a.mode; 113 | return typeof data === 'string' && (mode == null || MODES.includes(mode)); 114 | }); 115 | }, 116 | }, 117 | }, 118 | data: function () { 119 | return { 120 | dataUrl: '', 121 | }; 122 | }, 123 | watch: { 124 | $props: { 125 | deep: true, 126 | immediate: true, 127 | handler: 'toDataURL', 128 | }, 129 | }, 130 | methods: { 131 | toDataURL: function () { 132 | var _this = this; 133 | var _a = this.$props, quality = _a.quality, props = __rest(_a, ["quality"]); 134 | return QRCode.toDataURL(this.value, Object.assign(props, quality == null || { 135 | renderOptions: { 136 | quality: quality, 137 | }, 138 | })).then(function (dataUrl) { return (_this.dataUrl = dataUrl); }); 139 | }, 140 | }, 141 | render: function () { 142 | return this.$createElement('img', { 143 | domProps: __assign(__assign({}, this.$attrs), { src: this.dataUrl }), 144 | }); 145 | }, 146 | }; 147 | 148 | exports.LEVELS = LEVELS; 149 | exports.MASK_PATTERNS = MASK_PATTERNS; 150 | exports.MODES = MODES; 151 | exports.TYPES = TYPES; 152 | exports.default = index; 153 | -------------------------------------------------------------------------------- /lib/cjs.min.js: -------------------------------------------------------------------------------- 1 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("qrcode"))&&"object"==typeof t&&"default"in t?t.default:t,r=function(){return(r=Object.assign||function(t){for(var e,r=1,n=arguments.length;r=1&&t<=40}},errorCorrectionLevel:{type:String,validator:function(t){return n.includes(t)}},maskPattern:{type:Number,validator:function(t){return i.includes(t)}},toSJISFunc:Function,margin:Number,scale:Number,width:Number,color:{type:Object,validator:function(t){return["dark","light"].every((function(e){return["string","undefined"].includes(typeof t[e])}))}},type:{type:String,validator:function(t){return o.includes(t)}},quality:{type:Number,validator:function(t){return t===parseFloat(String(t))&&t>=0&&t<=1}},value:{type:[String,Array],required:!0,validator:function(t){return"string"==typeof t||t.every((function(t){var e=t.data,r=t.mode;return"string"==typeof e&&(null==r||a.includes(r))}))}}},data:function(){return{dataUrl:""}},watch:{$props:{deep:!0,immediate:!0,handler:"toDataURL"}},methods:{toDataURL:function(){var t=this,r=this.$props,n=r.quality,i=function(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i version === parseInt(String(version), 10) && 50 | version >= 1 && 51 | version <= MAX_QR_VERSION, 52 | }, 53 | errorCorrectionLevel: { 54 | type: String, 55 | validator: (level) => LEVELS.includes(level), 56 | }, 57 | maskPattern: { 58 | type: Number, 59 | validator: (maskPattern) => MASK_PATTERNS.includes(maskPattern), 60 | }, 61 | toSJISFunc: Function, 62 | margin: Number, 63 | scale: Number, 64 | width: Number, 65 | color: { 66 | type: Object, 67 | validator: (color) => ['dark', 'light'].every(c => ['string', 'undefined'].includes(typeof color[c])), 68 | }, 69 | type: { 70 | type: String, 71 | validator: (type) => TYPES.includes(type), 72 | }, 73 | quality: { 74 | type: Number, 75 | validator: (quality) => quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1, 76 | }, 77 | value: { 78 | type: [String, Array], 79 | required: true, 80 | validator(value) { 81 | if (typeof value === 'string') { 82 | return true; 83 | } 84 | return value.every(({ data, mode }) => typeof data === 'string' && (mode == null || MODES.includes(mode))); 85 | }, 86 | }, 87 | }, 88 | data() { 89 | return { 90 | dataUrl: '', 91 | }; 92 | }, 93 | watch: { 94 | $props: { 95 | deep: true, 96 | immediate: true, 97 | handler: 'toDataURL', 98 | }, 99 | }, 100 | methods: { 101 | toDataURL() { 102 | const _a = this.$props, { quality } = _a, props = __rest(_a, ["quality"]); 103 | return QRCode.toDataURL(this.value, Object.assign(props, quality == null || { 104 | renderOptions: { 105 | quality, 106 | }, 107 | })).then(dataUrl => (this.dataUrl = dataUrl)); 108 | }, 109 | }, 110 | render() { 111 | return this.$createElement('img', { 112 | domProps: Object.assign(Object.assign({}, this.$attrs), { src: this.dataUrl }), 113 | }); 114 | }, 115 | }; 116 | 117 | export default index; 118 | export { LEVELS, MASK_PATTERNS, MODES, TYPES }; 119 | -------------------------------------------------------------------------------- /lib/es2015.min.js: -------------------------------------------------------------------------------- 1 | import t from"qrcode"; 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. All rights reserved. 4 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 5 | this file except in compliance with the License. You may obtain a copy of the 6 | License at http://www.apache.org/licenses/LICENSE-2.0 7 | 8 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 9 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 10 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 11 | MERCHANTABLITY OR NON-INFRINGEMENT. 12 | 13 | See the Apache Version 2.0 License for specific language governing permissions 14 | and limitations under the License. 15 | ***************************************************************************** */const e=["low","medium","quartile","high","L","M","Q","H"],r=[0,1,2,3,4,5,6,7],a=["alphanumeric","numeric","kanji","byte"],i=["image/png","image/jpeg","image/webp"];var n={props:{version:{type:Number,validator:t=>t===parseInt(String(t),10)&&t>=1&&t<=40},errorCorrectionLevel:{type:String,validator:t=>e.includes(t)},maskPattern:{type:Number,validator:t=>r.includes(t)},toSJISFunc:Function,margin:Number,scale:Number,width:Number,color:{type:Object,validator:t=>["dark","light"].every(e=>["string","undefined"].includes(typeof t[e]))},type:{type:String,validator:t=>i.includes(t)},quality:{type:Number,validator:t=>t===parseFloat(String(t))&&t>=0&&t<=1},value:{type:[String,Array],required:!0,validator:t=>"string"==typeof t||t.every(({data:t,mode:e})=>"string"==typeof t&&(null==e||a.includes(e)))}},data:()=>({dataUrl:""}),watch:{$props:{deep:!0,immediate:!0,handler:"toDataURL"}},methods:{toDataURL(){const e=this.$props,{quality:r}=e,a=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(t);ithis.dataUrl=t)}},render(){return this.$createElement("img",{domProps:Object.assign(Object.assign({},this.$attrs),{src:this.dataUrl})})}};export default n;export{e as LEVELS,r as MASK_PATTERNS,a as MODES,i as TYPES}; 16 | -------------------------------------------------------------------------------- /lib/esm.js: -------------------------------------------------------------------------------- 1 | import QRCode from 'qrcode'; 2 | 3 | /*! ***************************************************************************** 4 | Copyright (c) Microsoft Corporation. All rights reserved. 5 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 6 | this file except in compliance with the License. You may obtain a copy of the 7 | License at http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 10 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 11 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 12 | MERCHANTABLITY OR NON-INFRINGEMENT. 13 | 14 | See the Apache Version 2.0 License for specific language governing permissions 15 | and limitations under the License. 16 | ***************************************************************************** */ 17 | 18 | var __assign = function() { 19 | __assign = Object.assign || function __assign(t) { 20 | for (var s, i = 1, n = arguments.length; i < n; i++) { 21 | s = arguments[i]; 22 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 23 | } 24 | return t; 25 | }; 26 | return __assign.apply(this, arguments); 27 | }; 28 | 29 | function __rest(s, e) { 30 | var t = {}; 31 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 32 | t[p] = s[p]; 33 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 34 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 35 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 36 | t[p[i]] = s[p[i]]; 37 | } 38 | return t; 39 | } 40 | 41 | var LEVELS = [ 42 | 'low', 43 | 'medium', 44 | 'quartile', 45 | 'high', 46 | 'L', 47 | 'M', 48 | 'Q', 49 | 'H', 50 | ]; 51 | // eslint-disable-next-line @typescript-eslint/no-magic-numbers 52 | var MASK_PATTERNS = [0, 1, 2, 3, 4, 5, 6, 7]; 53 | var MODES = ['alphanumeric', 'numeric', 'kanji', 'byte']; 54 | var TYPES = ['image/png', 'image/jpeg', 'image/webp']; 55 | var MAX_QR_VERSION = 40; 56 | var index = { 57 | props: { 58 | version: { 59 | type: Number, 60 | validator: function (version) { 61 | return version === parseInt(String(version), 10) && 62 | version >= 1 && 63 | version <= MAX_QR_VERSION; 64 | }, 65 | }, 66 | errorCorrectionLevel: { 67 | type: String, 68 | validator: function (level) { return LEVELS.includes(level); }, 69 | }, 70 | maskPattern: { 71 | type: Number, 72 | validator: function (maskPattern) { 73 | return MASK_PATTERNS.includes(maskPattern); 74 | }, 75 | }, 76 | toSJISFunc: Function, 77 | margin: Number, 78 | scale: Number, 79 | width: Number, 80 | color: { 81 | type: Object, 82 | validator: function (color) { 83 | return ['dark', 'light'].every(function (c) { 84 | return ['string', 'undefined'].includes(typeof color[c]); 85 | }); 86 | }, 87 | }, 88 | type: { 89 | type: String, 90 | validator: function (type) { return TYPES.includes(type); }, 91 | }, 92 | quality: { 93 | type: Number, 94 | validator: function (quality) { 95 | return quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1; 96 | }, 97 | }, 98 | value: { 99 | type: [String, Array], 100 | required: true, 101 | validator: function (value) { 102 | if (typeof value === 'string') { 103 | return true; 104 | } 105 | return value.every(function (_a) { 106 | var data = _a.data, mode = _a.mode; 107 | return typeof data === 'string' && (mode == null || MODES.includes(mode)); 108 | }); 109 | }, 110 | }, 111 | }, 112 | data: function () { 113 | return { 114 | dataUrl: '', 115 | }; 116 | }, 117 | watch: { 118 | $props: { 119 | deep: true, 120 | immediate: true, 121 | handler: 'toDataURL', 122 | }, 123 | }, 124 | methods: { 125 | toDataURL: function () { 126 | var _this = this; 127 | var _a = this.$props, quality = _a.quality, props = __rest(_a, ["quality"]); 128 | return QRCode.toDataURL(this.value, Object.assign(props, quality == null || { 129 | renderOptions: { 130 | quality: quality, 131 | }, 132 | })).then(function (dataUrl) { return (_this.dataUrl = dataUrl); }); 133 | }, 134 | }, 135 | render: function () { 136 | return this.$createElement('img', { 137 | domProps: __assign(__assign({}, this.$attrs), { src: this.dataUrl }), 138 | }); 139 | }, 140 | }; 141 | 142 | export default index; 143 | export { LEVELS, MASK_PATTERNS, MODES, TYPES }; 144 | -------------------------------------------------------------------------------- /lib/esm.min.js: -------------------------------------------------------------------------------- 1 | import t from"qrcode"; 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. All rights reserved. 4 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 5 | this file except in compliance with the License. You may obtain a copy of the 6 | License at http://www.apache.org/licenses/LICENSE-2.0 7 | 8 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 9 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 10 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 11 | MERCHANTABLITY OR NON-INFRINGEMENT. 12 | 13 | See the Apache Version 2.0 License for specific language governing permissions 14 | and limitations under the License. 15 | ***************************************************************************** */var r=function(){return(r=Object.assign||function(t){for(var r,e=1,n=arguments.length;e=1&&t<=40}},errorCorrectionLevel:{type:String,validator:function(t){return e.includes(t)}},maskPattern:{type:Number,validator:function(t){return n.includes(t)}},toSJISFunc:Function,margin:Number,scale:Number,width:Number,color:{type:Object,validator:function(t){return["dark","light"].every((function(r){return["string","undefined"].includes(typeof t[r])}))}},type:{type:String,validator:function(t){return a.includes(t)}},quality:{type:Number,validator:function(t){return t===parseFloat(String(t))&&t>=0&&t<=1}},value:{type:[String,Array],required:!0,validator:function(t){return"string"==typeof t||t.every((function(t){var r=t.data,e=t.mode;return"string"==typeof r&&(null==e||i.includes(e))}))}}},data:function(){return{dataUrl:""}},watch:{$props:{deep:!0,immediate:!0,handler:"toDataURL"}},methods:{toDataURL:function(){var r=this,e=this.$props,n=e.quality,i=function(t,r){var e={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i & { 15 | quality?: number; 16 | value: QRCodeValue; 17 | }; 18 | declare const _default: ComponentOptions, import("vue/types/options").DefaultMethods, import("vue/types/options").DefaultComputed, import("vue/types/options").PropsDefinition>, Record>; 19 | export default _default; 20 | //# sourceMappingURL=index.d.ts.map -------------------------------------------------------------------------------- /lib/src/index.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAe,EAEb,aAAa,IAAI,cAAc,EAC/B,sBAAsB,EACvB,MAAM,QAAQ,CAAA;AACf,OAAO,GAAG,EAAE,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,eAAO,MAAM,MAAM,oEAST,CAAA;AAGV,eAAO,MAAM,aAAa,mCAAoC,CAAA;AAG9D,oBAAY,WAAW,GAAG,OAAO,aAAa,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,KAAK,uDAAwD,CAAA;AAG1E,oBAAY,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAE/C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CACzB;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,aAAa,EAAE,CAAA;AAElD,eAAO,MAAM,KAAK,oDAAqD,CAAA;AAEvE,oBAAY,WAAW,GAAG,IAAI,CAAC,sBAAsB,EAAE,eAAe,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;;AAID,wBAwFsC"} -------------------------------------------------------------------------------- /lib/src/index.js: -------------------------------------------------------------------------------- 1 | import { __assign, __rest } from "tslib"; 2 | import QRCode from 'qrcode'; 3 | export var LEVELS = [ 4 | 'low', 5 | 'medium', 6 | 'quartile', 7 | 'high', 8 | 'L', 9 | 'M', 10 | 'Q', 11 | 'H', 12 | ]; 13 | // eslint-disable-next-line @typescript-eslint/no-magic-numbers 14 | export var MASK_PATTERNS = [0, 1, 2, 3, 4, 5, 6, 7]; 15 | export var MODES = ['alphanumeric', 'numeric', 'kanji', 'byte']; 16 | export var TYPES = ['image/png', 'image/jpeg', 'image/webp']; 17 | var MAX_QR_VERSION = 40; 18 | export default { 19 | props: { 20 | version: { 21 | type: Number, 22 | validator: function (version) { 23 | return version === parseInt(String(version), 10) && 24 | version >= 1 && 25 | version <= MAX_QR_VERSION; 26 | }, 27 | }, 28 | errorCorrectionLevel: { 29 | type: String, 30 | validator: function (level) { return LEVELS.includes(level); }, 31 | }, 32 | maskPattern: { 33 | type: Number, 34 | validator: function (maskPattern) { 35 | return MASK_PATTERNS.includes(maskPattern); 36 | }, 37 | }, 38 | toSJISFunc: Function, 39 | margin: Number, 40 | scale: Number, 41 | width: Number, 42 | color: { 43 | type: Object, 44 | validator: function (color) { 45 | return ['dark', 'light'].every(function (c) { 46 | return ['string', 'undefined'].includes(typeof color[c]); 47 | }); 48 | }, 49 | }, 50 | type: { 51 | type: String, 52 | validator: function (type) { return TYPES.includes(type); }, 53 | }, 54 | quality: { 55 | type: Number, 56 | validator: function (quality) { 57 | return quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1; 58 | }, 59 | }, 60 | value: { 61 | type: [String, Array], 62 | required: true, 63 | validator: function (value) { 64 | if (typeof value === 'string') { 65 | return true; 66 | } 67 | return value.every(function (_a) { 68 | var data = _a.data, mode = _a.mode; 69 | return typeof data === 'string' && (mode == null || MODES.includes(mode)); 70 | }); 71 | }, 72 | }, 73 | }, 74 | data: function () { 75 | return { 76 | dataUrl: '', 77 | }; 78 | }, 79 | watch: { 80 | $props: { 81 | deep: true, 82 | immediate: true, 83 | handler: 'toDataURL', 84 | }, 85 | }, 86 | methods: { 87 | toDataURL: function () { 88 | var _this = this; 89 | var _a = this.$props, quality = _a.quality, props = __rest(_a, ["quality"]); 90 | return QRCode.toDataURL(this.value, Object.assign(props, quality == null || { 91 | renderOptions: { 92 | quality: quality, 93 | }, 94 | })).then(function (dataUrl) { return (_this.dataUrl = dataUrl); }); 95 | }, 96 | }, 97 | render: function () { 98 | return this.$createElement('img', { 99 | domProps: __assign(__assign({}, this.$attrs), { src: this.dataUrl }), 100 | }); 101 | }, 102 | }; 103 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /lib/src/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /lib/umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('qrcode')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'qrcode'], factory) : 4 | (global = global || self, factory(global.VueQrcode = {}, global.QRCode)); 5 | }(this, (function (exports, QRCode) { 'use strict'; 6 | 7 | QRCode = QRCode && QRCode.hasOwnProperty('default') ? QRCode['default'] : QRCode; 8 | 9 | /*! ***************************************************************************** 10 | Copyright (c) Microsoft Corporation. All rights reserved. 11 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 12 | this file except in compliance with the License. You may obtain a copy of the 13 | License at http://www.apache.org/licenses/LICENSE-2.0 14 | 15 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 16 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 17 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 18 | MERCHANTABLITY OR NON-INFRINGEMENT. 19 | 20 | See the Apache Version 2.0 License for specific language governing permissions 21 | and limitations under the License. 22 | ***************************************************************************** */ 23 | 24 | var __assign = function() { 25 | __assign = Object.assign || function __assign(t) { 26 | for (var s, i = 1, n = arguments.length; i < n; i++) { 27 | s = arguments[i]; 28 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 29 | } 30 | return t; 31 | }; 32 | return __assign.apply(this, arguments); 33 | }; 34 | 35 | function __rest(s, e) { 36 | var t = {}; 37 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 38 | t[p] = s[p]; 39 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 40 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 41 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 42 | t[p[i]] = s[p[i]]; 43 | } 44 | return t; 45 | } 46 | 47 | var LEVELS = [ 48 | 'low', 49 | 'medium', 50 | 'quartile', 51 | 'high', 52 | 'L', 53 | 'M', 54 | 'Q', 55 | 'H', 56 | ]; 57 | // eslint-disable-next-line @typescript-eslint/no-magic-numbers 58 | var MASK_PATTERNS = [0, 1, 2, 3, 4, 5, 6, 7]; 59 | var MODES = ['alphanumeric', 'numeric', 'kanji', 'byte']; 60 | var TYPES = ['image/png', 'image/jpeg', 'image/webp']; 61 | var MAX_QR_VERSION = 40; 62 | var index = { 63 | props: { 64 | version: { 65 | type: Number, 66 | validator: function (version) { 67 | return version === parseInt(String(version), 10) && 68 | version >= 1 && 69 | version <= MAX_QR_VERSION; 70 | }, 71 | }, 72 | errorCorrectionLevel: { 73 | type: String, 74 | validator: function (level) { return LEVELS.includes(level); }, 75 | }, 76 | maskPattern: { 77 | type: Number, 78 | validator: function (maskPattern) { 79 | return MASK_PATTERNS.includes(maskPattern); 80 | }, 81 | }, 82 | toSJISFunc: Function, 83 | margin: Number, 84 | scale: Number, 85 | width: Number, 86 | color: { 87 | type: Object, 88 | validator: function (color) { 89 | return ['dark', 'light'].every(function (c) { 90 | return ['string', 'undefined'].includes(typeof color[c]); 91 | }); 92 | }, 93 | }, 94 | type: { 95 | type: String, 96 | validator: function (type) { return TYPES.includes(type); }, 97 | }, 98 | quality: { 99 | type: Number, 100 | validator: function (quality) { 101 | return quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1; 102 | }, 103 | }, 104 | value: { 105 | type: [String, Array], 106 | required: true, 107 | validator: function (value) { 108 | if (typeof value === 'string') { 109 | return true; 110 | } 111 | return value.every(function (_a) { 112 | var data = _a.data, mode = _a.mode; 113 | return typeof data === 'string' && (mode == null || MODES.includes(mode)); 114 | }); 115 | }, 116 | }, 117 | }, 118 | data: function () { 119 | return { 120 | dataUrl: '', 121 | }; 122 | }, 123 | watch: { 124 | $props: { 125 | deep: true, 126 | immediate: true, 127 | handler: 'toDataURL', 128 | }, 129 | }, 130 | methods: { 131 | toDataURL: function () { 132 | var _this = this; 133 | var _a = this.$props, quality = _a.quality, props = __rest(_a, ["quality"]); 134 | return QRCode.toDataURL(this.value, Object.assign(props, quality == null || { 135 | renderOptions: { 136 | quality: quality, 137 | }, 138 | })).then(function (dataUrl) { return (_this.dataUrl = dataUrl); }); 139 | }, 140 | }, 141 | render: function () { 142 | return this.$createElement('img', { 143 | domProps: __assign(__assign({}, this.$attrs), { src: this.dataUrl }), 144 | }); 145 | }, 146 | }; 147 | 148 | exports.LEVELS = LEVELS; 149 | exports.MASK_PATTERNS = MASK_PATTERNS; 150 | exports.MODES = MODES; 151 | exports.TYPES = TYPES; 152 | exports.default = index; 153 | 154 | Object.defineProperty(exports, '__esModule', { value: true }); 155 | 156 | }))); 157 | -------------------------------------------------------------------------------- /lib/umd.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("qrcode")):"function"==typeof define&&define.amd?define(["exports","qrcode"],t):t((e=e||self).VueQrcode={},e.QRCode)}(this,(function(e,t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t; 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. All rights reserved. 4 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 5 | this file except in compliance with the License. You may obtain a copy of the 6 | License at http://www.apache.org/licenses/LICENSE-2.0 7 | 8 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 9 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 10 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 11 | MERCHANTABLITY OR NON-INFRINGEMENT. 12 | 13 | See the Apache Version 2.0 License for specific language governing permissions 14 | and limitations under the License. 15 | ***************************************************************************** */ 16 | var r=function(){return(r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r=1&&e<=40}},errorCorrectionLevel:{type:String,validator:function(e){return n.includes(e)}},maskPattern:{type:Number,validator:function(e){return i.includes(e)}},toSJISFunc:Function,margin:Number,scale:Number,width:Number,color:{type:Object,validator:function(e){return["dark","light"].every((function(t){return["string","undefined"].includes(typeof e[t])}))}},type:{type:String,validator:function(e){return a.includes(e)}},quality:{type:Number,validator:function(e){return e===parseFloat(String(e))&&e>=0&&e<=1}},value:{type:[String,Array],required:!0,validator:function(e){return"string"==typeof e||e.every((function(e){var t=e.data,r=e.mode;return"string"==typeof t&&(null==r||o.includes(r))}))}}},data:function(){return{dataUrl:""}},watch:{$props:{deep:!0,immediate:!0,handler:"toDataURL"}},methods:{toDataURL:function(){var e=this,r=this.$props,n=r.quality,i=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i & { 40 | quality?: number 41 | value: QRCodeValue 42 | } 43 | 44 | const MAX_QR_VERSION = 40 45 | 46 | export default ({ 47 | props: { 48 | version: { 49 | type: Number, 50 | validator: (version: number) => 51 | version === parseInt(String(version), 10) && 52 | version >= 1 && 53 | version <= MAX_QR_VERSION, 54 | }, 55 | errorCorrectionLevel: { 56 | type: String, 57 | validator: (level: QRCodeErrorCorrectionLevel) => LEVELS.includes(level), 58 | }, 59 | maskPattern: { 60 | type: Number, 61 | validator: (maskPattern: MaskPattern) => 62 | MASK_PATTERNS.includes(maskPattern), 63 | }, 64 | toSJISFunc: Function, 65 | margin: Number, 66 | scale: Number, 67 | width: Number, 68 | color: { 69 | type: Object, 70 | validator: (color: QRCodeProps['color']) => 71 | (['dark', 'light'] as const).every(c => 72 | ['string', 'undefined'].includes(typeof color![c]), 73 | ), 74 | }, 75 | type: { 76 | type: String, 77 | validator: (type: QRCodeProps['type']) => TYPES.includes(type!), 78 | }, 79 | quality: { 80 | type: Number, 81 | validator: (quality: number) => 82 | quality === parseFloat(String(quality)) && quality >= 0 && quality <= 1, 83 | }, 84 | value: { 85 | type: [String, Array], 86 | required: true, 87 | validator(value: string | QRCodeSegment[]) { 88 | if (typeof value === 'string') { 89 | return true 90 | } 91 | return value.every( 92 | ({ data, mode }) => 93 | typeof data === 'string' && (mode == null || MODES.includes(mode)), 94 | ) 95 | }, 96 | }, 97 | }, 98 | data() { 99 | return { 100 | dataUrl: '', 101 | } 102 | }, 103 | watch: { 104 | $props: { 105 | deep: true, 106 | immediate: true, 107 | handler: 'toDataURL', 108 | }, 109 | }, 110 | methods: { 111 | toDataURL(this: { $props: QRCodeProps; dataUrl: string; value: string }) { 112 | const { quality, ...props } = this.$props 113 | return QRCode.toDataURL( 114 | this.value, 115 | Object.assign( 116 | props, 117 | quality == null || { 118 | renderOptions: { 119 | quality, 120 | }, 121 | }, 122 | ), 123 | ).then(dataUrl => (this.dataUrl = dataUrl)) 124 | }, 125 | }, 126 | render(this: Vue & { dataUrl: string }) { 127 | return this.$createElement('img', { 128 | domProps: { 129 | ...this.$attrs, 130 | src: this.dataUrl, 131 | }, 132 | }) 133 | }, 134 | } as unknown) as ComponentOptions 135 | --------------------------------------------------------------------------------