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

2025-04-24 08:46:15 -04:00 · 2023-06-25 15:00:50 +02:00 · 2023-06-25 15:00:50 +02:00 · 05ea545475
commit 05ea545475
parent 5c3bebfe62
20 changed files with 189 additions and 235 deletions
--- 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 />

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

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

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