refactor(style): updated linter config

.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,
   },

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">

src/components/MenuLayout.vue

@@ -1,13 +1,26 @@
 <template>
   <n-layout has-sider>
-        <n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed"
+    <n-layout-sider
-            @collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false"
+      bordered
-            :native-scrollbar="false" :position="siderPosition">
+      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 class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" />
+      <div
+        v-show="isSmallScreen && !isMenuCollapsed"
+        class="overlay"
+        @click="isMenuCollapsed = true"
+      />
     </n-layout>
   </n-layout>
 </template>

src/components/SearchBar.vue

@@ -33,11 +33,22 @@ function onSelect(path: string) {
 
 <template>
   <div class="search-bar">
-        <n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
+    <n-auto-complete
-            :on-select="onSelect">
+      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"
+        <n-input
-                    @focus="handleFocus" @blur="handleBlur">
+          round
+          clearable
+          placeholder="Search a tool..."
+          :value="slotValue"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        >
           <template #prefix>
             <n-icon :component="SearchRound" />
           </template>

src/components/ToolCard.vue

@@ -1,12 +1,21 @@
 <template>
   <router-link :to="tool.path">
     <n-card class="tool-card">
-            <n-icon class="icon" size="40" :component="tool.icon" />
+      <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>
+        <n-ellipsis
+          :line-clamp="2"
+          :tooltip="false"
+        >
+          {{ tool.description }}
+        </n-ellipsis>
       </div>
     </n-card>
   </router-link>

src/layouts/base.layout.vue

@@ -32,83 +32,198 @@ const m = toolsByCategory.map(category => ({
 </script>
 
 <template>
-    <menu-layout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
+  <menu-layout
-
+    class="menu-layout"
-        <template v-slot:sider>
+    :class="{ isSmallScreen: styleStore.isSmallScreen }"
-            <router-link to="/" class="hero-wrapper">
+  >
+    <template #sider>
+      <router-link
+        to="/"
+        class="hero-wrapper"
+      >
         <hero-gradient class="gradient" />
         <div class="text-wrapper">
-                    <div class="title">IT - TOOLS</div>
+          <div class="title">
+            IT - TOOLS
+          </div>
           <div class="divider" />
-                    <div class="subtitle">Handy tools for developers</div>
+          <div class="subtitle">
+            Handy tools for developers
+          </div>
         </div>
       </router-link>
 
       <div class="sider-content">
-                <n-space v-if="styleStore.isSmallScreen" justify="center">
+        <n-space
-                    <n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
+          v-if="styleStore.isSmallScreen"
-                        rel="noopener" target="_blank">
+          justify="center"
-                        <n-icon size="25" :component="BrandGithub" />
+        >
+          <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"
+          <n-button
-                        target="_blank">
+            size="large"
-                        <n-icon size="25" :component="BrandTwitter" />
+            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-button
-                        <n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
+            size="large"
-                        <n-icon size="25" v-else :component="Moon" />
+            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>
 
-                <n-menu :value="route.name" class="menu" :collapsed-width="64" :collapsed-icon-size="22" :options="m"
+        <n-menu
-                    v-model:value="activeKey" :indent="20" />
+          v-model:value="activeKey"
-
+          :value="route.name"
+          class="menu"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="m"
+          :indent="20"
+        />
       </div>
-
-
     </template>
 
-        <template v-slot:content>
+    <template #content>
       <div class="navigation">
-                <n-button :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary
+        <n-button
-                    @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed" aria-label="Toogle menu">
+          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-                    <n-icon size="25" :component="Menu2" />
+          circle
+          quaternary
+          aria-label="Toogle menu"
+          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
+        >
+          <n-icon
+            size="25"
+            :component="Menu2"
+          />
         </n-button>
 
-                <router-link to="/" #="{ navigate, href }" custom>
+        <router-link
-                    <n-button tag="a" :href="href" @click="navigate"
+          to="/"
-                        :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary aria-label="Home">
+          #="{ navigate, href }"
-                        <n-icon size="25" :component="Home2" />
+          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 />
 
 
-                <n-button type="primary" tag="a" href="https://github.com/sponsors/CorentinTh" rel="noopener"
+        <n-button
-                    target="_blank">
+          type="primary"
-                    <n-icon :component="Heart" style="margin-right: 5px;" v-if="!styleStore.isSmallScreen" />
+          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 size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
+        <n-button
-                    rel="noopener" target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Github repository">
+          v-if="!styleStore.isSmallScreen"
-                    <n-icon size="25" :component="BrandGithub" />
+          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 size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
+        <n-button
-                    target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Twitter account">
+          v-if="!styleStore.isSmallScreen"
-                    <n-icon size="25" :component="BrandTwitter" />
+          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 size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
+        <n-button
-                    v-if="!styleStore.isSmallScreen" aria-label="Toogle theme">
+          v-if="!styleStore.isSmallScreen"
-                    <n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
+          size="large"
-                    <n-icon size="25" v-else :component="Moon" />
+          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>
 

src/layouts/tool.layout.vue

@@ -29,7 +29,9 @@ useHead(head)
       <div class="tool-header">
         <n-h1>{{ route.meta.name }}</n-h1>
         <div class="separator" />
-                <div class="description">{{ route.meta.description }}</div>
+        <div class="description">
+          {{ route.meta.description }}
+        </div>
       </div>
 
       <slot />

src/pages/404.page.vue

@@ -10,14 +10,20 @@
       description="Sorry, this page does not seem to extist"
     >
       <template #footer>
-                <router-link to="/" #="{ navigate, href }" custom>
+        <router-link
+          to="/"
+          #="{ navigate, href }"
+          custom
+        >
           <n-button
             tag="a"
             :href="href"
             secondary
-                        @click="navigate"
             type="success"
-                    >Back home</n-button>
+            @click="navigate"
+          >
+            Back home
+          </n-button>
         </router-link>
       </template>
     </n-result>

src/pages/Home.page.vue

@@ -5,8 +5,15 @@ import ToolCard from '../components/ToolCard.vue';
 
 <template>
   <div class="home-page">
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+    <n-grid
-            <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
+      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>

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
-    <n-input :value="textBase64" type="textarea" readonly />
+      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">

src/tools/bip39-generator/bip39-generator.vue

@@ -1,18 +1,29 @@
 <template>
   <div>
     <n-card>
-            <n-grid cols="3" x-gap="12">
+      <n-grid
+        cols="3"
+        x-gap="12"
+      >
         <n-gi span="1">
           <n-form-item label="Language:">
-                        <n-select v-model:value="language"
+            <n-select
-                            :options="Object.keys(languages).map(label => ({ label, value: label }))" />
+              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"
+          <n-form-item
-                        :validation-status="entropyValidation.status">
+            label="Entropy (seed):"
+            :feedback="entropyValidation.message"
+            :validation-status="entropyValidation.status"
+          >
             <n-input-group>
-                            <n-input v-model:value="entropy" placeholder="Your string..." />
+              <n-input
+                v-model:value="entropy"
+                placeholder="Your string..."
+              />
               <n-button @click="refreshEntropy">
                 <n-icon size="22">
                   <Refresh />
@@ -24,19 +35,30 @@
                 </n-icon>
               </n-button>
             </n-input-group>
-
           </n-form-item>
         </n-gi>
       </n-grid>
-            <n-form-item label="Passphrase (mnemonic):" :feedback="mnemonicValidation.message"
+      <n-form-item
-                :validation-status="mnemonicValidation.status">
+        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"
+          <n-input
-                        placeholder="Your mnemonic..." autocomplete="off" autocorrect="off" autocapitalize="off"
+            v-model:value="passphrase"
-                        spellcheck="false" />
+            style="text-align: center; flex: 1;"
+            placeholder="Your mnemonic..."
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+          />
 
           <n-button @click="copyPassphrase">
-                        <n-icon size="22" :component="Copy" />
+            <n-icon
+              size="22"
+              :component="Copy"
+            />
           </n-button>
         </n-input-group>
       </n-form-item>

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')"
+        <n-color-picker
-          placement="bottom-end" />
+          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>

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"
+    <n-form-item
-      :validation-status="cronValidation.status">
+      class="cron"
-      <n-input v-model:value="cron" size="large" placeholder="* * * * *" />
+      :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
-      <n-form :show-feedback="false" label-width="170" label-placement="left">
+        :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>
 

src/tools/date-time-converter/date-time-converter.vue

@@ -2,25 +2,44 @@
   <div>
     <n-card>
       <n-space justify="center">
-                <n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
+        <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' : ''"
+      <n-form-item
-                :validation-status="inputInvalid ? 'error' : undefined">
+        :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;"
+          <n-select
+            v-model:value="inputFormat"
+            style="width: 200px;"
             :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
-                        :disabled="useCurrentDate" />
+            :disabled="useCurrentDate"
+          />
 
-                    <n-input v-model:value="inputDate" :on-input="onDateInputChanged" :disabled="useCurrentDate"
+          <n-input
-                        placeholder="Your date string..." />
+            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>
+      <n-divider style="margin-top: 0;" />
-            <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 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-group-label style="width: 150px;">
+            {{ name }}
+          </n-input-group-label>
           <n-input :value="fromDate(date)" />
         </n-input-group>
       </div>

src/tools/encryption/encryption.vue

@@ -2,7 +2,10 @@
   <div>
     <n-card title="Encrypt">
       <n-space item-style="flex: 1 1 0">
-                <n-form-item label="Your text:" :show-feedback="false">
+        <n-form-item
+          label="Your text:"
+          :show-feedback="false"
+        >
           <n-input
             v-model:value="cypherInput"
             type="textarea"
@@ -11,10 +14,16 @@
           />
         </n-form-item>
         <n-space vertical>
-                    <n-form-item label="Your secret key:" :show-feedback="false">
+          <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-form-item
+            label="Encryption algorithm:"
+            :show-feedback="false"
+          >
             <n-select
               v-model:value="cypherAlgo"
               :options="Object.keys(algos).map(label => ({ label, value: label }))"
@@ -22,8 +31,11 @@
           </n-form-item>
         </n-space>
       </n-space>
-            <br />
+      <br>
-            <n-form-item label="Yout text encrypted:" :show-feedback="false">
+      <n-form-item
+        label="Yout text encrypted:"
+        :show-feedback="false"
+      >
         <n-input
           :value="cypherOutput"
           type="textarea"
@@ -37,10 +49,13 @@
         />
       </n-form-item>
     </n-card>
-        <br />
+    <br>
     <n-card title="Decrypt">
       <n-space item-style="flex: 1 1 0">
-                <n-form-item label="Your encrypted text:" :show-feedback="false">
+        <n-form-item
+          label="Your encrypted text:"
+          :show-feedback="false"
+        >
           <n-input
             v-model:value="decryptInput"
             type="textarea"
@@ -49,10 +64,16 @@
           />
         </n-form-item>
         <n-space vertical>
-                    <n-form-item label="Your secret key:" :show-feedback="false">
+          <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-form-item
+            label="Encryption algorithm:"
+            :show-feedback="false"
+          >
             <n-select
               v-model:value="decryptAlgo"
               :options="Object.keys(algos).map(label => ({ label, value: label }))"
@@ -60,8 +81,11 @@
           </n-form-item>
         </n-space>
       </n-space>
-            <br />
+      <br>
-            <n-form-item label="Yout decrypted text:" :show-feedback="false">
+      <n-form-item
+        label="Yout decrypted text:"
+        :show-feedback="false"
+      >
         <n-input
           :value="decryptOutput"
           type="textarea"

src/tools/hash-text/hash-text.vue

@@ -7,14 +7,14 @@
         placeholder="Your string..."
         :autosize="{ minRows: 3 }"
       />
-            <br />
+      <br>
-            <br />
+      <br>
       <n-select
         v-model:value="algo"
         :options="Object.keys(algos).map(label => ({ label, value: label }))"
       />
 
-            <br />
+      <br>
       <n-input
         style="text-align: center;"
         :value="hashedText"
@@ -27,10 +27,16 @@
         autocapitalize="off"
         spellcheck="false"
       />
-            <br />
+      <br>
-            <br />
+      <br>
       <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
+        <n-button
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
       </n-space>
     </n-card>
   </div>

src/tools/integer-base-converter/integer-base-converter.vue

@@ -2,50 +2,91 @@
   <div>
     <n-card>
       <n-input-group>
-                <n-input-group-label style="width: 200px;">Input number:</n-input-group-label>
+        <n-input-group-label style="width: 200px;">
-                <n-input-number v-model:value="inputNumber" min="0" />
+          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-group-label style="width: 200px;">
-                <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px;" />
+          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-divider />
 
 
 
       <n-input-group>
-                <n-input-group-label style="width: 200px;">Binary (2):</n-input-group-label>
+        <n-input-group-label style="width: 200px;">
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
+          Binary (2):
-                    readonly />
+        </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-group-label style="width: 200px;">
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
+          Octale (8):
-                    readonly />
+        </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-group-label style="width: 200px;">
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
+          Decimal (10):
-                    readonly />
+        </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-group-label style="width: 200px;">
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
+          Hexadecimal (16):
-                    readonly />
+        </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-group-label style="width: 200px;">
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
+          Base64 (64):
-                    readonly />
+        </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-group-label style="width: 90px;">
-                <n-input-number style="width: 110px;" v-model:value="outputBase" max="64" min="2" />
+          Custom:
-                <n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
+        </n-input-group-label>
-                    readonly />
+        <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>

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -1,28 +1,82 @@
 <template>
   <n-card>
-        <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item
-            <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
+      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-form-item
-            <n-slider v-model:value="sentences" range :step="1" :min="1" :max="50" />
+      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-form-item
-            <n-slider v-model:value="words" range :step="1" :min="1" :max="50" />
+      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-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-form-item
+      label="As html ?"
+      :show-feedback="false"
+      label-width="200"
+      label-placement="left"
+    >
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
     <br>
 
-        <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." autosize readonly />
+    <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-button
+        secondary
+        autofocus
+        @click="copy"
+      >
+        Copy
+      </n-button>
     </n-space>
   </n-card>
 </template>

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"
+            <n-select
-              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" />
+              v-model:value="errorCorrectionLevel"
+              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
+            />
           </n-form-item>
         </n-form>  
       </n-gi> 
       <n-gi>
-        <n-space justify="center" align="center" vertical>
+        <n-space
-          <n-image :src="qrcode" width="200" />
+          justify="center"
-          <n-button @click="download" secondary>Download qr-code</n-button>
+          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>

src/tools/random-port-generator/random-port-generator.vue

@@ -1,9 +1,21 @@
 <template>
   <n-card>
-        <div class="port">{{ port }}</div>
+    <div class="port">
+      {{ port }}
+    </div>
     <n-space justify="center">
-            <n-button @click="copy" secondary>Copy</n-button>
+      <n-button
-            <n-button @click="refreshPort" secondary>Refresh</n-button>
+        secondary
+        @click="copy"
+      >
+        Copy
+      </n-button>
+      <n-button
+        secondary
+        @click="refreshPort"
+      >
+        Refresh
+      </n-button>
     </n-space>
   </n-card>
 </template>

src/tools/roman-numeral-converter/roman-numeral-converter.vue

@@ -1,23 +1,48 @@
 <template>
   <div>
     <n-card title="Arabic to roman">
-            <n-space align="center" justify="space-between">
+      <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>
+        <div class="result">
-                <n-button @click="copyRoman" secondary autofocus>Copy</n-button>
+          {{ outputRoman }}
+        </div>
+        <n-button
+          secondary
+          autofocus
+          @click="copyRoman"
+        >
+          Copy
+        </n-button>
       </n-space>
     </n-card>
-        <br />
+    <br>
     <n-card title="Roman to arabic">
-            <n-space align="center" justify="space-between">
+      <n-space
-                <n-input v-model:value="inputRoman" style="width: 200px;" />
+        align="center"
-                <div class="result">{{ outputNumeral }}</div>
+        justify="space-between"
-                <n-button @click="copyArabic" secondary autofocus>Copy</n-button>
+      >
+        <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>

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
-      <n-statistic label="Word count" :value="text.split(/\s+/).length" />
+        label="Character count"
-      <n-statistic label="Line count" :value="text.split(/\r\n|\r|\n/).length" />
+        :value="text.length"
-      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
+      />
+      <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>

src/tools/token-generator/token-generator.tool.vue

@@ -1,8 +1,15 @@
 <template>
   <div>
     <n-card>
-            <n-form label-placement="left" label-width="140">
+      <n-form
-                <n-space justify="center" item-style="padding: 0" :size="0">
+        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" />
@@ -25,13 +32,21 @@
         </n-space>
       </n-form>
 
-            <n-form-item :label="`Length (${length})`" label-placement="left">
+      <n-form-item
-                <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
+        :label="`Length (${length})`"
+        label-placement="left"
+      >
+        <n-slider
+          v-model:value="length"
+          :step="1"
+          :min="1"
+          :max="512"
+        />
       </n-form-item>
 
       <n-input
-                style="text-align: center;"
         v-model:value="token"
+        style="text-align: center;"
         type="textarea"
         placeholder="The token..."
         :autosize="{ minRows: 1 }"
@@ -41,11 +56,22 @@
         autocapitalize="off"
         spellcheck="false"
       />
-            <br />
+      <br>
-            <br />
+      <br>
       <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
+        <n-button
-                <n-button @click="refreshToken" secondary>Refresh</n-button>
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
+        <n-button
+          secondary
+          @click="refreshToken"
+        >
+          Refresh
+        </n-button>
       </n-space>
     </n-card>
   </div>

src/tools/url-encoder/url-encoder.vue

@@ -1,35 +1,69 @@
 <template>
   <n-space item-style="flex:1">
     <n-card title="Encode">
-            <n-form-item label="Your string :" :feedback="encodedValidation.message"
+      <n-form-item
-                :validation-status="encodedValidation.status">
+        label="Your string :"
-                <n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
+        :feedback="encodedValidation.message"
-                    :autosize="{ minRows: 3 }" />
+        :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"
+        <n-input
-                    :autosize="{ minRows: 3 }" />
+          :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-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"
+      <n-form-item
-                :validation-status="decodeValidation.status">
+        label="Your encode string :"
-                <n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
+        :feedback="decodeValidation.message"
-                    :autosize="{ minRows: 3 }" />
+        :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"
+        <n-input
-                    :autosize="{ minRows: 3 }" />
+          :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-button
+          secondary
+          @click="copyDecoded"
+        >
+          Copy
+        </n-button>
       </n-space>
     </n-card>
   </n-space>

src/tools/uuid-generator/uuid-generator.vue

@@ -1,11 +1,18 @@
 <template>
   <div>
     <n-card>
-            <n-space align="center" justify="center">
+      <n-space
+        align="center"
+        justify="center"
+      >
         Quantity :
-                <n-input-number v-model:value="count" :min="1" :max="50" />
+        <n-input-number
+          v-model:value="count"
+          :min="1"
+          :max="50"
+        />
       </n-space>
-            <br />
+      <br>
       <n-input
         style="text-align: center; font-family: monospace;"
         :value="uuids"
@@ -18,11 +25,22 @@
         autocapitalize="off"
         spellcheck="false"
       />
-            <br />
+      <br>
-            <br />
+      <br>
       <n-space justify="center">
-                <n-button @click="copy" secondary autofocus>Copy</n-button>
+        <n-button
-                <n-button @click="refreshUUIDs" secondary>Refresh</n-button>
+          secondary
+          autofocus
+          @click="copy"
+        >
+          Copy
+        </n-button>
+        <n-button
+          secondary
+          @click="refreshUUIDs"
+        >
+          Refresh
+        </n-button>
       </n-space>
     </n-card>
   </div>

tsconfig.app.json

@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["naive-ui/volar"]
   }
 }