chore(release): 2.9.2

fix(device-information): handle of unknown values
fix(device-information): prevent unwanted y-truncature of text
2025-10-23 16:14:04 +00:00 · 2022-07-28 19:31:16 +02:00 · 2022-07-28 19:30:36 +02:00 · 2022-07-28 19:28:23 +02:00 · 2022-07-25 23:31:06 +02:00 · 2022-07-25 23:23:53 +02:00
32 changed files with 886 additions and 543 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,85 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
+
+
+### Bug Fixes
+
+* **base64-file:** fixed url slug ([412de23](https://github.com/CorentinTh/it-tools/commit/412de23796babbc080b0768a75029ff2ddf2acfc))
+* **device-information:** handle of unknown values ([4f599b6](https://github.com/CorentinTh/it-tools/commit/4f599b699901a93444bcc67cbb3b3556a0561ae4))
+* **device-information:** prevent unwanted y-truncature of text  ([138149e](https://github.com/CorentinTh/it-tools/commit/138149e6f0be91255907a6083887898e5c68882e))
+
+
+### Refactors
+
+* **base64-file:** fixed typo ([1a22d55](https://github.com/CorentinTh/it-tools/commit/1a22d55b3c48f58b05b5a50de4fea260e781fbef))
+
+### [2.9.1](https://github.com/CorentinTh/it-tools/compare/v2.9.0...v2.9.1) (2022-07-25)
+
+
+### Refactors
+
+* **base64:** split base64 text and file conversion in two tools + base64 to file ([e6953d1](https://github.com/CorentinTh/it-tools/commit/e6953d1b67b81a6d3c19973b706f29637c421f98))
+
+## [2.9.0](https://github.com/CorentinTh/it-tools/compare/v2.8.0...v2.9.0) (2022-07-25)
+
+
+### Features
+
+* **new-tool:** added a basic auth generator ([bdee93a](https://github.com/CorentinTh/it-tools/commit/bdee93a9e45c6b46e7f75cdcbe1907f138722dca))
+
+## [2.8.0](https://github.com/CorentinTh/it-tools/compare/v2.7.0...v2.8.0) (2022-07-24)
+
+
+### Features
+
+* **new-tool:** added an ETA calculator ([125a502](https://github.com/CorentinTh/it-tools/commit/125a50215a7abb9e0b59dbbc62aee49007b05ffe))
+
+
+### Bug Fixes
+
+* **sql-prettifier:** better responsiveness ([560fcf3](https://github.com/CorentinTh/it-tools/commit/560fcf3f783c66b9197e4a015420c43a729518bc))
+
+
+### Refactors
+
+* **json-prettify:** improved layout for the json prettifier ([328fda6](https://github.com/CorentinTh/it-tools/commit/328fda65b3490869328467c5e2d5f538c689d9b6))
+* **sql-prettifier:** remove unused service files ([ba87097](https://github.com/CorentinTh/it-tools/commit/ba87097e3d834b6ea3212d28c2c33badb95f85e1))
+
+## [2.7.0](https://github.com/CorentinTh/it-tools/compare/v2.6.0...v2.7.0) (2022-07-24)
+
+
+### Features
+
+* **new-tool:** added an SQL prettifier and formatter ([d1f95f5](https://github.com/CorentinTh/it-tools/commit/d1f95f5b34a4570f1033a5289f0bd009d1aefb0c))
+
+
+### Bug Fixes
+
+* **typo:** fix few typos ([6cd25a7](https://github.com/CorentinTh/it-tools/commit/6cd25a743e32fceeaec8c1f8b94927a9c5d901f1))
+
+## [2.6.0](https://github.com/CorentinTh/it-tools/compare/v2.5.3...v2.6.0) (2022-07-23)
+
+
+### Features
+
+* **new-tool:** added chronometer ([130031c](https://github.com/CorentinTh/it-tools/commit/130031c2256f3d4d46948974b9de85ee6e92bf8b))
+* **search:** focus the search bar using Ctrl+K ([ab53048](https://github.com/CorentinTh/it-tools/commit/ab53048d5f6fdca7d00edbb79dee1a5409e6b11e))
+
+
+### Bug Fixes
+
+* **deps:** run dependencie audit auto fix ([a16161c](https://github.com/CorentinTh/it-tools/commit/a16161cdb48c064882b9dc91ec3d091d286f5c63))
+* **lint:** cleanned index.html ([c3a302b](https://github.com/CorentinTh/it-tools/commit/c3a302bc389a0e13aef4b14d5a9d3ec3a0d32729))
+* **text-statistics:** empty text mean 0 words and 0 lines ([92ce419](https://github.com/CorentinTh/it-tools/commit/92ce419f45e110509ab202485a36bf175ce345da))
+
+
+### Refactors
+
+* added accessibility labels on icon buttons ([394d085](https://github.com/CorentinTh/it-tools/commit/394d085846d976219ea775c21cd7e77f0f72a12b))
+* **import:** auto reordered imports ([2140842](https://github.com/CorentinTh/it-tools/commit/214084262cec7fb881fd397626356b080ea1a5cc))
+
 ### [2.5.3](https://github.com/CorentinTh/it-tools/compare/v2.5.2...v2.5.3) (2022-07-21)


--- a/index.html
+++ b/index.html
@@ -6,11 +6,17 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IT Tools - Handy online tools for developers</title>
    <meta itemprop="name" content="IT Tools - Handy online tools for developers" />
-    <meta name="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
-    <meta itemprop="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
+    <meta
+      name="description"
+      content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
+    />
+    <meta
+      itemprop="description"
+      content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
+    />
    <link rel="author" href="/humans.txt" />
-    <link rel=canonical href="https://it-tools.tech">
-    
+    <link rel="canonical" href="https://it-tools.tech" />
+
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -21,14 +27,20 @@
    <meta property="og:url" content="https://it-tools.tech/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="IT Tools - Handy online tools for developers" />
-    <meta property="og:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
+    <meta
+      property="og:description"
+      content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
+    />
    <meta property="og:image" content="/banner.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="it-tools.tech" />
    <meta property="twitter:url" content="https://it-tools.tech/" />
    <meta name="twitter:title" content="IT Tools - Handy online tools for developers" />
-    <meta name="twitter:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
+    <meta
+      name="twitter:description"
+      content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
+    />
    <meta name="twitter:image" content="/banner.png" />
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
  "name": "it-tools",
-  "version": "2.5.3",
+  "version": "2.9.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "it-tools",
-      "version": "2.5.3",
+      "version": "2.9.2",
+      "license": "GNU GPLv3",
      "dependencies": {
        "@it-tools/bip39": "^0.0.4",
        "@vicons/material": "^0.12.0",
@@ -24,11 +25,13 @@
        "highlight.js": "^11.5.1",
        "lodash": "^4.17.21",
        "mathjs": "^10.6.0",
-        "naive-ui": "^2.28.0",
+        "mime-types": "^2.1.35",
+        "naive-ui": "^2.31.0",
        "pinia": "^2.0.11",
        "plausible-tracker": "^0.3.5",
        "qrcode": "^1.5.0",
        "randombytes": "^2.1.0",
+        "sql-formatter": "^8.2.0",
        "uuid": "^8.3.2",
        "vue": "^3.2.31",
        "vue-router": "^4.0.12"
@@ -38,6 +41,7 @@
        "@types/bcryptjs": "^2.4.2",
        "@types/crypto-js": "^4.1.1",
        "@types/jsdom": "^16.2.14",
+        "@types/mime-types": "^2.1.1",
        "@types/node": "^16.11.25",
        "@types/qrcode": "^1.4.2",
        "@types/randombytes": "^2.0.0",
@@ -1706,17 +1710,17 @@
      "dev": true
    },
    "node_modules/@css-render/plugin-bem": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.9.tgz",
-      "integrity": "sha512-xASEmYIX91Pow7YPzpAZ0eyrRNINVX7j9ITNbLt88gJHRLap3P1dv3hTSLtUZTxYXVHTklZ/SfJQ9FIO3jRahg==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
+      "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
      "peerDependencies": {
-        "css-render": "~0.15.9"
+        "css-render": "~0.15.10"
      }
    },
    "node_modules/@css-render/vue3-ssr": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.9.tgz",
-      "integrity": "sha512-b3wvEIZYjToOEAV/oUqVtcg+MPF/iSZB9VmVF7fMAAAfvVTc2kB4TZDhGZCMkGjGZxOUm1jia7q/Z9FJnJGLKw==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
+      "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
      "peerDependencies": {
        "vue": "^3.0.11"
      }
@@ -1862,6 +1866,20 @@
        "url": "https://github.com/sponsors/CorentinTh"
      }
    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/@jridgewell/resolve-uri": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
@@ -1871,6 +1889,25 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.11",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
@@ -1878,15 +1915,20 @@
      "dev": true
    },
    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
      "dev": true,
      "dependencies": {
        "@jridgewell/resolve-uri": "^3.0.3",
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2156,15 +2198,6 @@
      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
      "dev": true
    },
-    "node_modules/@types/jest": {
-      "version": "27.4.1",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.4.1.tgz",
-      "integrity": "sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==",
-      "dependencies": {
-        "jest-matcher-utils": "^27.0.0",
-        "pretty-format": "^27.0.0"
-      }
-    },
    "node_modules/@types/jsdom": {
      "version": "16.2.14",
      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -2217,6 +2250,12 @@
      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
      "dev": true
    },
+    "node_modules/@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
    "node_modules/@types/minimist": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -3055,8 +3094,7 @@
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
    "node_modules/array-ify": {
      "version": "1.0.0",
@@ -3964,9 +4002,9 @@
      }
    },
    "node_modules/css-render": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.9.tgz",
-      "integrity": "sha512-FMVcWsVipKEBR/mVf1+pIjCRQdztILVKxbp8TN5/Vf0Q/fdTq0OIb8JRW/pk7PP1eeWnB/ejQ0MNBe7ELjLblg==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.10.tgz",
+      "integrity": "sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==",
      "dependencies": {
        "@emotion/hash": "~0.8.0",
        "@types/node": "~17.0.5",
@@ -3974,9 +4012,9 @@
      }
    },
    "node_modules/css-render/node_modules/@types/node": {
-      "version": "17.0.23",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
    },
    "node_modules/css-render/node_modules/csstype": {
      "version": "3.0.11",
@@ -4248,14 +4286,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/diff-sequences": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
    "node_modules/dijkstrajs": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
@@ -6846,138 +6876,6 @@
      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
    },
-    "node_modules/jest-diff": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-diff/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/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==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-diff/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-matcher-utils/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-matcher-utils/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==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-matcher-utils/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/jest-worker": {
      "version": "26.6.2",
      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -7813,7 +7711,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -7822,7 +7719,6 @@
      "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,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -7896,28 +7792,27 @@
      "dev": true
    },
    "node_modules/naive-ui": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.28.0.tgz",
-      "integrity": "sha512-/yXMF0nrciLrs5Os88omN4dbKlLU7D51lU60+di/o2dx7faJM7wsiXa0nS1fwTGTF9L19x6GBGSvBTxYtvx+lg==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.31.0.tgz",
+      "integrity": "sha512-70PHh1wDo6GP87MquQE4hHxMaISX6y/SWwmAzS86XfK+1gBCpQPcANHrmxsjPncRxk6Zq9CDeW6tzAqw6qUtfA==",
      "dependencies": {
-        "@css-render/plugin-bem": "^0.15.9",
-        "@css-render/vue3-ssr": "^0.15.9",
+        "@css-render/plugin-bem": "^0.15.10",
+        "@css-render/vue3-ssr": "^0.15.10",
        "@types/lodash": "^4.14.181",
        "@types/lodash-es": "^4.17.6",
        "async-validator": "^4.0.7",
-        "css-render": "^0.15.9",
+        "css-render": "^0.15.10",
        "date-fns": "^2.28.0",
        "date-fns-tz": "^1.3.3",
        "evtd": "^0.2.3",
        "highlight.js": "^11.5.0",
        "lodash": "^4.17.21",
        "lodash-es": "^4.17.21",
-        "seemly": "^0.3.3",
+        "seemly": "^0.3.4",
        "treemate": "^0.3.11",
        "vdirs": "^0.1.8",
-        "vfonts": "^0.0.3",
        "vooks": "^0.2.12",
-        "vueuc": "^0.4.28"
+        "vueuc": "^0.4.47"
      },
      "peerDependencies": {
        "vue": "^3.0.0"
@@ -8484,30 +8379,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -8879,11 +8750,6 @@
        "safe-buffer": "^5.1.0"
      }
    },
-    "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
    "node_modules/read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -9180,11 +9046,6 @@
      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
    },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
    "node_modules/resolve": {
      "version": "1.22.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -9347,12 +9208,9 @@
      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
    },
    "node_modules/seemly": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.3.tgz",
-      "integrity": "sha512-mAyqemz41e9HiZPMXAn7NtTExJgztwco5cdZjrt/iViU/oFeav+Q8K1c93M/tIZZ00QkT65JMr4xXQk7Vv5hWQ==",
-      "dependencies": {
-        "@types/jest": "^27.0.1"
-      }
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.5.tgz",
+      "integrity": "sha512-Z0QAytAEpkAeWbQZBQ+zb+9YYn86+AFBdWA4y7FwFtJ+ZcIO55QEVdT0sJ0DxuX8FWD4UTuwaftz/UX+MmHlhw=="
    },
    "node_modules/semver": {
      "version": "6.3.0",
@@ -9546,6 +9404,17 @@
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
+    "node_modules/sql-formatter": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-8.2.0.tgz",
+      "integrity": "sha512-5hQOSOk8jfhPkNgUmpm+9Fn2aaLWcf4vKL/dIvUN5q9rsamKHSyN/gL79xpkETNOyL+Zv5BMQfA7z9Rmz/DJJg==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.js"
+      }
+    },
    "node_modules/stable": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -9973,14 +9842,14 @@
      }
    },
    "node_modules/terser": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
-      "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
      "dev": true,
      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
        "acorn": "^8.5.0",
        "commander": "^2.20.0",
-        "source-map": "~0.7.2",
        "source-map-support": "~0.5.20"
      },
      "bin": {
@@ -9996,15 +9865,6 @@
      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
      "dev": true
    },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/test-exclude": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -10393,11 +10253,6 @@
        "vue": "^3.0.11"
      }
    },
-    "node_modules/vfonts": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/vfonts/-/vfonts-0.0.3.tgz",
-      "integrity": "sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ=="
-    },
    "node_modules/vite": {
      "version": "2.9.9",
      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
@@ -10827,14 +10682,14 @@
      }
    },
    "node_modules/vueuc": {
-      "version": "0.4.28",
-      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.28.tgz",
-      "integrity": "sha512-Udr1ROwJocHIThA5G+H5qN1QEFI4pskDvl+w/2Ul2XIjaAeIuQ6ygEOKHOXRJqKX5PxcTi1QQUpb7yQWsDw7ww==",
+      "version": "0.4.47",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.47.tgz",
+      "integrity": "sha512-lBxGeTWLFp0O36SlcAeBrh29dxE/GboOH/0eUJhocUuE9DRrzUcVmwGau7v7ZWsxjivjJC3Qup7l9sCyA3it+g==",
      "dependencies": {
-        "@css-render/vue3-ssr": "^0.15.7",
-        "css-render": "^0.15.7",
+        "@css-render/vue3-ssr": "^0.15.10",
+        "@juggle/resize-observer": "^3.3.1",
+        "css-render": "^0.15.10",
        "evtd": "^0.2.2",
-        "resize-observer-polyfill": "^1.5.1",
        "seemly": "^0.3.1",
        "vdirs": "^0.1.4",
        "vooks": "^0.2.4"
@@ -12548,15 +12403,15 @@
      "dev": true
    },
    "@css-render/plugin-bem": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.9.tgz",
-      "integrity": "sha512-xASEmYIX91Pow7YPzpAZ0eyrRNINVX7j9ITNbLt88gJHRLap3P1dv3hTSLtUZTxYXVHTklZ/SfJQ9FIO3jRahg==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
+      "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
      "requires": {}
    },
    "@css-render/vue3-ssr": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.9.tgz",
-      "integrity": "sha512-b3wvEIZYjToOEAV/oUqVtcg+MPF/iSZB9VmVF7fMAAAfvVTc2kB4TZDhGZCMkGjGZxOUm1jia7q/Z9FJnJGLKw==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
+      "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
      "requires": {}
    },
    "@emmetio/abbreviation": {
@@ -12675,12 +12530,39 @@
        "nanoid": "^3.3.2"
      }
    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
    "@jridgewell/resolve-uri": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
      "dev": true
    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
    "@jridgewell/sourcemap-codec": {
      "version": "1.4.11",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
@@ -12688,15 +12570,20 @@
      "dev": true
    },
    "@jridgewell/trace-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
      "dev": true,
      "requires": {
        "@jridgewell/resolve-uri": "^3.0.3",
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -12914,15 +12801,6 @@
      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
      "dev": true
    },
-    "@types/jest": {
-      "version": "27.4.1",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.4.1.tgz",
-      "integrity": "sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==",
-      "requires": {
-        "jest-matcher-utils": "^27.0.0",
-        "pretty-format": "^27.0.0"
-      }
-    },
    "@types/jsdom": {
      "version": "16.2.14",
      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -12975,6 +12853,12 @@
      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
      "dev": true
    },
+    "@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
    "@types/minimist": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -13608,8 +13492,7 @@
    "argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
    "array-ify": {
      "version": "1.0.0",
@@ -14330,9 +14213,9 @@
      "dev": true
    },
    "css-render": {
-      "version": "0.15.9",
-      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.9.tgz",
-      "integrity": "sha512-FMVcWsVipKEBR/mVf1+pIjCRQdztILVKxbp8TN5/Vf0Q/fdTq0OIb8JRW/pk7PP1eeWnB/ejQ0MNBe7ELjLblg==",
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.10.tgz",
+      "integrity": "sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==",
      "requires": {
        "@emotion/hash": "~0.8.0",
        "@types/node": "~17.0.5",
@@ -14340,9 +14223,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "17.0.23",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-          "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+          "version": "17.0.45",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
        },
        "csstype": {
          "version": "3.0.11",
@@ -14545,11 +14428,6 @@
      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
      "dev": true
    },
-    "diff-sequences": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ=="
-    },
    "dijkstrajs": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
@@ -16373,97 +16251,6 @@
      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
    },
-    "jest-diff": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw=="
-    },
-    "jest-matcher-utils": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "jest-worker": {
      "version": "26.6.2",
      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -17124,14 +16911,12 @@
    "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
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
    },
    "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,
      "requires": {
        "mime-db": "1.52.0"
      }
@@ -17187,28 +16972,27 @@
      "dev": true
    },
    "naive-ui": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.28.0.tgz",
-      "integrity": "sha512-/yXMF0nrciLrs5Os88omN4dbKlLU7D51lU60+di/o2dx7faJM7wsiXa0nS1fwTGTF9L19x6GBGSvBTxYtvx+lg==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.31.0.tgz",
+      "integrity": "sha512-70PHh1wDo6GP87MquQE4hHxMaISX6y/SWwmAzS86XfK+1gBCpQPcANHrmxsjPncRxk6Zq9CDeW6tzAqw6qUtfA==",
      "requires": {
-        "@css-render/plugin-bem": "^0.15.9",
-        "@css-render/vue3-ssr": "^0.15.9",
+        "@css-render/plugin-bem": "^0.15.10",
+        "@css-render/vue3-ssr": "^0.15.10",
        "@types/lodash": "^4.14.181",
        "@types/lodash-es": "^4.17.6",
        "async-validator": "^4.0.7",
-        "css-render": "^0.15.9",
+        "css-render": "^0.15.10",
        "date-fns": "^2.28.0",
        "date-fns-tz": "^1.3.3",
        "evtd": "^0.2.3",
        "highlight.js": "^11.5.0",
        "lodash": "^4.17.21",
        "lodash-es": "^4.17.21",
-        "seemly": "^0.3.3",
+        "seemly": "^0.3.4",
        "treemate": "^0.3.11",
        "vdirs": "^0.1.8",
-        "vfonts": "^0.0.3",
        "vooks": "^0.2.12",
-        "vueuc": "^0.4.28"
+        "vueuc": "^0.4.47"
      }
    },
    "nanoid": {
@@ -17598,23 +17382,6 @@
      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
      "dev": true
    },
-    "pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "requires": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
-        }
-      }
-    },
    "process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -17919,11 +17686,6 @@
        "safe-buffer": "^5.1.0"
      }
    },
-    "react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
    "read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -18157,11 +17919,6 @@
      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
    },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
    "resolve": {
      "version": "1.22.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -18276,12 +18033,9 @@
      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
    },
    "seemly": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.3.tgz",
-      "integrity": "sha512-mAyqemz41e9HiZPMXAn7NtTExJgztwco5cdZjrt/iViU/oFeav+Q8K1c93M/tIZZ00QkT65JMr4xXQk7Vv5hWQ==",
-      "requires": {
-        "@types/jest": "^27.0.1"
-      }
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.5.tgz",
+      "integrity": "sha512-Z0QAytAEpkAeWbQZBQ+zb+9YYn86+AFBdWA4y7FwFtJ+ZcIO55QEVdT0sJ0DxuX8FWD4UTuwaftz/UX+MmHlhw=="
    },
    "semver": {
      "version": "6.3.0",
@@ -18450,6 +18204,14 @@
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
+    "sql-formatter": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-8.2.0.tgz",
+      "integrity": "sha512-5hQOSOk8jfhPkNgUmpm+9Fn2aaLWcf4vKL/dIvUN5q9rsamKHSyN/gL79xpkETNOyL+Zv5BMQfA7z9Rmz/DJJg==",
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
    "stable": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -18758,14 +18520,14 @@
      }
    },
    "terser": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
-      "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
      "dev": true,
      "requires": {
+        "@jridgewell/source-map": "^0.3.2",
        "acorn": "^8.5.0",
        "commander": "^2.20.0",
-        "source-map": "~0.7.2",
        "source-map-support": "~0.5.20"
      },
      "dependencies": {
@@ -18774,12 +18536,6 @@
          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
          "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
        }
      }
    },
@@ -19086,11 +18842,6 @@
        "evtd": "^0.2.2"
      }
    },
-    "vfonts": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/vfonts/-/vfonts-0.0.3.tgz",
-      "integrity": "sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ=="
-    },
    "vite": {
      "version": "2.9.9",
      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
@@ -19412,14 +19163,14 @@
      }
    },
    "vueuc": {
-      "version": "0.4.28",
-      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.28.tgz",
-      "integrity": "sha512-Udr1ROwJocHIThA5G+H5qN1QEFI4pskDvl+w/2Ul2XIjaAeIuQ6ygEOKHOXRJqKX5PxcTi1QQUpb7yQWsDw7ww==",
+      "version": "0.4.47",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.47.tgz",
+      "integrity": "sha512-lBxGeTWLFp0O36SlcAeBrh29dxE/GboOH/0eUJhocUuE9DRrzUcVmwGau7v7ZWsxjivjJC3Qup7l9sCyA3it+g==",
      "requires": {
-        "@css-render/vue3-ssr": "^0.15.7",
-        "css-render": "^0.15.7",
+        "@css-render/vue3-ssr": "^0.15.10",
+        "@juggle/resize-observer": "^3.3.1",
+        "css-render": "^0.15.10",
        "evtd": "^0.2.2",
-        "resize-observer-polyfill": "^1.5.1",
        "seemly": "^0.3.1",
        "vdirs": "^0.1.4",
        "vooks": "^0.2.4"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.5.3",
+  "version": "2.9.2",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -47,11 +47,13 @@
    "highlight.js": "^11.5.1",
    "lodash": "^4.17.21",
    "mathjs": "^10.6.0",
-    "naive-ui": "^2.28.0",
+    "mime-types": "^2.1.35",
+    "naive-ui": "^2.31.0",
    "pinia": "^2.0.11",
    "plausible-tracker": "^0.3.5",
    "qrcode": "^1.5.0",
    "randombytes": "^2.1.0",
+    "sql-formatter": "^8.2.0",
    "uuid": "^8.3.2",
    "vue": "^3.2.31",
    "vue-router": "^4.0.12"
@@ -61,6 +63,7 @@
    "@types/bcryptjs": "^2.4.2",
    "@types/crypto-js": "^4.1.1",
    "@types/jsdom": "^16.2.14",
+    "@types/mime-types": "^2.1.1",
    "@types/node": "^16.11.25",
    "@types/qrcode": "^1.4.2",
    "@types/randombytes": "^2.0.0",
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -1,6 +1,6 @@
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
 import { mkdir, readFile, writeFile } from 'fs/promises';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';

 const currentDirname = dirname(fileURLToPath(import.meta.url));

@@ -55,7 +55,7 @@ export const tool = defineTool({
  keywords: ['${toolName.split('-').join("', '")}'],
  component: () => import('./${toolName}.vue'),
  icon: ArrowsShuffle,
-};
+});
 `,
 );

--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -9,6 +9,7 @@
        href="https://github.com/CorentinTh/it-tools"
        rel="noopener"
        target="_blank"
+        aria-label="IT-Tools' github repository"
      >
        <n-icon size="25" :component="BrandGithub" />
      </n-button>
@@ -26,17 +27,18 @@
        href="https://twitter.com/ittoolsdottech"
        rel="noopener"
        target="_blank"
+        aria-label="IT Tools' twitter account"
      >
        <n-icon size="25" :component="BrandTwitter" />
      </n-button>
    </template>
-    Creator twitter
+    IT Tools' twitter account
  </n-tooltip>

  <router-link to="/about" #="{ navigate, href }" custom>
    <n-tooltip trigger="hover">
      <template #trigger>
-        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="Home" @click="navigate">
+        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
          <n-icon size="25" :component="InfoCircle" />
        </n-button>
      </template>
@@ -45,7 +47,7 @@
  </router-link>
  <n-tooltip trigger="hover">
    <template #trigger>
-      <n-button size="large" circle quaternary @click="isDarkTheme = !isDarkTheme">
+      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
        <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
        <n-icon v-else size="25" :component="Moon" />
      </n-button>
@@ -57,8 +59,8 @@

 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
+import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { toRefs } from 'vue';
-import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler';

 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { SearchRound } from '@vicons/material';
-import { computed, ref } from 'vue';
-import { deburr } from 'lodash';
 import { tools } from '@/tools';
+import { SearchRound } from '@vicons/material';
+import { useMagicKeys, whenever } from '@vueuse/core';
+import { deburr } from 'lodash';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';

 const router = useRouter();
@@ -28,6 +29,21 @@ function onSelect(path: string) {
  router.push(path);
  queryString.value = '';
 }
+
+const focusTarget = ref();
+
+const keys = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
+      e.preventDefault();
+    }
+  },
+});
+
+whenever(keys.ctrl_k, () => {
+  focusTarget.value.focus();
+});
 </script>

 <template>
@@ -40,9 +56,10 @@ function onSelect(path: string) {
    >
      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
        <n-input
+          ref="focusTarget"
          round
          clearable
-          placeholder="Search a tool..."
+          placeholder="Search a tool... [Ctrl + K]"
          :value="slotValue"
          @input="handleInput"
          @focus="handleFocus"
--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@@ -1,11 +1,17 @@
+import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';

-export function useDownloadFileFromBase64({ source, filename = 'file' }: { source: Ref<string>; filename?: string }) {
+export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
  return {
    download() {
+      const base64 = source.value;
+      const mimeType = base64.match(/data:(.*?);base64/i)?.[1] ?? 'text/plain';
+      console.log({ mimeType });
+      const cleanFileName = filename ?? `file.${getExtensionFromMime(mimeType)}`;
+
      const a = document.createElement('a');
      a.href = source.value;
-      a.download = filename;
+      a.download = cleanFileName;
      a.click();
    },
  };
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -107,7 +107,7 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
          circle
          quaternary
-          aria-label="Toogle menu"
+          aria-label="Toggle menu"
          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
        >
          <n-icon size="25" :component="Menu2" />
@@ -147,7 +147,7 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
              Sponsor
            </n-button>
          </template>
-          ❤ Support IT Tools developement !
+          ❤ Support IT Tools development !
        </n-tooltip>

        <navbar-buttons v-if="!styleStore.isSmallScreen" />
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -6,7 +6,7 @@ useHead({ title: 'Page not found - IT Tools' });

 <template>
  <div class="e404-wrapper">
-    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to extist">
+    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist">
      <template #footer>
        <router-link to="/" #="{ navigate, href }" custom>
          <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -11,11 +11,11 @@ useHead({ title: 'About - IT Tools' });
      This wonderful website, made with ❤ by
      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
        Corentin Thomasset </n-button
-      >, aggregates useful tools for developer and people working in IT. If you find it usefull, please fell free to
-      share it to people you think may find it usefull too and dont forget to pin it in your shortcut bar !
+      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
+      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
    </n-p>
    <n-p>
-      IT Tools is opensource (under the MIT license) and free, and will always be, but it cost me money to host and
+      IT Tools is open-source (under the MIT license) and free, and will always be, but it cost me money to host and
      renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
      supporting by
      <n-button
@@ -33,7 +33,7 @@ useHead({ title: 'About - IT Tools' });
    <n-h2>Technologies</n-h2>
    <n-p>
      IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
-      by Vercel. Third party opensource libraries are used in some tools, you may find the complete list in the
+      by Vercel. Third party open-source libraries are used in some tools, you may find the complete list in the
      <n-button
        type="primary"
        tag="a"
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -51,9 +51,11 @@ import {
  NScrollbar,
  NGradientText,
  NCode,
+  NDatePicker,
 } from 'naive-ui';

 const components = [
+  NDatePicker,
  NCode,
  NGradientText,
  NScrollbar,
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -1,9 +1,8 @@
 <template>
-  <n-card title="Text to base64">
-    <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
-    <n-input :value="textBase64" type="textarea" readonly />
+  <n-card title="Base64 to file">
+    <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
    <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy </n-button>
+      <n-button secondary @click="download()"> Download file </n-button>
    </n-space>
  </n-card>

@@ -17,7 +16,7 @@
      </n-upload-dragger>
    </n-upload>

-    <n-input :value="fileBase64" type="textarea" readonly />
+    <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
    <n-space justify="center">
      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
    </n-space>
@@ -26,14 +25,14 @@

 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { useBase64 } from '@vueuse/core';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { Upload } from '@vicons/tabler';
-import { ref, type Ref } from 'vue';
+import { useBase64 } from '@vueuse/core';
 import type { UploadFileInfo } from 'naive-ui';
+import { ref, type Ref } from 'vue';

-const textInput = ref('');
-const { base64: textBase64 } = useBase64(textInput);
-const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' });
+const base64Input = ref('');
+const { download } = useDownloadFileFromBase64({ source: base64Input });

 const fileList = ref();
 const fileInput = ref() as Ref<File>;
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@@ -2,11 +2,10 @@ import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';

 export const tool = defineTool({
-  name: 'Base64 converter',
-  path: '/base64-converter',
+  name: 'Base64 file converter',
+  path: '/base64-file-converter',
  description: "Convert string, files or images into a it's base64 representation.",
  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
-  component: () => import('./base64-converter.vue'),
+  component: () => import('./base64-file-converter.vue'),
  icon: FileDigit,
-  redirectFrom: ['/file-to-base64', '/base64-string-converter'],
 });
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -0,0 +1,65 @@
+<template>
+  <n-card title="String to base64">
+    <n-form-item label="String to encode">
+      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
+    </n-form-item>
+
+    <n-form-item label="Base64 of string">
+      <n-input
+        :value="base64Output"
+        type="textarea"
+        readonly
+        placeholder="The base64 encoding of your string will be here"
+        rows="5"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+    </n-space>
+  </n-card>
+
+  <n-card title="Base64 to string">
+    <n-form-item
+      label="Base64 string to decode"
+      :validation-status="b64Validation.status"
+      :feedback="b64Validation.message"
+    >
+      <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
+    </n-form-item>
+
+    <n-form-item label="Decoded string">
+      <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { useValidation } from '@/composable/validation';
+import { computed, ref } from 'vue';
+
+const textInput = ref('');
+const base64Output = computed(() => window.btoa(textInput.value));
+const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
+
+const base64Input = ref('');
+const textOutput = computed(() => {
+  try {
+    return window.atob(base64Input.value);
+  } catch (_) {
+    return '';
+  }
+});
+const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
+const b64Validation = useValidation({
+  source: base64Input,
+  rules: [{ message: 'Invalid base64 string', validator: (value) => true || window.atob(value) }],
+});
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/base64-string-converter/index.ts
+++ b/src/tools/base64-string-converter/index.ts
@@ -0,0 +1,12 @@
+import { FileDigit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Base64 string encoder/decoder',
+  path: '/base64-string-converter',
+  description: 'Simply encode and decode string into a their base64 representation.',
+  keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
+  component: () => import('./base64-string-converter.vue'),
+  icon: FileDigit,
+  redirectFrom: ['/file-to-base64', '/base64-converter'],
+});
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <n-form-item label="Username">
+      <n-input v-model:value="username" placeholder="Your username..." clearable />
+    </n-form-item>
+    <n-form-item label="Password">
+      <n-input
+        v-model:value="password"
+        placeholder="Your password..."
+        type="password"
+        show-password-on="click"
+        clearable
+      />
+    </n-form-item>
+
+    <br />
+    <n-card>
+      <n-statistic label="Authorization header:" class="header">
+        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
+          {{ header }}
+        </n-scrollbar>
+      </n-statistic>
+    </n-card>
+    <br />
+    <n-space justify="center">
+      <n-button secondary @click="copy">Copy header</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { computed, ref } from 'vue';
+
+const username = ref('');
+const password = ref('');
+const header = computed(() => `Authorization: Basic ${window.btoa(`${username.value}:${password.value}`)}`);
+
+const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
+</script>
+
+<style lang="less" scoped>
+::v-deep(.n-statistic-value__content) {
+  font-family: monospace;
+  font-size: 17px !important;
+  white-space: nowrap;
+}
+</style>
--- a/src/tools/basic-auth-generator/index.ts
+++ b/src/tools/basic-auth-generator/index.ts
@@ -0,0 +1,21 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Basic auth generator',
+  path: '/basic-auth-generator',
+  description: 'Generate a base64 basic auth header from an username and a password.',
+  keywords: [
+    'basic',
+    'auth',
+    'generator',
+    'username',
+    'password',
+    'base64',
+    'authentication',
+    'header',
+    'authorization',
+  ],
+  component: () => import('./basic-auth-generator.vue'),
+  icon: PasswordRound,
+});
--- a/src/tools/chronometer/chronometer.service.test.ts
+++ b/src/tools/chronometer/chronometer.service.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { formatChronometerTime } from './chronometer.service';
+
+describe('chronometer', () => {
+  describe('formatChronometerTime', () => {
+    it('format the elapsed time', () => {
+      expect(formatChronometerTime({ elapsed: 123456 })).toEqual('02:03.456');
+      expect(formatChronometerTime({ elapsed: 123456, msPerUnit: 100 })).toEqual('03:25:45.600');
+      expect(formatChronometerTime({ elapsed: 12345600 })).toEqual('03:25:45.600');
+    });
+  });
+});
--- a/src/tools/chronometer/chronometer.service.ts
+++ b/src/tools/chronometer/chronometer.service.ts
@@ -0,0 +1,13 @@
+export function formatChronometerTime({ elapsed, msPerUnit = 1 }: { elapsed: number; msPerUnit?: number }) {
+  const elapsedMs = elapsed * msPerUnit;
+
+  const ms = elapsedMs % 1000;
+  const secs = ((elapsedMs - ms) / 1000) % 60;
+  const mins = (((elapsedMs - ms) / 1000 - secs) / 60) % 60;
+  const hrs = (((elapsedMs - ms) / 1000 - secs) / 60 - mins) / 60;
+  const hrsString = hrs > 0 ? `${hrs.toString().padStart(2, '0')}:` : '';
+
+  return `${hrsString}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms
+    .toString()
+    .padStart(3, '0')}`;
+}
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <n-card>
+      <div class="duration">{{ formatChronometerTime({ elapsed: counter, msPerUnit }) }}</div>
+    </n-card>
+    <br />
+    <n-space justify="center">
+      <n-button v-if="!isActive" secondary type="primary" @click="resume">Start</n-button>
+      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
+
+      <n-button secondary @click="counter = 0">Reset</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useInterval } from '@vueuse/core';
+import { formatChronometerTime } from './chronometer.service';
+
+const msPerUnit = 10;
+
+const { counter, pause, resume, isActive } = useInterval(msPerUnit, { controls: true, immediate: false });
+</script>
+
+<style lang="less" scoped>
+.duration {
+  text-align: center;
+  font-size: 40px;
+  font-family: monospace;
+  margin: 20px 0;
+}
+</style>
--- a/src/tools/chronometer/index.ts
+++ b/src/tools/chronometer/index.ts
@@ -0,0 +1,11 @@
+import { TimerOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Chronometer',
+  path: '/chronometer',
+  description: 'Monitor the duration of a thing. Basically a chronometer with simple chronometer features.',
+  keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
+  component: () => import('./chronometer.vue'),
+  icon: TimerOutlined,
+});
--- a/src/tools/device-information/device-information.vue
+++ b/src/tools/device-information/device-information.vue
@@ -1,16 +1,17 @@
 <template>
  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
    <n-grid cols="1 400:2" x-gap="12" y-gap="12">
-      <n-gi v-for="{ label, value } in information" :key="label" class="information">
+      <n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
        <n-card :bordered="false" embedded>
          <div class="label">
            {{ label }}
          </div>

          <div class="value">
-            <n-ellipsis>
-              {{ value.value }}
+            <n-ellipsis v-if="value">
+              {{ value }}
            </n-ellipsis>
+            <div v-else class="undefined-value">unknown</div>
          </div>
        </n-card>
      </n-gi>
@@ -89,7 +90,10 @@ const sections = [
  .value {
    font-size: 20px;
    font-weight: 400;
-    line-height: 1;
+  }
+
+  .undefined-value {
+    opacity: 0.8;
  }
 }
 </style>
--- a/src/tools/eta-calculator/eta-calculator.service.ts
+++ b/src/tools/eta-calculator/eta-calculator.service.ts
@@ -0,0 +1,16 @@
+import { formatDuration } from 'date-fns';
+
+export function formatMsDuration(duration: number) {
+  const ms = Math.floor(duration % 1000);
+  const secs = Math.floor(((duration - ms) / 1000) % 60);
+  const mins = Math.floor((((duration - ms) / 1000 - secs) / 60) % 60);
+  const hrs = Math.floor((((duration - ms) / 1000 - secs) / 60 - mins) / 60);
+
+  return (
+    formatDuration({
+      hours: hrs,
+      minutes: mins,
+      seconds: secs,
+    }) + (ms > 0 ? ` ${ms} ms` : '')
+  );
+}
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <n-text depth="3" style="text-align: justify; width: 100%; display: inline-block">
+      With a concrete example, if you wash 3 plates in 5 minutes and you have 500 plates to wash, it will take you 5
+      hours and 10 minutes to wash them all, and if you start now, you'll end
+      {{ endAt }}.
+    </n-text>
+    <br />
+    <n-divider />
+    <n-space item-style="flex:1 1 0">
+      <div>
+        <n-space item-style="flex:1 1 0">
+          <n-form-item label="Amount of element to consume">
+            <n-input-number v-model:value="unitCount" />
+          </n-form-item>
+          <n-form-item label="The consumption started at">
+            <n-date-picker v-model:value="startedAt" type="datetime" />
+          </n-form-item>
+        </n-space>
+
+        <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+          <n-input-number v-model:value="unitPerTimeSpan" />
+          <span style="margin: 0 10px">in</span>
+          <n-input-group>
+            <n-input-number v-model:value="timeSpan" />
+            <n-select
+              v-model:value="timeSpanUnitMultiplier"
+              :options="[
+                { label: 'milliseconds', value: 1 },
+                { label: 'seconds', value: 1000 },
+                { label: 'minutes', value: 1000 * 60 },
+                { label: 'hours', value: 1000 * 60 * 60 },
+                { label: 'days', value: 1000 * 60 * 60 * 24 },
+              ]"
+            ></n-select>
+          </n-input-group>
+        </n-form-item>
+
+        <n-divider />
+        <n-space vertical>
+          <n-card>
+            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
+          </n-card>
+          <n-card>
+            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
+          </n-card>
+        </n-space>
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { addMilliseconds, formatRelative } from 'date-fns';
+import { enGB } from 'date-fns/locale';
+import { computed, ref } from 'vue';
+import { formatMsDuration } from './eta-calculator.service';
+
+const unitCount = ref(3 * 62);
+const unitPerTimeSpan = ref(3);
+const timeSpan = ref(5);
+const timeSpanUnitMultiplier = ref(60000);
+const startedAt = ref(Date.now());
+
+const durationMs = computed(() => {
+  const timeSpanMs = timeSpan.value * timeSpanUnitMultiplier.value;
+
+  return unitCount.value / (unitPerTimeSpan.value / timeSpanMs);
+});
+const endAt = computed(() =>
+  formatRelative(addMilliseconds(startedAt.value, durationMs.value), Date.now(), { locale: enGB }),
+);
+</script>
+
+<style lang="less" scoped>
+.n-input-number,
+.n-date-picker {
+  width: 100%;
+}
+</style>
--- a/src/tools/eta-calculator/index.ts
+++ b/src/tools/eta-calculator/index.ts
@@ -0,0 +1,12 @@
+import { Hourglass } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ETA calculator',
+  path: '/eta-calculator',
+  description:
+    'An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.',
+  keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
+  component: () => import('./eta-calculator.vue'),
+  icon: Hourglass,
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,30 +1,35 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';

-import { tool as mathEvaluator } from './math-evaluator';
-import { tool as jsonViewer } from './json-viewer';
-import { tool as htmlEntities } from './html-entities';
-import { tool as urlParser } from './url-parser';
-import { tool as deviceInformation } from './device-information';
+import { tool as base64FileConverter } from './base64-file-converter';
+import { tool as base64StringConverter } from './base64-string-converter';
+import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as bcrypt } from './bcrypt';
+import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
+import { tool as chronometer } from './chronometer';
 import { tool as colorConverter } from './color-converter';
-import { tool as qrCodeGenerator } from './qr-code-generator';
-import { tool as base64Converter } from './base64-converter';
 import { tool as crontabGenerator } from './crontab-generator';
+import { tool as dateTimeConverter } from './date-time-converter';
+import { tool as deviceInformation } from './device-information';
+import { tool as cypher } from './encryption';
+import { tool as etaCalculator } from './eta-calculator';
+import { tool as gitMemo } from './git-memo';
+import { tool as hashText } from './hash-text';
+import { tool as htmlEntities } from './html-entities';
+import { tool as baseConverter } from './integer-base-converter';
+import { tool as jsonViewer } from './json-viewer';
+import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
+import { tool as mathEvaluator } from './math-evaluator';
+import { tool as qrCodeGenerator } from './qr-code-generator';
+import { tool as randomPortGenerator } from './random-port-generator';
+import { tool as romanNumeralConverter } from './roman-numeral-converter';
+import { tool as sqlPrettify } from './sql-prettify';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
-import { tool as hashText } from './hash-text';
-import { tool as uuidGenerator } from './uuid-generator';
-import { tool as romanNumeralConverter } from './roman-numeral-converter';
-import { tool as cypher } from './encryption';
-import { tool as bip39 } from './bip39-generator';
-import { tool as dateTimeConverter } from './date-time-converter';
-import { tool as gitMemo } from './git-memo';
-import { tool as baseConverter } from './integer-base-converter';
 import { tool as urlEncoder } from './url-encoder';
-import { tool as randomPortGenerator } from './random-port-generator';
-import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
+import { tool as urlParser } from './url-parser';
+import { tool as uuidGenerator } from './uuid-generator';

 export const toolsByCategory: ToolCategory[] = [
  {
@@ -39,7 +44,8 @@ export const toolsByCategory: ToolCategory[] = [
      dateTimeConverter,
      baseConverter,
      romanNumeralConverter,
-      base64Converter,
+      base64StringConverter,
+      base64FileConverter,
      colorConverter,
      caseConverter,
    ],
@@ -47,17 +53,22 @@ export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Web',
    icon: LockOpen,
-    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation],
+    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation, basicAuthGenerator],
  },
  {
    name: 'Development',
    icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify],
  },
  {
    name: 'Math',
    icon: LockOpen,
-    components: [mathEvaluator],
+    components: [mathEvaluator, etaCalculator],
+  },
+  {
+    name: 'Measurement',
+    icon: LockOpen,
+    components: [chronometer],
  },
  {
    name: 'Text',
--- a/src/tools/json-viewer/index.ts
+++ b/src/tools/json-viewer/index.ts
@@ -2,10 +2,11 @@ import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';

 export const tool = defineTool({
-  name: 'JSON viewer',
-  path: '/json-viewer',
-  description: 'Prettify JSON string to a human friendly readable format.',
+  name: 'JSON prettify and format',
+  path: '/json-prettify',
+  description: 'Prettify your JSON string to a human friendly readable format.',
  keywords: ['json', 'viewer', 'prettify', 'format'],
  component: () => import('./json-viewer.vue'),
  icon: Braces,
+  redirectFrom: ['/json-viewer'],
 });
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -1,45 +1,44 @@
 <template>
-  <n-card>
-    <n-form-item
-      label="Your raw json:"
-      :feedback="rawJsonValidation.message"
-      :validation-status="rawJsonValidation.status"
-    >
-      <n-input
-        v-model:value="rawJson"
-        class="json-input"
-        type="textarea"
-        placeholder="Paste your raw json here..."
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-    </n-form-item>
-
-    <n-space justify="center">
-      <n-button secondary @click="rawJson = ''">Clear</n-button>
-    </n-space>
-  </n-card>
-
-  <n-card v-if="cleanJson.length > 0">
-    <n-scrollbar :x-scrollable="true">
+  <n-form-item
+    label="Your raw json"
+    :feedback="rawJsonValidation.message"
+    :validation-status="rawJsonValidation.status"
+  >
+    <n-input
+      ref="inputElement"
+      v-model:value="rawJson"
+      placeholder="Paste your raw json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Prettify version of your json">
+    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
      <n-config-provider :hljs="hljs">
-        <n-code :code="cleanJson" language="json" />
+        <n-code :code="cleanJson" language="json" :trim="false" />
      </n-config-provider>
-    </n-scrollbar>
-  </n-card>
+      <n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
+    </n-card>
+  </n-form-item>
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { useCopy } from '@/composable/copy';
+import { useValidation } from '@/composable/validation';
+import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
-import { useValidation } from '@/composable/validation';
+import { computed, ref } from 'vue';

 hljs.registerLanguage('json', json);
+const inputElement = ref<HTMLElement>();
+const { height: inputElementHeight } = useElementSize(inputElement);

-const rawJson = ref('');
+const rawJson = ref('{"hello": "world"}');
 const cleanJson = computed(() => {
  try {
    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
@@ -48,19 +47,26 @@ const cleanJson = computed(() => {
  }
 });

+const { copy } = useCopy({ source: cleanJson });
+
 const rawJsonValidation = useValidation({
  source: rawJson,
  rules: [
    {
      validator: (v) => v === '' || JSON.parse(v),
-      message: 'Invalid json string',
+      message: 'Invalid json',
    },
  ],
 });
 </script>

 <style lang="less" scoped>
-.json-input ::v-deep(.n-input-wrapper) {
-  resize: both !important;
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
 }
 </style>
--- a/src/tools/sql-prettify/index.ts
+++ b/src/tools/sql-prettify/index.ts
@@ -0,0 +1,26 @@
+import { Database } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'SQL prettify and format',
+  path: '/sql-prettify',
+  description: 'Format and prettify your SQL queries online (it supports various SQL dialects).',
+  keywords: [
+    'sql',
+    'prettify',
+    'beautify',
+    'GCP BigQuery',
+    'IBM DB2',
+    'Apache Hive',
+    'MariaDB',
+    'MySQL',
+    'Couchbase N1QL',
+    'Oracle PL/SQL',
+    'PostgreSQL',
+    'Amazon Redshift',
+    'Spark',
+    'SQL Server Transact-SQL',
+  ],
+  component: () => import('./sql-prettify.vue'),
+  icon: Database,
+});
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -0,0 +1,105 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space item-style="flex:1 1 0" style="margin: 0 auto; max-width: 600px" :vertical="styleStore.isSmallScreen">
+      <n-form-item label="Dialect" label-width="500">
+        <n-select
+          v-model:value="config.language"
+          :options="[
+            { label: 'GCP BigQuery', value: 'bigquery' },
+            { label: 'IBM DB2', value: 'db2' },
+            { label: 'Apache Hive', value: 'hive' },
+            { label: 'MariaDB', value: 'mariadb' },
+            { label: 'MySQL', value: 'mysql' },
+            { label: 'Couchbase N1QL', value: 'n1ql' },
+            { label: 'Oracle PL/SQL', value: 'plsql' },
+            { label: 'PostgreSQL', value: 'postgresql' },
+            { label: 'Amazon Redshift', value: 'redshift' },
+            { label: 'Spark', value: 'spark' },
+            { label: 'Standard SQL', value: 'sql' },
+            { label: 'sqlite', value: 'sqlite' },
+            { label: 'SQL Server Transact-SQL', value: 'tsql' },
+          ]"
+        />
+      </n-form-item>
+      <n-form-item label="Keyword case">
+        <n-select
+          v-model:value="config.keywordCase"
+          :options="[
+            { label: 'UPPERCASE', value: 'upper' },
+            { label: 'lowercase', value: 'lower' },
+            { label: 'Preserve', value: 'preserve' },
+          ]"
+        />
+      </n-form-item>
+      <n-form-item label="Indent style">
+        <n-select
+          v-model:value="config.indentStyle"
+          :options="[
+            { label: 'Standard', value: 'standard' },
+            { label: 'Tabular left', value: 'tabularLeft' },
+            { label: 'Tabular right', value: 'tabularRight' },
+          ]"
+        />
+      </n-form-item>
+    </n-space>
+  </div>
+
+  <n-form-item label="Your SQL query">
+    <n-input
+      ref="inputElement"
+      v-model:value="rawSQL"
+      placeholder="Put your SQL query here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Prettify version of your query">
+    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
+      <n-config-provider :hljs="hljs">
+        <n-code :code="prettySQL" language="sql" :trim="false" />
+      </n-config-provider>
+      <n-button v-if="prettySQL" class="copy-button" secondary @click="copy">Copy</n-button>
+    </n-card>
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { useStyleStore } from '@/stores/style.store';
+import { useElementSize } from '@vueuse/core';
+import hljs from 'highlight.js/lib/core';
+import sqlHljs from 'highlight.js/lib/languages/sql';
+import { format as formatSQL, type FormatFnOptions } from 'sql-formatter';
+import { computed, reactive, ref } from 'vue';
+hljs.registerLanguage('sql', sqlHljs);
+
+const inputElement = ref<HTMLElement>();
+const { height: inputElementHeight } = useElementSize(inputElement);
+const styleStore = useStyleStore();
+const config = reactive<Partial<FormatFnOptions>>({
+  keywordCase: 'upper',
+  useTabs: false,
+  language: 'sql',
+  indentStyle: 'standard',
+  tabulateAlias: true,
+});
+
+const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
+const prettySQL = computed(() => formatSQL(rawSQL.value, config));
+const { copy } = useCopy({ source: prettySQL });
+</script>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -5,19 +5,17 @@
    <br />
    <n-space justify="space-around">
      <n-statistic label="Character count" :value="text.length" />
-      <n-statistic label="Word count" :value="text.split(/\s+/).length" />
-      <n-statistic label="Line count" :value="text.split(/\r\n|\r|\n/).length" />
+      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
+      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
    </n-space>
  </n-card>
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
 import { formatBytes } from '@/utils/convert';
+import { ref } from 'vue';
 import { getStringSizeInBytes } from './text-statistics.service';

-const text = ref(
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo risus faucibus varius volutpat habitasse suspendisse justo inceptos primis mi. Fusce molestie lorem bibendum habitasse litora adipiscing turpis egestas quis nec. Non id conubia vulputate etiam iaculis vitae venenatis hac fusce condimentum. Adipiscing pellentesque venenatis ornare pulvinar tempus hac montes velit erat convallis.',
-);
+const text = ref('');
 </script>
Author	SHA1	Message	Date
Corentin Thomasset	352365f012	chore(release): 2.9.2	2022-07-28 19:31:16 +02:00
Corentin Thomasset	4f599b6999	fix(device-information): handle of unknown values	2022-07-28 19:30:36 +02:00
JWB	138149e6f0	fix(device-information): prevent unwanted y-truncature of text * Device information page styling fix I was checking out your site, and really like it! already added to my bookmarks, and when I was on the Device Information page I noticed the `p` and `y` in the words 1 dppx and landscape-primary were cut off and my ocd kicked in to tweak it. The fix was to remove the line height set on the value, and then to keep the spacing how it was just moving it up 5px seemed to do the trick. I'm using Firefox 102.0.1 on Windows 11. I'll attach some pics so you can see the before and after. I've never messed with vue, but after looking at this file here ya make me want to check it out more. I love how its keeping it all together in one file. Might also need to rebuild it the site after this change, but you get the point. Awesome site! * Update src/tools/device-information/device-information.vue Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2022-07-28 19:28:23 +02:00
Corentin Thomasset	412de23796	fix(base64-file): fixed url slug	2022-07-25 23:31:06 +02:00
Corentin Thomasset	1a22d55b3c	refactor(base64-file): fixed typo	2022-07-25 23:23:53 +02:00
Corentin Thomasset	bb4aac6d4a	chore(release): 2.9.1	2022-07-25 23:22:32 +02:00
Corentin Thomasset	e6953d1b67	refactor(base64): split base64 text and file conversion in two tools + base64 to file	2022-07-25 23:21:42 +02:00
Corentin Thomasset	a70a0f83a1	chore(release): 2.9.0	2022-07-25 18:48:09 +02:00
Corentin Thomasset	bdee93a9e4	feat(new-tool): added a basic auth generator	2022-07-25 18:47:27 +02:00
Corentin Thomasset	08ce407a01	chore(release): 2.8.0	2022-07-24 18:36:15 +02:00
Corentin Thomasset	125a50215a	feat(new-tool): added an ETA calculator	2022-07-24 18:32:05 +02:00
Corentin Thomasset	d5738e1aef	chore(deps): upgraded naive-ui version	2022-07-24 18:24:44 +02:00
Corentin Thomasset	560fcf3f78	fix(sql-prettifier): better responsiveness	2022-07-24 15:54:05 +02:00
Corentin Thomasset	328fda65b3	refactor(json-prettify): improved layout for the json prettifier	2022-07-24 15:10:38 +02:00
Corentin Thomasset	ba87097e3d	refactor(sql-prettifier): remove unused service files	2022-07-24 15:06:57 +02:00
Corentin Thomasset	99383d25fc	chore(release): 2.7.0	2022-07-24 14:39:40 +02:00
Corentin Thomasset	d1f95f5b34	feat(new-tool): added an SQL prettifier and formatter	2022-07-24 14:37:27 +02:00
Corentin Thomasset	6cd25a743e	fix(typo): fix few typos	2022-07-24 10:38:28 +02:00
Corentin Thomasset	d2f5d3c3de	chore(release): 2.6.0	2022-07-24 00:58:59 +02:00
Corentin Thomasset	130031c225	feat(new-tool): added chronometer	2022-07-24 00:58:18 +02:00
Corentin Thomasset	1c7257eeb0	fix(script):fixed missing paranthesis in tool generator script	2022-07-23 23:07:53 +02:00
Corentin Thomasset	214084262c	refactor(import): auto reordered imports	2022-07-23 23:04:57 +02:00
Corentin Thomasset	92ce419f45	fix(text-statistics): empty text mean 0 words and 0 lines	2022-07-23 19:09:22 +02:00
Corentin Thomasset	394d085846	refactor: added accessibility labels on icon buttons	2022-07-23 18:55:26 +02:00
Corentin Thomasset	ab53048d5f	feat(search): focus the search bar using Ctrl+K	2022-07-23 18:49:10 +02:00
Corentin Thomasset	c3a302bc38	fix(lint): cleanned index.html	2022-07-23 18:19:40 +02:00
Corentin Thomasset	a16161cdb4	fix(deps): run dependencie audit auto fix	2022-07-23 18:19:06 +02:00