44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bump Vue to latest and fix universal selector CSS

Browse Source 
This commit updates the Vue package from v3.4.21 to v3.4.27.

This version change addressed styling issues introduced by changes in
CSS universal selector handling in Vue 3.4.22.
The change that has caused this:
- vuejs/core#10551
- vuejs/core#10548
- vuejs/core@54a6afa75a

This commit fixes two main issues that this has led to:

1. Universal CSS selector causing 'Revert' buttons to stretch and
   truncate incorrectly.
   This is fixed by modifying selectors to apply styles more
   specifically, maintaining correct display of toggle buttons.
2. Universal `*` selector that's used to understand parent HTML
   structure causing information tooltip icons to be misaligned.
   This is fixed by replacing `*` with a new `InfoTooltipWrapper`
   component, which manages layout concerns more explicitly and
   maintainably.
This commit is contained in:
undergroundwires
2024-05-19 15:02:38 +02:00
parent 2390530d92
commit aae5434451
9 changed files with 305 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
package-lock.json generated
View File

@@ -6,7 +6,7 @@
"packages": { "packages": {
"": { "": {
"name": "privacy.sexy", "name": "privacy.sexy",
"version": "0.13.2", "version": "0.13.3",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@floating-ui/vue": "^1.0.6", "@floating-ui/vue": "^1.0.6",
@@ -17,7 +17,7 @@
"electron-updater": "^6.1.9", "electron-updater": "^6.1.9",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"vue": "^3.4.21" "vue": "^3.4.27"
}, },
"devDependencies": { "devDependencies": {
"@modyfi/vite-plugin-yaml": "^1.1.0", "@modyfi/vite-plugin-yaml": "^1.1.0",
@@ -522,9 +522,9 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.24.0", "version": "7.24.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
"integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
}, },
@@ -3947,49 +3947,49 @@
} }
}, },
"node_modules/@vue/compiler-core": { "node_modules/@vue/compiler-core": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
"integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==", "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.23.9", "@babel/parser": "^7.24.4",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"entities": "^4.5.0", "entities": "^4.5.0",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map-js": "^1.0.2" "source-map-js": "^1.2.0"
} }
}, },
"node_modules/@vue/compiler-dom": { "node_modules/@vue/compiler-dom": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
"integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==", "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
"dependencies": { "dependencies": {
"@vue/compiler-core": "3.4.21", "@vue/compiler-core": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"node_modules/@vue/compiler-sfc": { "node_modules/@vue/compiler-sfc": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz",
"integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==", "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.23.9", "@babel/parser": "^7.24.4",
"@vue/compiler-core": "3.4.21", "@vue/compiler-core": "3.4.27",
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/compiler-ssr": "3.4.21", "@vue/compiler-ssr": "3.4.27",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.30.7", "magic-string": "^0.30.10",
"postcss": "^8.4.35", "postcss": "^8.4.38",
"source-map-js": "^1.0.2" "source-map-js": "^1.2.0"
} }
}, },
"node_modules/@vue/compiler-ssr": { "node_modules/@vue/compiler-ssr": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
"integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==", "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"node_modules/@vue/eslint-config-airbnb": { "node_modules/@vue/eslint-config-airbnb": {
@@ -4099,48 +4099,48 @@
} }
}, },
"node_modules/@vue/reactivity": { "node_modules/@vue/reactivity": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
"integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==", "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==",
"dependencies": { "dependencies": {
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"node_modules/@vue/runtime-core": { "node_modules/@vue/runtime-core": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz",
"integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==", "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==",
"dependencies": { "dependencies": {
"@vue/reactivity": "3.4.21", "@vue/reactivity": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"node_modules/@vue/runtime-dom": { "node_modules/@vue/runtime-dom": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz",
"integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==", "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==",
"dependencies": { "dependencies": {
"@vue/runtime-core": "3.4.21", "@vue/runtime-core": "3.4.27",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"csstype": "^3.1.3" "csstype": "^3.1.3"
} }
}, },
"node_modules/@vue/server-renderer": { "node_modules/@vue/server-renderer": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz",
"integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==", "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==",
"dependencies": { "dependencies": {
"@vue/compiler-ssr": "3.4.21", "@vue/compiler-ssr": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "3.4.21" "vue": "3.4.27"
} }
}, },
"node_modules/@vue/shared": { "node_modules/@vue/shared": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==" "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
}, },
"node_modules/@vue/test-utils": { "node_modules/@vue/test-utils": {
"version": "2.4.5", "version": "2.4.5",
@@ -10777,14 +10777,11 @@
} }
}, },
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.30.8", "version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
"integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15" "@jridgewell/sourcemap-codec": "^1.4.15"
},
"engines": {
"node": ">=12"
} }
}, },
"node_modules/map-age-cleaner": { "node_modules/map-age-cleaner": {
@@ -16982,15 +16979,15 @@
} }
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
"integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==", "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/compiler-sfc": "3.4.21", "@vue/compiler-sfc": "3.4.27",
"@vue/runtime-dom": "3.4.21", "@vue/runtime-dom": "3.4.27",
"@vue/server-renderer": "3.4.21", "@vue/server-renderer": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
}, },
"peerDependencies": { "peerDependencies": {
"typescript": "*" "typescript": "*"
@@ -17918,9 +17915,9 @@
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.24.0", "version": "7.24.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
"integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==" "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg=="
}, },
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
"version": "7.23.3", "version": "7.23.3",
@@ -20277,49 +20274,49 @@
} }
}, },
"@vue/compiler-core": { "@vue/compiler-core": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
"integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==", "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
"requires": { "requires": {
"@babel/parser": "^7.23.9", "@babel/parser": "^7.24.4",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"entities": "^4.5.0", "entities": "^4.5.0",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map-js": "^1.0.2" "source-map-js": "^1.2.0"
} }
}, },
"@vue/compiler-dom": { "@vue/compiler-dom": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
"integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==", "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
"requires": { "requires": {
"@vue/compiler-core": "3.4.21", "@vue/compiler-core": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"@vue/compiler-sfc": { "@vue/compiler-sfc": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz",
"integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==", "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==",
"requires": { "requires": {
"@babel/parser": "^7.23.9", "@babel/parser": "^7.24.4",
"@vue/compiler-core": "3.4.21", "@vue/compiler-core": "3.4.27",
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/compiler-ssr": "3.4.21", "@vue/compiler-ssr": "3.4.27",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.30.7", "magic-string": "^0.30.10",
"postcss": "^8.4.35", "postcss": "^8.4.38",
"source-map-js": "^1.0.2" "source-map-js": "^1.2.0"
} }
}, },
"@vue/compiler-ssr": { "@vue/compiler-ssr": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
"integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==", "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
"requires": { "requires": {
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"@vue/eslint-config-airbnb": { "@vue/eslint-config-airbnb": {
@@ -20395,45 +20392,45 @@
} }
}, },
"@vue/reactivity": { "@vue/reactivity": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
"integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==", "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==",
"requires": { "requires": {
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"@vue/runtime-core": { "@vue/runtime-core": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz",
"integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==", "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==",
"requires": { "requires": {
"@vue/reactivity": "3.4.21", "@vue/reactivity": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"@vue/runtime-dom": { "@vue/runtime-dom": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz",
"integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==", "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==",
"requires": { "requires": {
"@vue/runtime-core": "3.4.21", "@vue/runtime-core": "3.4.27",
"@vue/shared": "3.4.21", "@vue/shared": "3.4.27",
"csstype": "^3.1.3" "csstype": "^3.1.3"
} }
}, },
"@vue/server-renderer": { "@vue/server-renderer": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz",
"integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==", "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==",
"requires": { "requires": {
"@vue/compiler-ssr": "3.4.21", "@vue/compiler-ssr": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"@vue/shared": { "@vue/shared": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==" "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
}, },
"@vue/test-utils": { "@vue/test-utils": {
"version": "2.4.5", "version": "2.4.5",
@@ -25486,9 +25483,9 @@
} }
}, },
"magic-string": { "magic-string": {
"version": "0.30.8", "version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
"integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"requires": { "requires": {
"@jridgewell/sourcemap-codec": "^1.4.15" "@jridgewell/sourcemap-codec": "^1.4.15"
} }
@@ -29953,15 +29950,15 @@
} }
}, },
"vue": { "vue": {
"version": "3.4.21", "version": "3.4.27",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
"integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==", "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==",
"requires": { "requires": {
"@vue/compiler-dom": "3.4.21", "@vue/compiler-dom": "3.4.27",
"@vue/compiler-sfc": "3.4.21", "@vue/compiler-sfc": "3.4.27",
"@vue/runtime-dom": "3.4.21", "@vue/runtime-dom": "3.4.27",
"@vue/server-renderer": "3.4.21", "@vue/server-renderer": "3.4.27",
"@vue/shared": "3.4.21" "@vue/shared": "3.4.27"
} }
}, },
"vue-component-type-helpers": { "vue-component-type-helpers": {

2
package.json
View File

@@ -42,7 +42,7 @@
"electron-updater": "^6.1.9", "electron-updater": "^6.1.9",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"vue": "^3.4.21" "vue": "^3.4.27"
}, },
"devDependencies": { "devDependencies": {
"@modyfi/vite-plugin-yaml": "^1.1.0", "@modyfi/vite-plugin-yaml": "^1.1.0",

28
src/presentation/components/Code/CodeButtons/Save/RunInstructions/InfoTooltip.vue → src/presentation/components/Code/CodeButtons/Save/RunInstructions/Help/InfoTooltipInline.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<span class="info-container"> <span
class="info-container"
>
<TooltipWrapper> <TooltipWrapper>
<AppIcon icon="circle-info" /> <AppIcon icon="circle-info" />
<template #tooltip> <template #tooltip>
@@ -19,27 +21,17 @@ export default defineComponent({
TooltipWrapper, TooltipWrapper,
AppIcon, AppIcon,
}, },
props: {
hasLeftMargin: {
type: Boolean,
default: false,
},
},
}); });
</script> </script>
<style scoped lang="scss"> <style lang="scss">
@use "@/presentation/assets/styles/main" as *;
@mixin apply-style-when-placed-after-non-text {
* + & {
@content;
}
}
.info-container { .info-container {
vertical-align: text-top; vertical-align: text-top;
* + & { // If it's followed by any other element
vertical-align: middle;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.5,
)
}
} }
</style> </style>

36
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Help/InfoTooltipWrapper.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<span class="info-tooltip-wrapper">
<span>
<slot />
</span>
<span>
<InfoTooltipInline>
<slot name="info" />
</InfoTooltipInline>
</span>
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import InfoTooltipInline from './InfoTooltipInline.vue';
export default defineComponent({
components: {
InfoTooltipInline,
},
});
</script>
<style lang="scss">
@use "@/presentation/assets/styles/main" as *;
.info-tooltip-wrapper {
display: flex;
align-items: center;
@include set-property-ch-value-with-fallback(
$property: gap,
$value-in-ch: 0.5,
)
}
</style>

6
src/presentation/components/Code/CodeButtons/Save/RunInstructions/RunInstructions.vue
View File

@@ -17,7 +17,7 @@
<p> <p>
This requires you to do additional manual This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip> <InfoTooltipInline>Engage with icons like this for extra wisdom!</InfoTooltipInline>
icons near the steps, or follow the easy alternative described above. icons near the steps, or follow the easy alternative described above.
</p> </p>
<p> <p>
@@ -32,12 +32,12 @@ import { defineComponent, computed } from 'vue';
import { injectKey } from '@/presentation/injectionSymbols'; import { injectKey } from '@/presentation/injectionSymbols';
import { OperatingSystem } from '@/domain/OperatingSystem'; import { OperatingSystem } from '@/domain/OperatingSystem';
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames'; import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
import InfoTooltip from './InfoTooltip.vue'; import InfoTooltipInline from './Help/InfoTooltipInline.vue';
import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue'; import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
InfoTooltip, InfoTooltipInline,
PlatformInstructionSteps, PlatformInstructionSteps,
}, },
props: { props: {

39
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue
View File

@@ -2,7 +2,7 @@
<InstructionSteps> <InstructionSteps>
<InstructionStep> <InstructionStep>
Download the file. Download the file.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
You should have already been prompted to save the script file. You should have already been prompted to save the script file.
</p> </p>
@@ -10,11 +10,11 @@
If this was not the case or you did not save the script when prompted, If this was not the case or you did not save the script when prompted,
please try to download your script file again. please try to download your script file again.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
Open terminal. Open terminal.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
Opening terminal changes based on the distro you run. Opening terminal changes based on the distro you run.
</p> </p>
@@ -39,15 +39,16 @@
</li> </li>
</ul> </ul>
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
<p> <p>
Navigate to the folder where you downloaded the file e.g.: Navigate to the folder where you downloaded the file e.g.:
</p> </p>
<p> <p>
<InfoTooltipWrapper>
<CopyableCommand>cd ~/Downloads</CopyableCommand> <CopyableCommand>cd ~/Downloads</CopyableCommand>
<InfoTooltip> <template #info>
<p> <p>
Press on <code>enter/return</code> key after running the command. Press on <code>enter/return</code> key after running the command.
</p> </p>
@@ -62,7 +63,8 @@
<li><code>~</code> is the user home directory.</li> <li><code>~</code> is the user home directory.</li>
</ul> </ul>
</p> </p>
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
@@ -70,8 +72,9 @@
Give the file execute permissions: Give the file execute permissions:
</p> </p>
<p> <p>
<InfoTooltipWrapper>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand> <CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip> <template #info>
<p> <p>
Press on <code>enter/return</code> key after running the command. Press on <code>enter/return</code> key after running the command.
</p> </p>
@@ -89,7 +92,8 @@
<p> <p>
These GUI steps and name of options may change depending on your file manager.' These GUI steps and name of options may change depending on your file manager.'
</p> </p>
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
@@ -97,21 +101,24 @@
Execute the file: Execute the file:
</p> </p>
<p> <p>
<InfoTooltipWrapper>
<CopyableCommand>./{{ filename }}</CopyableCommand> <CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip> <template #info>
<p> <p>
If you have desktop environment, instead of running this command you can alternatively: If you have desktop environment, instead of running this command
you can alternatively:
</p> </p>
<ol> <ol>
<li>Locate the file using your file manager.</li> <li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Run as program".</li> <li>Right click on the file, select "Run as program".</li>
</ol> </ol>
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If asked, enter your administrator password. If asked, enter your administrator password.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
As you type, your password will be hidden but the keys are still As you type, your password will be hidden but the keys are still
registered, so keep typing. registered, so keep typing.
@@ -122,7 +129,7 @@
<p> <p>
Administrator privileges are required to configure OS. Administrator privileges are required to configure OS.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
</InstructionSteps> </InstructionSteps>
</template> </template>
@@ -131,13 +138,15 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue'; import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue'; import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue'; import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
import InfoTooltipWrapper from '../../Help/InfoTooltipWrapper.vue';
import CopyableCommand from '../CopyableCommand.vue'; import CopyableCommand from '../CopyableCommand.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
CopyableCommand, CopyableCommand,
InfoTooltip, InfoTooltipInline,
InfoTooltipWrapper,
InstructionSteps, InstructionSteps,
InstructionStep, InstructionStep,
}, },

40
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/MacOsInstructions.vue
View File

@@ -2,7 +2,7 @@
<InstructionSteps> <InstructionSteps>
<InstructionStep> <InstructionStep>
Download the file. Download the file.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
You should have already been prompted to save the script file. You should have already been prompted to save the script file.
</p> </p>
@@ -10,23 +10,22 @@
If this was not the case or you did not save the script when prompted, If this was not the case or you did not save the script when prompted,
please try to download your script file again. please try to download your script file again.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
Open terminal. Open terminal.
<InfoTooltip> <InfoTooltipInline>
Type Terminal into Spotlight or open it from the Applications -> Utilities folder. Type Terminal into Spotlight or open it from the Applications -> Utilities folder.
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
<p> <p>
Navigate to the folder where you downloaded the file e.g.: Navigate to the folder where you downloaded the file e.g.:
</p> </p>
<p> <p>
<CopyableCommand> <InfoTooltipWrapper>
cd ~/Downloads <CopyableCommand>cd ~/Downloads</CopyableCommand>
</CopyableCommand> <template #info>
<InfoTooltip>
<p> <p>
Press on <code>enter/return</code> key after running the command. Press on <code>enter/return</code> key after running the command.
</p> </p>
@@ -41,7 +40,8 @@
<li><code>~</code> is the user home directory.</li> <li><code>~</code> is the user home directory.</li>
</ul> </ul>
</p> </p>
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
@@ -49,15 +49,17 @@
Give the file execute permissions: Give the file execute permissions:
</p> </p>
<p> <p>
<InfoTooltipWrapper>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand> <CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip> <template #info>
<p> <p>
Press on <code>enter/return</code> key after running the command. Press on <code>enter/return</code> key after running the command.
</p> </p>
<p> <p>
It will make the file executable. It will make the file executable.
</p> </p>
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
@@ -65,15 +67,17 @@
Execute the file: Execute the file:
</p> </p>
<p> <p>
<InfoTooltipWrapper>
<CopyableCommand>./{{ filename }}</CopyableCommand> <CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip> <template #info>
Alternatively you can locate the file in <strong>Finder</strong> and double click on it. Alternatively you can locate the file in <strong>Finder</strong> and double click on it.
</InfoTooltip> </template>
</InfoTooltipWrapper>
</p> </p>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If asked, enter your administrator password. If asked, enter your administrator password.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
As you type, your password will be hidden but the keys are As you type, your password will be hidden but the keys are
still registered, so keep typing. still registered, so keep typing.
@@ -84,7 +88,7 @@
<p> <p>
Administrator privileges are required to configure OS. Administrator privileges are required to configure OS.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
</InstructionSteps> </InstructionSteps>
</template> </template>
@@ -93,13 +97,15 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue'; import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue'; import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue'; import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
import InfoTooltipWrapper from '../../Help/InfoTooltipWrapper.vue';
import CopyableCommand from '../CopyableCommand.vue'; import CopyableCommand from '../CopyableCommand.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
CopyableCommand, CopyableCommand,
InfoTooltip, InfoTooltipInline,
InfoTooltipWrapper,
InstructionSteps, InstructionSteps,
InstructionStep, InstructionStep,
}, },

28
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/WindowsInstructions.vue
View File

@@ -2,13 +2,13 @@
<InstructionSteps> <InstructionSteps>
<InstructionStep> <InstructionStep>
Download the file. Download the file.
<InfoTooltip> <InfoTooltipInline>
<p>If a save prompt doesn't appear, try downloading the script again.</p> <p>If a save prompt doesn't appear, try downloading the script again.</p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If warned by your browser, keep the file. If warned by your browser, keep the file.
<InfoTooltip> <InfoTooltipInline>
<!-- <!--
Tests (15/01/2023): Tests (15/01/2023):
- Edge (Defender activated): "filename isn't commonly downloaded..." - Edge (Defender activated): "filename isn't commonly downloaded..."
@@ -33,11 +33,11 @@
For <strong>Firefox</strong> and <strong>Chrome</strong>, typically no additional For <strong>Firefox</strong> and <strong>Chrome</strong>, typically no additional
action is needed. action is needed.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If your antivirus (e.g., Defender) alerts you, address the warning. If your antivirus (e.g., Defender) alerts you, address the warning.
<InfoTooltip> <InfoTooltipInline>
<!-- <!--
Tests (15/01/2023): Tests (15/01/2023):
- Edge (Defender activated): "Couldn't download - Virus detected" - Edge (Defender activated): "Couldn't download - Virus detected"
@@ -75,7 +75,7 @@
<li>and keep real-time protection enabled whenever possible.</li> <li>and keep real-time protection enabled whenever possible.</li>
</ul> </ul>
</blockquote> </blockquote>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
<!-- <!--
@@ -85,7 +85,7 @@
- Firefox: "filename is executable file. Executable files may contain..?" OK/Cancel - Firefox: "filename is executable file. Executable files may contain..?" OK/Cancel
--> -->
Open the downloaded file. Open the downloaded file.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
Confirm any browser prompts to open the file. Confirm any browser prompts to open the file.
</p> </p>
@@ -100,11 +100,11 @@
<strong>Edge</strong> and <strong>Chrome</strong> users usually will not <strong>Edge</strong> and <strong>Chrome</strong> users usually will not
encounter additional prompts. encounter additional prompts.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If prompted, confirm SmartScreen warnings. If prompted, confirm SmartScreen warnings.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
Windows SmartScreen might display a cautionary message. Windows SmartScreen might display a cautionary message.
</p> </p>
@@ -118,11 +118,11 @@
<li>Select <strong>Run anyway</strong>.</li> <li>Select <strong>Run anyway</strong>.</li>
</ol> </ol>
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
<InstructionStep> <InstructionStep>
If administrative permissions are requested, grant them. If administrative permissions are requested, grant them.
<InfoTooltip> <InfoTooltipInline>
<p> <p>
The script may request administrative rights to apply changes. The script may request administrative rights to apply changes.
</p> </p>
@@ -132,7 +132,7 @@
<p> <p>
Click <strong>Yes</strong> to authorize and run the script. Click <strong>Yes</strong> to authorize and run the script.
</p> </p>
</InfoTooltip> </InfoTooltipInline>
</InstructionStep> </InstructionStep>
</InstructionSteps> </InstructionSteps>
</template> </template>
@@ -141,11 +141,11 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue'; import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue'; import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue'; import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
InfoTooltip, InfoTooltipInline,
InstructionSteps, InstructionSteps,
InstructionStep, InstructionStep,
}, },

5
src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
View File

@@ -68,9 +68,7 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items. flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
*:not(:first-child) {
margin-left: $spacing-absolute-small;
}
.header { .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -80,6 +78,7 @@ export default defineComponent({
} }
.docs { .docs {
background: $color-primary-darkest; background: $color-primary-darkest;
margin-left: $spacing-absolute-small;
margin-top: $spacing-relative-x-small; margin-top: $spacing-relative-x-small;
color: $color-on-primary; color: $color-on-primary;
text-transform: none; text-transform: none;