Merge branch 'main' into card-hover

feat(new tool): add wifi qr code generator (#599 )
* (feat: new tool): add wifi qr code generator * Update src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * Update src/tools/wifi-qr-code-generator/index.ts Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * remove naive UI grid * Update src/tools/wifi-qr-code-generator/index.ts --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>
2025-11-04 22:13:13 +00:00 · 2023-09-06 10:53:40 +02:00 · 2023-09-06 07:46:40 +00:00 · 2023-09-05 08:56:16 +02:00 · 2023-09-04 14:51:04 +02:00 · 2023-09-03 20:07:45 +00:00
31 changed files with 825 additions and 241 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -31,6 +31,4 @@ jobs:
        run: pnpm typecheck

      - name: Build the app
-        env:
-          NODE_OPTIONS: --max-old-space-size=4096
        run: pnpm build
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -1,13 +1,13 @@
 name: E2E tests
-on: [deployment_status]
-
+on:
+  pull_request:
+  push:
+    branches:
+      - main
 jobs:
  test:
-    if: github.event.deployment_status.state == 'success'
    timeout-minutes: 60
    runs-on: ubuntu-latest
-    env:
-      BASE_URL: ${{ github.event.deployment_status.target_url }}
    strategy:
      matrix:
        shard: [1/3, 2/3, 3/3]
@@ -28,6 +28,9 @@ jobs:
      - name: Install dependencies
        run: pnpm install

+      - name: Build app
+        run: pnpm build
+
      - name: Restore Playwright browsers from cache
        uses: actions/cache@v3
        with:
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,6 +32,8 @@ declare module '@vue/runtime-core' {
    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
    CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default']
    'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default']
+    CKeyValueList: typeof import('./src/ui/c-key-value-list/c-key-value-list.vue')['default']
+    CKeyValueListItem: typeof import('./src/ui/c-key-value-list/c-key-value-list-item.vue')['default']
    CLabel: typeof import('./src/ui/c-label/c-label.vue')['default']
    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
@@ -45,6 +47,10 @@ declare module '@vue/runtime-core' {
    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
    CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
    'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
+    CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
+    'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
+    CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
+    'CTooltip.demo': typeof import('./src/ui/c-tooltip/c-tooltip.demo.vue')['default']
    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
    'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
@@ -68,6 +74,7 @@ declare module '@vue/runtime-core' {
    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
@@ -181,6 +188,7 @@ declare module '@vue/runtime-core' {
    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
    XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
    YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -1,4 +1,5 @@
 home:
  categories:
    newestTools: Newest tools
-
+    allTheTools: All the tools
+    yourFavoriteTools: Your favorite tools
--- a/package.json
+++ b/package.json
@@ -21,11 +21,12 @@
  },
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && NODE_OPTIONS=--max_old_space_size=4096 vite build",
    "preview": "vite preview --port 5050",
    "test": "npm run test:unit",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "playwright test",
+    "test:e2e:dev": "BASE_URL=http://localhost:5173 NO_WEB_SERVER=true playwright test",
    "coverage": "vitest run --coverage",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
@@ -58,6 +59,7 @@
    "fuse.js": "^6.6.2",
    "highlight.js": "^11.7.0",
    "iarna-toml-esm": "^3.0.5",
+    "ibantools": "^4.3.3",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.28",
@@ -73,7 +75,7 @@
    "plausible-tracker": "^0.3.8",
    "qrcode": "^1.5.1",
    "randombytes": "^2.1.0",
-    "sql-formatter": "^12.0.0",
+    "sql-formatter": "^13.0.0",
    "ua-parser-js": "^1.0.35",
    "unicode-emoji-json": "^0.4.0",
    "unplugin-auto-import": "^0.16.4",
@@ -88,7 +90,7 @@
  "devDependencies": {
    "@antfu/eslint-config": "^0.41.0",
    "@iconify-json/mdi": "^1.1.50",
-    "@intlify/unplugin-vue-i18n": "^0.12.3",
+    "@intlify/unplugin-vue-i18n": "^0.13.0",
    "@playwright/test": "^1.32.3",
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^18.2.0",
@@ -120,7 +122,7 @@
    "typescript": "~5.2.0",
    "unocss": "^0.55.0",
    "unocss-preset-scrollbar": "^0.2.1",
-    "unplugin-icons": "^0.16.5",
+    "unplugin-icons": "^0.17.0",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.4.9",
    "vite-plugin-pwa": "^0.16.0",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, devices } from '@playwright/test';

 const isCI = !!process.env.CI;
 const baseUrl = process.env.BASE_URL || 'http://localhost:5050';
+const useWebServer = process.env.NO_WEB_SERVER !== 'true';

 /**
 * See https://playwright.dev/docs/test-configuration.
@@ -52,13 +53,13 @@ export default defineConfig({

  /* Run your local dev server before starting the tests */

-  ...(isCI
-    ? {}
-    : {
-        webServer: {
-          command: 'npm run preview',
-          url: 'http://127.0.0.1:5050',
-          reuseExistingServer: true,
-        },
-      }),
+  ...(useWebServer
+    && {
+      webServer: {
+        command: 'npm run preview',
+        url: 'http://127.0.0.1:5050',
+        reuseExistingServer: !isCI,
+      },
+    }
+  ),
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ dependencies:
  iarna-toml-esm:
    specifier: ^3.0.5
    version: 3.0.5
+  ibantools:
+    specifier: ^4.3.3
+    version: 4.3.3
  json5:
    specifier: ^2.2.3
    version: 2.2.3
@@ -126,8 +129,8 @@ dependencies:
    specifier: ^2.1.0
    version: 2.1.0
  sql-formatter:
-    specifier: ^12.0.0
-    version: 12.0.0
+    specifier: ^13.0.0
+    version: 13.0.0
  ua-parser-js:
    specifier: ^1.0.35
    version: 1.0.35
@@ -167,8 +170,8 @@ devDependencies:
    specifier: ^1.1.50
    version: 1.1.50
  '@intlify/unplugin-vue-i18n':
-    specifier: ^0.12.3
-    version: 0.12.3(rollup@2.79.1)(vue-i18n@9.2.2)
+    specifier: ^0.13.0
+    version: 0.13.0(rollup@2.79.1)(vue-i18n@9.2.2)
  '@playwright/test':
    specifier: ^1.32.3
    version: 1.32.3
@@ -263,8 +266,8 @@ devDependencies:
    specifier: ^0.2.1
    version: 0.2.1(unocss@0.55.0)
  unplugin-icons:
-    specifier: ^0.16.5
-    version: 0.16.5(@vue/compiler-sfc@3.2.47)
+    specifier: ^0.17.0
+    version: 0.17.0(@vue/compiler-sfc@3.2.47)
  unplugin-vue-components:
    specifier: ^0.25.0
    version: 0.25.0(rollup@2.79.1)(vue@3.3.4)
@@ -414,6 +417,10 @@ packages:
    resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
    dev: true

+  /@antfu/utils@0.7.6:
+    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
+    dev: true
+
  /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
    resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
    engines: {node: '>=10'}
@@ -483,7 +490,7 @@ packages:
      '@babel/helper-compilation-targets': 7.22.5(@babel/core@7.22.5)
      '@babel/helper-module-transforms': 7.22.5
      '@babel/helpers': 7.22.5
-      '@babel/parser': 7.22.5
+      '@babel/parser': 7.22.10
      '@babel/template': 7.22.5
      '@babel/traverse': 7.22.5
      '@babel/types': 7.22.5
@@ -2088,8 +2095,21 @@ packages:
      - supports-color
    dev: true

-  /@intlify/bundle-utils@7.0.2(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-8wbx9xhbawBFTE5LPTECiK26RRqrNS31jyWSur72ZXZZ4it5jiZTcG6eUJlNirr4+jXYio2DGY299JsGVT4cpw==}
+  /@iconify/utils@2.1.9:
+    resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.6
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@intlify/bundle-utils@7.1.0(vue-i18n@9.2.2):
+    resolution: {integrity: sha512-Q88Wl2T8oaRXls8Yr6l807jZM88mceJvK7QS6gKdU8/pf3gTpU9XmcYORDgAv6h5WKQMoaFjNVf5+SWLfTAysA==}
    engines: {node: '>= 14.16'}
    peerDependencies:
      petite-vue-i18n: '*'
@@ -2100,17 +2120,17 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.24
-      '@intlify/shared': 9.3.0-beta.24
+      '@intlify/message-compiler': 9.3.0-beta.27
+      '@intlify/shared': 9.3.0-beta.27
      acorn: 8.10.0
      escodegen: 2.0.0
      estree-walker: 2.0.2
-      jsonc-eslint-parser: 1.4.1
+      jsonc-eslint-parser: 2.3.0
      magic-string: 0.30.2
      mlly: 1.4.0
      source-map-js: 1.0.2
      vue-i18n: 9.2.2(vue@3.3.4)
-      yaml-eslint-parser: 0.3.2
+      yaml-eslint-parser: 1.2.2
    dev: true

  /@intlify/core-base@9.2.2:
@@ -2135,11 +2155,11 @@ packages:
      '@intlify/shared': 9.2.2
      source-map: 0.6.1

-  /@intlify/message-compiler@9.3.0-beta.24:
-    resolution: {integrity: sha512-prhHATkgp0mpPqoVgiAtLmUc1JMvs8fMH6w53AVEBn+VF87dLhzanfmWY5FoZWORG51ag54gBDBOoM/VFv3m3A==}
+  /@intlify/message-compiler@9.3.0-beta.27:
+    resolution: {integrity: sha512-GC8rSbd7V67Zu+a9Z0bpV4riBek11YCURJU50YaEhV4Ub2JHEPtoYxK5r2eIsq/kp+M2hJyGLiC4NJUrGa2VwQ==}
    engines: {node: '>= 16'}
    dependencies:
-      '@intlify/shared': 9.3.0-beta.24
+      '@intlify/shared': 9.3.0-beta.27
      source-map-js: 1.0.2
    dev: true

@@ -2147,13 +2167,18 @@ packages:
    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
    engines: {node: '>= 14'}

-  /@intlify/shared@9.3.0-beta.24:
-    resolution: {integrity: sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==}
+  /@intlify/shared@9.3.0-beta.14-77e850b:
+    resolution: {integrity: sha512-aHZYRM0sJN+YSUnoC5Dv4L1TFYtP23kdTkrK5cHSEqUbI5UXc8FbnXPal0lJliMhO0ED7Ic7aEOeQX84BM3xCQ==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /@intlify/shared@9.3.0-beta.27:
+    resolution: {integrity: sha512-hPMsmVCs+ZUVHHU5VORG6LopzXZT7zmyVNqc9OQG80YpA/N4lT/pkJ4B6DTNIsv2C7mwfGM7RdK+0qPki43YgA==}
    engines: {node: '>= 16'}
    dev: true

-  /@intlify/unplugin-vue-i18n@0.12.3(rollup@2.79.1)(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-0riPtSfTM58JmGNMmJho/aHD2z3K24BESYAmkLvKlo61/LbaPvnjYU1DbSbJEm6bSjE2oEjUj+di3QaYxXei/w==}
+  /@intlify/unplugin-vue-i18n@0.13.0(rollup@2.79.1)(vue-i18n@9.2.2):
+    resolution: {integrity: sha512-Mm9NhcvbsSZ5FXXnCpL/XFCk1hPp809hxErNmnwqGp21JjYOKGp3wpQSrpvGk33ZrHZbhPqAu70IEVEAxVZ5+A==}
    engines: {node: '>= 14.16'}
    peerDependencies:
      petite-vue-i18n: '*'
@@ -2167,8 +2192,8 @@ packages:
      vue-i18n-bridge:
        optional: true
    dependencies:
-      '@intlify/bundle-utils': 7.0.2(vue-i18n@9.2.2)
-      '@intlify/shared': 9.3.0-beta.24
+      '@intlify/bundle-utils': 7.1.0(vue-i18n@9.2.2)
+      '@intlify/shared': 9.3.0-beta.14-77e850b
      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
      '@vue/compiler-sfc': 3.3.4
      debug: 4.3.4
@@ -3244,7 +3269,7 @@ packages:
    dependencies:
      '@unhead/dom': 0.5.1
      '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.4.0(vue@3.3.4)
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
      unhead: 0.5.1
      vue: 3.3.4
    transitivePeerDependencies:
@@ -3826,8 +3851,8 @@ packages:
      - vue
    dev: false

-  /@vueuse/shared@10.4.0(vue@3.3.4):
-    resolution: {integrity: sha512-52asvLf5cbAS/h6xWjqoY4MgjxmFjnVNf/nA8BP7RbeIrIGcf+BZbeOcVo+92byqArXEJiBxptXpufQvbwJL/w==}
+  /@vueuse/shared@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
    dependencies:
      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
@@ -3847,20 +3872,12 @@ packages:
    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
    dev: true

-  /acorn-jsx@5.3.2(acorn@7.4.1):
+  /acorn-jsx@5.3.2(acorn@8.10.0):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
-      acorn: 7.4.1
-    dev: true
-
-  /acorn-jsx@5.3.2(acorn@8.9.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0
    dev: true

  /acorn-walk@8.2.0:
@@ -3868,15 +3885,10 @@ packages:
    engines: {node: '>=0.4.0'}
    dev: true

-  /acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    dev: true
-
  /acorn@8.10.0:
    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
    engines: {node: '>=0.4.0'}
-    dev: true
+    hasBin: true

  /acorn@8.9.0:
    resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
@@ -4898,6 +4910,7 @@ packages:
  /escodegen@2.0.0:
    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
    engines: {node: '>=6.0'}
+    hasBin: true
    dependencies:
      esprima: 4.0.1
      estraverse: 5.3.0
@@ -5176,18 +5189,6 @@ packages:
      estraverse: 5.3.0
    dev: true

-  /eslint-utils@2.1.0:
-    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
-    engines: {node: '>=6'}
-    dependencies:
-      eslint-visitor-keys: 1.3.0
-    dev: true
-
-  /eslint-visitor-keys@1.3.0:
-    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
-    engines: {node: '>=4'}
-    dev: true
-
  /eslint-visitor-keys@3.4.3:
    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5238,27 +5239,19 @@ packages:
      - supports-color
    dev: true

-  /espree@6.2.1:
-    resolution: {integrity: sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      eslint-visitor-keys: 1.3.0
-    dev: true
-
  /espree@9.6.1:
    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      acorn: 8.9.0
-      acorn-jsx: 5.3.2(acorn@8.9.0)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
      eslint-visitor-keys: 3.4.3
    dev: true

  /esprima@4.0.1:
    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
    engines: {node: '>=4'}
+    hasBin: true
    dev: true

  /esquery@1.5.0:
@@ -5572,6 +5565,11 @@ packages:
    resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
    dev: true

+  /get-stdin@8.0.0:
+    resolution: {integrity: sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==}
+    engines: {node: '>=10'}
+    dev: false
+
  /get-stream@6.0.1:
    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
    engines: {node: '>=10'}
@@ -5845,6 +5843,10 @@ packages:
      stream: 0.0.2
    dev: false

+  /ibantools@4.3.3:
+    resolution: {integrity: sha512-RUTlGuFj3cU/Qfu5YIrsIZjW34/VDgKOz5fDr64Mc4NWP9b2i48vQ39r5xCl1yyFQeyEG/lASstIQHAUX18rRA==}
+    dev: false
+
  /iconv-lite@0.6.3:
    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
    engines: {node: '>=0.10.0'}
@@ -6221,6 +6223,7 @@ packages:

  /js-yaml@3.14.1:
    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
    dependencies:
      argparse: 1.0.10
      esprima: 4.0.1
@@ -6228,6 +6231,7 @@ packages:

  /js-yaml@4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
    dependencies:
      argparse: 2.0.1
    dev: true
@@ -6319,17 +6323,6 @@ packages:
    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
    engines: {node: '>=6'}

-  /jsonc-eslint-parser@1.4.1:
-    resolution: {integrity: sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      acorn: 7.4.1
-      eslint-utils: 2.1.0
-      eslint-visitor-keys: 1.3.0
-      espree: 6.2.1
-      semver: 6.3.1
-    dev: true
-
  /jsonc-eslint-parser@2.3.0:
    resolution: {integrity: sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6661,7 +6654,7 @@ packages:
  /mlly@1.4.0:
    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
    dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0
      pathe: 1.1.1
      pkg-types: 1.0.3
      ufo: 1.1.2
@@ -6725,6 +6718,7 @@ packages:

  /nearley@2.20.1:
    resolution: {integrity: sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==}
+    hasBin: true
    dependencies:
      commander: 2.20.3
      moo: 0.5.2
@@ -7088,6 +7082,7 @@ packages:
  /pify@4.0.1:
    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
    engines: {node: '>=6'}
+    requiresBuild: true
    dev: true
    optional: true

@@ -7351,6 +7346,7 @@ packages:

  /prr@1.0.1:
    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -7627,10 +7623,12 @@ packages:

  /safer-buffer@2.1.2:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    requiresBuild: true
    dev: true

  /sax@1.2.4:
    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -7828,10 +7826,12 @@ packages:
    resolution: {integrity: sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==}
    dev: false

-  /sql-formatter@12.0.0:
-    resolution: {integrity: sha512-LR2m7BEvkyNAPzmcSCZ2b4Qzm5ySiiXS9Juc73VguTqCWIbYv7ZFV4LaDM7jNNZqHPfrqFssO7WWpITsAuLOuQ==}
+  /sql-formatter@13.0.0:
+    resolution: {integrity: sha512-V21cVvge4rhn9Fa7K/fTKcmPM+x1yee6Vhq8ZwgaWh3VPBqApgsaoFB5kLAhiqRo5AmSaRyLU7LIdgnNwH01/w==}
+    hasBin: true
    dependencies:
      argparse: 2.0.1
+      get-stdin: 8.0.0
      nearley: 2.20.1
    dev: false

@@ -7946,7 +7946,7 @@ packages:
  /strip-literal@1.0.1:
    resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==}
    dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0

  /supports-color@5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -8316,7 +8316,7 @@ packages:
      pkg-types: 1.0.3
      scule: 1.0.0
      strip-literal: 1.0.1
-      unplugin: 1.3.1
+      unplugin: 1.4.0
    transitivePeerDependencies:
      - rollup
    dev: false
@@ -8416,8 +8416,8 @@ packages:
      - rollup
    dev: false

-  /unplugin-icons@0.16.5(@vue/compiler-sfc@3.2.47):
-    resolution: {integrity: sha512-laCCqMWfng1XZgB9yowGfjBdDhtmz8t8zVnhzRNEMhBNdy26QrVewVmdXk/zsiAQYnEWvIxTjvW1nQXrxdd2+w==}
+  /unplugin-icons@0.17.0(@vue/compiler-sfc@3.2.47):
+    resolution: {integrity: sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==}
    peerDependencies:
      '@svgr/core': '>=7.0.0'
      '@svgx/core': ^1.0.1
@@ -8437,8 +8437,8 @@ packages:
        optional: true
    dependencies:
      '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.5
-      '@iconify/utils': 2.1.7
+      '@antfu/utils': 0.7.6
+      '@iconify/utils': 2.1.9
      '@vue/compiler-sfc': 3.2.47
      debug: 4.3.4
      kolorist: 1.8.0
@@ -8488,11 +8488,10 @@ packages:
  /unplugin@1.4.0:
    resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
    dependencies:
-      acorn: 8.9.0
+      acorn: 8.10.0
      chokidar: 3.5.3
      webpack-sources: 3.2.3
      webpack-virtual-modules: 0.5.0
-    dev: true

  /upath@1.2.0:
    resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
@@ -9212,14 +9211,6 @@ packages:
  /yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}

-  /yaml-eslint-parser@0.3.2:
-    resolution: {integrity: sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==}
-    dependencies:
-      eslint-visitor-keys: 1.3.0
-      lodash: 4.17.21
-      yaml: 1.10.2
-    dev: true
-
  /yaml-eslint-parser@1.2.2:
    resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
    engines: {node: ^14.17.0 || >=16.0.0}
@@ -9229,11 +9220,6 @@ packages:
      yaml: 2.2.1
    dev: true

-  /yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-    dev: true
-
  /yaml@2.2.1:
    resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
    engines: {node: '>= 14'}
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';

 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>

 <template>
  <router-link :to="tool.path">
-    <c-card class="tool-card">
+    <c-card class="tool-card" shadow>
      <div flex items-center justify-between>
        <n-icon class="icon" size="40" :component="tool.icon" />
        <div flex items-center gap-8px>
@@ -32,15 +29,14 @@ const appTheme = useAppTheme();
          <FavoriteButton :tool="tool" />
        </div>
      </div>
-      <n-h3 class="title">
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
+      <n-h3 class="title" truncate>
+        {{ tool.name }}
      </n-h3>

      <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
+        <div line-clamp-2 style="min-height: 44.78px">
          {{ tool.description }}
-          <br>&nbsp;
-        </n-ellipsis>
+        </div>
      </div>
    </c-card>
  </router-link>
@@ -52,16 +48,14 @@ a {
 }

 .tool-card {
-  transition: border-color ease 0.5s;
  border-width: 2px !important;
  color: transparent;
-
-  &:hover {
-    border-color: v-bind('appTheme.primary.colorHover');
-  }
+  position: relative;
+  border-radius: 15px;
+  border: none;

  .icon {
-    opacity: 0.6;
+    opacity: 0.4;
    color: v-bind('theme.textColorBase');
  }

@@ -74,5 +68,46 @@ a {
    color: v-bind('theme.textColorBase');
    margin: 5px 0;
  }
+
+  &::after {
+    --mask-radius: 20em;
+
+    border-radius: 15px;
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+    display: block;
+    height: calc(100% - 4px) ;
+    width:  calc(100% - 4px) ;
+    background: #18a05818;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+
+    -webkit-mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    will-change: mask;
+  }
+
+  &:hover {
+    &::after {
+      --mask-radius: 50em;
+      border: 2px solid #18a058;
+    }
+  }
 }
 </style>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,99 +1,39 @@
 <script setup lang="ts">
-import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
-import ColoredCard from '../components/ColoredCard.vue';
-import ToolCard from '../components/ToolCard.vue';
 import { useToolStore } from '@/tools/tools.store';
-import { config } from '@/config';

 const toolStore = useToolStore();

 useHead({ title: 'IT Tools - Handy online tools for developers' });
-const { t } = useI18n();
 </script>

 <template>
-  <div class="home-page">
-    <div class="grid-wrapper">
-      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi>
-          <ColoredCard title="You like it-tools?" :icon="Heart">
-            Give us a star on
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' GitHub repository"
-            >GitHub</a>
-            or follow us on
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' Twitter account"
-            >Twitter</a>! Thank you
-            <n-icon :component="Heart" />
-          </ColoredCard>
-        </n-gi>
-      </n-grid>
+  <div class="home-page" m-auto mt-50px max-w-1800px>
+    <div my-8 />

-      <transition name="height">
-        <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>Your favorite tools</n-h3>
-          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
-              <ToolCard :tool="tool" />
-            </n-gi>
-          </n-grid>
-        </div>
-      </transition>
-
-      <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools', 'Newest tools') }}</n-h3>
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-            <ToolCard :tool="tool" />
-          </n-gi>
-        </n-grid>
+    <div v-if="toolStore.favoriteTools.length > 0">
+      <div mb-2 mt-6 text-lg font-semibold>
+        {{ $t('home.categories.yourFavoriteTools') }}
      </div>
+      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+        <tool-card v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
+      </div>
+    </div>

-      <n-h3>All the tools</n-h3>
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-          <transition>
-            <ToolCard :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
+    <div v-if="toolStore.newTools.length > 0">
+      <div mb-2 mt-6 text-lg font-semibold>
+        {{ $t('home.categories.newestTools') }}
+      </div>
+      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+        <tool-card v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
+      </div>
+    </div>
+
+    <div mb-2 mt-6 text-lg font-semibold>
+      {{ $t('home.categories.allTheTools') }}
+    </div>
+    <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+      <tool-card v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
    </div>
  </div>
 </template>
-
-<style scoped lang="less">
-.home-page {
-  padding-top: 50px;
-}
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
-.height-enter-active,
-.height-leave-active {
-  transition: all 0.5s ease-in-out;
-  overflow: hidden;
-  max-height: 500px;
-}
-
-.height-enter-from,
-.height-leave-to {
-  max-height: 42px;
-  overflow: hidden;
-  opacity: 0;
-  margin-bottom: 0;
-}
-</style>
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -1,6 +1,22 @@
-import type { App } from 'vue';
+import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
-import messages from '@intlify/unplugin-vue-i18n/messages';
+import baseMessages from '@intlify/unplugin-vue-i18n/messages';
+import _ from 'lodash';
+import { parse as parseYaml } from 'yaml';
+
+const i18nFiles = import.meta.glob('../tools/*/locales/**.yml', { as: 'raw' });
+
+const messagesByTools = await Promise.all(_.map(i18nFiles, async (fileDescriptor, path) => {
+  const [, locale] = path.match(/\.\/tools\/.*?\/locales\/(.*)\.ya?ml$/i) ?? [];
+  const content = parseYaml(await fileDescriptor());
+
+  return { [locale]: content };
+}));
+
+const messages = _.merge(
+  baseMessages,
+  _.merge({}, ...messagesByTools),
+);

 const i18n = createI18n({
  legacy: false,
@@ -8,8 +24,8 @@ const i18n = createI18n({
  messages,
 });

-export const i18nPlugin = {
-  install: (app: App) => {
+export const i18nPlugin: Plugin = {
+  install: (app) => {
    app.use(i18n);
  },
 };
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -45,7 +45,7 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
      </n-form-item>
      <n-form-item label="Your hash: " label-placement="left">
-        <c-input-text v-model:value="compareHash" placeholder="Your hahs to compare..." raw-text />
+        <c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
      </n-form-item>
      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
        <div class="compare-result" :class="{ positive: compareMatch }">
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -146,7 +146,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
      <c-input-text
        v-model:value="inputDate"
        autofocus
-        placeholder="Put you date string here..."
+        placeholder="Put your date string here..."
        clearable
        test-id="date-time-converter-input"
        :validation="validation"
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts
@@ -0,0 +1,52 @@
+import { type Page, expect, test } from '@playwright/test';
+
+async function extractIbanInfo({ page }: { page: Page }) {
+  const itemsLines = await page
+    .locator('.c-key-value-list__item').all();
+
+  return await Promise.all(
+    itemsLines.map(async item => [
+      (await item.locator('.c-key-value-list__key').textContent() ?? '').trim(),
+      (await item.locator('.c-key-value-list__value').textContent() ?? '').trim(),
+    ]),
+  );
+}
+
+test.describe('Tool - Iban validator and parser', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/iban-validator-and-parser');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('IBAN validator and parser - IT Tools');
+  });
+
+  test('iban info are extracted from a valid iban', async ({ page }) => {
+    await page.getByTestId('iban-input').fill('DE89370400440532013000');
+
+    const ibanInfo = await extractIbanInfo({ page });
+
+    expect(ibanInfo).toEqual([
+      ['Is IBAN valid ?', 'Yes'],
+      ['Is IBAN a QR-IBAN ?', 'No'],
+      ['Country code', 'DE'],
+      ['BBAN', '370400440532013000'],
+      ['IBAN friendly format', 'DE89 3704 0044 0532 0130 00'],
+    ]);
+  });
+
+  test('invalid iban errors are displayed', async ({ page }) => {
+    await page.getByTestId('iban-input').fill('FR7630006060011234567890189');
+
+    const ibanInfo = await extractIbanInfo({ page });
+
+    expect(ibanInfo).toEqual([
+      ['Is IBAN valid ?', 'No'],
+      ['IBAN errors', 'Wrong account bank branch checksum Wrong IBAN checksum'],
+      ['Is IBAN a QR-IBAN ?', 'No'],
+      ['Country code', 'N/A'],
+      ['BBAN', 'N/A'],
+      ['IBAN friendly format', 'FR76 3000 6060 0112 3456 7890 189'],
+    ]);
+  });
+});
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
@@ -0,0 +1,18 @@
+import { ValidationErrorsIBAN } from 'ibantools';
+
+export { getFriendlyErrors };
+
+const ibanErrorToMessage = {
+  [ValidationErrorsIBAN.NoIBANProvided]: 'No IBAN provided',
+  [ValidationErrorsIBAN.NoIBANCountry]: 'No IBAN country',
+  [ValidationErrorsIBAN.WrongBBANLength]: 'Wrong BBAN length',
+  [ValidationErrorsIBAN.WrongBBANFormat]: 'Wrong BBAN format',
+  [ValidationErrorsIBAN.ChecksumNotNumber]: 'Checksum is not a number',
+  [ValidationErrorsIBAN.WrongIBANChecksum]: 'Wrong IBAN checksum',
+  [ValidationErrorsIBAN.WrongAccountBankBranchChecksum]: 'Wrong account bank branch checksum',
+  [ValidationErrorsIBAN.QRIBANNotAllowed]: 'QR-IBAN not allowed',
+};
+
+function getFriendlyErrors(errorCodes: ValidationErrorsIBAN[]) {
+  return errorCodes.map(errorCode => ibanErrorToMessage[errorCode]).filter(Boolean);
+}
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { extractIBAN, friendlyFormatIBAN, isQRIBAN, validateIBAN } from 'ibantools';
+import { getFriendlyErrors } from './iban-validator-and-parser.service';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawIban = ref('');
+
+const ibanInfo = computed<CKeyValueListItems>(() => {
+  const iban = rawIban.value.toUpperCase().replace(/\s/g, '').replace(/-/g, '');
+
+  if (iban === '') {
+    return [];
+  }
+
+  const { valid: isIbanValid, errorCodes } = validateIBAN(iban);
+  const { countryCode, bban } = extractIBAN(iban);
+  const errors = getFriendlyErrors(errorCodes);
+
+  return [
+
+    {
+      label: 'Is IBAN valid ?',
+      value: isIbanValid,
+      showCopyButton: false,
+    },
+    {
+      label: 'IBAN errors',
+      value: errors.length === 0 ? undefined : errors,
+      hideOnNil: true,
+      showCopyButton: false,
+    },
+    {
+      label: 'Is IBAN a QR-IBAN ?',
+      value: isQRIBAN(iban),
+      showCopyButton: false,
+    },
+    {
+      label: 'Country code',
+      value: countryCode,
+    },
+    {
+      label: 'BBAN',
+      value: bban,
+    },
+    {
+      label: 'IBAN friendly format',
+      value: friendlyFormatIBAN(iban),
+    },
+  ];
+});
+
+const ibanExamples = [
+  'FR7630006000011234567890189',
+  'DE89370400440532013000',
+  'GB29NWBK60161331926819',
+];
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawIban" placeholder="Enter an IBAN to check for validity..." test-id="iban-input" />
+
+    <c-key-value-list :items="ibanInfo" my-5 data-test-id="iban-info" />
+
+    <c-card title="Valid IBAN examples">
+      <div v-for="iban in ibanExamples" :key="iban">
+        <c-text-copyable :value="iban" font-mono :displayed-value="friendlyFormatIBAN(iban)" />
+      </div>
+    </c-card>
+  </div>
+</template>
--- a/src/tools/iban-validator-and-parser/index.ts
+++ b/src/tools/iban-validator-and-parser/index.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '../tool';
+import Bank from '~icons/mdi/bank';
+
+export const tool = defineTool({
+  name: 'IBAN validator and parser',
+  path: '/iban-validator-and-parser',
+  description: 'Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.',
+  keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
+  component: () => import('./iban-validator-and-parser.vue'),
+  icon: Bank,
+  createdAt: new Date('2023-08-26'),
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 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 ibanValidatorAndParser } from './iban-validator-and-parser';
 import { tool as stringObfuscator } from './string-obfuscator';
 import { tool as textDiff } from './text-diff';
 import { tool as emojiPicker } from './emoji-picker';
@@ -55,6 +56,7 @@ import { tool as metaTagGenerator } from './meta-tag-generator';
 import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
+import { tool as wifiQrCodeGenerator } from './wifi-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';
@@ -116,7 +118,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Images and videos',
-    components: [qrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
  },
  {
    name: 'Development',
@@ -151,7 +153,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Data',
-    components: [phoneParserAndFormatter],
+    components: [phoneParserAndFormatter, ibanValidatorAndParser],
  },
 ];

--- a/src/tools/password-strength-analyser/password-strength-analyser.e2e.spec.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.e2e.spec.ts
@@ -14,6 +14,6 @@ test.describe('Tool - Password strength analyser', () => {

    const crackDuration = await page.getByTestId('crack-duration').textContent();

-    expect(crackDuration).toEqual('15,091 milleniums, 3 centurys');
+    expect(crackDuration).toEqual('15,091 millennia, 3 centuries');
  });
 });
--- a/src/tools/password-strength-analyser/password-strength-analyser.service.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
@@ -19,20 +19,20 @@ function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
  }

  const timeUnits = [
-    { unit: 'millenium', secondsInUnit: 31536000000, format: prettifyExponentialNotation },
-    { unit: 'century', secondsInUnit: 3153600000 },
-    { unit: 'decade', secondsInUnit: 315360000 },
-    { unit: 'year', secondsInUnit: 31536000 },
-    { unit: 'month', secondsInUnit: 2592000 },
-    { unit: 'week', secondsInUnit: 604800 },
-    { unit: 'day', secondsInUnit: 86400 },
-    { unit: 'hour', secondsInUnit: 3600 },
-    { unit: 'minute', secondsInUnit: 60 },
-    { unit: 'second', secondsInUnit: 1 },
+    { unit: 'millenium', secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: 'millennia' },
+    { unit: 'century', secondsInUnit: 3153600000, plural: 'centuries' },
+    { unit: 'decade', secondsInUnit: 315360000, plural: 'decades' },
+    { unit: 'year', secondsInUnit: 31536000, plural: 'years' },
+    { unit: 'month', secondsInUnit: 2592000, plural: 'months' },
+    { unit: 'week', secondsInUnit: 604800, plural: 'weeks' },
+    { unit: 'day', secondsInUnit: 86400, plural: 'days' },
+    { unit: 'hour', secondsInUnit: 3600, plural: 'hours' },
+    { unit: 'minute', secondsInUnit: 60, plural: 'minutes' },
+    { unit: 'second', secondsInUnit: 1, plural: 'seconds' },
  ];

  return _.chain(timeUnits)
-    .map(({ unit, secondsInUnit, format = _.identity }) => {
+    .map(({ unit, secondsInUnit, plural, format = _.identity }) => {
      const quantity = Math.floor(seconds / secondsInUnit);
      seconds %= secondsInUnit;

@@ -41,7 +41,7 @@ function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
      }

      const formattedQuantity = format(quantity);
-      return `${formattedQuantity} ${unit}${quantity > 1 ? 's' : ''}`;
+      return `${formattedQuantity} ${quantity > 1 ? plural : unit}`;
    })
    .compact()
    .take(2)
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -5,7 +5,7 @@ export const tool = defineTool({
  name: 'UUIDs v4 generator',
  path: '/uuid-generator',
  description:
-    'A universally unique identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot !).',
+    'A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).',
  keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
  component: () => import('./uuid-generator.vue'),
  icon: Fingerprint,
--- a/src/tools/wifi-qr-code-generator/index.ts
+++ b/src/tools/wifi-qr-code-generator/index.ts
@@ -0,0 +1,13 @@
+import { Qrcode } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'WiFi QR Code generator',
+  path: '/wifi-qrcode-generator',
+  description:
+    'Generate and download QR-codes for quick connections to WiFi networks.',
+  keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent', 'wifi'],
+  component: () => import('./wifi-qr-code-generator.vue'),
+  icon: Qrcode,
+  createdAt: new Date('2023-09-06'),
+});
--- a/src/tools/wifi-qr-code-generator/useQRCode.ts
+++ b/src/tools/wifi-qr-code-generator/useQRCode.ts
@@ -0,0 +1,146 @@
+import { type MaybeRef, get } from '@vueuse/core';
+import QRCode, { type QRCodeToDataURLOptions } from 'qrcode';
+import { isRef, ref, watch } from 'vue';
+
+export const wifiEncryptions = ['WEP', 'WPA', 'nopass', 'WPA2-EAP'] as const;
+export type WifiEncryption = typeof wifiEncryptions[number];
+
+// @see https://en.wikipedia.org/wiki/Extensible_Authentication_Protocol
+// for a list of available EAP methods. There are a lot (40!) of them.
+export const EAPMethods = [
+  'MD5',
+  'POTP',
+  'GTC',
+  'TLS',
+  'IKEv2',
+  'SIM',
+  'AKA',
+  'AKA\'',
+  'TTLS',
+  'PWD',
+  'LEAP',
+  'PSK',
+  'FAST',
+  'TEAP',
+  'EKE',
+  'NOOB',
+  'PEAP',
+] as const;
+export type EAPMethod = typeof EAPMethods[number];
+
+export const EAPPhase2Methods = [
+  'None',
+  'MSCHAPV2',
+] as const;
+export type EAPPhase2Method = typeof EAPPhase2Methods[number];
+
+interface IWifiQRCodeOptions {
+  ssid: MaybeRef<string>
+  password: MaybeRef<string>
+  eapMethod: MaybeRef<EAPMethod>
+  isHiddenSSID: MaybeRef<boolean>
+  eapAnonymous: MaybeRef<boolean>
+  eapIdentity: MaybeRef<string>
+  eapPhase2Method: MaybeRef<EAPPhase2Method>
+  color: { foreground: MaybeRef<string>; background: MaybeRef<string> }
+  options?: QRCodeToDataURLOptions
+}
+
+interface GetQrCodeTextOptions {
+  ssid: string
+  password: string
+  encryption: WifiEncryption
+  eapMethod: EAPMethod
+  isHiddenSSID: boolean
+  eapAnonymous: boolean
+  eapIdentity: string
+  eapPhase2Method: EAPPhase2Method
+}
+
+function escapeString(str: string) {
+  // replaces \, ;, ,, " and : with the same character preceded by a backslash
+  return str.replace(/([\\;,:"])/g, '\\$1');
+}
+
+function getQrCodeText(options: GetQrCodeTextOptions): string | null {
+  const { ssid, password, encryption, eapMethod, isHiddenSSID, eapAnonymous, eapIdentity, eapPhase2Method } = options;
+  if (!ssid) {
+    return null;
+  }
+  if (encryption === 'nopass') {
+    return `WIFI:S:${escapeString(ssid)};;`; // type can be omitted in that case, and password is not needed, makes the QR Code smaller
+  }
+  if (encryption !== 'WPA2-EAP' && password) {
+    // EAP has a lot of options, so we'll handle it separately
+    // WPA and WEP are pretty simple though.
+    return `WIFI:S:${escapeString(ssid)};T:${encryption};P:${escapeString(password)};${isHiddenSSID ? 'H:true' : ''};`;
+  }
+  if (encryption === 'WPA2-EAP' && password && eapMethod) {
+    // WPA2-EAP string is a lot more complex, first off, we drop the text if there is no identity, and it's not anonymous.
+    if (!eapIdentity && !eapAnonymous) {
+      return null;
+    }
+    // From reading, I could only find that a phase 2 is required for the PEAP method, I may be wrong though, I didn't read the whole spec.
+    if (eapMethod === 'PEAP' && !eapPhase2Method) {
+      return null;
+    }
+    // The string is built in the following order:
+    // 1. SSID
+    // 2. Authentication type
+    // 3. Password
+    // 4. EAP method
+    // 5. EAP phase 2 method
+    // 6. Identity or anonymous if checked
+    // 7. Hidden SSID if checked
+    const identity = eapAnonymous ? 'A:anon' : `I:${escapeString(eapIdentity)}`;
+    const phase2 = eapPhase2Method !== 'None' ? `PH2:${eapPhase2Method};` : '';
+    return `WIFI:S:${escapeString(ssid)};T:WPA2-EAP;P:${escapeString(password)};E:${eapMethod};${phase2}${identity};${isHiddenSSID ? 'H:true' : ''};`;
+  }
+  return null;
+}
+
+export function useWifiQRCode({
+  ssid,
+  password,
+  eapMethod,
+  isHiddenSSID,
+  eapAnonymous,
+  eapIdentity,
+  eapPhase2Method,
+  color: { background, foreground },
+  options,
+}: IWifiQRCodeOptions) {
+  const qrcode = ref('');
+  const encryption = ref<WifiEncryption>('WPA');
+
+  watch(
+    [ssid, password, encryption, eapMethod, isHiddenSSID, eapAnonymous, eapIdentity, eapPhase2Method, background, foreground].filter(isRef),
+    async () => {
+      // @see https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-fi-network-config-android-ios-11
+      // This is the full spec, there's quite a bit of logic to generate the string embeddedin the QR code.
+      const text = getQrCodeText({
+        ssid: get(ssid),
+        password: get(password),
+        encryption: get(encryption),
+        eapMethod: get(eapMethod),
+        isHiddenSSID: get(isHiddenSSID),
+        eapAnonymous: get(eapAnonymous),
+        eapIdentity: get(eapIdentity),
+        eapPhase2Method: get(eapPhase2Method),
+      });
+      if (text) {
+        qrcode.value = await QRCode.toDataURL(get(text).trim(), {
+          color: {
+            dark: get(foreground),
+            light: get(background),
+            ...options?.color,
+          },
+          errorCorrectionLevel: 'M',
+          ...options,
+        });
+      }
+    },
+    { immediate: true },
+  );
+  return { qrcode, encryption };
+}
--- a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
+++ b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import {
+  EAPMethods,
+  EAPPhase2Methods,
+  useWifiQRCode,
+} from './useQRCode';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+const foreground = ref('#000000ff');
+const background = ref('#ffffffff');
+
+const ssid = ref();
+const password = ref();
+const eapMethod = ref();
+const isHiddenSSID = ref(false);
+const eapAnonymous = ref(false);
+const eapIdentity = ref();
+const eapPhase2Method = ref();
+
+const { qrcode, encryption } = useWifiQRCode({
+  ssid,
+  password,
+  eapMethod,
+  isHiddenSSID,
+  eapAnonymous,
+  eapIdentity,
+  eapPhase2Method,
+  color: {
+    background,
+    foreground,
+  },
+  options: { width: 1024 },
+});
+
+const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
+</script>
+
+<template>
+  <c-card>
+    <div grid grid-cols-1 gap-12>
+      <div>
+        <c-select
+          v-model:value="encryption"
+          mb-4
+          label="Encryption method"
+          default-value="WPA"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          :options="[
+            {
+              label: 'No password',
+              value: 'nopass',
+            },
+            {
+              label: 'WPA/WPA2',
+              value: 'WPA',
+            },
+            {
+              label: 'WEP',
+              value: 'WEP',
+            },
+            {
+              label: 'WPA2-EAP',
+              value: 'WPA2-EAP',
+            },
+          ]"
+        />
+        <div class="mb-6 flex flex-row items-center gap-2">
+          <c-input-text
+            v-model:value="ssid"
+            label-position="left"
+            label-width="130px"
+            label-align="right"
+            label="SSID:"
+            rows="1"
+            autosize
+            placeholder="Your WiFi SSID..."
+            mb-6
+          />
+          <n-checkbox v-model:checked="isHiddenSSID">
+            Hidden SSID
+          </n-checkbox>
+        </div>
+        <c-input-text
+          v-if="encryption !== 'nopass'"
+          v-model:value="password"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          label="Password:"
+          rows="1"
+          autosize
+          type="password"
+          placeholder="Your WiFi Password..."
+          mb-6
+        />
+        <c-select
+          v-if="encryption === 'WPA2-EAP'"
+          v-model:value="eapMethod"
+          label="EAP method"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          :options="EAPMethods.map((method) => ({ label: method, value: method }))"
+          searchable mb-4
+        />
+        <div v-if="encryption === 'WPA2-EAP'" class="mb-6 flex flex-row items-center gap-2">
+          <c-input-text
+            v-model:value="eapIdentity"
+            label-position="left"
+            label-width="130px"
+            label-align="right"
+            label="Identity:"
+            rows="1"
+            autosize
+            placeholder="Your EAP Identity..."
+            mb-6
+          />
+          <n-checkbox v-model:checked="eapAnonymous">
+            Anonymous?
+          </n-checkbox>
+        </div>
+        <c-select
+          v-if="encryption === 'WPA2-EAP'"
+          v-model:value="eapPhase2Method"
+          label="EAP Phase 2 method"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          :options="EAPPhase2Methods.map((method) => ({ label: method, value: method }))"
+          searchable mb-4
+        />
+        <n-form label-width="130" label-placement="left">
+          <n-form-item label="Foreground color:">
+            <n-color-picker v-model:value="foreground" :modes="['hex']" />
+          </n-form-item>
+          <n-form-item label="Background color:">
+            <n-color-picker v-model:value="background" :modes="['hex']" />
+          </n-form-item>
+        </n-form>
+      </div>
+      <div v-if="qrcode">
+        <div flex flex-col items-center gap-3>
+          <img alt="wifi-qrcode" :src="qrcode" width="200">
+          <c-button @click="download">
+            Download qr-code
+          </c-button>
+        </div>
+      </div>
+    </div>
+  </c-card>
+</template>
--- a/src/ui/c-key-value-list/c-key-value-list-item.vue
+++ b/src/ui/c-key-value-list/c-key-value-list-item.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import _ from 'lodash';
+import type { CKeyValueListItem } from './c-key-value-list.types';
+
+const props = defineProps<{ item: CKeyValueListItem }>();
+const { item } = toRefs(props);
+</script>
+
+<template>
+  <div v-if="_.isArray(item.value)">
+    <div v-for="value in item.value" :key="value">
+      <c-text-copyable :value="value" :show-icon="item.showCopyButton ?? true" />
+    </div>
+  </div>
+  <div v-else-if="_.isBoolean(item.value)">
+    <c-text-copyable :value="item.value ? 'true' : 'false'" :displayed-value="item.value ? 'Yes' : 'No'" :show-icon="item.showCopyButton ?? true" />
+  </div>
+  <div v-else-if="_.isNumber(item.value)" font-mono>
+    <c-text-copyable :value="String(item.value)" :show-icon="item.showCopyButton ?? true" />
+  </div>
+  <div v-else-if="_.isNil(item.value) || item.value === ''" op-70>
+    {{ item.placeholder ?? 'N/A' }}
+  </div>
+  <div v-else>
+    <c-text-copyable :value="item.value" :show-icon="item.showCopyButton ?? true" />
+  </div>
+</template>
--- a/src/ui/c-key-value-list/c-key-value-list.types.ts
+++ b/src/ui/c-key-value-list/c-key-value-list.types.ts
@@ -0,0 +1,9 @@
+export interface CKeyValueListItem {
+  label: string
+  value: string | string[] | number | boolean | undefined | null
+  hideOnNil?: boolean
+  placeholder?: string
+  showCopyButton?: boolean
+}
+
+export type CKeyValueListItems = CKeyValueListItem[];
--- a/src/ui/c-key-value-list/c-key-value-list.vue
+++ b/src/ui/c-key-value-list/c-key-value-list.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import _ from 'lodash';
+import type { CKeyValueListItems } from './c-key-value-list.types';
+
+const props = withDefaults(defineProps<{ items?: CKeyValueListItems }>(), { items: () => [] });
+const { items } = toRefs(props);
+
+const formattedItems = computed(() => items.value.filter(item => !_.isNil(item.value) || !item.hideOnNil));
+</script>
+
+<template>
+  <div my-5>
+    <div v-for="item in formattedItems" :key="item.label" flex gap-2 py-1 class="c-key-value-list__item">
+      <div flex-basis-180px text-right font-bold class="c-key-value-list__key">
+        {{ item.label }}
+      </div>
+
+      <c-key-value-list-item :item="item" class="c-key-value-list__value" />
+    </div>
+  </div>
+</template>
--- a/src/ui/c-text-copyable/c-text-copyable.demo.vue
+++ b/src/ui/c-text-copyable/c-text-copyable.demo.vue
@@ -0,0 +1,3 @@
+<template>
+  <c-text-copyable value="value" displayed-value="displayedValue" />
+</template>
--- a/src/ui/c-text-copyable/c-text-copyable.vue
+++ b/src/ui/c-text-copyable/c-text-copyable.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+
+const props = withDefaults(defineProps<{ value?: string; displayedValue?: string; showIcon?: boolean }>(), { value: '', displayedValue: undefined, showIcon: true });
+const { value, displayedValue, showIcon } = toRefs(props);
+
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+</script>
+
+<template>
+  <c-tooltip :tooltip="isJustCopied ? 'Copied!' : 'Copy to clipboard'" cursor-pointer @click="copy">
+    <span flex items-center gap-2>
+      {{ displayedValue ?? value }}
+      <icon-mdi-content-copy v-if="showIcon" op-40 />
+    </span>
+  </c-tooltip>
+</template>
--- a/src/ui/c-tooltip/c-tooltip.demo.vue
+++ b/src/ui/c-tooltip/c-tooltip.demo.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <c-tooltip>
+      Hover me
+
+      <template #tooltip>
+        Tooltip content
+      </template>
+    </c-tooltip>
+  </div>
+
+  <div mt-5>
+    <c-tooltip tooltip="Tooltip content">
+      Hover me
+    </c-tooltip>
+  </div>
+</template>
--- a/src/ui/c-tooltip/c-tooltip.vue
+++ b/src/ui/c-tooltip/c-tooltip.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ tooltip?: string }>(), { tooltip: '' });
+const { tooltip } = toRefs(props);
+
+const targetRef = ref();
+const isTargetHovered = useElementHover(targetRef);
+</script>
+
+<template>
+  <div class="relative" inline-block>
+    <div ref="targetRef">
+      <slot />
+    </div>
+
+    <div
+      class="absolute bottom-100% left-50% z-10 mb-5px whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s -translate-x-1/2"
+      :class="{
+        'op-0 scale-0': isTargetHovered === false,
+        'op-100 scale-100': isTargetHovered,
+      }"
+    >
+      <slot
+        v-if="isTargetHovered"
+        name="tooltip"
+      >
+        {{ tooltip }}
+      </slot>
+    </div>
+  </div>
+</template>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
      runtimeOnly: true,
      compositionOnly: true,
      fullInstall: true,
-      include: [resolve(__dirname, 'locales/**'), resolve(__dirname, 'src/tools/*/locales/**')],
+      include: [resolve(__dirname, 'locales/**')],
    }),
    AutoImport({
      imports: [
@@ -106,4 +106,7 @@ export default defineConfig({
  test: {
    exclude: [...configDefaults.exclude, '**/*.e2e.spec.ts'],
  },
+  build: {
+    target: 'esnext',
+  },
 });
Author	SHA1	Message	Date
Corentin THOMASSET	e9e0884789	Merge branch 'main' into card-hover	2023-09-06 10:53:40 +02:00
Simon Bordeyne	0eedce69a6	feat(new tool): add wifi qr code generator (#599 ) * (feat: new tool): add wifi qr code generator * Update src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * Update src/tools/wifi-qr-code-generator/index.ts Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * remove naive UI grid * Update src/tools/wifi-qr-code-generator/index.ts --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-09-06 07:46:40 +00:00
Corentin Thomasset	e0c7771e8f	refactor(home): prettier tool card list	2023-09-05 08:56:16 +02:00
Mark Townsend	8a30b6bdb3	refactor(spelling): minor corrections to phrasing/spelling (#596 ) * Minor corrections to phrasing/spelling. * Corrected 'millennia'. * Corrected tests. --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-09-04 14:51:04 +02:00
Corentin THOMASSET	233d5565f6	refactor(i18n): merge tools scoped locales with global ones (#612 )	2023-09-03 20:07:45 +00:00
Corentin THOMASSET	7ab9204e96	refactor(c-key-value-list): got rid of table for layout (#611 )	2023-09-03 16:12:22 +00:00
renovate[bot]	c7d4562d3b	fix(deps): update dependency sql-formatter to v13 (#606 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-03 16:51:12 +02:00
Corentin THOMASSET	18dd1400bd	refactor(CI): run e2e against built app and no longer vercel (#610 )	2023-09-03 14:28:19 +00:00
renovate[bot]	f035f485c0	chore(deps): update dependency unplugin-icons to ^0.17.0 (#609 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-03 16:16:01 +02:00
Anton Mosich	e18bae1fca	refactor(bcrypt): fix typo (#604 )	2023-09-01 16:30:51 +02:00
renovate[bot]	d1dff428d8	chore(deps): update dependency @intlify/unplugin-vue-i18n to ^0.13.0 (#597 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-01 10:14:50 +02:00
Corentin THOMASSET	3a63837d3d	feat(new tool): iban validation and parser (#591 )	2023-08-27 18:12:31 +00:00