Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
34fd8bb2b3
|
|||
|
90dc663393
|
|||
|
1c4bdeff0e
|
|||
|
35c5ff4c51
|
|||
|
c8f9dfb37e
|
|||
|
70d7c8873e
|
|||
|
d5d3d37804
|
|||
|
2a1897f68d
|
|||
|
b2e8f23d60
|
|||
|
d2ea9e3fc7
|
381
package-lock.json
generated
381
package-lock.json
generated
@@ -1,14 +1,17 @@
|
||||
{
|
||||
"name": "tools-app",
|
||||
"version": "0.6.0",
|
||||
"version": "0.6.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "tools-app",
|
||||
"version": "0.6.0",
|
||||
"version": "0.6.4",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"barcode-detector": "^3.1.0",
|
||||
"lucide-vue-next": "^0.575.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"vue": "^3.5.25",
|
||||
"vue-qrcode-reader": "^5.7.3",
|
||||
"vue-router": "^5.0.3"
|
||||
@@ -2754,6 +2757,30 @@
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/array-buffer-byte-length": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
|
||||
@@ -2921,13 +2948,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/barcode-detector": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
|
||||
"integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.1.0.tgz",
|
||||
"integrity": "sha512-aQjGxrgsb/WTlw6pHZwFRO6NhFMhwHGEkd0pzV25fBn8dnRA1PA1G7bLeAzvSea646S/96nW5W3jD8wezQZ1vQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/dom-webcodecs": "^0.1.11",
|
||||
"zxing-wasm": "1.1.3"
|
||||
"zxing-wasm": "3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/baseline-browser-mapping": {
|
||||
@@ -3056,6 +3082,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/camelcase": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001774",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
|
||||
@@ -3092,6 +3127,35 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
||||
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"wrap-ansi": "^6.2.0"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
@@ -3254,6 +3318,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decamelize": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
|
||||
"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||
@@ -3300,6 +3373,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/dijkstrajs": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
|
||||
"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@@ -3338,6 +3417,12 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
||||
@@ -3648,6 +3733,19 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"locate-path": "^5.0.0",
|
||||
"path-exists": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
|
||||
@@ -3773,6 +3871,15 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/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==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
@@ -4162,6 +4269,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/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==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-generator-function": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
|
||||
@@ -4565,6 +4681,18 @@
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-locate": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.23",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
|
||||
@@ -4800,6 +4928,42 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-try": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-limit": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/package-json-from-dist": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
|
||||
@@ -4807,6 +4971,15 @@
|
||||
"dev": true,
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/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==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
@@ -4892,6 +5065,15 @@
|
||||
"pathe": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/pngjs": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
|
||||
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/possible-typed-array-names": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
|
||||
@@ -4953,6 +5135,23 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qrcode": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
|
||||
"integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dijkstrajs": "^1.0.1",
|
||||
"pngjs": "^5.0.0",
|
||||
"yargs": "^15.3.1"
|
||||
},
|
||||
"bin": {
|
||||
"qrcode": "bin/qrcode"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/quansync": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
|
||||
@@ -5094,6 +5293,15 @@
|
||||
"regjsparser": "bin/parser"
|
||||
}
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
@@ -5104,6 +5312,12 @@
|
||||
"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==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
@@ -5284,6 +5498,12 @@
|
||||
"randombytes": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
@@ -5530,6 +5750,20 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.matchall": {
|
||||
"version": "4.0.12",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
|
||||
@@ -5632,6 +5866,18 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-comments": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
|
||||
@@ -5667,6 +5913,18 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tagged-tag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
|
||||
"integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/temp-dir": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
||||
@@ -6136,6 +6394,25 @@
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-qrcode-reader/node_modules/barcode-detector": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
|
||||
"integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/dom-webcodecs": "^0.1.11",
|
||||
"zxing-wasm": "1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-qrcode-reader/node_modules/zxing-wasm": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
|
||||
"integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/emscripten": "^1.39.10"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
|
||||
@@ -6302,6 +6579,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/which-module": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
|
||||
"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/which-typed-array": {
|
||||
"version": "1.1.20",
|
||||
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
|
||||
@@ -6653,6 +6936,26 @@
|
||||
"workbox-core": "7.4.0"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
@@ -6675,13 +6978,67 @@
|
||||
"url": "https://github.com/sponsors/eemeli"
|
||||
}
|
||||
},
|
||||
"node_modules/zxing-wasm": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
|
||||
"integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/emscripten": "^1.39.10"
|
||||
"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/yargs-parser": {
|
||||
"version": "18.1.3",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
|
||||
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"camelcase": "^5.0.0",
|
||||
"decamelize": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/zxing-wasm": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-3.0.0.tgz",
|
||||
"integrity": "sha512-s7ASCPKX+QnH7Y83f4Byxmq/vDzYW7B9m6jMP5S30JGfN2A6WAUn6P3vcBmNguDhPLE6ny2fjTooQVyKBXI1qA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/emscripten": "^1.41.5",
|
||||
"type-fest": "^5.4.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/emscripten": ">=1.39.6"
|
||||
}
|
||||
},
|
||||
"node_modules/zxing-wasm/node_modules/type-fest": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.4.4.tgz",
|
||||
"integrity": "sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw==",
|
||||
"license": "(MIT OR CC0-1.0)",
|
||||
"dependencies": {
|
||||
"tagged-tag": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
{
|
||||
"name": "tools-app",
|
||||
"private": true,
|
||||
"version": "0.6.0",
|
||||
"version": "0.6.4",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"postinstall": "mkdir -p public/wasm && cp node_modules/zxing-wasm/dist/reader/zxing_reader.wasm public/wasm/"
|
||||
},
|
||||
"dependencies": {
|
||||
"barcode-detector": "^3.1.0",
|
||||
"lucide-vue-next": "^0.575.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"vue": "^3.5.25",
|
||||
"vue-qrcode-reader": "^5.7.3",
|
||||
"vue-router": "^5.0.3"
|
||||
|
||||
BIN
public/wasm/zxing_reader.wasm
Normal file
BIN
public/wasm/zxing_reader.wasm
Normal file
Binary file not shown.
18
src/App.vue
18
src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import InstallPrompt from './components/InstallPrompt.vue'
|
||||
import ReloadPrompt from './components/ReloadPrompt.vue'
|
||||
import { UI_CONFIG } from './config/ui'
|
||||
|
||||
const isSidebarOpen = ref(window.innerWidth >= 768)
|
||||
const router = useRouter()
|
||||
@@ -31,6 +32,11 @@ const handleResize = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Set global CSS variables from config
|
||||
document.documentElement.style.setProperty('--header-height', `${UI_CONFIG.headerHeight}px`)
|
||||
document.documentElement.style.setProperty('--footer-height', `${UI_CONFIG.footerHeight}px`)
|
||||
document.documentElement.style.setProperty('--page-padding', `${UI_CONFIG.pagePadding}px`)
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
@@ -67,17 +73,17 @@ onUnmounted(() => {
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
/* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
|
||||
padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
|
||||
/* Space for fixed footer on mobile + extra margin */
|
||||
padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.main-content {
|
||||
padding: 1rem;
|
||||
padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
|
||||
padding: 0.5rem;
|
||||
padding-bottom: calc(0.5rem + var(--footer-height) + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,7 +95,7 @@ onUnmounted(() => {
|
||||
.main-content {
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
padding-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,8 @@ const version = __APP_VERSION__;
|
||||
<style scoped>
|
||||
.app-footer {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
height: var(--footer-height);
|
||||
padding: 0 0.5rem;
|
||||
/* Background handled by glass-panel */
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
@@ -24,12 +25,9 @@ const version = __APP_VERSION__;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
/* Remove fixed height to allow content to dictate size */
|
||||
/* height: 30px; */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -65,7 +65,10 @@ onMounted(() => {
|
||||
/* Remove hardcoded colors and use theme variables */
|
||||
background: var(--header-bg);
|
||||
color: var(--text-color);
|
||||
padding: 1rem;
|
||||
height: var(--header-height);
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* box-shadow handled by glass-panel class */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -77,7 +80,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
||||
@@ -14,6 +14,7 @@ defineProps({
|
||||
<router-link to="/clipboard-sniffer" class="nav-item" v-ripple>Clipboard Sniffer</router-link>
|
||||
<router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
|
||||
<router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
|
||||
<router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -112,6 +112,7 @@ const clearText = () => {
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-container.full-width {
|
||||
@@ -126,6 +127,9 @@ const clearText = () => {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
/* Override shared tool-panel scroll for this tool */
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-textarea {
|
||||
@@ -154,4 +158,9 @@ const clearText = () => {
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.result-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -142,7 +142,6 @@ const generatePasswords = () => {
|
||||
class="tool-textarea"
|
||||
v-model="result"
|
||||
placeholder="Generated passwords will appear here..."
|
||||
readonly
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
299
src/components/tools/QrCode.vue
Normal file
299
src/components/tools/QrCode.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { Download } from 'lucide-vue-next'
|
||||
import QRCode from 'qrcode'
|
||||
import { useFillHeight } from '../../composables/useFillHeight'
|
||||
import { useLocalStorage } from '../../composables/useLocalStorage'
|
||||
|
||||
const text = useLocalStorage('text', '', 'qr-code')
|
||||
const ecc = useLocalStorage('ecc', 'M', 'qr-code')
|
||||
const size = useLocalStorage('size', 300, 'qr-code')
|
||||
const format = useLocalStorage('format', 'png', 'qr-code')
|
||||
const svgContent = ref('')
|
||||
const previewRef = ref(null)
|
||||
|
||||
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
|
||||
|
||||
const generateQR = async () => {
|
||||
if (!text.value) {
|
||||
svgContent.value = ''
|
||||
return
|
||||
}
|
||||
try {
|
||||
// Generate SVG for preview (always sharp)
|
||||
svgContent.value = await QRCode.toString(text.value, {
|
||||
type: 'svg',
|
||||
errorCorrectionLevel: ecc.value,
|
||||
margin: 1,
|
||||
// No fixed width, allow scaling via CSS
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('QR Generation failed', err)
|
||||
svgContent.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// Debounce generation slightly to avoid lag on typing
|
||||
let timeout
|
||||
watch([text, ecc], () => { // size is not relevant for preview
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(generateQR, 300)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (text.value) generateQR()
|
||||
})
|
||||
|
||||
const downloadFile = async () => {
|
||||
if (!text.value) return
|
||||
|
||||
const filename = `qr-code-${Date.now()}.${format.value}`
|
||||
|
||||
if (format.value === 'svg') {
|
||||
// For SVG download, we might want to inject the size if user specifically requested it,
|
||||
// but usually raw SVG is better.
|
||||
// If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
|
||||
const svgWithSize = await QRCode.toString(text.value, {
|
||||
type: 'svg',
|
||||
errorCorrectionLevel: ecc.value,
|
||||
margin: 1,
|
||||
width: size.value
|
||||
})
|
||||
const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
|
||||
triggerDownload(blob, filename)
|
||||
} else {
|
||||
// For raster formats, render to canvas first
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
await QRCode.toCanvas(canvas, text.value, {
|
||||
errorCorrectionLevel: ecc.value,
|
||||
margin: 1,
|
||||
width: size.value
|
||||
})
|
||||
|
||||
const mime = `image/${format.value}`
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) triggerDownload(blob, filename)
|
||||
}, mime)
|
||||
} catch (err) {
|
||||
console.error('Download failed', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const triggerDownload = (blob, filename) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tool-container full-width">
|
||||
<div class="tool-panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="tool-title">QR Generator</h2>
|
||||
</div>
|
||||
|
||||
<div class="input-section">
|
||||
<textarea
|
||||
v-model="text"
|
||||
class="tool-textarea"
|
||||
placeholder="Enter text to generate QR code..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="controls-section">
|
||||
<div class="control-group">
|
||||
<label>Error Correction</label>
|
||||
<select v-model="ecc" class="select-input">
|
||||
<option value="L">Low (7%)</option>
|
||||
<option value="M">Medium (15%)</option>
|
||||
<option value="Q">Quartile (25%)</option>
|
||||
<option value="H">High (30%)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Size (px)</label>
|
||||
<select v-model="size" class="select-input">
|
||||
<option :value="150">150x150</option>
|
||||
<option :value="300">300x300</option>
|
||||
<option :value="500">500x500</option>
|
||||
<option :value="1000">1000x1000</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Format</label>
|
||||
<select v-model="format" class="select-input">
|
||||
<option value="png">PNG</option>
|
||||
<option value="jpeg">JPG</option>
|
||||
<option value="webp">WebP</option>
|
||||
<option value="svg">SVG</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
||||
<div class="qr-frame" v-html="svgContent"></div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="action-btn" @click="downloadFile">
|
||||
<Download size="18" />
|
||||
Download {{ format.toUpperCase() }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tool-container.full-width {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevent scrolling, force fit */
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.input-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.tool-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-accent);
|
||||
box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.1);
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-color);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
overflow: hidden; /* Prevent overflow if QR is too big */
|
||||
min-height: 0;
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.qr-frame {
|
||||
width: calc(100cqmin - 4rem);
|
||||
height: calc(100cqmin - 4rem);
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-frame :deep(svg) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-accent);
|
||||
color: #000;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
@@ -427,6 +427,9 @@ const isUrl = (string) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scanner-content {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { onMounted, onUnmounted, ref, nextTick } from 'vue'
|
||||
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue'
|
||||
import { UI_CONFIG } from '../config/ui'
|
||||
|
||||
export function useFillHeight(elementRef, marginBottom = 20) {
|
||||
export function useFillHeight(elementRef, extraMargin = 0) {
|
||||
const height = ref('auto')
|
||||
|
||||
const updateHeight = () => {
|
||||
@@ -8,16 +9,10 @@ export function useFillHeight(elementRef, marginBottom = 20) {
|
||||
|
||||
const rect = elementRef.value.getBoundingClientRect()
|
||||
const windowHeight = window.innerHeight
|
||||
// Calculate available space: window height - element top position - margin bottom
|
||||
// We also need to account for the footer height if it's fixed or layout related
|
||||
// The user mentioned "margin bottom from footer".
|
||||
// If footer is in the flow, we might just want to fill the parent container?
|
||||
// But user asked for JS resizing.
|
||||
|
||||
// Let's assume we want to fill down to (windowHeight - marginBottom).
|
||||
// This assumes the element should stretch to the bottom of the viewport.
|
||||
|
||||
const availableHeight = windowHeight - rect.top - marginBottom
|
||||
// Calculate available space: window height - element top position - footer height - padding - extra margin
|
||||
const bottomOffset = UI_CONFIG.footerHeight + UI_CONFIG.pagePadding + extraMargin
|
||||
const availableHeight = windowHeight - rect.top - bottomOffset
|
||||
|
||||
// Ensure minimum height
|
||||
if (availableHeight > 100) {
|
||||
@@ -34,6 +29,13 @@ export function useFillHeight(elementRef, marginBottom = 20) {
|
||||
|
||||
// Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
|
||||
setTimeout(updateHeight, 300)
|
||||
|
||||
// Watch for element appearing (v-if) or changing
|
||||
watch(elementRef, () => {
|
||||
nextTick(updateHeight)
|
||||
// Additional update for layout stability
|
||||
setTimeout(updateHeight, 100)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export function useLocalStorage(key, defaultValue) {
|
||||
export function useLocalStorage(key, defaultValue, toolPrefix = '') {
|
||||
// Construct prefixed key: [toolPrefix-]key
|
||||
const prefixPart = toolPrefix ? `${toolPrefix}-` : ''
|
||||
const prefixedKey = `${prefixPart}${key}`
|
||||
|
||||
// Initialize state from local storage or default value
|
||||
const storedValue = localStorage.getItem(key)
|
||||
const storedValue = localStorage.getItem(prefixedKey)
|
||||
const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
|
||||
|
||||
// Watch for changes and update local storage
|
||||
watch(data, (newValue) => {
|
||||
if (newValue === null || newValue === undefined) {
|
||||
localStorage.removeItem(key)
|
||||
localStorage.removeItem(prefixedKey)
|
||||
} else {
|
||||
localStorage.setItem(key, JSON.stringify(newValue))
|
||||
localStorage.setItem(prefixedKey, JSON.stringify(newValue))
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
|
||||
6
src/config/ui.js
Normal file
6
src/config/ui.js
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
export const UI_CONFIG = {
|
||||
headerHeight: 64,
|
||||
footerHeight: 50,
|
||||
pagePadding: 16 // Single side padding (1rem)
|
||||
}
|
||||
21
src/main.js
21
src/main.js
@@ -3,6 +3,27 @@ import './style.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import Ripple from './directives/ripple'
|
||||
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
|
||||
|
||||
// Configure BarcodeDetector polyfill to use local WASM file
|
||||
try {
|
||||
prepareZXingModule({
|
||||
overrides: {
|
||||
locateFile: (path, prefix) => {
|
||||
if (path.endsWith('.wasm')) {
|
||||
return '/wasm/zxing_reader.wasm'
|
||||
}
|
||||
return prefix + path
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Force usage of polyfill to avoid CSP issues and ensure consistent behavior
|
||||
// Native implementation might fail or be missing in some browsers
|
||||
window.BarcodeDetector = BarcodeDetector
|
||||
} catch (e) {
|
||||
console.error('Failed to initialize BarcodeDetector polyfill', e)
|
||||
}
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import Passwords from '../components/tools/Passwords.vue'
|
||||
import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
|
||||
import UrlCleaner from '../components/tools/UrlCleaner.vue'
|
||||
import QrScanner from '../components/tools/QrScanner.vue'
|
||||
import QrCode from '../components/tools/QrCode.vue'
|
||||
import PrivacyPolicy from '../views/PrivacyPolicy.vue'
|
||||
|
||||
const routes = [
|
||||
@@ -32,6 +33,11 @@ const routes = [
|
||||
name: 'QrScanner',
|
||||
component: QrScanner
|
||||
},
|
||||
{
|
||||
path: '/qr-code',
|
||||
name: 'QrCode',
|
||||
component: QrCode
|
||||
},
|
||||
{
|
||||
path: '/extension-privacy-policy',
|
||||
name: 'PrivacyPolicy',
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@import 'tailwindcss';
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
@@ -115,13 +113,13 @@ body {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,12 +134,12 @@ body {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -339,3 +337,19 @@ span.ripple {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Global Input/Select Focus Styles --- */
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Custom focus ring for all form elements */
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--primary-accent);
|
||||
box-shadow: 0 0 0 1px var(--primary-accent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user