Compare commits
22 Commits
e40762873c
...
v0.6.24
| Author | SHA1 | Date | |
|---|---|---|---|
d395d8754a
|
|||
|
4c1815b3b3
|
|||
|
d82f5ec7c5
|
|||
|
4711102407
|
|||
|
a367d364df
|
|||
|
27fee3ac34
|
|||
|
b5a79f8dbe
|
|||
|
b6eb33f205
|
|||
|
bec6a0ec8f
|
|||
|
52024ad7c6
|
|||
|
805b986a7b
|
|||
|
8fa0c9bd44
|
|||
|
9f9ea255a8
|
|||
|
858e880c38
|
|||
|
f8953984ef
|
|||
|
6be7abfe02
|
|||
|
fdd841177b
|
|||
| 2c286af429 | |||
| 10286c2924 | |||
| b98a14950c | |||
| 18912368a4 | |||
|
b51bc61cf3
|
@@ -1,4 +1,11 @@
|
|||||||
#!/usr/bin/env sh
|
# Check if GPG signing is enabled
|
||||||
. "$(dirname -- "$0")/_/husky.sh"
|
gpg_sign=$(git config --get commit.gpgsign || echo "false")
|
||||||
|
|
||||||
|
if [ "$gpg_sign" != "true" ]; then
|
||||||
|
echo "Error: GPG signing is not enabled or properly configured!"
|
||||||
|
echo "Please enable it globally using: git config --global commit.gpgsign true"
|
||||||
|
echo "Or locally by running: git config commit.gpgsign true"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
npm run lint
|
npm run lint
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export default [
|
|||||||
'no-unused-vars': 'off',
|
'no-unused-vars': 'off',
|
||||||
'no-undef': 'off',
|
'no-undef': 'off',
|
||||||
'no-debugger': 'off',
|
'no-debugger': 'off',
|
||||||
|
'indent': ['error', 2]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -84,8 +84,8 @@ async function refreshOffscreenDocument() {
|
|||||||
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
|
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
|
||||||
if (request.action === 'startSniffing') {
|
if (request.action === 'startSniffing') {
|
||||||
if (isSniffing) {
|
if (isSniffing) {
|
||||||
sendResponse({ status: 'already_started' });
|
sendResponse({ status: 'already_started' });
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
isSniffing = true;
|
isSniffing = true;
|
||||||
|
|||||||
@@ -7,6 +7,10 @@
|
|||||||
<meta name="theme-color" content="#4facfe" />
|
<meta name="theme-color" content="#4facfe" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Tools App</title>
|
<title>Tools App</title>
|
||||||
|
<meta property="og:title" content="Tools App" />
|
||||||
|
<meta property="og:description" content="A versatile collection of developer and everyday tools including a Password Generator, QR Code Scanner/Generator, URL Cleaner, and more." />
|
||||||
|
<meta property="og:image" content="/preview.png" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
739
package-lock.json
generated
739
package-lock.json
generated
@@ -1,14 +1,15 @@
|
|||||||
{
|
{
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"version": "0.6.19",
|
"version": "0.6.24",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"version": "0.6.19",
|
"version": "0.6.24",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@gkucmierz/utils": "^1.28.7",
|
||||||
"barcode-detector": "^3.1.0",
|
"barcode-detector": "^3.1.0",
|
||||||
"lucide-vue-next": "^0.575.0",
|
"lucide-vue-next": "^0.575.0",
|
||||||
"marked": "^17.0.3",
|
"marked": "^17.0.3",
|
||||||
@@ -24,7 +25,8 @@
|
|||||||
"globals": "^17.4.0",
|
"globals": "^17.4.0",
|
||||||
"husky": "^9.1.7",
|
"husky": "^9.1.7",
|
||||||
"vite": "^7.3.1",
|
"vite": "^7.3.1",
|
||||||
"vite-plugin-pwa": "^1.2.0"
|
"vite-plugin-pwa": "^1.2.0",
|
||||||
|
"worker-loader": "^3.0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@apideck/better-ajv-errors": {
|
"node_modules/@apideck/better-ajv-errors": {
|
||||||
@@ -2134,6 +2136,12 @@
|
|||||||
"node": "^20.19.0 || ^22.13.0 || >=24"
|
"node": "^20.19.0 || ^22.13.0 || >=24"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@gkucmierz/utils": {
|
||||||
|
"version": "1.28.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gkucmierz/utils/-/utils-1.28.7.tgz",
|
||||||
|
"integrity": "sha512-ekN8W4PL+SEeG0adWlkxxmTv6StLgxqtGRB9eBdWmkT5S4GSfJHYmzLY1ebc4jlL40OEa992ryvsT/TJS7eMmA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@humanfs/core": {
|
"node_modules/@humanfs/core": {
|
||||||
"version": "0.19.1",
|
"version": "0.19.1",
|
||||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||||
@@ -2709,6 +2717,30 @@
|
|||||||
"integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
|
"integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/eslint": {
|
||||||
|
"version": "9.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
|
||||||
|
"integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/estree": "*",
|
||||||
|
"@types/json-schema": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/eslint-scope": {
|
||||||
|
"version": "3.7.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
|
||||||
|
"integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/eslint": "*",
|
||||||
|
"@types/estree": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/esrecurse": {
|
"node_modules/@types/esrecurse": {
|
||||||
"version": "4.3.1",
|
"version": "4.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
|
||||||
@@ -2730,6 +2762,17 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/node": {
|
||||||
|
"version": "25.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
|
||||||
|
"integrity": "sha512-DpzbrH7wIcBaJibpKo9nnSQL0MTRdnWttGyE5haGwK86xgMOkFLp7vEyfQPGLOJh5wNYiJ3V9PmUMDhV9u8kkQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"undici-types": "~7.18.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/resolve": {
|
"node_modules/@types/resolve": {
|
||||||
"version": "1.20.2",
|
"version": "1.20.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||||
@@ -2921,6 +2964,198 @@
|
|||||||
"integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
|
"integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@webassemblyjs/ast": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/helper-numbers": "1.13.2",
|
||||||
|
"@webassemblyjs/helper-wasm-bytecode": "1.13.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/floating-point-hex-parser": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/helper-api-error": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/helper-buffer": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/helper-numbers": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/floating-point-hex-parser": "1.13.2",
|
||||||
|
"@webassemblyjs/helper-api-error": "1.13.2",
|
||||||
|
"@xtuc/long": "4.2.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/helper-wasm-bytecode": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/helper-wasm-section": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-buffer": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
|
||||||
|
"@webassemblyjs/wasm-gen": "1.14.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/ieee754": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@xtuc/ieee754": "^1.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/leb128": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@xtuc/long": "4.2.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/utf8": {
|
||||||
|
"version": "1.13.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
|
||||||
|
"integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/wasm-edit": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-buffer": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
|
||||||
|
"@webassemblyjs/helper-wasm-section": "1.14.1",
|
||||||
|
"@webassemblyjs/wasm-gen": "1.14.1",
|
||||||
|
"@webassemblyjs/wasm-opt": "1.14.1",
|
||||||
|
"@webassemblyjs/wasm-parser": "1.14.1",
|
||||||
|
"@webassemblyjs/wast-printer": "1.14.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/wasm-gen": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
|
||||||
|
"@webassemblyjs/ieee754": "1.13.2",
|
||||||
|
"@webassemblyjs/leb128": "1.13.2",
|
||||||
|
"@webassemblyjs/utf8": "1.13.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/wasm-opt": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-buffer": "1.14.1",
|
||||||
|
"@webassemblyjs/wasm-gen": "1.14.1",
|
||||||
|
"@webassemblyjs/wasm-parser": "1.14.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/wasm-parser": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@webassemblyjs/helper-api-error": "1.13.2",
|
||||||
|
"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
|
||||||
|
"@webassemblyjs/ieee754": "1.13.2",
|
||||||
|
"@webassemblyjs/leb128": "1.13.2",
|
||||||
|
"@webassemblyjs/utf8": "1.13.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@webassemblyjs/wast-printer": {
|
||||||
|
"version": "1.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
|
||||||
|
"integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@webassemblyjs/ast": "1.14.1",
|
||||||
|
"@xtuc/long": "4.2.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@xtuc/ieee754": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@xtuc/long": {
|
||||||
|
"version": "4.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
||||||
|
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.16.0",
|
"version": "8.16.0",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
|
||||||
@@ -2933,6 +3168,20 @@
|
|||||||
"node": ">=0.4.0"
|
"node": ">=0.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/acorn-import-phases": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"acorn": "^8.14.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/acorn-jsx": {
|
"node_modules/acorn-jsx": {
|
||||||
"version": "5.3.2",
|
"version": "5.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||||
@@ -2960,6 +3209,39 @@
|
|||||||
"url": "https://github.com/sponsors/epoberezkin"
|
"url": "https://github.com/sponsors/epoberezkin"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/ajv-formats": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"ajv": "^8.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"ajv": "^8.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"ajv": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/ajv-keywords": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"fast-deep-equal": "^3.1.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"ajv": "^8.8.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ansi-regex": {
|
"node_modules/ansi-regex": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||||
@@ -3172,6 +3454,16 @@
|
|||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/big.js": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||||
|
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/birpc": {
|
"node_modules/birpc": {
|
||||||
"version": "2.9.0",
|
"version": "2.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
|
||||||
@@ -3337,6 +3629,17 @@
|
|||||||
"url": "https://paulmillr.com/funding/"
|
"url": "https://paulmillr.com/funding/"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/chrome-trace-event": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cliui": {
|
"node_modules/cliui": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
||||||
@@ -3653,6 +3956,31 @@
|
|||||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/emojis-list": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/enhanced-resolve": {
|
||||||
|
"version": "5.20.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
|
||||||
|
"integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"graceful-fs": "^4.2.4",
|
||||||
|
"tapable": "^2.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/entities": {
|
"node_modules/entities": {
|
||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
||||||
@@ -3754,6 +4082,14 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/es-module-lexer": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/es-object-atoms": {
|
"node_modules/es-object-atoms": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||||
@@ -4158,6 +4494,17 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/events": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/exsolve": {
|
"node_modules/exsolve": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
|
||||||
@@ -4542,6 +4889,14 @@
|
|||||||
"node": ">=10.13.0"
|
"node": ">=10.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/glob-to-regexp": {
|
||||||
|
"version": "0.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
|
||||||
|
"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-2-Clause",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/globals": {
|
"node_modules/globals": {
|
||||||
"version": "17.4.0",
|
"version": "17.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
|
||||||
@@ -4605,6 +4960,17 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/has-property-descriptors": {
|
"node_modules/has-property-descriptors": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||||
@@ -5231,6 +5597,22 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/jest-worker": {
|
||||||
|
"version": "27.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
|
||||||
|
"integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/node": "*",
|
||||||
|
"merge-stream": "^2.0.0",
|
||||||
|
"supports-color": "^8.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
@@ -5257,6 +5639,14 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/json-parse-even-better-errors": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/json-schema": {
|
"node_modules/json-schema": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
|
||||||
@@ -5347,6 +5737,36 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/loader-runner": {
|
||||||
|
"version": "4.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
|
||||||
|
"integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.11.5"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/loader-utils": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/local-pkg": {
|
"node_modules/local-pkg": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
|
||||||
@@ -5462,6 +5882,39 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/merge-stream": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/mime-db": {
|
||||||
|
"version": "1.52.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||||
|
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mime-types": {
|
||||||
|
"version": "2.1.35",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||||
|
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"mime-db": "1.52.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "10.2.4",
|
"version": "10.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
|
||||||
@@ -5561,6 +6014,14 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/neo-async": {
|
||||||
|
"version": "2.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
|
||||||
|
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/node-releases": {
|
"node_modules/node-releases": {
|
||||||
"version": "2.0.27",
|
"version": "2.0.27",
|
||||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
|
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
|
||||||
@@ -6223,6 +6684,27 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/schema-utils": {
|
||||||
|
"version": "4.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
|
||||||
|
"integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/json-schema": "^7.0.9",
|
||||||
|
"ajv": "^8.9.0",
|
||||||
|
"ajv-formats": "^2.1.1",
|
||||||
|
"ajv-keywords": "^5.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/scule": {
|
"node_modules/scule": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
|
||||||
@@ -6651,6 +7133,23 @@
|
|||||||
"node": ">=16"
|
"node": ">=16"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/supports-color": {
|
||||||
|
"version": "8.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||||
|
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/supports-preserve-symlinks-flag": {
|
"node_modules/supports-preserve-symlinks-flag": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
||||||
@@ -6676,6 +7175,21 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tapable": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/temp-dir": {
|
"node_modules/temp-dir": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
||||||
@@ -6724,6 +7238,41 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/terser-webpack-plugin": {
|
||||||
|
"version": "5.3.17",
|
||||||
|
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.17.tgz",
|
||||||
|
"integrity": "sha512-YR7PtUp6GMU91BgSJmlaX/rS2lGDbAF7D+Wtq7hRO+MiljNmodYvqslzCFiYVAgW+Qoaaia/QUIP4lGXufjdZw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.25",
|
||||||
|
"jest-worker": "^27.4.5",
|
||||||
|
"schema-utils": "^4.3.0",
|
||||||
|
"terser": "^5.31.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"webpack": "^5.1.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@swc/core": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"esbuild": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"uglify-js": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tinyglobby": {
|
"node_modules/tinyglobby": {
|
||||||
"version": "0.2.15",
|
"version": "0.2.15",
|
||||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||||
@@ -6879,6 +7428,14 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/undici-types": {
|
||||||
|
"version": "7.18.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
|
||||||
|
"integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
|
||||||
@@ -7246,6 +7803,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/watchpack": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"glob-to-regexp": "^0.4.1",
|
||||||
|
"graceful-fs": "^4.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/webidl-conversions": {
|
"node_modules/webidl-conversions": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
||||||
@@ -7253,12 +7825,99 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "BSD-2-Clause"
|
"license": "BSD-2-Clause"
|
||||||
},
|
},
|
||||||
|
"node_modules/webpack": {
|
||||||
|
"version": "5.105.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.4.tgz",
|
||||||
|
"integrity": "sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/eslint-scope": "^3.7.7",
|
||||||
|
"@types/estree": "^1.0.8",
|
||||||
|
"@types/json-schema": "^7.0.15",
|
||||||
|
"@webassemblyjs/ast": "^1.14.1",
|
||||||
|
"@webassemblyjs/wasm-edit": "^1.14.1",
|
||||||
|
"@webassemblyjs/wasm-parser": "^1.14.1",
|
||||||
|
"acorn": "^8.16.0",
|
||||||
|
"acorn-import-phases": "^1.0.3",
|
||||||
|
"browserslist": "^4.28.1",
|
||||||
|
"chrome-trace-event": "^1.0.2",
|
||||||
|
"enhanced-resolve": "^5.20.0",
|
||||||
|
"es-module-lexer": "^2.0.0",
|
||||||
|
"eslint-scope": "5.1.1",
|
||||||
|
"events": "^3.2.0",
|
||||||
|
"glob-to-regexp": "^0.4.1",
|
||||||
|
"graceful-fs": "^4.2.11",
|
||||||
|
"json-parse-even-better-errors": "^2.3.1",
|
||||||
|
"loader-runner": "^4.3.1",
|
||||||
|
"mime-types": "^2.1.27",
|
||||||
|
"neo-async": "^2.6.2",
|
||||||
|
"schema-utils": "^4.3.3",
|
||||||
|
"tapable": "^2.3.0",
|
||||||
|
"terser-webpack-plugin": "^5.3.17",
|
||||||
|
"watchpack": "^2.5.1",
|
||||||
|
"webpack-sources": "^3.3.4"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"webpack": "bin/webpack.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"webpack-cli": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/webpack-sources": {
|
||||||
|
"version": "3.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
|
||||||
|
"integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/webpack-virtual-modules": {
|
"node_modules/webpack-virtual-modules": {
|
||||||
"version": "0.6.2",
|
"version": "0.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
||||||
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
|
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/webpack/node_modules/eslint-scope": {
|
||||||
|
"version": "5.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
|
||||||
|
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-2-Clause",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"esrecurse": "^4.3.0",
|
||||||
|
"estraverse": "^4.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/webpack/node_modules/estraverse": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-2-Clause",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/whatwg-url": {
|
"node_modules/whatwg-url": {
|
||||||
"version": "7.1.0",
|
"version": "7.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
|
||||||
@@ -7721,6 +8380,80 @@
|
|||||||
"workbox-core": "7.4.0"
|
"workbox-core": "7.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/worker-loader": {
|
||||||
|
"version": "3.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz",
|
||||||
|
"integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"webpack": "^4.0.0 || ^5.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/worker-loader/node_modules/ajv": {
|
||||||
|
"version": "6.14.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
|
||||||
|
"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"fast-deep-equal": "^3.1.1",
|
||||||
|
"fast-json-stable-stringify": "^2.0.0",
|
||||||
|
"json-schema-traverse": "^0.4.1",
|
||||||
|
"uri-js": "^4.2.2"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/epoberezkin"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/worker-loader/node_modules/ajv-keywords": {
|
||||||
|
"version": "3.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||||
|
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"ajv": "^6.9.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/worker-loader/node_modules/json-schema-traverse": {
|
||||||
|
"version": "0.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||||
|
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/worker-loader/node_modules/schema-utils": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/json-schema": "^7.0.8",
|
||||||
|
"ajv": "^6.12.5",
|
||||||
|
"ajv-keywords": "^3.5.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/wrap-ansi": {
|
"node_modules/wrap-ansi": {
|
||||||
"version": "6.2.0",
|
"version": "6.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.6.19",
|
"version": "0.6.24",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@@ -13,6 +13,7 @@
|
|||||||
"prepare": "husky"
|
"prepare": "husky"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@gkucmierz/utils": "^1.28.7",
|
||||||
"barcode-detector": "^3.1.0",
|
"barcode-detector": "^3.1.0",
|
||||||
"lucide-vue-next": "^0.575.0",
|
"lucide-vue-next": "^0.575.0",
|
||||||
"marked": "^17.0.3",
|
"marked": "^17.0.3",
|
||||||
@@ -28,6 +29,7 @@
|
|||||||
"globals": "^17.4.0",
|
"globals": "^17.4.0",
|
||||||
"husky": "^9.1.7",
|
"husky": "^9.1.7",
|
||||||
"vite": "^7.3.1",
|
"vite": "^7.3.1",
|
||||||
"vite-plugin-pwa": "^1.2.0"
|
"vite-plugin-pwa": "^1.2.0",
|
||||||
|
"worker-loader": "^3.0.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/preview.png
Normal file
BIN
public/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
|
|||||||
import Sidebar from './components/Sidebar.vue'
|
import Sidebar from './components/Sidebar.vue'
|
||||||
import InstallPrompt from './components/InstallPrompt.vue'
|
import InstallPrompt from './components/InstallPrompt.vue'
|
||||||
import ReloadPrompt from './components/ReloadPrompt.vue'
|
import ReloadPrompt from './components/ReloadPrompt.vue'
|
||||||
|
import GlobalTooltip from './components/common/GlobalTooltip.vue'
|
||||||
import { UI_CONFIG } from './config/ui'
|
import { UI_CONFIG } from './config/ui'
|
||||||
|
|
||||||
const isSidebarOpen = ref(window.innerWidth >= 768)
|
const isSidebarOpen = ref(window.innerWidth >= 768)
|
||||||
@@ -61,6 +62,7 @@ onUnmounted(() => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
<InstallPrompt />
|
<InstallPrompt />
|
||||||
<ReloadPrompt />
|
<ReloadPrompt />
|
||||||
|
<GlobalTooltip />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ onMounted(() => {
|
|||||||
class="menu-btn"
|
class="menu-btn"
|
||||||
@click="$emit('toggleSidebar')"
|
@click="$emit('toggleSidebar')"
|
||||||
aria-label="Toggle Menu"
|
aria-label="Toggle Menu"
|
||||||
title="Toggle Menu"
|
v-tooltip="'Toggle Menu'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@@ -50,7 +50,7 @@ onMounted(() => {
|
|||||||
<button
|
<button
|
||||||
class="btn-neon nav-btn icon-only"
|
class="btn-neon nav-btn icon-only"
|
||||||
@click="toggleTheme"
|
@click="toggleTheme"
|
||||||
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
v-tooltip="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
<Sun v-if="isDark" :size="20" />
|
<Sun v-if="isDark" :size="20" />
|
||||||
|
|||||||
@@ -3,8 +3,8 @@
|
|||||||
<div class="prompt-content">
|
<div class="prompt-content">
|
||||||
<span class="prompt-text">Install app for faster access</span>
|
<span class="prompt-text">Install app for faster access</span>
|
||||||
<div class="prompt-actions">
|
<div class="prompt-actions">
|
||||||
<button @click="installPWA" class="install-btn">Install</button>
|
<button @click="installPWA" class="install-btn" v-ripple>Install</button>
|
||||||
<button @click="dismissPrompt" class="dismiss-btn">✕</button>
|
<button @click="dismissPrompt" class="dismiss-btn" v-ripple>✕</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ onMounted(() => {
|
|||||||
<div class="message">
|
<div class="message">
|
||||||
New content available, click on reload button to update.
|
New content available, click on reload button to update.
|
||||||
</div>
|
</div>
|
||||||
<button @click="updateServiceWorker()">
|
<button @click="updateServiceWorker()" class="btn-neon" v-ripple>
|
||||||
Reload
|
Reload
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ defineProps({
|
|||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
background-color: var(--panel-bg);
|
background-color: var(--glass-bg);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
-webkit-backdrop-filter: blur(12px);
|
-webkit-backdrop-filter: blur(12px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|||||||
138
src/components/common/GlobalTooltip.vue
Normal file
138
src/components/common/GlobalTooltip.vue
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<script setup>
|
||||||
|
import { tooltipState } from '../../composables/useTooltip'
|
||||||
|
import { ref, watch, nextTick } from 'vue'
|
||||||
|
|
||||||
|
const tooltipRef = ref(null)
|
||||||
|
const x = ref(0)
|
||||||
|
const y = ref(0)
|
||||||
|
const arrowX = ref(0)
|
||||||
|
const isBottom = ref(false)
|
||||||
|
|
||||||
|
watch(() => tooltipState.isVisible, async (visible) => {
|
||||||
|
if (visible) {
|
||||||
|
// Wait for DOM update to ensure the text content affects height before measuring
|
||||||
|
await nextTick()
|
||||||
|
if (!tooltipRef.value || !tooltipState.targetRect) return
|
||||||
|
|
||||||
|
const rect = tooltipState.targetRect
|
||||||
|
const tooltipRect = tooltipRef.value.getBoundingClientRect()
|
||||||
|
|
||||||
|
let top = rect.top - tooltipRect.height - 8
|
||||||
|
let idealCenter = rect.left + (rect.width / 2)
|
||||||
|
let left = idealCenter - (tooltipRect.width / 2)
|
||||||
|
|
||||||
|
isBottom.value = false
|
||||||
|
if (top < 8) {
|
||||||
|
top = rect.bottom + 8
|
||||||
|
isBottom.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bounds checking for the tooltip box
|
||||||
|
let actualLeft = left
|
||||||
|
if (actualLeft < 8) {
|
||||||
|
actualLeft = 8
|
||||||
|
} else if (actualLeft + tooltipRect.width > window.innerWidth - 8) {
|
||||||
|
actualLeft = window.innerWidth - tooltipRect.width - 8
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate the difference between where the box is forced to be,
|
||||||
|
// and where it naturally wanted to be. We move the arrow by the opposite amount.
|
||||||
|
arrowX.value = idealCenter - (actualLeft + (tooltipRect.width / 2))
|
||||||
|
|
||||||
|
x.value = actualLeft
|
||||||
|
y.value = top
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="tooltipRef"
|
||||||
|
class="global-tooltip"
|
||||||
|
:class="{ 'visible': tooltipState.isVisible, 'tooltip-bottom': isBottom }"
|
||||||
|
:style="{
|
||||||
|
transform: `translate(${x}px, ${y}px)`,
|
||||||
|
'--arrow-offset': `${arrowX}px`
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ tooltipState.text }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.global-tooltip {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
background: rgba(15, 23, 42, 0.95);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
color: #f8fafc;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
transform: translateY(4px) scale(0.95);
|
||||||
|
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-tooltip::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% + var(--arrow-offset, 0px));
|
||||||
|
bottom: -5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: rgba(15, 23, 42, 0.95);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-radius: 0 0 2px 0;
|
||||||
|
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-tooltip.tooltip-bottom::after {
|
||||||
|
bottom: auto;
|
||||||
|
top: -5px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 2px 0 0 0;
|
||||||
|
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-tooltip.visible {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
/* Transform returns to natural pos defined by inline styles when visible */
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] .global-tooltip {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
color: #0f172a;
|
||||||
|
border-color: rgba(15, 23, 42, 0.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] .global-tooltip::after {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-right-color: rgba(15, 23, 42, 0.1);
|
||||||
|
border-bottom-color: rgba(15, 23, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] .global-tooltip.tooltip-bottom::after {
|
||||||
|
border-left-color: rgba(15, 23, 42, 0.1);
|
||||||
|
border-top-color: rgba(15, 23, 42, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -62,7 +62,7 @@ const clearText = () => {
|
|||||||
class="btn-neon"
|
class="btn-neon"
|
||||||
@click="startListening"
|
@click="startListening"
|
||||||
:disabled="!isExtensionReady"
|
:disabled="!isExtensionReady"
|
||||||
:title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
|
v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
Start Sniffing
|
Start Sniffing
|
||||||
|
|||||||
@@ -115,17 +115,17 @@ const generatePasswords = () => {
|
|||||||
<div class="input-wrapper">
|
<div class="input-wrapper">
|
||||||
<label>Length</label>
|
<label>Length</label>
|
||||||
<div class="number-control">
|
<div class="number-control">
|
||||||
<button class="control-btn" @click="length > 4 ? length-- : null">-</button>
|
<button class="control-btn" @click="length > 4 ? length-- : null" v-ripple>-</button>
|
||||||
<input type="number" v-model="length" min="4" max="128" class="number-input">
|
<input type="number" v-model="length" min="4" max="128" class="number-input">
|
||||||
<button class="control-btn" @click="length < 128 ? length++ : null">+</button>
|
<button class="control-btn" @click="length < 128 ? length++ : null" v-ripple>+</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrapper">
|
<div class="input-wrapper">
|
||||||
<label>Count</label>
|
<label>Count</label>
|
||||||
<div class="number-control">
|
<div class="number-control">
|
||||||
<button class="control-btn" @click="count > 1 ? count-- : null">-</button>
|
<button class="control-btn" @click="count > 1 ? count-- : null" v-ripple>-</button>
|
||||||
<input type="number" v-model="count" min="1" max="1000" class="number-input">
|
<input type="number" v-model="count" min="1" max="1000" class="number-input">
|
||||||
<button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
|
<button class="control-btn" @click="count < 1000 ? count++ : null" v-ripple>+</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -149,12 +149,6 @@ const generatePasswords = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tool-container {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-grid {
|
.options-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
@@ -1,80 +1,264 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, onMounted } from 'vue'
|
import { ref, watch, onMounted, computed, onUnmounted } from 'vue'
|
||||||
import { Download } from 'lucide-vue-next'
|
import { Download, Eye, EyeOff } from 'lucide-vue-next'
|
||||||
import QRCode from 'qrcode'
|
import QRCode from 'qrcode'
|
||||||
import { useFillHeight } from '../../composables/useFillHeight'
|
import { useFillHeight } from '../../composables/useFillHeight'
|
||||||
import { useLocalStorage } from '../../composables/useLocalStorage'
|
import { useLocalStorage } from '../../composables/useLocalStorage'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { fromBase64Url, toBase64Url } from '@gkucmierz/utils'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const text = useLocalStorage('text', '', 'qr-code')
|
const text = useLocalStorage('text', '', 'qr-code')
|
||||||
const ecc = useLocalStorage('ecc', 'M', 'qr-code')
|
const ecc = useLocalStorage('ecc', 'M', 'qr-code')
|
||||||
const size = useLocalStorage('size', 300, 'qr-code')
|
const size = useLocalStorage('size', 300, 'qr-code')
|
||||||
|
const isBgTransparent = useLocalStorage('isBgTransparent', true, 'qr-code')
|
||||||
|
const bgType = useLocalStorage('bgType', 'solid', 'qr-code')
|
||||||
|
const bgColor1 = useLocalStorage('bgColor1', '#ffffff', 'qr-code')
|
||||||
|
const bgColor2 = useLocalStorage('bgColor2', '#e2e8f0', 'qr-code')
|
||||||
|
const bgGradPos = useLocalStorage('bgGradPos', { x1: 50, y1: 50, x2: 100, y2: 100 }, 'qr-code')
|
||||||
|
const fgType = useLocalStorage('fgType', 'solid', 'qr-code')
|
||||||
|
const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code')
|
||||||
|
const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code')
|
||||||
|
const fgGradPos = useLocalStorage('fgGradPos', { x1: 0, y1: 0, x2: 100, y2: 100 }, 'qr-code')
|
||||||
|
const showHandles = useLocalStorage('showHandles', true, 'qr-code')
|
||||||
const format = useLocalStorage('format', 'png', 'qr-code')
|
const format = useLocalStorage('format', 'png', 'qr-code')
|
||||||
|
|
||||||
const svgContent = ref('')
|
const svgContent = ref('')
|
||||||
const previewRef = ref(null)
|
const previewRef = ref(null)
|
||||||
|
const qrFrameRef = ref(null)
|
||||||
|
|
||||||
|
const fgLinePts = computed(() => getLineEndPoints(fgGradPos.value))
|
||||||
|
const bgLinePts = computed(() => getLineEndPoints(bgGradPos.value))
|
||||||
|
|
||||||
|
const getLineEndPoints = (pos) => {
|
||||||
|
if (!qrFrameRef.value) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
|
||||||
|
const rect = qrFrameRef.value.getBoundingClientRect()
|
||||||
|
if (rect.width === 0 || rect.height === 0) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
|
||||||
|
|
||||||
|
// Handle radius in pixels (14/2 = 7px) plus half the line stroke width (1/2 = 0.5px) if needed
|
||||||
|
const VISUAL_OFFSET_PX = 1;
|
||||||
|
const rPx = 7 - VISUAL_OFFSET_PX;
|
||||||
|
|
||||||
|
const dx = (pos.x2 - pos.x1) * rect.width / 100
|
||||||
|
const dy = (pos.y2 - pos.y1) * rect.height / 100
|
||||||
|
const distPx = Math.sqrt(dx * dx + dy * dy)
|
||||||
|
|
||||||
|
if (distPx <= rPx * 2) {
|
||||||
|
// Too close, don't show line
|
||||||
|
return { x1: pos.x1, y1: pos.y1, x2: pos.x1, y2: pos.y1 }
|
||||||
|
}
|
||||||
|
|
||||||
|
const angle = Math.atan2(dy, dx)
|
||||||
|
|
||||||
|
// Calculate offsets in percentages (using radius, not diameter)
|
||||||
|
// adding extra 1px to accommodate the stroke/shadow
|
||||||
|
const effectiveRPx = rPx + 1
|
||||||
|
const xOffsetPct = (Math.cos(angle) * effectiveRPx / rect.width) * 100
|
||||||
|
const yOffsetPct = (Math.sin(angle) * effectiveRPx / rect.height) * 100
|
||||||
|
|
||||||
|
return {
|
||||||
|
x1: pos.x1 + xOffsetPct,
|
||||||
|
y1: pos.y1 + yOffsetPct,
|
||||||
|
x2: pos.x2 - xOffsetPct,
|
||||||
|
y2: pos.y2 - yOffsetPct
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const activeHandle = ref(null)
|
||||||
|
|
||||||
|
const startDrag = (e, handleStr) => {
|
||||||
|
e.preventDefault()
|
||||||
|
activeHandle.value = handleStr
|
||||||
|
window.addEventListener('mousemove', onDrag)
|
||||||
|
window.addEventListener('mouseup', stopDrag)
|
||||||
|
window.addEventListener('touchmove', onDrag, { passive: false })
|
||||||
|
window.addEventListener('touchend', stopDrag)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDrag = (e) => {
|
||||||
|
if (!activeHandle.value || !qrFrameRef.value) return
|
||||||
|
if (e.type === 'touchmove') e.preventDefault()
|
||||||
|
|
||||||
|
const rect = qrFrameRef.value.getBoundingClientRect()
|
||||||
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX
|
||||||
|
const clientY = e.touches ? e.touches[0].clientY : e.clientY
|
||||||
|
|
||||||
|
let x = ((clientX - rect.left) / rect.width) * 100
|
||||||
|
let y = ((clientY - rect.top) / rect.height) * 100
|
||||||
|
x = Math.max(0, Math.min(100, x))
|
||||||
|
y = Math.max(0, Math.min(100, y))
|
||||||
|
|
||||||
|
// Snap to 5 points (Corners + Center)
|
||||||
|
// Distance threshold in percentages, roughly matching handle diameter mapping
|
||||||
|
const snapDist = 5
|
||||||
|
const snapPoints = [
|
||||||
|
{ x: 0, y: 0 }, { x: 100, y: 0 },
|
||||||
|
{ x: 0, y: 100 }, { x: 100, y: 100 },
|
||||||
|
{ x: 50, y: 50 }
|
||||||
|
]
|
||||||
|
|
||||||
|
for (const pt of snapPoints) {
|
||||||
|
if (Math.abs(x - pt.x) < snapDist && Math.abs(y - pt.y) < snapDist) {
|
||||||
|
x = pt.x
|
||||||
|
y = pt.y
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [type, point] = activeHandle.value.split(':')
|
||||||
|
const posRef = type === 'fg' ? fgGradPos : bgGradPos
|
||||||
|
posRef.value[`x${point}`] = Math.round(x)
|
||||||
|
posRef.value[`y${point}`] = Math.round(y)
|
||||||
|
}
|
||||||
|
|
||||||
|
let justDragged = false
|
||||||
|
|
||||||
|
const stopDrag = () => {
|
||||||
|
if (activeHandle.value) {
|
||||||
|
justDragged = true
|
||||||
|
setTimeout(() => { justDragged = false }, 50)
|
||||||
|
}
|
||||||
|
activeHandle.value = null
|
||||||
|
window.removeEventListener('mousemove', onDrag)
|
||||||
|
window.removeEventListener('mouseup', stopDrag)
|
||||||
|
window.removeEventListener('touchmove', onDrag)
|
||||||
|
window.removeEventListener('touchend', stopDrag)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFrameClick = (event) => {
|
||||||
|
if (justDragged) return
|
||||||
|
|
||||||
|
if (!activeHandle.value) {
|
||||||
|
showHandles.value = !showHandles.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
|
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
|
||||||
|
|
||||||
const generateQR = async () => {
|
let worker = null
|
||||||
|
let latestJobId = 0
|
||||||
|
|
||||||
|
const generateQR = () => {
|
||||||
if (!text.value) {
|
if (!text.value) {
|
||||||
svgContent.value = ''
|
svgContent.value = ''
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
// Generate SVG for preview (always sharp)
|
// Create worker if not exists
|
||||||
svgContent.value = await QRCode.toString(text.value, {
|
if (!worker) {
|
||||||
type: 'svg',
|
worker = new Worker(new URL('../../workers/qrcode.worker.js', import.meta.url), { type: 'module' })
|
||||||
errorCorrectionLevel: ecc.value,
|
worker.onmessage = (e) => {
|
||||||
margin: 1,
|
const { id, svgContent: newSvg, error } = e.data
|
||||||
// No fixed width, allow scaling via CSS
|
|
||||||
})
|
// Only process the result of the most recently requested job
|
||||||
} catch (err) {
|
// to avoid race conditions overriding newer results with older ones
|
||||||
console.error('QR Generation failed', err)
|
if (id !== latestJobId) return
|
||||||
svgContent.value = ''
|
|
||||||
|
if (error) {
|
||||||
|
console.error('QR Generation worker failed', error)
|
||||||
|
svgContent.value = ''
|
||||||
|
} else {
|
||||||
|
svgContent.value = newSvg
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Increment ID for each new Generation request
|
||||||
|
latestJobId++
|
||||||
|
worker.postMessage({
|
||||||
|
id: latestJobId,
|
||||||
|
text: text.value,
|
||||||
|
ecc: ecc.value,
|
||||||
|
isBgTransparent: isBgTransparent.value,
|
||||||
|
bgType: bgType.value,
|
||||||
|
bgColor1: bgColor1.value,
|
||||||
|
bgColor2: bgColor2.value,
|
||||||
|
bgGradPos: { ...bgGradPos.value },
|
||||||
|
fgType: fgType.value,
|
||||||
|
fgColor1: fgColor1.value,
|
||||||
|
fgColor2: fgColor2.value,
|
||||||
|
fgGradPos: { ...fgGradPos.value }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Debounce generation slightly to avoid lag on typing
|
watch([text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos], () => {
|
||||||
let timeout
|
generateQR()
|
||||||
watch([text, ecc], () => { // size is not relevant for preview
|
}, { deep: true })
|
||||||
clearTimeout(timeout)
|
|
||||||
timeout = setTimeout(generateQR, 300)
|
watch(text, (newText) => {
|
||||||
|
if (newText) {
|
||||||
|
router.replace({ name: 'QrCode', params: { payload: toBase64Url(newText) } })
|
||||||
|
} else {
|
||||||
|
router.replace({ name: 'QrCode', params: {} })
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
if (route.params.payload) {
|
||||||
|
try {
|
||||||
|
const decodedPayload = fromBase64Url(route.params.payload)
|
||||||
|
text.value = decodedPayload
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse QR payload from URL', e)
|
||||||
|
}
|
||||||
|
} else if (text.value) {
|
||||||
|
router.replace({ name: 'QrCode', params: { payload: toBase64Url(text.value) } })
|
||||||
|
}
|
||||||
|
|
||||||
if (text.value) generateQR()
|
if (text.value) generateQR()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (worker) {
|
||||||
|
worker.terminate()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const downloadFile = async () => {
|
const downloadFile = async () => {
|
||||||
if (!text.value) return
|
if (!text.value || !svgContent.value) return
|
||||||
|
|
||||||
const filename = `qr-code-${Date.now()}.${format.value}`
|
const filename = `qr-code-${Date.now()}.${format.value}`
|
||||||
|
|
||||||
if (format.value === 'svg') {
|
if (format.value === 'svg') {
|
||||||
// For SVG download, we might want to inject the size if user specifically requested it,
|
let finalSvg = svgContent.value
|
||||||
// but usually raw SVG is better.
|
if (!finalSvg.includes('width=')) {
|
||||||
// If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
|
finalSvg = finalSvg.replace('<svg ', `<svg width="${size.value}" height="${size.value}" `)
|
||||||
const svgWithSize = await QRCode.toString(text.value, {
|
}
|
||||||
type: 'svg',
|
const blob = new Blob([finalSvg], { type: 'image/svg+xml' })
|
||||||
errorCorrectionLevel: ecc.value,
|
|
||||||
margin: 1,
|
|
||||||
width: size.value
|
|
||||||
})
|
|
||||||
const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
|
|
||||||
triggerDownload(blob, filename)
|
triggerDownload(blob, filename)
|
||||||
} else {
|
} else {
|
||||||
// For raster formats, render to canvas first
|
|
||||||
try {
|
try {
|
||||||
const canvas = document.createElement('canvas')
|
const canvas = document.createElement('canvas')
|
||||||
await QRCode.toCanvas(canvas, text.value, {
|
canvas.width = size.value
|
||||||
errorCorrectionLevel: ecc.value,
|
canvas.height = size.value
|
||||||
margin: 1,
|
const ctx = canvas.getContext('2d')
|
||||||
width: size.value
|
|
||||||
})
|
|
||||||
|
|
||||||
const mime = `image/${format.value}`
|
const img = new Image()
|
||||||
canvas.toBlob((blob) => {
|
const svgSource = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}`
|
||||||
if (blob) triggerDownload(blob, filename)
|
|
||||||
}, mime)
|
img.onload = () => {
|
||||||
|
if (format.value === 'jpeg' && isBgTransparent.value) {
|
||||||
|
ctx.fillStyle = '#ffffff'
|
||||||
|
ctx.fillRect(0, 0, size.value, size.value)
|
||||||
|
} else if (format.value === 'jpeg' && bgType.value !== 'solid') {
|
||||||
|
// Let the Canvas render the SVG's background gradient naturally instead of filling
|
||||||
|
// Though drawing bounding rect white might still be needed behind transparent parts
|
||||||
|
ctx.fillStyle = '#ffffff'
|
||||||
|
ctx.fillRect(0, 0, size.value, size.value)
|
||||||
|
}
|
||||||
|
ctx.drawImage(img, 0, 0, size.value, size.value)
|
||||||
|
|
||||||
|
const mime = format.value === 'jpeg' ? 'image/jpeg' : `image/${format.value}`
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (blob) triggerDownload(blob, filename)
|
||||||
|
}, mime, 1.0)
|
||||||
|
}
|
||||||
|
img.onerror = (e) => {
|
||||||
|
console.error('Failed to load SVG for conversion', e)
|
||||||
|
}
|
||||||
|
img.src = svgSource
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Download failed', err)
|
console.error('Download failed', err)
|
||||||
}
|
}
|
||||||
@@ -120,22 +304,88 @@ const triggerDownload = (blob, filename) => {
|
|||||||
<option value="H">High (30%)</option>
|
<option value="H">High (30%)</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>QR Style</label>
|
||||||
|
<select v-model="fgType" class="select-input">
|
||||||
|
<option value="solid">Solid Color</option>
|
||||||
|
<option value="linear">Linear Gradient</option>
|
||||||
|
<option value="radial">Radial Gradient</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>QR Color(s)</label>
|
||||||
|
<div class="color-picker-wrapper">
|
||||||
|
<input type="color" v-model="fgColor1" class="color-input">
|
||||||
|
<input type="color" v-model="fgColor2" v-if="fgType !== 'solid'" class="color-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Background Style</label>
|
||||||
|
<select v-model="bgType" :disabled="isBgTransparent" class="select-input">
|
||||||
|
<option value="solid">Solid Color</option>
|
||||||
|
<option value="linear">Linear Gradient</option>
|
||||||
|
<option value="radial">Radial Gradient</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Background Color(s)</label>
|
||||||
|
<div class="color-picker-wrapper">
|
||||||
|
<input type="color" v-model="bgColor1" :disabled="isBgTransparent" class="color-input">
|
||||||
|
<input type="color" v-model="bgColor2" v-if="bgType !== 'solid'" :disabled="isBgTransparent" class="color-input">
|
||||||
|
<label class="checkbox-label" style="margin-left: 0.5rem">
|
||||||
|
<input type="checkbox" v-model="isBgTransparent"> Transparent
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
||||||
<div class="qr-container">
|
<div class="qr-container">
|
||||||
<div class="qr-frame" v-html="svgContent"></div>
|
<div
|
||||||
|
class="qr-frame"
|
||||||
|
:style="{
|
||||||
|
background: isBgTransparent ? 'white' : bgType === 'solid' ? bgColor1 : (bgType === 'linear' ? `linear-gradient(to bottom right, ${bgColor1}, ${bgColor2})` : `radial-gradient(circle, ${bgColor1}, ${bgColor2})`),
|
||||||
|
cursor: (fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? 'pointer' : 'default'
|
||||||
|
}"
|
||||||
|
@click="handleFrameClick"
|
||||||
|
v-tooltip="(fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? (showHandles ? 'Hide edit handles' : 'Show edit handles') : ''"
|
||||||
|
>
|
||||||
|
<div class="svg-wrapper" ref="qrFrameRef">
|
||||||
|
<div v-html="svgContent" class="svg-content-box"></div>
|
||||||
|
|
||||||
|
<template v-if="showHandles">
|
||||||
|
<!-- Background Gradient Handles -->
|
||||||
|
<template v-if="!isBgTransparent && bgType !== 'solid'">
|
||||||
|
<div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')" @click.stop></div>
|
||||||
|
<div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')" @click.stop></div>
|
||||||
|
<svg class="grad-line-svg"><line :x1="bgLinePts.x1 + '%'" :y1="bgLinePts.y1 + '%'" :x2="bgLinePts.x2 + '%'" :y2="bgLinePts.y2 + '%'" class="bg-line" /></svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Foreground Gradient Handles -->
|
||||||
|
<template v-if="fgType !== 'solid'">
|
||||||
|
<div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')" @click.stop></div>
|
||||||
|
<div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')" @click.stop></div>
|
||||||
|
<svg class="grad-line-svg"><line :x1="fgLinePts.x1 + '%'" :y1="fgLinePts.y1 + '%'" :x2="fgLinePts.x2 + '%'" :y2="fgLinePts.y2 + '%'" class="fg-line" /></svg>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="download-settings">
|
<div class="download-settings">
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label>Size (px)</label>
|
<label>Size (px)</label>
|
||||||
<div class="number-control size-control">
|
<div class="number-control size-control">
|
||||||
<button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
|
<button class="control-btn" @click="size = Math.max(10, size - 100)" v-tooltip="'-100'" v-ripple>-100</button>
|
||||||
<button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
|
<button class="control-btn" @click="size = Math.max(10, size - 10)" v-tooltip="'-10'" v-ripple>-10</button>
|
||||||
<input type="number" v-model.number="size" class="number-input" />
|
<input type="number" v-model.number="size" class="number-input" />
|
||||||
<button class="control-btn" @click="size += 10" title="+10">+10</button>
|
<button class="control-btn" @click="size += 10" v-tooltip="'+10'" v-ripple>+10</button>
|
||||||
<button class="control-btn" @click="size += 100" title="+100">+100</button>
|
<button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -149,7 +399,7 @@ const triggerDownload = (blob, filename) => {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="action-btn download-btn" @click="downloadFile">
|
<button class="btn-neon primary" @click="downloadFile" v-ripple>
|
||||||
<Download size="18" />
|
<Download size="18" />
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
@@ -160,12 +410,6 @@ const triggerDownload = (blob, filename) => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tool-container.full-width {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-panel {
|
.tool-panel {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -211,6 +455,42 @@ const triggerDownload = (blob, filename) => {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-picker-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-input {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid var(--panel-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--panel-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-input:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.checkbox-label input {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.preview-section {
|
.preview-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -232,8 +512,11 @@ const triggerDownload = (blob, filename) => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
container-type: size;
|
container-type: size;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:root[data-theme="light"] .preview-section {
|
:root[data-theme="light"] .preview-section {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
@@ -251,6 +534,57 @@ const triggerDownload = (blob, filename) => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.svg-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-content-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-content-box :deep(svg) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grad-line-svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grad-handle {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: grab;
|
||||||
|
z-index: 10;
|
||||||
|
touch-action: none;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
box-shadow: 0 0 4px 0px rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grad-handle:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fg-line, .bg-line {
|
||||||
|
stroke: rgb(255, 255, 255);
|
||||||
|
stroke-width: 1;
|
||||||
|
filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
.download-settings {
|
.download-settings {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
@@ -261,31 +595,39 @@ const triggerDownload = (blob, filename) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.size-control {
|
.size-control {
|
||||||
min-width: 280px;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.size-control {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.size-control .control-btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.format-select {
|
.format-select {
|
||||||
min-width: 100px !important;
|
min-width: 100px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-btn {
|
@media (max-width: 600px) {
|
||||||
height: 40px;
|
.preview-section {
|
||||||
padding: 0 1.5rem;
|
padding: 1rem 0.5rem;
|
||||||
background: var(--primary-accent);
|
gap: 1rem;
|
||||||
color: #000;
|
border-radius: 8px;
|
||||||
border: none;
|
}
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
.qr-container {
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
aspect-ratio: 1;
|
||||||
gap: 0.5rem;
|
min-height: unset;
|
||||||
cursor: pointer;
|
}
|
||||||
transition: all 0.2s;
|
|
||||||
|
.qr-frame {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-btn:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
|
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
|
||||||
import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
|
import { SwitchCamera, Trash2, Copy, Download, X, QrCode } from 'lucide-vue-next'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { toBase64Url } from '@gkucmierz/utils'
|
||||||
import { useCamera } from '../../composables/useCamera'
|
import { useCamera } from '../../composables/useCamera'
|
||||||
import { useQrDetection } from '../../composables/useQrDetection'
|
import { useQrDetection } from '../../composables/useQrDetection'
|
||||||
|
|
||||||
@@ -12,6 +14,12 @@ const bgCanvas = ref(null)
|
|||||||
let bgRafId = null
|
let bgRafId = null
|
||||||
|
|
||||||
const videoRef = ref(null)
|
const videoRef = ref(null)
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const navigateToGenerateQr = (text) => {
|
||||||
|
const payload = toBase64Url(text)
|
||||||
|
router.push({ name: 'QrCode', params: { payload } })
|
||||||
|
}
|
||||||
const overlayCanvas = ref(null)
|
const overlayCanvas = ref(null)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@@ -307,14 +315,15 @@ const isUrl = (string) => {
|
|||||||
|
|
||||||
<div v-if="error" class="error-overlay">
|
<div v-if="error" class="error-overlay">
|
||||||
<p>{{ error }}</p>
|
<p>{{ error }}</p>
|
||||||
<button @click="startScan" class="retry-btn">Retry</button>
|
<button @click="startScan" class="retry-btn" v-ripple>Retry</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="hasMultipleCameras"
|
v-if="hasMultipleCameras"
|
||||||
class="switch-camera-btn"
|
class="switch-camera-btn"
|
||||||
@click.stop="switchCamera"
|
@click.stop="switchCamera"
|
||||||
title="Switch Camera"
|
v-tooltip="'Switch Camera'"
|
||||||
|
v-ripple
|
||||||
>
|
>
|
||||||
<SwitchCamera size="24" />
|
<SwitchCamera size="24" />
|
||||||
</button>
|
</button>
|
||||||
@@ -324,13 +333,13 @@ const isUrl = (string) => {
|
|||||||
<div class="results-header">
|
<div class="results-header">
|
||||||
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
|
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
|
||||||
<div v-if="scannedCodes.length > 0" class="header-actions">
|
<div v-if="scannedCodes.length > 0" class="header-actions">
|
||||||
<button class="icon-btn" @click="copyAll" title="Copy All">
|
<button class="icon-btn" @click="copyAll" v-tooltip="'Copy All'" v-ripple>
|
||||||
<Copy size="18" />
|
<Copy size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn" @click="downloadJson" title="Download JSON">
|
<button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
|
||||||
<Download size="18" />
|
<Download size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
|
<button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear All'" v-ripple>
|
||||||
<Trash2 size="18" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -349,10 +358,13 @@ const isUrl = (string) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-actions">
|
<div class="item-actions">
|
||||||
<button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
|
<button class="icon-btn" @click="copyToClipboard(code.value)" v-tooltip="'Copy'" v-ripple>
|
||||||
<Copy size="18" />
|
<Copy size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
|
<button class="icon-btn" @click="navigateToGenerateQr(code.value)" v-tooltip="'Generate QR Code'" v-ripple>
|
||||||
|
<QrCode size="18" />
|
||||||
|
</button>
|
||||||
|
<button class="icon-btn delete-btn" @click="removeCode(code.id)" v-tooltip="'Remove'" v-ripple>
|
||||||
<Trash2 size="18" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -369,12 +381,6 @@ const isUrl = (string) => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tool-container.full-width {
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scanner-content {
|
.scanner-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -486,9 +492,11 @@ const isUrl = (string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.switch-camera-btn {
|
.switch-camera-btn {
|
||||||
position: absolute;
|
position: absolute !important;
|
||||||
top: 1rem;
|
top: auto !important;
|
||||||
right: 1rem;
|
left: auto !important;
|
||||||
|
bottom: 0.75rem !important;
|
||||||
|
right: 0.75rem !important;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ onUnmounted(() => {
|
|||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<h2 class="tool-title">URL Cleaner</h2>
|
<h2 class="tool-title">URL Cleaner</h2>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
|
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" v-tooltip="'Cleaning Exceptions'" v-ripple>
|
||||||
<Settings size="20" />
|
<Settings size="20" />
|
||||||
</button>
|
</button>
|
||||||
<ExtensionStatus :isReady="isExtensionReady" />
|
<ExtensionStatus :isReady="isExtensionReady" />
|
||||||
@@ -129,7 +129,7 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="watch-toggle">
|
<div class="watch-toggle">
|
||||||
<button class="btn-neon" @click="handleClean">
|
<button class="btn-neon" @click="handleClean" v-ripple>
|
||||||
Clean
|
Clean
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@@ -137,7 +137,8 @@ onUnmounted(() => {
|
|||||||
:class="{ 'active': isWatchEnabled && isExtensionReady }"
|
:class="{ 'active': isWatchEnabled && isExtensionReady }"
|
||||||
@click="toggleWatch"
|
@click="toggleWatch"
|
||||||
:disabled="!isExtensionReady"
|
:disabled="!isExtensionReady"
|
||||||
:title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
|
v-tooltip="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
|
||||||
|
v-ripple
|
||||||
>
|
>
|
||||||
<Power size="18" />
|
<Power size="18" />
|
||||||
<span>Watch Clipboard</span>
|
<span>Watch Clipboard</span>
|
||||||
@@ -148,15 +149,15 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<div class="history-section" v-if="cleanedHistory.length > 0">
|
<div class="history-section" v-if="cleanedHistory.length > 0">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3>Cleaned URLs</h3>
|
<h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
|
||||||
<div class="history-actions">
|
<div class="history-actions">
|
||||||
<button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
|
<button class="icon-btn" @click="copyAllUrls" v-tooltip="'Copy all URLs'" v-ripple>
|
||||||
<Copy size="18" />
|
<Copy size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn" @click="downloadJson" title="Download JSON">
|
<button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
|
||||||
<Download size="18" />
|
<Download size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
|
<button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear History'" v-ripple>
|
||||||
<Trash2 size="18" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -175,13 +176,13 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-actions">
|
<div class="item-actions">
|
||||||
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
|
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
|
||||||
<Copy size="18" />
|
<Copy size="16" />
|
||||||
</button>
|
</button>
|
||||||
<a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
|
<a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
|
||||||
<ExternalLink size="18" />
|
<ExternalLink size="16" />
|
||||||
</a>
|
</a>
|
||||||
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
|
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" v-tooltip="'Remove'" v-ripple>
|
||||||
<X size="18" />
|
<X size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -205,13 +206,6 @@ onUnmounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tool-container.full-width {
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-section {
|
.input-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
const newRule = ref({
|
const newRule = ref({
|
||||||
domainPattern: '',
|
domainPattern: '',
|
||||||
keepParams: '',
|
keepParams: [],
|
||||||
keepHash: false,
|
keepHash: false,
|
||||||
keepAllParams: false
|
keepAllParams: false
|
||||||
})
|
})
|
||||||
@@ -43,10 +43,12 @@ const localExceptions = computed({
|
|||||||
const addRule = () => {
|
const addRule = () => {
|
||||||
if (!newRule.value.domainPattern) return
|
if (!newRule.value.domainPattern) return
|
||||||
|
|
||||||
const params = newRule.value.keepParams
|
// Flush any pending text in the param input before adding rule
|
||||||
.split(',')
|
if (pendingParamInput.value.trim()) {
|
||||||
.map(p => p.trim())
|
addPendingParam(pendingParamInput.value)
|
||||||
.filter(p => p)
|
}
|
||||||
|
|
||||||
|
const params = [...newRule.value.keepParams]
|
||||||
|
|
||||||
const existingRuleIndex = localExceptions.value.findIndex(
|
const existingRuleIndex = localExceptions.value.findIndex(
|
||||||
r => r.domainPattern === newRule.value.domainPattern
|
r => r.domainPattern === newRule.value.domainPattern
|
||||||
@@ -92,19 +94,48 @@ const addRule = () => {
|
|||||||
// Reset form
|
// Reset form
|
||||||
newRule.value = {
|
newRule.value = {
|
||||||
domainPattern: '',
|
domainPattern: '',
|
||||||
keepParams: '',
|
keepParams: [],
|
||||||
keepHash: false,
|
keepHash: false,
|
||||||
keepAllParams: false
|
keepAllParams: false
|
||||||
}
|
}
|
||||||
|
pendingParamInput.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const pendingParamInput = ref('')
|
||||||
|
|
||||||
|
const handleParamInputKeydown = (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
|
||||||
|
e.preventDefault()
|
||||||
|
addPendingParam(pendingParamInput.value)
|
||||||
|
} else if (e.key === 'Backspace' && pendingParamInput.value === '') {
|
||||||
|
// Remove last param if backspace is pressed on empty input
|
||||||
|
if (newRule.value.keepParams.length > 0) {
|
||||||
|
newRule.value.keepParams.pop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addPendingParam = (val) => {
|
||||||
|
const cleanVals = val.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
|
||||||
|
if (cleanVals.length > 0) {
|
||||||
|
const updatedParams = [...new Set([...newRule.value.keepParams, ...cleanVals])]
|
||||||
|
newRule.value.keepParams = updatedParams
|
||||||
|
}
|
||||||
|
pendingParamInput.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeNewRuleParam = (paramToRemove) => {
|
||||||
|
newRule.value.keepParams = newRule.value.keepParams.filter(p => p !== paramToRemove)
|
||||||
}
|
}
|
||||||
|
|
||||||
const editRule = (rule) => {
|
const editRule = (rule) => {
|
||||||
newRule.value = {
|
newRule.value = {
|
||||||
domainPattern: rule.domainPattern,
|
domainPattern: rule.domainPattern,
|
||||||
keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
|
keepParams: Array.isArray(rule.keepParams) ? [...rule.keepParams] : [],
|
||||||
keepHash: !!rule.keepHash,
|
keepHash: !!rule.keepHash,
|
||||||
keepAllParams: !!rule.keepAllParams
|
keepAllParams: !!rule.keepAllParams
|
||||||
}
|
}
|
||||||
|
pendingParamInput.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeRule = (id) => {
|
const removeRule = (id) => {
|
||||||
@@ -172,7 +203,7 @@ const resetToDefault = (ruleId) => {
|
|||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
|
<div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
|
||||||
<div class="modal-content">
|
<div class="modal-content glass-panel">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>URL Cleaning Exceptions</h3>
|
<h3>URL Cleaning Exceptions</h3>
|
||||||
<button class="close-btn" @click="$emit('close')">
|
<button class="close-btn" @click="$emit('close')">
|
||||||
@@ -195,25 +226,35 @@ const resetToDefault = (ruleId) => {
|
|||||||
class="input-field"
|
class="input-field"
|
||||||
@keyup.enter="addRule"
|
@keyup.enter="addRule"
|
||||||
>
|
>
|
||||||
<input
|
<div class="token-input-field input-field" @click="$refs.paramInput?.focus()">
|
||||||
v-model="newRule.keepParams"
|
<span v-for="param in newRule.keepParams" :key="param" class="token-badge">
|
||||||
placeholder="Keep params (comma separated, e.g. v, id)"
|
{{ param }}
|
||||||
class="input-field"
|
<button class="remove-token-btn" @click.stop="removeNewRuleParam(param)">
|
||||||
@keyup.enter="addRule"
|
<X size="12" />
|
||||||
>
|
</button>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
ref="paramInput"
|
||||||
|
v-model="pendingParamInput"
|
||||||
|
placeholder="Params (Space, Comma or Enter to add)"
|
||||||
|
class="token-raw-input"
|
||||||
|
@keydown="handleParamInputKeydown"
|
||||||
|
@blur="addPendingParam(pendingParamInput)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row checkbox-row">
|
<div class="form-row checkbox-row">
|
||||||
<div class="checkbox-group">
|
<div class="checkbox-group">
|
||||||
<label class="checkbox-label">
|
<label class="checkbox-label" v-ripple>
|
||||||
<input type="checkbox" v-model="newRule.keepHash">
|
<input type="checkbox" v-model="newRule.keepHash">
|
||||||
Keep Anchor (#)
|
Keep Anchor (#)
|
||||||
</label>
|
</label>
|
||||||
<label class="checkbox-label">
|
<label class="checkbox-label" v-ripple>
|
||||||
<input type="checkbox" v-model="newRule.keepAllParams">
|
<input type="checkbox" v-model="newRule.keepAllParams">
|
||||||
Keep all params
|
Keep all params
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
|
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern" v-ripple>
|
||||||
<Plus size="16" /> Add Rule
|
<Plus size="16" /> Add Rule
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -227,13 +268,13 @@ const resetToDefault = (ruleId) => {
|
|||||||
|
|
||||||
<div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
|
<div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
|
||||||
<div class="rule-info">
|
<div class="rule-info">
|
||||||
<div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
|
<div class="rule-domain" @click="editRule(rule)" v-tooltip="'Click to edit'">{{ rule.domainPattern }}</div>
|
||||||
<div class="rule-details">
|
<div class="rule-details">
|
||||||
<div class="params-list">
|
<div class="params-list">
|
||||||
<template v-if="rule.keepAllParams">
|
<template v-if="rule.keepAllParams">
|
||||||
<span class="detail-tag">
|
<span class="detail-tag">
|
||||||
Keep all params
|
Keep all params
|
||||||
<button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
|
<button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" v-tooltip="'Disable keep all params'">
|
||||||
<X size="12" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
@@ -241,14 +282,14 @@ const resetToDefault = (ruleId) => {
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<span v-for="param in rule.keepParams" :key="param" class="detail-tag">
|
<span v-for="param in rule.keepParams" :key="param" class="detail-tag">
|
||||||
{{ param }}
|
{{ param }}
|
||||||
<button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
|
<button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" v-tooltip="'Remove parameter'">
|
||||||
<X size="12" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-if="rule.keepHash" class="detail-tag hash-tag">
|
<span v-if="rule.keepHash" class="detail-tag hash-tag">
|
||||||
Keep #
|
Keep #
|
||||||
<button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
|
<button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" v-tooltip="'Remove hash exception'">
|
||||||
<X size="12" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
@@ -261,7 +302,8 @@ const resetToDefault = (ruleId) => {
|
|||||||
<button
|
<button
|
||||||
class="icon-btn"
|
class="icon-btn"
|
||||||
@click="toggleRule(rule.id)"
|
@click="toggleRule(rule.id)"
|
||||||
:title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
|
v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
|
||||||
|
v-ripple
|
||||||
>
|
>
|
||||||
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
|
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
|
||||||
</button>
|
</button>
|
||||||
@@ -270,11 +312,12 @@ const resetToDefault = (ruleId) => {
|
|||||||
v-if="!rule.isDefault"
|
v-if="!rule.isDefault"
|
||||||
class="icon-btn delete-btn"
|
class="icon-btn delete-btn"
|
||||||
@click="removeRule(rule.id)"
|
@click="removeRule(rule.id)"
|
||||||
title="Remove rule"
|
v-tooltip="'Remove rule'"
|
||||||
|
v-ripple
|
||||||
>
|
>
|
||||||
<Trash2 size="18" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
|
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" v-tooltip="'Restore default rule'" v-ripple>
|
||||||
<RotateCcw size="16" /> Default
|
<RotateCcw size="16" /> Default
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -303,10 +346,6 @@ const resetToDefault = (ruleId) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
-webkit-backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
@@ -314,7 +353,6 @@ const resetToDefault = (ruleId) => {
|
|||||||
max-height: 85vh;
|
max-height: 85vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-shadow: var(--glass-shadow);
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -439,10 +477,63 @@ const resetToDefault = (ruleId) => {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-field:focus {
|
.input-field:focus, .token-input-field:focus-within {
|
||||||
border-color: var(--primary-accent);
|
border-color: var(--primary-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.token-input-field {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-raw-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 150px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
outline: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-raw-input:focus {
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
background: rgba(var(--primary-accent-rgb), 0.15);
|
||||||
|
border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
|
||||||
|
color: var(--primary-accent);
|
||||||
|
padding: 0.15rem 0.4rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-token-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-token-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-label {
|
.checkbox-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -450,6 +541,31 @@ const resetToDefault = (ruleId) => {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
background: var(--toggle-bg);
|
||||||
|
border: 1px solid var(--toggle-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label:hover {
|
||||||
|
border-color: var(--toggle-hover-border);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label:has(input:checked) {
|
||||||
|
background: rgba(var(--primary-accent-rgb), 0.2);
|
||||||
|
border-color: var(--primary-accent);
|
||||||
|
color: var(--primary-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-neon.small {
|
.btn-neon.small {
|
||||||
@@ -505,16 +621,7 @@ const resetToDefault = (ruleId) => {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-tag {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0.2rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-param-btn {
|
.remove-param-btn {
|
||||||
background: none;
|
background: none;
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
|
<div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" v-tooltip="isReady ? 'Extension Connected' : 'Extension Not Connected'">
|
||||||
<Plug v-if="isReady" size="18" />
|
<Plug v-if="isReady" size="18" />
|
||||||
<Plus v-else size="18" />
|
<Plus v-else size="18" />
|
||||||
</div>
|
</div>
|
||||||
@@ -76,7 +76,7 @@ onUnmounted(() => {
|
|||||||
The extension is active and ready to process your clipboard in the background.
|
The extension is active and ready to process your clipboard in the background.
|
||||||
</p>
|
</p>
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button class="btn-neon" @click="showModal = false">Got it!</button>
|
<button class="btn-neon" @click="showModal = false" v-ripple>Got it!</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,16 +132,11 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
-webkit-backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: var(--glass-shadow);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ export function useExtension() {
|
|||||||
extensionCheckInterval = setInterval(() => {
|
extensionCheckInterval = setInterval(() => {
|
||||||
window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
|
window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
|
||||||
if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
|
if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
|
||||||
isExtensionReady.value = false
|
isExtensionReady.value = false
|
||||||
}
|
}
|
||||||
}, PING_INTERVAL)
|
}, PING_INTERVAL)
|
||||||
}
|
}
|
||||||
|
|||||||
34
src/composables/useTooltip.js
Normal file
34
src/composables/useTooltip.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
|
export const tooltipState = reactive({
|
||||||
|
isVisible: false,
|
||||||
|
text: '',
|
||||||
|
targetRect: null
|
||||||
|
})
|
||||||
|
|
||||||
|
export function showTooltip(el, text) {
|
||||||
|
if (!text) return;
|
||||||
|
|
||||||
|
if (!el.hasAttribute('aria-label')) {
|
||||||
|
el.setAttribute('aria-label', text);
|
||||||
|
}
|
||||||
|
|
||||||
|
const rect = el.getBoundingClientRect();
|
||||||
|
tooltipState.targetRect = {
|
||||||
|
top: rect.top,
|
||||||
|
left: rect.left,
|
||||||
|
width: rect.width,
|
||||||
|
bottom: rect.bottom
|
||||||
|
};
|
||||||
|
tooltipState.text = text;
|
||||||
|
tooltipState.isVisible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide tooltip on any scroll event to avoid floating detached tooltips
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hideTooltip() {
|
||||||
|
tooltipState.isVisible = false;
|
||||||
|
}
|
||||||
@@ -1,115 +1,115 @@
|
|||||||
import { useLocalStorage } from './useLocalStorage'
|
import { useLocalStorage } from './useLocalStorage'
|
||||||
|
|
||||||
export function useUrlCleaner() {
|
export function useUrlCleaner() {
|
||||||
const cleanedHistory = useLocalStorage('url-cleaner-history', [])
|
const cleanedHistory = useLocalStorage('url-cleaner-history', [])
|
||||||
const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
|
const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
|
||||||
|
|
||||||
const defaultExceptions = [
|
const defaultExceptions = [
|
||||||
{ id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
|
{ id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
|
||||||
{ id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
|
{ id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
|
||||||
]
|
]
|
||||||
const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
|
const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
|
||||||
|
|
||||||
const matchDomain = (pattern, domain) => {
|
const matchDomain = (pattern, domain) => {
|
||||||
// Escape regex chars except *
|
// Escape regex chars except *
|
||||||
const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
|
const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
|
||||||
return new RegExp(regexString, 'i').test(domain)
|
return new RegExp(regexString, 'i').test(domain)
|
||||||
}
|
}
|
||||||
|
|
||||||
const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
|
const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
|
||||||
try {
|
try {
|
||||||
// Basic URL validation
|
// Basic URL validation
|
||||||
if (!text.match(/^https?:\/\//i)) {
|
if (!text.match(/^https?:\/\//i)) {
|
||||||
if (autoClipboard) return text
|
if (autoClipboard) return text
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalLength = text.length
|
||||||
|
let cleanedUrl = text
|
||||||
|
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(text)
|
||||||
|
const hostname = urlObj.hostname
|
||||||
|
|
||||||
|
const matchedRule = exceptions.value.find(rule =>
|
||||||
|
rule.isEnabled && matchDomain(rule.domainPattern, hostname)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (matchedRule) {
|
||||||
|
if (!matchedRule.keepAllParams) {
|
||||||
|
const params = new URLSearchParams(urlObj.search)
|
||||||
|
const keys = Array.from(params.keys())
|
||||||
|
|
||||||
|
for (const key of keys) {
|
||||||
|
if (!matchedRule.keepParams.includes(key)) {
|
||||||
|
params.delete(key)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
urlObj.search = params.toString()
|
||||||
|
}
|
||||||
|
|
||||||
const originalLength = text.length
|
if (!matchedRule.keepHash) {
|
||||||
let cleanedUrl = text
|
urlObj.hash = ''
|
||||||
|
}
|
||||||
try {
|
} else {
|
||||||
const urlObj = new URL(text)
|
if (urlObj.search || urlObj.hash) {
|
||||||
const hostname = urlObj.hostname
|
urlObj.search = ''
|
||||||
|
urlObj.hash = ''
|
||||||
const matchedRule = exceptions.value.find(rule =>
|
}
|
||||||
rule.isEnabled && matchDomain(rule.domainPattern, hostname)
|
|
||||||
)
|
|
||||||
|
|
||||||
if (matchedRule) {
|
|
||||||
if (!matchedRule.keepAllParams) {
|
|
||||||
const params = new URLSearchParams(urlObj.search)
|
|
||||||
const keys = Array.from(params.keys())
|
|
||||||
|
|
||||||
for (const key of keys) {
|
|
||||||
if (!matchedRule.keepParams.includes(key)) {
|
|
||||||
params.delete(key)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
urlObj.search = params.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!matchedRule.keepHash) {
|
|
||||||
urlObj.hash = ''
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (urlObj.search || urlObj.hash) {
|
|
||||||
urlObj.search = ''
|
|
||||||
urlObj.hash = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanedUrl = urlObj.toString()
|
|
||||||
} catch (e) {
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cleanedUrl === text && autoClipboard) {
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
|
|
||||||
const newLength = cleanedUrl.length
|
|
||||||
const savedChars = originalLength - newLength
|
|
||||||
const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
|
|
||||||
|
|
||||||
const entry = {
|
|
||||||
id: Date.now(),
|
|
||||||
original: text,
|
|
||||||
cleaned: cleanedUrl,
|
|
||||||
savedPercent,
|
|
||||||
timestamp: new Date().toLocaleTimeString()
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanedHistory.value.unshift(entry)
|
|
||||||
|
|
||||||
if (cleanedHistory.value.length > 50) {
|
|
||||||
cleanedHistory.value.pop()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (autoClipboard && savedChars > 0 && writeClipboardFn) {
|
|
||||||
writeClipboardFn(cleanedUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
return cleanedUrl
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error processing URL:', e)
|
|
||||||
return text
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const removeEntry = (id) => {
|
cleanedUrl = urlObj.toString()
|
||||||
cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
|
} catch (e) {
|
||||||
}
|
return text
|
||||||
|
}
|
||||||
|
|
||||||
const clearHistory = () => {
|
if (cleanedUrl === text && autoClipboard) {
|
||||||
cleanedHistory.value = []
|
return text
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
const newLength = cleanedUrl.length
|
||||||
cleanedHistory,
|
const savedChars = originalLength - newLength
|
||||||
isWatchEnabled,
|
const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
|
||||||
exceptions,
|
|
||||||
defaultExceptions,
|
const entry = {
|
||||||
processUrl,
|
id: Date.now(),
|
||||||
removeEntry,
|
original: text,
|
||||||
clearHistory
|
cleaned: cleanedUrl,
|
||||||
|
savedPercent,
|
||||||
|
timestamp: new Date().toLocaleTimeString()
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanedHistory.value.unshift(entry)
|
||||||
|
|
||||||
|
if (cleanedHistory.value.length > 50) {
|
||||||
|
cleanedHistory.value.pop()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (autoClipboard && savedChars > 0 && writeClipboardFn) {
|
||||||
|
writeClipboardFn(cleanedUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
return cleanedUrl
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error processing URL:', e)
|
||||||
|
return text
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeEntry = (id) => {
|
||||||
|
cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
cleanedHistory.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
cleanedHistory,
|
||||||
|
isWatchEnabled,
|
||||||
|
exceptions,
|
||||||
|
defaultExceptions,
|
||||||
|
processUrl,
|
||||||
|
removeEntry,
|
||||||
|
clearHistory
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const Ripple = {
|
|||||||
|
|
||||||
// Allow custom color via directive value
|
// Allow custom color via directive value
|
||||||
if (binding.value && typeof binding.value === 'string') {
|
if (binding.value && typeof binding.value === 'string') {
|
||||||
circle.style.backgroundColor = binding.value;
|
circle.style.backgroundColor = binding.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
el.appendChild(circle);
|
el.appendChild(circle);
|
||||||
|
|||||||
84
src/directives/tooltip.js
Normal file
84
src/directives/tooltip.js
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
|
||||||
|
|
||||||
|
export const tooltipDirective = {
|
||||||
|
mounted(el, binding) {
|
||||||
|
el._tooltipText = binding.value;
|
||||||
|
let touchTimeout = null;
|
||||||
|
let isTouch = false;
|
||||||
|
|
||||||
|
el._handleMouseEnter = () => {
|
||||||
|
if (!isTouch) showTooltip(el, el._tooltipText);
|
||||||
|
};
|
||||||
|
el._handleMouseLeave = () => {
|
||||||
|
if (!isTouch) hideTooltip();
|
||||||
|
};
|
||||||
|
el._handleFocus = () => {
|
||||||
|
if (!isTouch) showTooltip(el, el._tooltipText);
|
||||||
|
};
|
||||||
|
el._handleBlur = () => {
|
||||||
|
if (!isTouch) hideTooltip();
|
||||||
|
};
|
||||||
|
|
||||||
|
el._handleTouchStart = () => {
|
||||||
|
isTouch = true;
|
||||||
|
if (touchTimeout) clearTimeout(touchTimeout);
|
||||||
|
touchTimeout = setTimeout(() => {
|
||||||
|
showTooltip(el, el._tooltipText);
|
||||||
|
}, 400); // 400ms long press threshold
|
||||||
|
};
|
||||||
|
|
||||||
|
el._handleTouchEnd = () => {
|
||||||
|
if (touchTimeout) clearTimeout(touchTimeout);
|
||||||
|
hideTooltip();
|
||||||
|
// Block ensuing simulated mouseenter events
|
||||||
|
setTimeout(() => { isTouch = false; }, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
el._handleTouchCancel = () => {
|
||||||
|
if (touchTimeout) clearTimeout(touchTimeout);
|
||||||
|
hideTooltip();
|
||||||
|
setTimeout(() => { isTouch = false; }, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
el._handleContextMenu = (e) => {
|
||||||
|
// Prevent the OS context menu if we're showing a tooltip via long press
|
||||||
|
if (isTouch && tooltipState.isVisible && tooltipState.text === el._tooltipText) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
el.addEventListener('mouseenter', el._handleMouseEnter);
|
||||||
|
el.addEventListener('mouseleave', el._handleMouseLeave);
|
||||||
|
el.addEventListener('focus', el._handleFocus);
|
||||||
|
el.addEventListener('blur', el._handleBlur);
|
||||||
|
|
||||||
|
el.addEventListener('touchstart', el._handleTouchStart, { passive: true });
|
||||||
|
el.addEventListener('touchend', el._handleTouchEnd);
|
||||||
|
el.addEventListener('touchmove', el._handleTouchCancel, { passive: true });
|
||||||
|
el.addEventListener('touchcancel', el._handleTouchCancel);
|
||||||
|
el.addEventListener('contextmenu', el._handleContextMenu);
|
||||||
|
},
|
||||||
|
updated(el, binding) {
|
||||||
|
el._tooltipText = binding.value;
|
||||||
|
|
||||||
|
if (tooltipState.isVisible && tooltipState.text !== binding.value) {
|
||||||
|
if (el.matches(':hover') || document.activeElement === el) {
|
||||||
|
showTooltip(el, binding.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unmounted(el) {
|
||||||
|
if (el._handleMouseEnter) {
|
||||||
|
el.removeEventListener('mouseenter', el._handleMouseEnter);
|
||||||
|
el.removeEventListener('mouseleave', el._handleMouseLeave);
|
||||||
|
el.removeEventListener('focus', el._handleFocus);
|
||||||
|
el.removeEventListener('blur', el._handleBlur);
|
||||||
|
el.removeEventListener('touchstart', el._handleTouchStart);
|
||||||
|
el.removeEventListener('touchend', el._handleTouchEnd);
|
||||||
|
el.removeEventListener('touchmove', el._handleTouchCancel);
|
||||||
|
el.removeEventListener('touchcancel', el._handleTouchCancel);
|
||||||
|
el.removeEventListener('contextmenu', el._handleContextMenu);
|
||||||
|
}
|
||||||
|
hideTooltip();
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -3,6 +3,7 @@ import './style.css'
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import Ripple from './directives/ripple'
|
import Ripple from './directives/ripple'
|
||||||
|
import { tooltipDirective } from './directives/tooltip'
|
||||||
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
|
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
|
||||||
|
|
||||||
// Configure BarcodeDetector polyfill to use local WASM file
|
// Configure BarcodeDetector polyfill to use local WASM file
|
||||||
@@ -28,5 +29,6 @@ try {
|
|||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.directive('ripple', Ripple)
|
app.directive('ripple', Ripple)
|
||||||
|
app.directive('tooltip', tooltipDirective)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ const routes = [
|
|||||||
component: QrScanner
|
component: QrScanner
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/qr-code',
|
path: '/qr-code/:payload?',
|
||||||
name: 'QrCode',
|
name: 'QrCode',
|
||||||
component: QrCode
|
component: QrCode
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -47,12 +47,6 @@
|
|||||||
--list-border: rgba(255, 255, 255, 0.12);
|
--list-border: rgba(255, 255, 255, 0.12);
|
||||||
--header-bg: rgba(0, 0, 0, 0.6);
|
--header-bg: rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
color: var(--text-color);
|
|
||||||
background-color: #242424;
|
|
||||||
/* Fallback */
|
|
||||||
background: var(--bg-gradient);
|
|
||||||
background-attachment: fixed;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
@@ -60,9 +54,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme="light"] {
|
:root[data-theme="light"] {
|
||||||
--bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
|
--bg-gradient: radial-gradient(circle at center, #ffffff 0%, #ddd 100%);
|
||||||
--glass-bg: rgba(255, 255, 255, 0.85);
|
--glass-bg: rgba(255, 255, 255, 0.45);
|
||||||
--glass-border: rgba(15, 23, 42, 0.12);
|
--glass-border: rgba(15, 23, 42, 0.2);
|
||||||
--glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
|
--glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
|
||||||
--text-color: #0f172a;
|
--text-color: #0f172a;
|
||||||
--text-strong: #020617;
|
--text-strong: #020617;
|
||||||
@@ -102,6 +96,12 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--bg-gradient);
|
||||||
|
/* fallback but works if variable contains simple color */
|
||||||
|
background: var(--bg-gradient);
|
||||||
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectable {
|
.selectable {
|
||||||
@@ -143,6 +143,10 @@ body {
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tool-container.full-width {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.tool-panel {
|
.tool-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@@ -208,6 +212,12 @@ body {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
opacity: 1;
|
||||||
|
/* Override Firefox default opacity */
|
||||||
|
}
|
||||||
|
|
||||||
.tool-textarea {
|
.tool-textarea {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
resize: none;
|
resize: none;
|
||||||
@@ -302,6 +312,24 @@ button:focus {
|
|||||||
border-color: var(--accent-cyan);
|
border-color: var(--accent-cyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-neon.primary {
|
||||||
|
background: var(--primary-accent);
|
||||||
|
color: #000;
|
||||||
|
border-color: var(--primary-accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-neon.primary:hover {
|
||||||
|
background: var(--primary-accent);
|
||||||
|
opacity: 0.9;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] .btn-neon.primary:hover {
|
||||||
|
box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-neon:active {
|
.btn-neon:active {
|
||||||
transform: translateY(1px);
|
transform: translateY(1px);
|
||||||
box-shadow: var(--button-active-shadow);
|
box-shadow: var(--button-active-shadow);
|
||||||
@@ -360,12 +388,20 @@ button:focus {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:focus-visible,
|
||||||
|
a:focus-visible {
|
||||||
|
outline: 2px solid var(--primary-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
input:focus,
|
input:focus,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
.number-control:focus-within {
|
.number-control:focus-within {
|
||||||
border-color: var(--primary-accent) !important;
|
border-color: var(--primary-accent) !important;
|
||||||
box-shadow: 0 0 0 1px var(--primary-accent) !important;
|
box-shadow: 0 0 0 1px var(--primary-accent) !important;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Global Checkbox Styles --- */
|
/* --- Global Checkbox Styles --- */
|
||||||
@@ -505,6 +541,19 @@ textarea:focus,
|
|||||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-tag {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
background: var(--list-hover-bg);
|
||||||
|
border: 1px solid var(--list-border);
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- Global Number Control Styles --- */
|
/* --- Global Number Control Styles --- */
|
||||||
.number-control {
|
.number-control {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -513,7 +562,10 @@ textarea:focus,
|
|||||||
border: 1px solid var(--toggle-border);
|
border: 1px solid var(--toggle-border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 40px;
|
height: auto;
|
||||||
|
min-height: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* allow wrapping on very small screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-btn {
|
.control-btn {
|
||||||
@@ -541,11 +593,12 @@ textarea:focus,
|
|||||||
border: none;
|
border: none;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 60px;
|
min-width: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
|
padding: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number-input::-webkit-outer-spin-button,
|
.number-input::-webkit-outer-spin-button,
|
||||||
|
|||||||
66
src/workers/qrcode.worker.js
Normal file
66
src/workers/qrcode.worker.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import QRCode from 'qrcode'
|
||||||
|
|
||||||
|
self.onmessage = async (e) => {
|
||||||
|
const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos } = e.data
|
||||||
|
|
||||||
|
if (!text) {
|
||||||
|
self.postMessage({ id, svgContent: '' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
let svgContent = await QRCode.toString(text, {
|
||||||
|
type: 'svg',
|
||||||
|
errorCorrectionLevel: ecc,
|
||||||
|
margin: 1,
|
||||||
|
color: {
|
||||||
|
dark: fgType === 'solid' ? fgColor1 : '#000000',
|
||||||
|
light: isBgTransparent ? '#00000000' : (bgType === 'solid' ? bgColor1 : '#00000000')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let defsHtml = ''
|
||||||
|
|
||||||
|
if (fgType !== 'solid') {
|
||||||
|
const isLinear = fgType === 'linear'
|
||||||
|
const pos = fgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
|
||||||
|
const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
|
||||||
|
defsHtml += isLinear
|
||||||
|
? `<linearGradient id="qr-fg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
|
||||||
|
: `<radialGradient id="qr-fg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isBgTransparent && bgType !== 'solid') {
|
||||||
|
const isLinear = bgType === 'linear'
|
||||||
|
const pos = bgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
|
||||||
|
const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
|
||||||
|
defsHtml += isLinear
|
||||||
|
? `<linearGradient id="qr-bg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
|
||||||
|
: `<radialGradient id="qr-bg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (defsHtml) {
|
||||||
|
svgContent = svgContent.replace('shape-rendering="crispEdges">', `shape-rendering="crispEdges"><defs>${defsHtml}</defs>`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fgType !== 'solid') {
|
||||||
|
// qrcode outputs <path stroke="#000000"...> so it's safe to replace
|
||||||
|
svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-fg-grad)"')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isBgTransparent && bgType !== 'solid') {
|
||||||
|
// Find viewBox to inject background rect
|
||||||
|
const viewBoxMatch = svgContent.match(/viewBox="0 0 (\d+) (\d+)"/)
|
||||||
|
if (viewBoxMatch) {
|
||||||
|
const w = viewBoxMatch[1]
|
||||||
|
const h = viewBoxMatch[2]
|
||||||
|
// Inject a rect immediately inside the svg
|
||||||
|
svgContent = svgContent.replace('</defs>', `</defs><rect width="${w}" height="${h}" fill="url(#qr-bg-grad)" />`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
self.postMessage({ id, svgContent })
|
||||||
|
} catch (err) {
|
||||||
|
self.postMessage({ id, error: err.message })
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user