From 05ea54547515f7fb1eed5f31ccbde10e36041fb1 Mon Sep 17 00:00:00 2001
From: Corentin THOMASSET <corentin.thomasset74@gmail.com>
Date: Sun, 25 Jun 2023 15:00:50 +0200
Subject: [PATCH] refactor(ui): replaced some n-input to c-input (#505)

---
 components.d.ts                               |  2 +
 ...docker-run-to-docker-compose-converter.vue | 21 ++---
 src/tools/encryption/encryption.vue           | 78 +++++++------------
 src/tools/hash-text/hash-text.vue             |  2 +-
 src/tools/hmac-generator/hmac-generator.vue   | 15 ++--
 src/tools/html-entities/html-entities.vue     | 32 ++++----
 .../http-status-codes/http-status-codes.vue   | 34 +++-----
 .../integer-base-converter.vue                | 31 +-------
 src/tools/jwt-parser/jwt-parser.vue           |  4 +-
 .../lorem-ipsum-generator.vue                 |  2 +-
 src/tools/math-evaluator/math-evaluator.vue   | 10 +--
 .../qr-code-generator/qr-code-generator.vue   | 19 +++--
 src/tools/slugify-string/slugify-string.vue   | 13 +---
 src/tools/text-statistics/text-statistics.vue |  2 +-
 .../token-generator/token-generator.tool.vue  | 21 +++--
 src/tools/url-encoder/url-encoder.vue         | 78 +++++++++----------
 .../user-agent-parser/user-agent-parser.vue   | 21 ++---
 src/tools/uuid-generator/uuid-generator.vue   | 22 ++++--
 src/ui/c-input-text/c-input-text.demo.vue     |  7 +-
 src/ui/c-input-text/c-input-text.vue          | 10 +--
 20 files changed, 189 insertions(+), 235 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 6dbe5521..d4a7a52f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -68,11 +68,13 @@ declare module '@vue/runtime-core' {
     IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
+    IconMdiMagnify: typeof import('~icons/mdi/magnify')['default']
     IconMdiPause: typeof import('~icons/mdi/pause')['default']
     IconMdiPlay: typeof import('~icons/mdi/play')['default']
     IconMdiRecord: typeof import('~icons/mdi/record')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
+    IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default']
     IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index cdc541b4..c5591eeb 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -10,7 +10,7 @@ const dockerRun = ref(
 );
 
 const conversionResult = computed(() =>
-  withDefaultOnError(() => composerize(dockerRun.value), { yaml: '', messages: [] }),
+  withDefaultOnError(() => composerize(dockerRun.value.trim()), { yaml: '', messages: [] }),
 );
 const dockerCompose = computed(() => conversionResult.value.yaml);
 const notImplemented = computed(() =>
@@ -30,15 +30,16 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
 
 <template>
   <div>
-    <n-form-item label="Your docker run command:" :show-feedback="false">
-      <n-input
-        v-model:value="dockerRun"
-        style="font-family: monospace"
-        type="textarea"
-        placeholder="Your docker run command to convert..."
-        rows="3"
-      />
-    </n-form-item>
+    <c-input-text
+      v-model:value="dockerRun"
+      label="Your docker run command:"
+      style="font-family: monospace"
+      multiline
+      raw-text
+      monospace
+      placeholder="Your docker run command to convert..."
+      rows="3"
+    />
 
     <n-divider />
 
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index bfd09727..a11a307f 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -19,18 +19,13 @@ const decryptOutput = computed(() =>
 <template>
   <c-card title="Encrypt">
     <div flex gap-3>
-      <n-form-item label="Your text:" :show-feedback="false" flex-1>
-        <n-input
-          v-model:value="cypherInput"
-          type="textarea"
-          placeholder="The string to cypher"
-          :autosize="{ minRows: 4 }"
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
+      <c-input-text
+        v-model:value="cypherInput"
+        label="Your text:"
+        placeholder="The string to cypher"
+        rows="4"
+        multiline raw-text monospace autosize flex-1
+      />
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
 
@@ -42,34 +37,23 @@ const decryptOutput = computed(() =>
         </n-form-item>
       </div>
     </div>
-    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
-      <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>
+    <c-input-text
+      label="Your text encrypted:"
+      :value="cypherOutput"
+      rows="3"
+      placeholder="Your string hash"
+      multiline monospace readonly autosize mt-5
+    />
   </c-card>
   <c-card title="Decrypt">
     <div flex gap-3>
-      <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1>
-        <n-input
-          v-model:value="decryptInput"
-          type="textarea"
-          placeholder="The string to cypher"
-          :autosize="{ minRows: 4 }"
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
+      <c-input-text
+        v-model:value="decryptInput"
+        label="Your encrypted text:"
+        placeholder="The string to cypher"
+        rows="4"
+        multiline raw-text monospace autosize flex-1
+      />
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
 
@@ -81,18 +65,12 @@ const decryptOutput = computed(() =>
         </n-form-item>
       </div>
     </div>
-    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
-      <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>
+    <c-input-text
+      label="Your decrypted text:"
+      :value="decryptOutput"
+      placeholder="Your string hash"
+      rows="3"
+      multiline monospace readonly autosize mt-5
+    />
   </c-card>
 </template>
diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index 415c3528..d3674071 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -37,7 +37,7 @@ const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[al
 <template>
   <div>
     <c-card>
-      <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
+      <c-input-text v-model:value="clearText" multiline raw-text placeholder="Your string to hash..." rows="3" autosize autofocus label="Your text to hash:" />
 
       <n-divider />
 
diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index dcece9f2..463e27bc 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -46,13 +46,10 @@ const { copy } = useCopy({ source: hmac });
 </script>
 
 <template>
-  <div>
-    <n-form-item label="Plain text to compute the hash">
-      <n-input v-model:value="plainText" type="textarea" placeholder="Enter the text to compute the hash..." />
-    </n-form-item>
-    <n-form-item label="Secret key">
-      <n-input v-model:value="secret" placeholder="Enter the secret key..." />
-    </n-form-item>
+  <div flex flex-col gap-4>
+    <c-input-text v-model:value="plainText" multiline raw-text placeholder="Plain text to compute the hash..." rows="3" autosize autofocus label="Plain text to compute the hash" />
+    <c-input-text v-model:value="secret" raw-text placeholder="Enter the secret key..." label="Secret key" clearable />
+
     <div flex gap-2>
       <n-form-item label="Hashing function" flex-1>
         <n-select
@@ -86,9 +83,7 @@ const { copy } = useCopy({ source: hmac });
         />
       </n-form-item>
     </div>
-    <n-form-item label="HMAC of your text">
-      <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
-    </n-form-item>
+    <input-copyable v-model:value="hmac" type="textarea" placeholder="The result of the HMAC..." label="HMAC of your text" />
     <div flex justify-center>
       <c-button @click="copy()">
         Copy HMAC
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
index dc44a0d4..a0f61022 100644
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -7,7 +7,7 @@ const escapeInput = ref('<title>IT Tool</title>');
 const escapeOutput = computed(() => escape(escapeInput.value));
 const { copy: copyEscaped } = useCopy({ source: escapeOutput });
 
-const unescapeInput = ref('&lt;title&gt;IT Tool&lt;/title');
+const unescapeInput = ref('&lt;title&gt;IT Tool&lt;/title&gt;');
 const unescapeOutput = computed(() => unescape(unescapeInput.value));
 const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
 </script>
@@ -15,21 +15,24 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
 <template>
   <c-card title="Escape html entities">
     <n-form-item label="Your string :">
-      <n-input
+      <c-input-text
         v-model:value="escapeInput"
-        type="textarea"
+        multiline
         placeholder="The string to escape"
-        :autosize="{ minRows: 2 }"
+        rows="3"
+        autosize
+        raw-text
       />
     </n-form-item>
 
     <n-form-item label="Your string escaped :">
-      <n-input
-        type="textarea"
+      <c-input-text
+        multiline
         readonly
         placeholder="Your string escaped"
         :value="escapeOutput"
-        :autosize="{ minRows: 2 }"
+        rows="3"
+        autosize
       />
     </n-form-item>
 
@@ -41,21 +44,24 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
   </c-card>
   <c-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
-      <n-input
+      <c-input-text
         v-model:value="unescapeInput"
-        type="textarea"
+        multiline
         placeholder="The string to unescape"
-        :autosize="{ minRows: 2 }"
+        rows="3"
+        autosize
+        raw-text
       />
     </n-form-item>
 
     <n-form-item label="Your string unescaped :">
-      <n-input
+      <c-input-text
         :value="unescapeOutput"
-        type="textarea"
+        multiline
         readonly
         placeholder="Your string unescaped"
-        :autosize="{ minRows: 2 }"
+        rows="3"
+        autosize
       />
     </n-form-item>
 
diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue
index 0fb11251..84ab3137 100644
--- a/src/tools/http-status-codes/http-status-codes.vue
+++ b/src/tools/http-status-codes/http-status-codes.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SearchRound } from '@vicons/material';
 import { codesByCategories } from './http-status-codes.constants';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 
@@ -24,33 +23,24 @@ const codesByCategoryFiltered = computed(() => {
 
 <template>
   <div>
-    <n-form-item :show-label="false">
-      <n-input
-        v-model:value="search"
-        placeholder="Search http status..."
-        size="large"
-        autofocus
-        mb-10
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-      >
-        <template #prefix>
-          <n-icon :component="SearchRound" />
-        </template>
-      </n-input>
-    </n-form-item>
+    <c-input-text
+      v-model:value="search"
+      placeholder="Search http status..."
+      autofocus raw-text mb-10
+    />
 
     <div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8>
-      <n-h2> {{ category }} </n-h2>
+      <div mb-2 text-xl>
+        {{ category }}
+      </div>
 
       <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
-        <n-text strong block text-lg>
+        <div text-lg font-bold>
           {{ code }} {{ name }}
-        </n-text>
-        <n-text block depth="3">
+        </div>
+        <div op-70>
           {{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}
-        </n-text>
+        </div>
       </c-card>
     </div>
   </div>
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index a4ff3fd9..2445baa5 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import InputCopyable from '../../components/InputCopyable.vue';
 import { convertBase } from './integer-base-converter.model';
-import { useStyleStore } from '@/stores/style.store';
 import { getErrorMessageIfThrows } from '@/utils/error';
 
-const styleStore = useStyleStore();
-
 const inputProps = {
   'labelPosition': 'left',
   'labelWidth': '170px',
@@ -37,31 +34,11 @@ const error = computed(() =>
 <template>
   <div>
     <c-card>
-      <div v-if="styleStore.isSmallScreen">
-        <n-input-group>
-          <n-input-group-label style="flex: 0 0 120px">
-            Input number:
-          </n-input-group-label>
-          <n-input v-model:value="input" w-full :status="error ? 'error' : undefined" />
-        </n-input-group>
-        <n-input-group>
-          <n-input-group-label style="flex: 0 0 120px">
-            Input base:
-          </n-input-group-label>
-          <n-input-number v-model:value="inputBase" max="64" min="2" w-full />
-        </n-input-group>
-      </div>
+      <c-input-text v-model:value="input" label="Input number" placeholder="Put your number here (ex: 42)" label-position="left" label-width="110px" mb-2 label-align="right" />
 
-      <n-input-group v-else>
-        <n-input-group-label style="flex: 0 0 120px">
-          Input number:
-        </n-input-group-label>
-        <n-input v-model:value="input" :status="error ? 'error' : undefined" />
-        <n-input-group-label style="flex: 0 0 120px">
-          Input base:
-        </n-input-group-label>
-        <n-input-number v-model:value="inputBase" max="64" min="2" />
-      </n-input-group>
+      <n-form-item label="Input base" label-placement="left" label-width="110" :show-feedback="false">
+        <n-input-number v-model:value="inputBase" max="64" min="2" placeholder="Put your input base here (ex: 10)" w-full />
+      </n-form-item>
 
       <n-alert v-if="error" style="margin-top: 25px" type="error">
         {{ error }}
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index ee6e0f35..d5b1168a 100644
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -30,9 +30,7 @@ const validation = useValidation({
 
 <template>
   <c-card>
-    <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
-      <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
-    </n-form-item>
+    <c-input-text v-model:value="rawJwt" label="JWT to decode" :validation="validation" placeholder="Put your token here..." rows="5" multiline raw-text autofocus mb-3 />
 
     <n-table v-if="validation.isValid">
       <tbody>
diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
index 552c597e..713874a1 100644
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -39,7 +39,7 @@ const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />
+    <c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" />
 
     <div mt-5 flex justify-center>
       <c-button autofocus @click="copy">
diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue
index 25e51295..3144a666 100644
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -10,16 +10,12 @@ const result = computed(() => withDefaultOnError(() => evaluate(expression.value
 
 <template>
   <div>
-    <n-input
+    <c-input-text
       v-model:value="expression"
       rows="1"
-      type="textarea"
+      multiline
       placeholder="Your math expression (ex: 2*sqrt(6) )..."
-      size="large"
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
+      raw-text
     />
 
     <c-card v-if="result !== ''" title="Result " mt-5>
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index 52de7d92..f0c6ac27 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -27,15 +27,18 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
   <c-card>
     <n-grid x-gap="12" y-gap="12" cols="1 600:3">
       <n-gi span="2">
+        <c-input-text
+          v-model:value="text"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          label="Text:"
+          multiline
+          rows="1"
+          placeholder="Your link or text..."
+          mb-6
+        />
         <n-form label-width="130" label-placement="left">
-          <n-form-item label="Text:">
-            <n-input
-              v-model:value="text"
-              type="textarea"
-              :autosize="{ minRows: 1 }"
-              placeholder="Your link or text..."
-            />
-          </n-form-item>
           <n-form-item label="Foreground color:">
             <n-color-picker v-model:value="foreground" :modes="['hex']" />
           </n-form-item>
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue
index 760302a9..9156b79f 100644
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -10,18 +10,9 @@ const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
 
 <template>
   <div>
-    <n-form-item label="Your string to slugify">
-      <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)" />
-    </n-form-item>
+    <c-input-text v-model:value="input" multiline placeholder="Put your string here (ex: My file path)" label="Your string to slugify" autofocus raw-text mb-5 />
 
-    <n-form-item label="Your slug">
-      <n-input
-        :value="slug"
-        type="textarea"
-        readonly
-        placeholder="You slug will be generated here (ex: my-file-path)"
-      />
-    </n-form-item>
+    <c-input-text :value="slug" multiline readonly placeholder="You slug will be generated here (ex: my-file-path)" label="Your slug" mb-5 />
 
     <div flex justify-center>
       <c-button :disabled="slug.length === 0" @click="copy">
diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue
index 3f63c72a..6aa29d4d 100644
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -7,7 +7,7 @@ const text = ref('');
 
 <template>
   <c-card>
-    <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
+    <c-input-text v-model:value="text" multiline placeholder="Your text..." rows="5" />
 
     <div mt-5 flex>
       <n-statistic label="Character count" :value="text.length" flex-1 />
diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue
index 9c1c8182..b69dec77 100644
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -55,17 +55,14 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
         <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
       </n-form-item>
 
-      <n-input
+      <c-input-text
         v-model:value="token"
-        style="text-align: center"
-        type="textarea"
+        multiline
         placeholder="The token..."
-        :autosize="{ minRows: 1 }"
         readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
+        rows="3"
+        autosize
+        class="token-display"
       />
 
       <div mt-5 flex justify-center gap-3>
@@ -79,3 +76,11 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
     </c-card>
   </div>
 </template>
+
+<style scoped lang="less">
+::v-deep(.token-display) {
+  textarea {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index 8b681baa..324693b0 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -37,28 +37,27 @@ const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded str
 
 <template>
   <c-card title="Encode">
-    <n-form-item
+    <c-input-text
+      v-model:value="encodeInput"
       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: 2 }"
-      />
-    </n-form-item>
+      :validation="encodedValidation"
+      multiline
+      autosize
+      placeholder="The string to encode"
+      rows="2"
+      mb-3
+    />
 
-    <n-form-item label="Your string encoded :">
-      <n-input
-        :value="encodeOutput"
-        type="textarea"
-        readonly
-        placeholder="Your string encoded"
-        :autosize="{ minRows: 2 }"
-      />
-    </n-form-item>
+    <c-input-text
+      label="Your string encoded :"
+      :value="encodeOutput"
+      multiline
+      autosize
+      readonly
+      placeholder="Your string encoded"
+      rows="2"
+      mb-3
+    />
 
     <div flex justify-center>
       <c-button @click="copyEncoded">
@@ -67,28 +66,27 @@ const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded str
     </div>
   </c-card>
   <c-card title="Decode">
-    <n-form-item
+    <c-input-text
+      v-model:value="decodeInput"
       label="Your encoded string :"
-      :feedback="decodeValidation.message"
-      :validation-status="decodeValidation.status"
-    >
-      <n-input
-        v-model:value="decodeInput"
-        type="textarea"
-        placeholder="The string to decode"
-        :autosize="{ minRows: 2 }"
-      />
-    </n-form-item>
+      :validation="decodeValidation"
+      multiline
+      autosize
+      placeholder="The string to decode"
+      rows="2"
+      mb-3
+    />
 
-    <n-form-item label="Your string decoded :">
-      <n-input
-        :value="decodeOutput"
-        type="textarea"
-        readonly
-        placeholder="Your string decoded"
-        :autosize="{ minRows: 2 }"
-      />
-    </n-form-item>
+    <c-input-text
+      label="Your string decoded :"
+      :value="decodeOutput"
+      multiline
+      autosize
+      readonly
+      placeholder="Your string decoded"
+      rows="2"
+      mb-3
+    />
 
     <div flex justify-center>
       <c-button @click="copyDecoded">
diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue
index a80c6885..5a4ec270 100644
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -103,15 +103,18 @@ const sections: UserAgentResultSection[] = [
 
 <template>
   <div>
-    <n-form-item label="User agent string">
-      <n-input
-        v-model:value="ua"
-        type="textarea"
-        placeholder="Put your user-agent here..."
-        clearable
-        :autosize="{ minRows: 2 }"
-      />
-    </n-form-item>
+    <c-input-text
+      v-model:value="ua"
+      label="User agent string"
+      multiline
+      placeholder="Put your user-agent here..."
+      clearable
+      raw-text
+      rows="2"
+      autosize
+      monospace
+      mb-3
+    />
 
     <UserAgentResultCards :user-agent-info="userAgentInfo" :sections="sections" />
   </div>
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index f1265e15..a393781b 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -19,18 +19,18 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
       <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
     </div>
 
-    <n-input
+    <c-input-text
       style="text-align: center; font-family: monospace"
       :value="uuids"
-      type="textarea"
+      multiline
       placeholder="Your uuids"
-      :autosize="{ minRows: 1 }"
+      autosize
+      rows="1"
       readonly
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
+      raw-text
+      monospace
       my-3
+      class="uuid-display"
     />
 
     <div flex justify-center gap-3>
@@ -43,3 +43,11 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
     </div>
   </div>
 </template>
+
+<style scoped lang="less">
+::v-deep(.uuid-display) {
+  textarea {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue
index b0277870..0181e7c3 100644
--- a/src/ui/c-input-text/c-input-text.demo.vue
+++ b/src/ui/c-input-text/c-input-text.demo.vue
@@ -66,11 +66,14 @@ const validation = useValidation({
     mb-2
   />
 
-  <c-input-text v-model:value="valueLong" multiline autosize mb-2 rows="5" />
-
   <c-input-text
     value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?"
     multiline
     clearable
   />
+
+  <h2>Autosize</h2>
+
+  <c-input-text v-model:value="value" label="Autosize" rows="1" multiline autosize mb-2 />
+  <c-input-text v-model:value="valueLong" label="Autosize monospace" rows="1" multiline autosize monospace mb-2 />
 </template>
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index 0f96b2a1..b5f423d2 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -82,12 +82,12 @@ const inputRef = ref<HTMLInputElement>();
 const inputWrapperRef = ref<HTMLElement>();
 
 watch(
-  value,
-  () => {
+  [value, autosize, multiline, inputWrapperRef, textareaRef],
+  () => nextTick(() => {
     if (props.multiline && autosize.value) {
       resizeTextarea();
     }
-  },
+  }),
   { immediate: true },
 );
 
@@ -96,9 +96,9 @@ function resizeTextarea() {
     return;
   }
 
-  const { scrollHeight } = textareaRef.value;
+  const scrollHeight = textareaRef.value.scrollHeight + 2;
 
-  inputWrapperRef.value.style.height = `${scrollHeight + 2}px`;
+  inputWrapperRef.value.style.height = `${scrollHeight}px`;
 }
 
 const htmlInputType = computed(() => {