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: refactor(ui): replaced some n-input to c-input (#505)

---
 .../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 +++++----
 src/tools/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 +--
 src/tools/qr-code-generator/qr-code-generator.vue  | 19 +++---
 src/tools/slugify-string/slugify-string.vue        | 13 +---
 src/tools/text-statistics/text-statistics.vue      |  2 +-
 src/tools/token-generator/token-generator.tool.vue | 21 +++---
 src/tools/url-encoder/url-encoder.vue              | 78 +++++++++++-----------
 src/tools/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 +--
 19 files changed, 187 insertions(+), 235 deletions(-)

(limited to 'src')

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 cdc541b..c5591ee 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 bfd0972..a11a307 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 415c352..d367407 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 dcece9f..463e27b 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 dc44a0d..a0f6102 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 0fb1125..84ab313 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 a4ff3fd..2445baa 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 ee6e0f3..d5b1168 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 552c597..713874a 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 25e5129..3144a66 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 52de7d9..f0c6ac2 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 760302a..9156b79 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 3f63c72..6aa29d4 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 9c1c818..b69dec7 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 8b681ba..324693b 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 a80c688..5a4ec27 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 f1265e1..a393781 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 b027787..0181e7c 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 0f96b2a..b5f423d 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(() => {
-- 
cgit v1.2.3