From 6b58ec554a0de91139f16d67cec42536d093d5fb Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Fri, 15 Apr 2022 23:10:47 +0200
Subject: [PATCH] refactor(style): updated linter config

---
 .eslintrc.cjs                                 |   2 +-
 src/App.vue                                   |   5 +-
 src/components/MenuLayout.vue                 |  33 ++-
 src/components/SearchBar.vue                  |  37 ++-
 src/components/ToolCard.vue                   |  31 ++-
 src/layouts/base.layout.vue                   | 259 +++++++++++++-----
 src/layouts/tool.layout.vue                   |  22 +-
 src/pages/404.page.vue                        |  42 +--
 src/pages/Home.page.vue                       |  21 +-
 .../base64-converter/base64-converter.vue     |  46 +++-
 src/tools/bip39-generator/bip39-generator.vue | 106 ++++---
 src/tools/color-converter/color-converter.vue |  47 +++-
 .../crontab-generator/crontab-generator.vue   |  42 ++-
 .../date-time-converter.vue                   |  71 +++--
 src/tools/encryption/encryption.vue           | 178 ++++++------
 src/tools/git-memo/git-memo.vue               |   6 +-
 src/tools/hash-text/hash-text.vue             |  74 ++---
 .../integer-base-converter.vue                | 125 ++++++---
 .../lorem-ipsum-generator.vue                 | 102 +++++--
 .../qr-code-generator/qr-code-generator.vue   |  53 +++-
 .../random-port-generator.vue                 |  26 +-
 .../roman-numeral-converter.vue               |  69 +++--
 src/tools/text-statistics/text-statistics.vue |  27 +-
 .../token-generator/token-generator.tool.vue  | 122 +++++----
 src/tools/url-encoder/url-encoder.vue         |  94 +++++--
 src/tools/uuid-generator/uuid-generator.vue   |  72 +++--
 tsconfig.app.json                             |   3 +-
 27 files changed, 1144 insertions(+), 571 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 983a9d91..17b46101 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
   root: true,
-  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript/recommended'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/eslint-config-typescript/recommended'],
   env: {
     'vue/setup-compiler-macros': true,
   },
diff --git a/src/App.vue b/src/App.vue
index 98f9152a..0db80bf6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,10 @@ const themeOverrides = computed(() => styleStore.isDarkTheme ? darkThemeOverride
 </script>
 
 <template>
-  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
+  <n-config-provider
+    :theme="theme"
+    :theme-overrides="themeOverrides"
+  >
     <n-global-style />
     <n-message-provider placement="bottom">
       <component :is="layout">
diff --git a/src/components/MenuLayout.vue b/src/components/MenuLayout.vue
index 48150c16..3031615d 100644
--- a/src/components/MenuLayout.vue
+++ b/src/components/MenuLayout.vue
@@ -1,15 +1,28 @@
 <template>
-    <n-layout has-sider>
-        <n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed"
-            @collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false"
-            :native-scrollbar="false" :position="siderPosition">
-            <slot name="sider" />
-        </n-layout-sider>
-        <n-layout class="content">
-            <slot name="content" />
-            <div class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" />
-        </n-layout>
+  <n-layout has-sider>
+    <n-layout-sider
+      bordered
+      collapse-mode="width"
+      :collapsed-width="0"
+      :width="240"
+      :collapsed="isMenuCollapsed"
+      :show-trigger="false"
+      :native-scrollbar="false"
+      :position="siderPosition"
+      @collapse="isMenuCollapsed = true"
+      @expand="isMenuCollapsed = false"
+    >
+      <slot name="sider" />
+    </n-layout-sider>
+    <n-layout class="content">
+      <slot name="content" />
+      <div
+        v-show="isSmallScreen && !isMenuCollapsed"
+        class="overlay"
+        @click="isMenuCollapsed = true"
+      />
     </n-layout>
+  </n-layout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index fe23e039..e6d2b307 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -32,19 +32,30 @@ function onSelect(path: string) {
 </script>
 
 <template>
-    <div class="search-bar">
-        <n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
-            :on-select="onSelect">
-            <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
-                <n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
-                    @focus="handleFocus" @blur="handleBlur">
-                    <template #prefix>
-                        <n-icon :component="SearchRound" />
-                    </template>
-                </n-input>
-            </template>
-        </n-auto-complete>
-    </div>
+  <div class="search-bar">
+    <n-auto-complete
+      v-model:value="queryString"
+      :options="options"
+      :input-props="{ autocomplete: 'disabled' }"
+      :on-select="onSelect"
+    >
+      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
+        <n-input
+          round
+          clearable
+          placeholder="Search a tool..."
+          :value="slotValue"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        >
+          <template #prefix>
+            <n-icon :component="SearchRound" />
+          </template>
+        </n-input>
+      </template>
+    </n-auto-complete>
+  </div>
 </template>
 
 
diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
index a5ef7b96..95752219 100644
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,15 +1,24 @@
 <template>
-    <router-link :to="tool.path">
-        <n-card class="tool-card">
-            <n-icon class="icon" size="40" :component="tool.icon" />
-            <n-h3 class="title">
-                <n-ellipsis>{{ tool.name }}</n-ellipsis>
-            </n-h3>
-            <div class="description">
-                <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
-            </div>
-        </n-card>
-    </router-link>
+  <router-link :to="tool.path">
+    <n-card class="tool-card">
+      <n-icon
+        class="icon"
+        size="40"
+        :component="tool.icon"
+      />
+      <n-h3 class="title">
+        <n-ellipsis>{{ tool.name }}</n-ellipsis>
+      </n-h3>
+      <div class="description">
+        <n-ellipsis
+          :line-clamp="2"
+          :tooltip="false"
+        >
+          {{ tool.description }}
+        </n-ellipsis>
+      </div>
+    </n-card>
+  </router-link>
 </template>
 
 <script setup lang="ts">
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 7c9a2f72..dfc2d4f9 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -32,84 +32,199 @@ const m = toolsByCategory.map(category => ({
 </script>
 
 <template>
-    <menu-layout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
+  <menu-layout
+    class="menu-layout"
+    :class="{ isSmallScreen: styleStore.isSmallScreen }"
+  >
+    <template #sider>
+      <router-link
+        to="/"
+        class="hero-wrapper"
+      >
+        <hero-gradient class="gradient" />
+        <div class="text-wrapper">
+          <div class="title">
+            IT - TOOLS
+          </div>
+          <div class="divider" />
+          <div class="subtitle">
+            Handy tools for developers
+          </div>
+        </div>
+      </router-link>
 
-        <template v-slot:sider>
-            <router-link to="/" class="hero-wrapper">
-                <hero-gradient class="gradient" />
-                <div class="text-wrapper">
-                    <div class="title">IT - TOOLS</div>
-                    <div class="divider" />
-                    <div class="subtitle">Handy tools for developers</div>
-                </div>
-            </router-link>
+      <div class="sider-content">
+        <n-space
+          v-if="styleStore.isSmallScreen"
+          justify="center"
+        >
+          <n-button
+            size="large"
+            circle
+            quaternary
+            tag="a"
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+          >
+            <n-icon
+              size="25"
+              :component="BrandGithub"
+            />
+          </n-button>
+          <n-button
+            size="large"
+            circle
+            quaternary
+            tag="a"
+            href="https://twitter.com/cthmsst"
+            rel="noopener"
+            target="_blank"
+          >
+            <n-icon
+              size="25"
+              :component="BrandTwitter"
+            />
+          </n-button>
+          <n-button
+            size="large"
+            circle
+            quaternary
+            @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
+          >
+            <n-icon
+              v-if="styleStore.isDarkTheme"
+              size="25"
+              :component="Sun"
+            />
+            <n-icon
+              v-else
+              size="25"
+              :component="Moon"
+            />
+          </n-button>
+        </n-space>
 
-            <div class="sider-content">
-                <n-space v-if="styleStore.isSmallScreen" justify="center">
-                    <n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
-                        rel="noopener" target="_blank">
-                        <n-icon size="25" :component="BrandGithub" />
-                    </n-button>
-                    <n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
-                        target="_blank">
-                        <n-icon size="25" :component="BrandTwitter" />
-                    </n-button>
-                    <n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
-                        <n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
-                        <n-icon size="25" v-else :component="Moon" />
-                    </n-button>
-                </n-space>
+        <n-menu
+          v-model:value="activeKey"
+          :value="route.name"
+          class="menu"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="m"
+          :indent="20"
+        />
+      </div>
+    </template>
 
-                <n-menu :value="route.name" class="menu" :collapsed-width="64" :collapsed-icon-size="22" :options="m"
-                    v-model:value="activeKey" :indent="20" />
+    <template #content>
+      <div class="navigation">
+        <n-button
+          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+          circle
+          quaternary
+          aria-label="Toogle menu"
+          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
+        >
+          <n-icon
+            size="25"
+            :component="Menu2"
+          />
+        </n-button>
 
-            </div>
+        <router-link
+          to="/"
+          #="{ navigate, href }"
+          custom
+        >
+          <n-button
+            tag="a"
+            :href="href"
+            :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+            circle
+            quaternary
+            aria-label="Home"
+            @click="navigate"
+          >
+            <n-icon
+              size="25"
+              :component="Home2"
+            />
+          </n-button>
+        </router-link>
+
+        <search-bar />
 
 
-        </template>
-
-        <template v-slot:content>
-            <div class="navigation">
-                <n-button :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary
-                    @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed" aria-label="Toogle menu">
-                    <n-icon size="25" :component="Menu2" />
-                </n-button>
-
-                <router-link to="/" #="{ navigate, href }" custom>
-                    <n-button tag="a" :href="href" @click="navigate"
-                        :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary aria-label="Home">
-                        <n-icon size="25" :component="Home2" />
-                    </n-button>
-                </router-link>
-
-                <search-bar />
-
-
-                <n-button type="primary" tag="a" href="https://github.com/sponsors/CorentinTh" rel="noopener"
-                    target="_blank">
-                    <n-icon :component="Heart" style="margin-right: 5px;" v-if="!styleStore.isSmallScreen" />
-                    Sponsor
-                </n-button>
-                <n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
-                    rel="noopener" target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Github repository">
-                    <n-icon size="25" :component="BrandGithub" />
-                </n-button>
-                <n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
-                    target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Twitter account">
-                    <n-icon size="25" :component="BrandTwitter" />
-                </n-button>
-                <n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
-                    v-if="!styleStore.isSmallScreen" aria-label="Toogle theme">
-                    <n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
-                    <n-icon size="25" v-else :component="Moon" />
-                </n-button>
-
-            </div>
-            <slot />
-
-        </template>
-
-    </menu-layout>
+        <n-button
+          type="primary"
+          tag="a"
+          href="https://github.com/sponsors/CorentinTh"
+          rel="noopener"
+          target="_blank"
+        >
+          <n-icon
+            v-if="!styleStore.isSmallScreen"
+            :component="Heart"
+            style="margin-right: 5px;"
+          />
+          Sponsor
+        </n-button>
+        <n-button
+          v-if="!styleStore.isSmallScreen"
+          size="large"
+          circle
+          quaternary
+          tag="a"
+          href="https://github.com/CorentinTh/it-tools"
+          rel="noopener"
+          target="_blank"
+          aria-label="Github repository"
+        >
+          <n-icon
+            size="25"
+            :component="BrandGithub"
+          />
+        </n-button>
+        <n-button
+          v-if="!styleStore.isSmallScreen"
+          size="large"
+          circle
+          quaternary
+          tag="a"
+          href="https://twitter.com/cthmsst"
+          rel="noopener"
+          target="_blank"
+          aria-label="Twitter account"
+        >
+          <n-icon
+            size="25"
+            :component="BrandTwitter"
+          />
+        </n-button>
+        <n-button
+          v-if="!styleStore.isSmallScreen"
+          size="large"
+          circle
+          quaternary
+          aria-label="Toogle theme"
+          @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
+        >
+          <n-icon
+            v-if="styleStore.isDarkTheme"
+            size="25"
+            :component="Sun"
+          />
+          <n-icon
+            v-else
+            size="25"
+            :component="Moon"
+          />
+        </n-button>
+      </div>
+      <slot />
+    </template>
+  </menu-layout>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
index 2705a507..edb95a1b 100644
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -24,17 +24,19 @@ useHead(head)
 </script>
 
 <template>
-    <base-layout>
-        <div class="tool-layout">
-            <div class="tool-header">
-                <n-h1>{{ route.meta.name }}</n-h1>
-                <div class="separator" />
-                <div class="description">{{ route.meta.description }}</div>
-            </div>
-
-            <slot />
+  <base-layout>
+    <div class="tool-layout">
+      <div class="tool-header">
+        <n-h1>{{ route.meta.name }}</n-h1>
+        <div class="separator" />
+        <div class="description">
+          {{ route.meta.description }}
         </div>
-    </base-layout>
+      </div>
+
+      <slot />
+    </div>
+  </base-layout>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
index 87cbb0ac..229f9a34 100644
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -3,25 +3,31 @@
 </script>
 
 <template>
-    <div class="e404-wrapper">
-        <n-result
-            status="404"
-            title="404 Not Found"
-            description="Sorry, this page does not seem to extist"
+  <div class="e404-wrapper">
+    <n-result
+      status="404"
+      title="404 Not Found"
+      description="Sorry, this page does not seem to extist"
+    >
+      <template #footer>
+        <router-link
+          to="/"
+          #="{ navigate, href }"
+          custom
         >
-            <template #footer>
-                <router-link to="/" #="{ navigate, href }" custom>
-                    <n-button
-                        tag="a"
-                        :href="href"
-                        secondary
-                        @click="navigate"
-                        type="success"
-                    >Back home</n-button>
-                </router-link>
-            </template>
-        </n-result>
-    </div>
+          <n-button
+            tag="a"
+            :href="href"
+            secondary
+            type="success"
+            @click="navigate"
+          >
+            Back home
+          </n-button>
+        </router-link>
+      </template>
+    </n-result>
+  </div>
 </template>
 
 
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 830c334d..4414610e 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -4,13 +4,20 @@ import ToolCard from '../components/ToolCard.vue';
 </script>
 
 <template>
-    <div class="home-page">
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-            <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
-                <tool-card :tool="tool" />
-            </n-gi>
-        </n-grid>
-    </div>
+  <div class="home-page">
+    <n-grid
+      x-gap="12"
+      y-gap="12"
+      cols="1 400:2 800:3 1200:4 2000:8"
+    >
+      <n-gi
+        v-for="tool in toolsWithCategory"
+        :key="tool.name"
+      >
+        <tool-card :tool="tool" />
+      </n-gi>
+    </n-grid>
+  </div>
 </template>
 
 
diff --git a/src/tools/base64-converter/base64-converter.vue b/src/tools/base64-converter/base64-converter.vue
index 3354cc40..fe16e901 100644
--- a/src/tools/base64-converter/base64-converter.vue
+++ b/src/tools/base64-converter/base64-converter.vue
@@ -1,17 +1,39 @@
 <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-input
+      v-model:value="textInput"
+      type="textarea"
+      placeholder="Put your string here..."
+    />
+    <n-input
+      :value="textBase64"
+      type="textarea"
+      readonly
+    />
     <n-space justify="center">
-      <n-button @click="copyTextBase64()" secondary>Copy</n-button>
+      <n-button
+        secondary
+        @click="copyTextBase64()"
+      >
+        Copy
+      </n-button>
     </n-space>
   </n-card>
 
   <n-card title="File to base64">
-    <n-upload :show-file-list="true" :on-before-upload="onUpload" list-type="image" v-model:file-list="fileList">
+    <n-upload
+      v-model:file-list="fileList"
+      :show-file-list="true"
+      :on-before-upload="onUpload"
+      list-type="image"
+    >
       <n-upload-dragger>
         <div style="margin-bottom: 12px">
-          <n-icon size="35" :depth="3" :component="Upload" />
+          <n-icon
+            size="35"
+            :depth="3"
+            :component="Upload"
+          />
         </div>
         <n-text style="font-size: 14px">
           Click or drag a file to this area to upload
@@ -19,12 +41,20 @@
       </n-upload-dragger>
     </n-upload>
 
-    <n-input :value="fileBase64" type="textarea" readonly />
+    <n-input
+      :value="fileBase64"
+      type="textarea"
+      readonly
+    />
     <n-space justify="center">
-      <n-button @click="copyFileBase64()" secondary>Copy</n-button>
+      <n-button
+        secondary
+        @click="copyFileBase64()"
+      >
+        Copy
+      </n-button>
     </n-space>
   </n-card>
-
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
index 2cffcbb8..f81ce8fa 100644
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -1,47 +1,69 @@
 <template>
-    <div>
-        <n-card>
-            <n-grid cols="3" x-gap="12">
-                <n-gi span="1">
-                    <n-form-item label="Language:">
-                        <n-select v-model:value="language"
-                            :options="Object.keys(languages).map(label => ({ label, value: label }))" />
-                    </n-form-item>
-                </n-gi>
-                <n-gi span="2">
-                    <n-form-item label="Entropy (seed):" :feedback="entropyValidation.message"
-                        :validation-status="entropyValidation.status">
-                        <n-input-group>
-                            <n-input v-model:value="entropy" placeholder="Your string..." />
-                            <n-button @click="refreshEntropy">
-                                <n-icon size="22">
-                                    <Refresh />
-                                </n-icon>
-                            </n-button>
-                            <n-button @click="copyEntropy">
-                                <n-icon size="22">
-                                    <Copy />
-                                </n-icon>
-                            </n-button>
-                        </n-input-group>
+  <div>
+    <n-card>
+      <n-grid
+        cols="3"
+        x-gap="12"
+      >
+        <n-gi span="1">
+          <n-form-item label="Language:">
+            <n-select
+              v-model:value="language"
+              :options="Object.keys(languages).map(label => ({ label, value: label }))"
+            />
+          </n-form-item>
+        </n-gi>
+        <n-gi span="2">
+          <n-form-item
+            label="Entropy (seed):"
+            :feedback="entropyValidation.message"
+            :validation-status="entropyValidation.status"
+          >
+            <n-input-group>
+              <n-input
+                v-model:value="entropy"
+                placeholder="Your string..."
+              />
+              <n-button @click="refreshEntropy">
+                <n-icon size="22">
+                  <Refresh />
+                </n-icon>
+              </n-button>
+              <n-button @click="copyEntropy">
+                <n-icon size="22">
+                  <Copy />
+                </n-icon>
+              </n-button>
+            </n-input-group>
+          </n-form-item>
+        </n-gi>
+      </n-grid>
+      <n-form-item
+        label="Passphrase (mnemonic):"
+        :feedback="mnemonicValidation.message"
+        :validation-status="mnemonicValidation.status"
+      >
+        <n-input-group>
+          <n-input
+            v-model:value="passphrase"
+            style="text-align: center; flex: 1;"
+            placeholder="Your mnemonic..."
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+          />
 
-                    </n-form-item>
-                </n-gi>
-            </n-grid>
-            <n-form-item label="Passphrase (mnemonic):" :feedback="mnemonicValidation.message"
-                :validation-status="mnemonicValidation.status">
-                <n-input-group>
-                    <n-input style="text-align: center; flex: 1;" v-model:value="passphrase"
-                        placeholder="Your mnemonic..." autocomplete="off" autocorrect="off" autocapitalize="off"
-                        spellcheck="false" />
-
-                    <n-button @click="copyPassphrase">
-                        <n-icon size="22" :component="Copy" />
-                    </n-button>
-                </n-input-group>
-            </n-form-item>
-        </n-card>
-    </div>
+          <n-button @click="copyPassphrase">
+            <n-icon
+              size="22"
+              :component="Copy"
+            />
+          </n-button>
+        </n-input-group>
+      </n-form-item>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue
index 7df61cc8..807ef994 100644
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -1,30 +1,57 @@
 <template>
   <n-card>
-    <n-form label-width="100" label-placement="left">
+    <n-form
+      label-width="100"
+      label-placement="left"
+    >
       <n-form-item label="color picker:">
-        <n-color-picker v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')"
-          placement="bottom-end" />
+        <n-color-picker
+          v-model:value="hex"
+          placement="bottom-end"
+          @update:value="(v: string) => onInputUpdated(v, 'hex')"
+        />
       </n-form-item>
       <n-form-item label="color name:">
-        <n-input v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
+        <n-input
+          v-model:value="name"
+          :on-input="(v: string) => onInputUpdated(v, 'name')"
+        />
       </n-form-item>
       <n-form-item label="hex:">
-        <n-input v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
+        <n-input
+          v-model:value="hex"
+          :on-input="(v: string) => onInputUpdated(v, 'hex')"
+        />
       </n-form-item>
       <n-form-item label="rgb:">
-        <n-input v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
+        <n-input
+          v-model:value="rgb"
+          :on-input="(v: string) => onInputUpdated(v, 'rgb')"
+        />
       </n-form-item>
       <n-form-item label="hsl:">
-        <n-input v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
+        <n-input
+          v-model:value="hsl"
+          :on-input="(v: string) => onInputUpdated(v, 'hsl')"
+        />
       </n-form-item>
       <n-form-item label="hwb:">
-        <n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
+        <n-input
+          v-model:value="hwb"
+          :on-input="(v: string) => onInputUpdated(v, 'hwb')"
+        />
       </n-form-item>
       <n-form-item label="lch:">
-        <n-input v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
+        <n-input
+          v-model:value="lch"
+          :on-input="(v: string) => onInputUpdated(v, 'lch')"
+        />
       </n-form-item>
       <n-form-item label="cmyk:">
-        <n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
+        <n-input
+          v-model:value="cmyk"
+          :on-input="(v: string) => onInputUpdated(v, 'cmyk')"
+        />
       </n-form-item>
     </n-form>
   </n-card>
diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue
index a77a3f51..25c71c9c 100644
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -1,8 +1,16 @@
 <template>
   <n-card>
-    <n-form-item class="cron" :show-label="false" :feedback="cronValidation.message"
-      :validation-status="cronValidation.status">
-      <n-input v-model:value="cron" size="large" placeholder="* * * * *" />
+    <n-form-item
+      class="cron"
+      :show-label="false"
+      :feedback="cronValidation.message"
+      :validation-status="cronValidation.status"
+    >
+      <n-input
+        v-model:value="cron"
+        size="large"
+        placeholder="* * * * *"
+      />
     </n-form-item>
     <div class="cron-string">
       {{ cronString }}
@@ -11,8 +19,11 @@
     <n-divider />
 
     <n-space justify="center">
-
-      <n-form :show-feedback="false" label-width="170" label-placement="left">
+      <n-form
+        :show-feedback="false"
+        label-width="170"
+        label-placement="left"
+      >
         <n-form-item label="Verbose">
           <n-switch v-model:value="cronstrueConfig.verbose" />
         </n-form-item>
@@ -41,16 +52,28 @@
     <n-table size="small">
       <thead>
         <tr>
-          <th class="text-left" scope="col">
+          <th
+            class="text-left"
+            scope="col"
+          >
             Symbol
           </th>
-          <th class="text-left" scope="col">
+          <th
+            class="text-left"
+            scope="col"
+          >
             Meaning
           </th>
-          <th class="text-left" scope="col">
+          <th
+            class="text-left"
+            scope="col"
+          >
             Example
           </th>
-          <th class="text-left" scope="col">
+          <th
+            class="text-left"
+            scope="col"
+          >
             Equivalent
           </th>
         </tr>
@@ -152,7 +175,6 @@
         </tr>
       </tbody>
     </n-table>
-
   </n-card>
 </template>
 
diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue
index 720e4501..00e5e417 100644
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -1,31 +1,50 @@
 <template>
-    <div>
-        <n-card>
-            <n-space justify="center">
-                <n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
-                    <n-switch v-model:value="useCurrentDate" />
-                </n-form-item>
-            </n-space>
-            <n-form-item :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
-                :validation-status="inputInvalid ? 'error' : undefined">
-                <n-input-group style="flex-grow: 1;">
-                    <n-select v-model:value="inputFormat" style="width: 200px;"
-                        :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
-                        :disabled="useCurrentDate" />
+  <div>
+    <n-card>
+      <n-space justify="center">
+        <n-form-item
+          label="Use current date-time ?"
+          label-placement="left"
+          :show-feedback="false"
+        >
+          <n-switch v-model:value="useCurrentDate" />
+        </n-form-item>
+      </n-space>
+      <n-form-item
+        :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
+        :validation-status="inputInvalid ? 'error' : undefined"
+      >
+        <n-input-group style="flex-grow: 1;">
+          <n-select
+            v-model:value="inputFormat"
+            style="width: 200px;"
+            :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
+            :disabled="useCurrentDate"
+          />
 
-                    <n-input v-model:value="inputDate" :on-input="onDateInputChanged" :disabled="useCurrentDate"
-                        placeholder="Your date string..." />
-                </n-input-group>
-            </n-form-item>
-            <n-divider style="margin-top: 0;"></n-divider>
-            <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0;">
-                <n-input-group>
-                    <n-input-group-label style="width: 150px;">{{ name }}</n-input-group-label>
-                    <n-input :value="fromDate(date)" />
-                </n-input-group>
-            </div>
-        </n-card>
-    </div>
+          <n-input
+            v-model:value="inputDate"
+            :on-input="onDateInputChanged"
+            :disabled="useCurrentDate"
+            placeholder="Your date string..."
+          />
+        </n-input-group>
+      </n-form-item>
+      <n-divider style="margin-top: 0;" />
+      <div
+        v-for="{ name, fromDate } in formats"
+        :key="name"
+        style="margin: 5px 0;"
+      >
+        <n-input-group>
+          <n-input-group-label style="width: 150px;">
+            {{ name }}
+          </n-input-group-label>
+          <n-input :value="fromDate(date)" />
+        </n-input-group>
+      </div>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 415aadcd..efe2be9a 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,81 +1,105 @@
 <template>
-    <div>
-        <n-card title="Encrypt">
-            <n-space item-style="flex: 1 1 0">
-                <n-form-item label="Your text:" :show-feedback="false">
-                    <n-input
-                        v-model:value="cypherInput"
-                        type="textarea"
-                        placeholder="The string to cypher"
-                        :autosize="{ minRows: 4 }"
-                    />
-                </n-form-item>
-                <n-space vertical>
-                    <n-form-item label="Your secret key:" :show-feedback="false">
-                        <n-input v-model:value="cypherSecret" />
-                    </n-form-item>
-                    <n-form-item label="Encryption algorithm:" :show-feedback="false">
-                        <n-select
-                            v-model:value="cypherAlgo"
-                            :options="Object.keys(algos).map(label => ({ label, value: label }))"
-                        />
-                    </n-form-item>
-                </n-space>
-            </n-space>
-            <br />
-            <n-form-item label="Yout text encrypted:" :show-feedback="false">
-                <n-input
-                    :value="cypherOutput"
-                    type="textarea"
-                    placeholder="Your string hash"
-                    :autosize="{ minRows: 2 }"
-                    readonly
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                />
-            </n-form-item>
-        </n-card>
-        <br />
-        <n-card title="Decrypt">
-            <n-space item-style="flex: 1 1 0">
-                <n-form-item label="Your encrypted text:" :show-feedback="false">
-                    <n-input
-                        v-model:value="decryptInput"
-                        type="textarea"
-                        placeholder="The string to cypher"
-                        :autosize="{ minRows: 4 }"
-                    />
-                </n-form-item>
-                <n-space vertical>
-                    <n-form-item label="Your secret key:" :show-feedback="false">
-                        <n-input v-model:value="decryptSecret" />
-                    </n-form-item>
-                    <n-form-item label="Encryption algorithm:" :show-feedback="false">
-                        <n-select
-                            v-model:value="decryptAlgo"
-                            :options="Object.keys(algos).map(label => ({ label, value: label }))"
-                        />
-                    </n-form-item>
-                </n-space>
-            </n-space>
-            <br />
-            <n-form-item label="Yout decrypted text:" :show-feedback="false">
-                <n-input
-                    :value="decryptOutput"
-                    type="textarea"
-                    placeholder="Your string hash"
-                    :autosize="{ minRows: 2 }"
-                    readonly
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                />
-            </n-form-item>
-        </n-card>
-    </div>
+  <div>
+    <n-card title="Encrypt">
+      <n-space item-style="flex: 1 1 0">
+        <n-form-item
+          label="Your text:"
+          :show-feedback="false"
+        >
+          <n-input
+            v-model:value="cypherInput"
+            type="textarea"
+            placeholder="The string to cypher"
+            :autosize="{ minRows: 4 }"
+          />
+        </n-form-item>
+        <n-space vertical>
+          <n-form-item
+            label="Your secret key:"
+            :show-feedback="false"
+          >
+            <n-input v-model:value="cypherSecret" />
+          </n-form-item>
+          <n-form-item
+            label="Encryption algorithm:"
+            :show-feedback="false"
+          >
+            <n-select
+              v-model:value="cypherAlgo"
+              :options="Object.keys(algos).map(label => ({ label, value: label }))"
+            />
+          </n-form-item>
+        </n-space>
+      </n-space>
+      <br>
+      <n-form-item
+        label="Yout text encrypted:"
+        :show-feedback="false"
+      >
+        <n-input
+          :value="cypherOutput"
+          type="textarea"
+          placeholder="Your string hash"
+          :autosize="{ minRows: 2 }"
+          readonly
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        />
+      </n-form-item>
+    </n-card>
+    <br>
+    <n-card title="Decrypt">
+      <n-space item-style="flex: 1 1 0">
+        <n-form-item
+          label="Your encrypted text:"
+          :show-feedback="false"
+        >
+          <n-input
+            v-model:value="decryptInput"
+            type="textarea"
+            placeholder="The string to cypher"
+            :autosize="{ minRows: 4 }"
+          />
+        </n-form-item>
+        <n-space vertical>
+          <n-form-item
+            label="Your secret key:"
+            :show-feedback="false"
+          >
+            <n-input v-model:value="decryptSecret" />
+          </n-form-item>
+          <n-form-item
+            label="Encryption algorithm:"
+            :show-feedback="false"
+          >
+            <n-select
+              v-model:value="decryptAlgo"
+              :options="Object.keys(algos).map(label => ({ label, value: label }))"
+            />
+          </n-form-item>
+        </n-space>
+      </n-space>
+      <br>
+      <n-form-item
+        label="Yout decrypted text:"
+        :show-feedback="false"
+      >
+        <n-input
+          :value="decryptOutput"
+          type="textarea"
+          placeholder="Your string hash"
+          :autosize="{ minRows: 2 }"
+          readonly
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        />
+      </n-form-item>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/git-memo/git-memo.vue b/src/tools/git-memo/git-memo.vue
index 5848ac4a..063db8fd 100644
--- a/src/tools/git-memo/git-memo.vue
+++ b/src/tools/git-memo/git-memo.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <memo />
-    </div>
+  <div>
+    <memo />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index 7eacbf71..a71ae679 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -1,39 +1,45 @@
 <template>
-    <div>
-        <n-card>
-            <n-input
-                v-model:value="clearText"
-                type="textarea"
-                placeholder="Your string..."
-                :autosize="{ minRows: 3 }"
-            />
-            <br />
-            <br />
-            <n-select
-                v-model:value="algo"
-                :options="Object.keys(algos).map(label => ({ label, value: label }))"
-            />
+  <div>
+    <n-card>
+      <n-input
+        v-model:value="clearText"
+        type="textarea"
+        placeholder="Your string..."
+        :autosize="{ minRows: 3 }"
+      />
+      <br>
+      <br>
+      <n-select
+        v-model:value="algo"
+        :options="Object.keys(algos).map(label => ({ label, value: label }))"
+      />
 
-            <br />
-            <n-input
-                style="text-align: center;"
-                :value="hashedText"
-                type="textarea"
-                placeholder="Your string hash"
-                :autosize="{ minRows: 1 }"
-                readonly
-                autocomplete="off"
-                autocorrect="off"
-                autocapitalize="off"
-                spellcheck="false"
-            />
-            <br />
-            <br />
-            <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
-            </n-space>
-        </n-card>
-    </div>
+      <br>
+      <n-input
+        style="text-align: center;"
+        :value="hashedText"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 1 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+      <br>
+      <br>
+      <n-space justify="center">
+        <n-button
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index 5508b42e..223ca007 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,54 +1,95 @@
 <template>
-    <div>
-        <n-card>
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Input number:</n-input-group-label>
-                <n-input-number v-model:value="inputNumber" min="0" />
+  <div>
+    <n-card>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Input number:
+        </n-input-group-label>
+        <n-input-number
+          v-model:value="inputNumber"
+          min="0"
+        />
 
-                <n-input-group-label style="width: 200px;">Input base:</n-input-group-label>
-                <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px;" />
-            </n-input-group>
-            <n-divider></n-divider>
+        <n-input-group-label style="width: 200px;">
+          Input base:
+        </n-input-group-label>
+        <n-input-number
+          v-model:value="inputBase"
+          max="64"
+          min="2"
+          style="width: 100px;"
+        />
+      </n-input-group>
+      <n-divider />
 
 
 
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Binary (2):</n-input-group-label>
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
-                    readonly />
-            </n-input-group>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Binary (2):
+        </n-input-group-label>
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
+          readonly
+        />
+      </n-input-group>
 
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Octale (8):</n-input-group-label>
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
-                    readonly />
-            </n-input-group>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Octale (8):
+        </n-input-group-label>
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
+          readonly
+        />
+      </n-input-group>
 
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Decimal (10):</n-input-group-label>
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
-                    readonly />
-            </n-input-group>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Decimal (10):
+        </n-input-group-label>
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
+          readonly
+        />
+      </n-input-group>
 
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Hexadecimal (16):</n-input-group-label>
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
-                    readonly />
-            </n-input-group>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Hexadecimal (16):
+        </n-input-group-label>
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
+          readonly
+        />
+      </n-input-group>
 
-            <n-input-group>
-                <n-input-group-label style="width: 200px;">Base64 (64):</n-input-group-label>
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
-                    readonly />
-            </n-input-group>
-            <n-input-group>
-                <n-input-group-label style="width: 90px;">Custom:</n-input-group-label>
-                <n-input-number style="width: 110px;" v-model:value="outputBase" max="64" min="2" />
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
-                    readonly />
-            </n-input-group>
-        </n-card>
-    </div>
+      <n-input-group>
+        <n-input-group-label style="width: 200px;">
+          Base64 (64):
+        </n-input-group-label>
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
+          readonly
+        />
+      </n-input-group>
+      <n-input-group>
+        <n-input-group-label style="width: 90px;">
+          Custom:
+        </n-input-group-label>
+        <n-input-number
+          v-model:value="outputBase"
+          style="width: 110px;"
+          max="64"
+          min="2"
+        />
+        <n-input
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
+          readonly
+        />
+      </n-input-group>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
index a25e84a4..b9c62c16 100644
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -1,30 +1,84 @@
 <template>
-    <n-card>
-        <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
-            <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
-        </n-form-item>
-        <n-form-item label="Sentences per paragraph" :show-feedback="false" label-width="200" label-placement="left">
-            <n-slider v-model:value="sentences" range :step="1" :min="1" :max="50" />
-        </n-form-item>
-        <n-form-item label="Words per sentence" :show-feedback="false" label-width="200" label-placement="left">
-            <n-slider v-model:value="words" range :step="1" :min="1" :max="50" />
-        </n-form-item>
-        <n-form-item label="Start with lorem ipsum ?" :show-feedback="false" label-width="200" label-placement="left">
-            <n-switch v-model:value="startWithLoremIpsum" />
-        </n-form-item>
-        <n-form-item label="As html ?" :show-feedback="false" label-width="200" label-placement="left">
-            <n-switch v-model:value="asHTML" />
-        </n-form-item>
+  <n-card>
+    <n-form-item
+      label="Paragraphs"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
+      <n-slider
+        v-model:value="paragraphs"
+        :step="1"
+        :min="1"
+        :max="20"
+      />
+    </n-form-item>
+    <n-form-item
+      label="Sentences per paragraph"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
+      <n-slider
+        v-model:value="sentences"
+        range
+        :step="1"
+        :min="1"
+        :max="50"
+      />
+    </n-form-item>
+    <n-form-item
+      label="Words per sentence"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
+      <n-slider
+        v-model:value="words"
+        range
+        :step="1"
+        :min="1"
+        :max="50"
+      />
+    </n-form-item>
+    <n-form-item
+      label="Start with lorem ipsum ?"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
+      <n-switch v-model:value="startWithLoremIpsum" />
+    </n-form-item>
+    <n-form-item
+      label="As html ?"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
+      <n-switch v-model:value="asHTML" />
+    </n-form-item>
 
-        <br>
+    <br>
 
-        <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." autosize readonly />
-        <br>
-        <br>
-        <n-space justify="center">
-            <n-button @click="copy" secondary autofocus>Copy</n-button>
-        </n-space>
-    </n-card>
+    <n-input
+      :value="loremIpsumText"
+      type="textarea"
+      placeholder="Your lorem ipsum..."
+      autosize
+      readonly
+    />
+    <br>
+    <br>
+    <n-space justify="center">
+      <n-button
+        secondary
+        autofocus
+        @click="copy"
+      >
+        Copy
+      </n-button>
+    </n-space>
+  </n-card>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index e23f00aa..8f2161d3 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -1,27 +1,56 @@
 <template>
   <n-card>
-    <n-grid cols="3" x-gap="12">
+    <n-grid
+      cols="3"
+      x-gap="12"
+    >
       <n-gi span="2">
-        <n-form label-width="130" label-placement="left">
+        <n-form
+          label-width="130"
+          label-placement="left"
+        >
           <n-form-item label="Text:">
-            <n-input v-model:value="text" placeholder="Your link or text..." />
+            <n-input
+              v-model:value="text"
+              placeholder="Your link or text..."
+            />
           </n-form-item>
           <n-form-item label="Foreground color:">
-            <n-color-picker v-model:value="foreground" :modes="['hex']" />
+            <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-color-picker
+              v-model:value="background"
+              :modes="['hex']"
+            />
           </n-form-item>
           <n-form-item label="Error resistance:">
-            <n-select v-model:value="errorCorrectionLevel"
-              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" />
+            <n-select
+              v-model:value="errorCorrectionLevel"
+              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
+            />
           </n-form-item>
-        </n-form>
-      </n-gi>
+        </n-form>  
+      </n-gi> 
       <n-gi>
-        <n-space justify="center" align="center" vertical>
-          <n-image :src="qrcode" width="200" />
-          <n-button @click="download" secondary>Download qr-code</n-button>
+        <n-space
+          justify="center"
+          align="center"
+          vertical
+        >
+          <n-image
+            :src="qrcode"
+            width="200"
+          />
+          <n-button
+            secondary
+            @click="download"
+          >
+            Download qr-code
+          </n-button>
         </n-space>
       </n-gi>
     </n-grid>
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
index d6ab5d62..16d9458e 100644
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -1,11 +1,23 @@
 <template>
-    <n-card>
-        <div class="port">{{ port }}</div>
-        <n-space justify="center">
-            <n-button @click="copy" secondary>Copy</n-button>
-            <n-button @click="refreshPort" secondary>Refresh</n-button>
-        </n-space>
-    </n-card>
+  <n-card>
+    <div class="port">
+      {{ port }}
+    </div>
+    <n-space justify="center">
+      <n-button
+        secondary
+        @click="copy"
+      >
+        Copy
+      </n-button>
+      <n-button
+        secondary
+        @click="refreshPort"
+      >
+        Refresh
+      </n-button>
+    </n-space>
+  </n-card>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
index 4b7a1a2c..7f47e097 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -1,26 +1,51 @@
 <template>
-    <div>
-        <n-card title="Arabic to roman">
-            <n-space align="center" justify="space-between">
-                <n-input-number
-                    v-model:value="inputNumeral"
-                    :min="1"
-                    style="width: 200px;"
-                    :show-button="false"
-                />
-                <div class="result">{{ outputRoman }}</div>
-                <n-button @click="copyRoman" secondary autofocus>Copy</n-button>
-            </n-space>
-        </n-card>
-        <br />
-        <n-card title="Roman to arabic">
-            <n-space align="center" justify="space-between">
-                <n-input v-model:value="inputRoman" style="width: 200px;" />
-                <div class="result">{{ outputNumeral }}</div>
-                <n-button @click="copyArabic" secondary autofocus>Copy</n-button>
-            </n-space>
-        </n-card>
-    </div>
+  <div>
+    <n-card title="Arabic to roman">
+      <n-space
+        align="center"
+        justify="space-between"
+      >
+        <n-input-number
+          v-model:value="inputNumeral"
+          :min="1"
+          style="width: 200px;"
+          :show-button="false"
+        />
+        <div class="result">
+          {{ outputRoman }}
+        </div>
+        <n-button
+          secondary
+          autofocus
+          @click="copyRoman"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+    <br>
+    <n-card title="Roman to arabic">
+      <n-space
+        align="center"
+        justify="space-between"
+      >
+        <n-input
+          v-model:value="inputRoman"
+          style="width: 200px;"
+        />
+        <div class="result">
+          {{ outputNumeral }}
+        </div>
+        <n-button
+          secondary
+          autofocus
+          @click="copyArabic"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue
index 1563c434..90504ce2 100644
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -1,13 +1,30 @@
 <template>
   <n-card>
-    <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
+    <n-input
+      v-model:value="text"
+      type="textarea"
+      placeholder="Your text..."
+      rows="5"
+    />
     <br>
     <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="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
+      <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="Byte size"
+        :value="formatBytes(getStringSizeInBytes(text))"
+      />
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue
index ce9c5d66..28de8381 100644
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -1,54 +1,80 @@
 <template>
-    <div>
-        <n-card>
-            <n-form label-placement="left" label-width="140">
-                <n-space justify="center" item-style="padding: 0" :size="0">
-                    <div>
-                        <n-form-item label="Uppercase (ABC...)">
-                            <n-switch v-model:value="withUppercase" />
-                        </n-form-item>
-
-                        <n-form-item label="Lowercase (abc...)">
-                            <n-switch v-model:value="withLowercase" />
-                        </n-form-item>
-                    </div>
-
-                    <div>
-                        <n-form-item label="Numbers (012...)">
-                            <n-switch v-model:value="withNumbers" />
-                        </n-form-item>
-
-                        <n-form-item label="Symbols (;-!...)">
-                            <n-switch v-model:value="withSymbols" />
-                        </n-form-item>
-                    </div>
-                </n-space>
-            </n-form>
-
-            <n-form-item :label="`Length (${length})`" label-placement="left">
-                <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
+  <div>
+    <n-card>
+      <n-form
+        label-placement="left"
+        label-width="140"
+      >
+        <n-space
+          justify="center"
+          item-style="padding: 0"
+          :size="0"
+        >
+          <div>
+            <n-form-item label="Uppercase (ABC...)">
+              <n-switch v-model:value="withUppercase" />
             </n-form-item>
 
-            <n-input
-                style="text-align: center;"
-                v-model:value="token"
-                type="textarea"
-                placeholder="The token..."
-                :autosize="{ minRows: 1 }"
-                readonly
-                autocomplete="off"
-                autocorrect="off"
-                autocapitalize="off"
-                spellcheck="false"
-            />
-            <br />
-            <br />
-            <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
-                <n-button @click="refreshToken" secondary>Refresh</n-button>
-            </n-space>
-        </n-card>
-    </div>
+            <n-form-item label="Lowercase (abc...)">
+              <n-switch v-model:value="withLowercase" />
+            </n-form-item>
+          </div>
+
+          <div>
+            <n-form-item label="Numbers (012...)">
+              <n-switch v-model:value="withNumbers" />
+            </n-form-item>
+
+            <n-form-item label="Symbols (;-!...)">
+              <n-switch v-model:value="withSymbols" />
+            </n-form-item>
+          </div>
+        </n-space>
+      </n-form>
+
+      <n-form-item
+        :label="`Length (${length})`"
+        label-placement="left"
+      >
+        <n-slider
+          v-model:value="length"
+          :step="1"
+          :min="1"
+          :max="512"
+        />
+      </n-form-item>
+
+      <n-input
+        v-model:value="token"
+        style="text-align: center;"
+        type="textarea"
+        placeholder="The token..."
+        :autosize="{ minRows: 1 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+      <br>
+      <br>
+      <n-space justify="center">
+        <n-button
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
+        <n-button
+          secondary
+          @click="refreshToken"
+        >
+          Refresh
+        </n-button>
+      </n-space>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index 45bddc81..c3ed6ba6 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -1,38 +1,72 @@
 <template>
-    <n-space item-style="flex:1">
-        <n-card title="Encode">
-            <n-form-item label="Your string :" :feedback="encodedValidation.message"
-                :validation-status="encodedValidation.status">
-                <n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
+  <n-space item-style="flex:1">
+    <n-card title="Encode">
+      <n-form-item
+        label="Your string :"
+        :feedback="encodedValidation.message"
+        :validation-status="encodedValidation.status"
+      >
+        <n-input
+          v-model:value="encodeInput"
+          type="textarea"
+          placeholder="The string to encode"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
 
-            <n-form-item label="Your string encoded :">
-                <n-input :value="encodeOutput" type="textarea" readonly placeholder="Your string encoded"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
+      <n-form-item label="Your string encoded :">
+        <n-input
+          :value="encodeOutput"
+          type="textarea"
+          readonly
+          placeholder="Your string encoded"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
 
-            <n-space justify="center">
-                <n-button @click="copyEncoded" secondary>Copy</n-button>
-            </n-space>
-        </n-card>
-        <n-card title="Encode">
-            <n-form-item label="Your encode string :" :feedback="decodeValidation.message"
-                :validation-status="decodeValidation.status">
-                <n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
+      <n-space justify="center">
+        <n-button
+          secondary
+          @click="copyEncoded"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+    <n-card title="Encode">
+      <n-form-item
+        label="Your encode string :"
+        :feedback="decodeValidation.message"
+        :validation-status="decodeValidation.status"
+      >
+        <n-input
+          v-model:value="decodeInput"
+          type="textarea"
+          placeholder="The string to decode"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
 
-            <n-form-item label="Your string decoded :">
-                <n-input :value="decodeOutput" type="textarea" readonly placeholder="Your string decoded"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
+      <n-form-item label="Your string decoded :">
+        <n-input
+          :value="decodeOutput"
+          type="textarea"
+          readonly
+          placeholder="Your string decoded"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
 
-            <n-space justify="center">
-                <n-button @click="copyDecoded" secondary>Copy</n-button>
-            </n-space>
-        </n-card>
-    </n-space>
+      <n-space justify="center">
+        <n-button
+          secondary
+          @click="copyDecoded"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+  </n-space>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index 61dc6bf5..fb723b8a 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -1,31 +1,49 @@
 <template>
-    <div>
-        <n-card>
-            <n-space align="center" justify="center">
-                Quantity :
-                <n-input-number v-model:value="count" :min="1" :max="50" />
-            </n-space>
-            <br />
-            <n-input
-                style="text-align: center; font-family: monospace;"
-                :value="uuids"
-                type="textarea"
-                placeholder="Your uuids"
-                :autosize="{ minRows: 1 }"
-                readonly
-                autocomplete="off"
-                autocorrect="off"
-                autocapitalize="off"
-                spellcheck="false"
-            />
-            <br />
-            <br />
-            <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
-                <n-button @click="refreshUUIDs" secondary>Refresh</n-button>
-            </n-space>
-        </n-card>
-    </div>
+  <div>
+    <n-card>
+      <n-space
+        align="center"
+        justify="center"
+      >
+        Quantity :
+        <n-input-number
+          v-model:value="count"
+          :min="1"
+          :max="50"
+        />
+      </n-space>
+      <br>
+      <n-input
+        style="text-align: center; font-family: monospace;"
+        :value="uuids"
+        type="textarea"
+        placeholder="Your uuids"
+        :autosize="{ minRows: 1 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+      <br>
+      <br>
+      <n-space justify="center">
+        <n-button
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
+        <n-button
+          secondary
+          @click="refreshUUIDs"
+        >
+          Refresh
+        </n-button>
+      </n-space>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/tsconfig.app.json b/tsconfig.app.json
index ad5b32cf..45ddfca0 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["naive-ui/volar"]
   }
 }