refactor(ui): replaced some n-input to c-input (#505)

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']

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

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>

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

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

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>
 

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>

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

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>

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

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>

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>

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

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

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>

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

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>

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>

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>

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(() => {