feat(tool): qr-code generator
This commit is contained in:
		
							parent
							
								
									203b6a9d73
								
							
						
					
					
						commit
						5582d75927
					
				
							
								
								
									
										423
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										423
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							| @ -22,6 +22,7 @@ | ||||
|         "lodash": "^4.17.21", | ||||
|         "naive-ui": "^2.28.0", | ||||
|         "pinia": "^2.0.11", | ||||
|         "qrcode": "^1.5.0", | ||||
|         "randombytes": "^2.1.0", | ||||
|         "uuid": "^8.3.2", | ||||
|         "vue": "^3.2.31", | ||||
| @ -32,6 +33,7 @@ | ||||
|         "@types/crypto-js": "^4.1.1", | ||||
|         "@types/jsdom": "^16.2.14", | ||||
|         "@types/node": "^16.11.25", | ||||
|         "@types/qrcode": "^1.4.2", | ||||
|         "@types/randombytes": "^2.0.0", | ||||
|         "@types/uuid": "^8.3.4", | ||||
|         "@vitejs/plugin-vue": "^2.2.2", | ||||
| @ -921,6 +923,15 @@ | ||||
|       "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==", | ||||
|       "dev": true | ||||
|     }, | ||||
|     "node_modules/@types/qrcode": { | ||||
|       "version": "1.4.2", | ||||
|       "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.2.tgz", | ||||
|       "integrity": "sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ==", | ||||
|       "dev": true, | ||||
|       "dependencies": { | ||||
|         "@types/node": "*" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/@types/randombytes": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/@types/randombytes/-/randombytes-2.0.0.tgz", | ||||
| @ -2719,6 +2730,14 @@ | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/decamelize": { | ||||
|       "version": "1.2.0", | ||||
|       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", | ||||
|       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", | ||||
|       "engines": { | ||||
|         "node": ">=0.10.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/decimal.js": { | ||||
|       "version": "10.3.1", | ||||
|       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz", | ||||
| @ -2760,6 +2779,11 @@ | ||||
|         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/dijkstrajs": { | ||||
|       "version": "1.0.2", | ||||
|       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz", | ||||
|       "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==" | ||||
|     }, | ||||
|     "node_modules/dir-glob": { | ||||
|       "version": "3.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", | ||||
| @ -2901,8 +2925,12 @@ | ||||
|     "node_modules/emoji-regex": { | ||||
|       "version": "8.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", | ||||
|       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", | ||||
|       "dev": true | ||||
|       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" | ||||
|     }, | ||||
|     "node_modules/encode-utf8": { | ||||
|       "version": "1.0.3", | ||||
|       "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz", | ||||
|       "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==" | ||||
|     }, | ||||
|     "node_modules/end-of-stream": { | ||||
|       "version": "1.4.4", | ||||
| @ -4152,7 +4180,6 @@ | ||||
|       "version": "2.0.5", | ||||
|       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", | ||||
|       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", | ||||
|       "dev": true, | ||||
|       "engines": { | ||||
|         "node": "6.* || 8.* || >= 10.*" | ||||
|       } | ||||
| @ -4701,7 +4728,6 @@ | ||||
|       "version": "3.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", | ||||
|       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", | ||||
|       "dev": true, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
| @ -6022,6 +6048,14 @@ | ||||
|         "url": "https://github.com/sponsors/sindresorhus" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/p-try": { | ||||
|       "version": "2.2.0", | ||||
|       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", | ||||
|       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", | ||||
|       "engines": { | ||||
|         "node": ">=6" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/parent-module": { | ||||
|       "version": "1.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", | ||||
| @ -6053,7 +6087,6 @@ | ||||
|       "version": "4.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", | ||||
|       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", | ||||
|       "dev": true, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
| @ -6212,6 +6245,14 @@ | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/pngjs": { | ||||
|       "version": "5.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", | ||||
|       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", | ||||
|       "engines": { | ||||
|         "node": ">=10.13.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/postcss": { | ||||
|       "version": "8.4.12", | ||||
|       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", | ||||
| @ -6481,6 +6522,170 @@ | ||||
|         "node": ">=6" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode": { | ||||
|       "version": "1.5.0", | ||||
|       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz", | ||||
|       "integrity": "sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==", | ||||
|       "dependencies": { | ||||
|         "dijkstrajs": "^1.0.1", | ||||
|         "encode-utf8": "^1.0.3", | ||||
|         "pngjs": "^5.0.0", | ||||
|         "yargs": "^15.3.1" | ||||
|       }, | ||||
|       "bin": { | ||||
|         "qrcode": "bin/qrcode" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=10.13.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/ansi-styles": { | ||||
|       "version": "4.3.0", | ||||
|       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", | ||||
|       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | ||||
|       "dependencies": { | ||||
|         "color-convert": "^2.0.1" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       }, | ||||
|       "funding": { | ||||
|         "url": "https://github.com/chalk/ansi-styles?sponsor=1" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/camelcase": { | ||||
|       "version": "5.3.1", | ||||
|       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", | ||||
|       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", | ||||
|       "engines": { | ||||
|         "node": ">=6" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/cliui": { | ||||
|       "version": "6.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", | ||||
|       "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", | ||||
|       "dependencies": { | ||||
|         "string-width": "^4.2.0", | ||||
|         "strip-ansi": "^6.0.0", | ||||
|         "wrap-ansi": "^6.2.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/color-convert": { | ||||
|       "version": "2.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", | ||||
|       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | ||||
|       "dependencies": { | ||||
|         "color-name": "~1.1.4" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=7.0.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/color-name": { | ||||
|       "version": "1.1.4", | ||||
|       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", | ||||
|       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/find-up": { | ||||
|       "version": "4.1.0", | ||||
|       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", | ||||
|       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", | ||||
|       "dependencies": { | ||||
|         "locate-path": "^5.0.0", | ||||
|         "path-exists": "^4.0.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/locate-path": { | ||||
|       "version": "5.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", | ||||
|       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", | ||||
|       "dependencies": { | ||||
|         "p-locate": "^4.1.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/p-limit": { | ||||
|       "version": "2.3.0", | ||||
|       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", | ||||
|       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", | ||||
|       "dependencies": { | ||||
|         "p-try": "^2.0.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=6" | ||||
|       }, | ||||
|       "funding": { | ||||
|         "url": "https://github.com/sponsors/sindresorhus" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/p-locate": { | ||||
|       "version": "4.1.0", | ||||
|       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", | ||||
|       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", | ||||
|       "dependencies": { | ||||
|         "p-limit": "^2.2.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/wrap-ansi": { | ||||
|       "version": "6.2.0", | ||||
|       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", | ||||
|       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", | ||||
|       "dependencies": { | ||||
|         "ansi-styles": "^4.0.0", | ||||
|         "string-width": "^4.1.0", | ||||
|         "strip-ansi": "^6.0.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/y18n": { | ||||
|       "version": "4.0.3", | ||||
|       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", | ||||
|       "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/yargs": { | ||||
|       "version": "15.4.1", | ||||
|       "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", | ||||
|       "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", | ||||
|       "dependencies": { | ||||
|         "cliui": "^6.0.0", | ||||
|         "decamelize": "^1.2.0", | ||||
|         "find-up": "^4.1.0", | ||||
|         "get-caller-file": "^2.0.1", | ||||
|         "require-directory": "^2.1.1", | ||||
|         "require-main-filename": "^2.0.0", | ||||
|         "set-blocking": "^2.0.0", | ||||
|         "string-width": "^4.2.0", | ||||
|         "which-module": "^2.0.0", | ||||
|         "y18n": "^4.0.0", | ||||
|         "yargs-parser": "^18.1.2" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qrcode/node_modules/yargs-parser": { | ||||
|       "version": "18.1.3", | ||||
|       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", | ||||
|       "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", | ||||
|       "dependencies": { | ||||
|         "camelcase": "^5.0.0", | ||||
|         "decamelize": "^1.2.0" | ||||
|       }, | ||||
|       "engines": { | ||||
|         "node": ">=6" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/qs": { | ||||
|       "version": "6.5.3", | ||||
|       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz", | ||||
| @ -6561,11 +6766,15 @@ | ||||
|       "version": "2.1.1", | ||||
|       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", | ||||
|       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", | ||||
|       "dev": true, | ||||
|       "engines": { | ||||
|         "node": ">=0.10.0" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/require-main-filename": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", | ||||
|       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" | ||||
|     }, | ||||
|     "node_modules/resize-observer-polyfill": { | ||||
|       "version": "1.5.1", | ||||
|       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", | ||||
| @ -6757,6 +6966,11 @@ | ||||
|         "semver": "bin/semver.js" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/set-blocking": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", | ||||
|       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" | ||||
|     }, | ||||
|     "node_modules/sha.js": { | ||||
|       "version": "2.4.11", | ||||
|       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", | ||||
| @ -7041,7 +7255,6 @@ | ||||
|       "version": "4.2.3", | ||||
|       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", | ||||
|       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", | ||||
|       "dev": true, | ||||
|       "dependencies": { | ||||
|         "emoji-regex": "^8.0.0", | ||||
|         "is-fullwidth-code-point": "^3.0.0", | ||||
| @ -7055,7 +7268,6 @@ | ||||
|       "version": "6.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", | ||||
|       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", | ||||
|       "dev": true, | ||||
|       "dependencies": { | ||||
|         "ansi-regex": "^5.0.1" | ||||
|       }, | ||||
| @ -7964,6 +8176,11 @@ | ||||
|         "node": ">= 8" | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/which-module": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", | ||||
|       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" | ||||
|     }, | ||||
|     "node_modules/with": { | ||||
|       "version": "7.0.2", | ||||
|       "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz", | ||||
| @ -8846,6 +9063,15 @@ | ||||
|       "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==", | ||||
|       "dev": true | ||||
|     }, | ||||
|     "@types/qrcode": { | ||||
|       "version": "1.4.2", | ||||
|       "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.2.tgz", | ||||
|       "integrity": "sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ==", | ||||
|       "dev": true, | ||||
|       "requires": { | ||||
|         "@types/node": "*" | ||||
|       } | ||||
|     }, | ||||
|     "@types/randombytes": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/@types/randombytes/-/randombytes-2.0.0.tgz", | ||||
| @ -10196,6 +10422,11 @@ | ||||
|         "ms": "2.1.2" | ||||
|       } | ||||
|     }, | ||||
|     "decamelize": { | ||||
|       "version": "1.2.0", | ||||
|       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", | ||||
|       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" | ||||
|     }, | ||||
|     "decimal.js": { | ||||
|       "version": "10.3.1", | ||||
|       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz", | ||||
| @ -10228,6 +10459,11 @@ | ||||
|       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", | ||||
|       "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==" | ||||
|     }, | ||||
|     "dijkstrajs": { | ||||
|       "version": "1.0.2", | ||||
|       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz", | ||||
|       "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==" | ||||
|     }, | ||||
|     "dir-glob": { | ||||
|       "version": "3.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", | ||||
| @ -10341,8 +10577,12 @@ | ||||
|     "emoji-regex": { | ||||
|       "version": "8.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", | ||||
|       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", | ||||
|       "dev": true | ||||
|       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" | ||||
|     }, | ||||
|     "encode-utf8": { | ||||
|       "version": "1.0.3", | ||||
|       "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz", | ||||
|       "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==" | ||||
|     }, | ||||
|     "end-of-stream": { | ||||
|       "version": "1.4.4", | ||||
| @ -11172,8 +11412,7 @@ | ||||
|     "get-caller-file": { | ||||
|       "version": "2.0.5", | ||||
|       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", | ||||
|       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", | ||||
|       "dev": true | ||||
|       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" | ||||
|     }, | ||||
|     "get-func-name": { | ||||
|       "version": "2.0.0", | ||||
| @ -11560,8 +11799,7 @@ | ||||
|     "is-fullwidth-code-point": { | ||||
|       "version": "3.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", | ||||
|       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", | ||||
|       "dev": true | ||||
|       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" | ||||
|     }, | ||||
|     "is-glob": { | ||||
|       "version": "4.0.3", | ||||
| @ -12567,6 +12805,11 @@ | ||||
|         "aggregate-error": "^3.0.0" | ||||
|       } | ||||
|     }, | ||||
|     "p-try": { | ||||
|       "version": "2.2.0", | ||||
|       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", | ||||
|       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" | ||||
|     }, | ||||
|     "parent-module": { | ||||
|       "version": "1.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", | ||||
| @ -12591,8 +12834,7 @@ | ||||
|     "path-exists": { | ||||
|       "version": "4.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", | ||||
|       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", | ||||
|       "dev": true | ||||
|       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" | ||||
|     }, | ||||
|     "path-is-absolute": { | ||||
|       "version": "1.0.1", | ||||
| @ -12691,6 +12933,11 @@ | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     "pngjs": { | ||||
|       "version": "5.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", | ||||
|       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==" | ||||
|     }, | ||||
|     "postcss": { | ||||
|       "version": "8.4.12", | ||||
|       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", | ||||
| @ -12913,6 +13160,130 @@ | ||||
|       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", | ||||
|       "dev": true | ||||
|     }, | ||||
|     "qrcode": { | ||||
|       "version": "1.5.0", | ||||
|       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz", | ||||
|       "integrity": "sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==", | ||||
|       "requires": { | ||||
|         "dijkstrajs": "^1.0.1", | ||||
|         "encode-utf8": "^1.0.3", | ||||
|         "pngjs": "^5.0.0", | ||||
|         "yargs": "^15.3.1" | ||||
|       }, | ||||
|       "dependencies": { | ||||
|         "ansi-styles": { | ||||
|           "version": "4.3.0", | ||||
|           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", | ||||
|           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | ||||
|           "requires": { | ||||
|             "color-convert": "^2.0.1" | ||||
|           } | ||||
|         }, | ||||
|         "camelcase": { | ||||
|           "version": "5.3.1", | ||||
|           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", | ||||
|           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" | ||||
|         }, | ||||
|         "cliui": { | ||||
|           "version": "6.0.0", | ||||
|           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", | ||||
|           "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", | ||||
|           "requires": { | ||||
|             "string-width": "^4.2.0", | ||||
|             "strip-ansi": "^6.0.0", | ||||
|             "wrap-ansi": "^6.2.0" | ||||
|           } | ||||
|         }, | ||||
|         "color-convert": { | ||||
|           "version": "2.0.1", | ||||
|           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", | ||||
|           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | ||||
|           "requires": { | ||||
|             "color-name": "~1.1.4" | ||||
|           } | ||||
|         }, | ||||
|         "color-name": { | ||||
|           "version": "1.1.4", | ||||
|           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", | ||||
|           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" | ||||
|         }, | ||||
|         "find-up": { | ||||
|           "version": "4.1.0", | ||||
|           "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", | ||||
|           "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", | ||||
|           "requires": { | ||||
|             "locate-path": "^5.0.0", | ||||
|             "path-exists": "^4.0.0" | ||||
|           } | ||||
|         }, | ||||
|         "locate-path": { | ||||
|           "version": "5.0.0", | ||||
|           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", | ||||
|           "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", | ||||
|           "requires": { | ||||
|             "p-locate": "^4.1.0" | ||||
|           } | ||||
|         }, | ||||
|         "p-limit": { | ||||
|           "version": "2.3.0", | ||||
|           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", | ||||
|           "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", | ||||
|           "requires": { | ||||
|             "p-try": "^2.0.0" | ||||
|           } | ||||
|         }, | ||||
|         "p-locate": { | ||||
|           "version": "4.1.0", | ||||
|           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", | ||||
|           "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", | ||||
|           "requires": { | ||||
|             "p-limit": "^2.2.0" | ||||
|           } | ||||
|         }, | ||||
|         "wrap-ansi": { | ||||
|           "version": "6.2.0", | ||||
|           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", | ||||
|           "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", | ||||
|           "requires": { | ||||
|             "ansi-styles": "^4.0.0", | ||||
|             "string-width": "^4.1.0", | ||||
|             "strip-ansi": "^6.0.0" | ||||
|           } | ||||
|         }, | ||||
|         "y18n": { | ||||
|           "version": "4.0.3", | ||||
|           "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", | ||||
|           "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" | ||||
|         }, | ||||
|         "yargs": { | ||||
|           "version": "15.4.1", | ||||
|           "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", | ||||
|           "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", | ||||
|           "requires": { | ||||
|             "cliui": "^6.0.0", | ||||
|             "decamelize": "^1.2.0", | ||||
|             "find-up": "^4.1.0", | ||||
|             "get-caller-file": "^2.0.1", | ||||
|             "require-directory": "^2.1.1", | ||||
|             "require-main-filename": "^2.0.0", | ||||
|             "set-blocking": "^2.0.0", | ||||
|             "string-width": "^4.2.0", | ||||
|             "which-module": "^2.0.0", | ||||
|             "y18n": "^4.0.0", | ||||
|             "yargs-parser": "^18.1.2" | ||||
|           } | ||||
|         }, | ||||
|         "yargs-parser": { | ||||
|           "version": "18.1.3", | ||||
|           "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", | ||||
|           "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", | ||||
|           "requires": { | ||||
|             "camelcase": "^5.0.0", | ||||
|             "decamelize": "^1.2.0" | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     "qs": { | ||||
|       "version": "6.5.3", | ||||
|       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz", | ||||
| @ -12966,8 +13337,12 @@ | ||||
|     "require-directory": { | ||||
|       "version": "2.1.1", | ||||
|       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", | ||||
|       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", | ||||
|       "dev": true | ||||
|       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" | ||||
|     }, | ||||
|     "require-main-filename": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", | ||||
|       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" | ||||
|     }, | ||||
|     "resize-observer-polyfill": { | ||||
|       "version": "1.5.1", | ||||
| @ -13109,6 +13484,11 @@ | ||||
|       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", | ||||
|       "dev": true | ||||
|     }, | ||||
|     "set-blocking": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", | ||||
|       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" | ||||
|     }, | ||||
|     "sha.js": { | ||||
|       "version": "2.4.11", | ||||
|       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", | ||||
| @ -13313,7 +13693,6 @@ | ||||
|       "version": "4.2.3", | ||||
|       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", | ||||
|       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", | ||||
|       "dev": true, | ||||
|       "requires": { | ||||
|         "emoji-regex": "^8.0.0", | ||||
|         "is-fullwidth-code-point": "^3.0.0", | ||||
| @ -13324,7 +13703,6 @@ | ||||
|       "version": "6.0.1", | ||||
|       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", | ||||
|       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", | ||||
|       "dev": true, | ||||
|       "requires": { | ||||
|         "ansi-regex": "^5.0.1" | ||||
|       } | ||||
| @ -14006,6 +14384,11 @@ | ||||
|         "isexe": "^2.0.0" | ||||
|       } | ||||
|     }, | ||||
|     "which-module": { | ||||
|       "version": "2.0.0", | ||||
|       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", | ||||
|       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" | ||||
|     }, | ||||
|     "with": { | ||||
|       "version": "7.0.2", | ||||
|       "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz", | ||||
|  | ||||
| @ -28,6 +28,7 @@ | ||||
|     "lodash": "^4.17.21", | ||||
|     "naive-ui": "^2.28.0", | ||||
|     "pinia": "^2.0.11", | ||||
|     "qrcode": "^1.5.0", | ||||
|     "randombytes": "^2.1.0", | ||||
|     "uuid": "^8.3.2", | ||||
|     "vue": "^3.2.31", | ||||
| @ -38,6 +39,7 @@ | ||||
|     "@types/crypto-js": "^4.1.1", | ||||
|     "@types/jsdom": "^16.2.14", | ||||
|     "@types/node": "^16.11.25", | ||||
|     "@types/qrcode": "^1.4.2", | ||||
|     "@types/randombytes": "^2.0.0", | ||||
|     "@types/uuid": "^8.3.4", | ||||
|     "@vitejs/plugin-vue": "^2.2.2", | ||||
|  | ||||
							
								
								
									
										12
									
								
								src/composable/downloadBase64.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								src/composable/downloadBase64.ts
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,12 @@ | ||||
| import type { Ref } from 'vue'; | ||||
| 
 | ||||
| export function useDownloadFileFromBase64({ source, filename = 'file' }: { source: Ref<string>; filename?: string }) { | ||||
|   return { | ||||
|     download() { | ||||
|       const a = document.createElement('a'); | ||||
|       a.href = source.value; | ||||
|       a.download = filename; | ||||
|       a.click(); | ||||
|     }, | ||||
|   }; | ||||
| } | ||||
| @ -47,9 +47,11 @@ import { | ||||
|   NStatistic, | ||||
|   NTable, | ||||
|   NUploadDragger, | ||||
|   NImage, | ||||
| } from 'naive-ui'; | ||||
| 
 | ||||
| const components = [ | ||||
|   NImage, | ||||
|   NUploadDragger, | ||||
|   NTable, | ||||
|   NStatistic, | ||||
|  | ||||
| @ -1,6 +1,7 @@ | ||||
| import { LockOpen } from '@vicons/tabler'; | ||||
| import type { ToolCategory } from './Tool'; | ||||
| 
 | ||||
| import { tool as qrCodeGenerator } from './qr-code-generator'; | ||||
| import { tool as base64Converter } from './base64-converter'; | ||||
| import { tool as crontabGenerator } from './crontab-generator'; | ||||
| import { tool as textStatistics } from './text-statistics'; | ||||
| @ -31,7 +32,7 @@ export const toolsByCategory: ToolCategory[] = [ | ||||
|   { | ||||
|     name: 'Web', | ||||
|     icon: LockOpen, | ||||
|     components: [urlEncoder], | ||||
|     components: [urlEncoder, qrCodeGenerator], | ||||
|   }, | ||||
|   { | ||||
|     name: 'Development', | ||||
|  | ||||
							
								
								
									
										11
									
								
								src/tools/qr-code-generator/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								src/tools/qr-code-generator/index.ts
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,11 @@ | ||||
| import { Qrcode } from '@vicons/tabler'; | ||||
| import type { ITool } from './../Tool'; | ||||
| 
 | ||||
| export const tool: ITool = { | ||||
|   name: 'QR Code generator', | ||||
|   path: '/qr-code-generator', | ||||
|   description: 'Generate and download QR-code for an url or just a text and customize the background and foreground colors.', | ||||
|   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'], | ||||
|   component: () => import('./qr-code-generator.vue'), | ||||
|   icon: Qrcode, | ||||
| }; | ||||
							
								
								
									
										60
									
								
								src/tools/qr-code-generator/qr-code-generator.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										60
									
								
								src/tools/qr-code-generator/qr-code-generator.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,60 @@ | ||||
| <template> | ||||
|   <n-card> | ||||
|     <n-grid cols="3" x-gap="12"> | ||||
|       <n-gi span="2"> | ||||
|         <n-form label-width="130" label-placement="left"> | ||||
|           <n-form-item label="Text:"> | ||||
|             <n-input v-model:value="text" placeholder="Your link or text..." /> | ||||
|           </n-form-item> | ||||
|           <n-form-item label="Foreground color:"> | ||||
|             <n-color-picker v-model:value="foreground" :modes="['hex']" /> | ||||
|           </n-form-item> | ||||
|           <n-form-item label="Background color:"> | ||||
|             <n-color-picker v-model:value="background" :modes="['hex']" /> | ||||
|           </n-form-item> | ||||
|           <n-form-item label="Error resistance:"> | ||||
|             <n-select v-model:value="errorCorrectionLevel" | ||||
|               :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" /> | ||||
|           </n-form-item> | ||||
|         </n-form> | ||||
|       </n-gi> | ||||
|       <n-gi> | ||||
|         <n-space justify="center" align="center" vertical> | ||||
|           <n-image :src="qrcode" width="200" /> | ||||
|           <n-button @click="download" secondary>Download qr-code</n-button> | ||||
|         </n-space> | ||||
|       </n-gi> | ||||
|     </n-grid> | ||||
|   </n-card> | ||||
| </template> | ||||
| 
 | ||||
| <script setup lang="ts"> | ||||
| import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; | ||||
| import { useQRCode } from './useQRCode' | ||||
| import { ref } from 'vue'; | ||||
| import type { QRCodeErrorCorrectionLevel } from 'qrcode'; | ||||
| 
 | ||||
| 
 | ||||
| const foreground = ref('#000000ff') | ||||
| const background = ref('#ffffffff') | ||||
| const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium') | ||||
| 
 | ||||
| const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'] | ||||
| 
 | ||||
| const text = ref('https://it-tools.tech') | ||||
| const { qrcode } = useQRCode({ | ||||
|   text, | ||||
|   color: { | ||||
|     background, | ||||
|     foreground | ||||
|   }, | ||||
|   errorCorrectionLevel, | ||||
|   options: { width: 1024 } | ||||
| }) | ||||
| 
 | ||||
| const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' }) | ||||
| 
 | ||||
| </script> | ||||
| 
 | ||||
| <style lang="less" scoped> | ||||
| </style> | ||||
							
								
								
									
										35
									
								
								src/tools/qr-code-generator/useQRCode.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										35
									
								
								src/tools/qr-code-generator/useQRCode.ts
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,35 @@ | ||||
| import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode'; | ||||
| import { ref, watch, type Ref } from 'vue'; | ||||
| 
 | ||||
| export function useQRCode({ | ||||
|   text, | ||||
|   color: { background, foreground }, | ||||
|   errorCorrectionLevel, | ||||
|   options, | ||||
| }: { | ||||
|   text: Ref<string>; | ||||
|   color: { foreground: Ref<string>; background: Ref<string> }; | ||||
|   errorCorrectionLevel: Ref<QRCodeErrorCorrectionLevel>; | ||||
|   options?: QRCodeToDataURLOptions; | ||||
| }) { | ||||
|   const qrcode = ref(''); | ||||
| 
 | ||||
|   watch( | ||||
|     [text, background, foreground, errorCorrectionLevel], | ||||
|     async () => { | ||||
|       if (text.value) | ||||
|         qrcode.value = await QRCode.toDataURL(text.value, { | ||||
|           color: { | ||||
|             dark: foreground.value, | ||||
|             light: background.value, | ||||
|             ...options?.color, | ||||
|           }, | ||||
|           errorCorrectionLevel: errorCorrectionLevel.value, | ||||
|           ...options, | ||||
|         }); | ||||
|     }, | ||||
|     { immediate: true } | ||||
|   ); | ||||
| 
 | ||||
|   return { qrcode }; | ||||
| } | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user