refactor(ui): replaced some n-input with c-input-text

src/tools/base64-string-converter/base64-string-converter.vue

@@ -20,7 +20,7 @@
   </c-card>
 
   <c-card title="Base64 to string">
-    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
+    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs as any">
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>
 

src/tools/basic-auth-generator/basic-auth-generator.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <n-form-item label="Username">
-      <n-input v-model:value="username" placeholder="Your username..." clearable />
-    </n-form-item>
-    <n-form-item label="Password">
-      <n-input
-        v-model:value="password"
-        placeholder="Your password..."
-        type="password"
-        show-password-on="click"
-        clearable
-      />
-    </n-form-item>
+    <c-input-text v-model:value="username" label="Username" placeholder="Your username..." clearable raw-text mb-5 />
+    <c-input-text
+      v-model:value="password"
+      label="Password"
+      placeholder="Your password..."
+      clearable
+      raw-text
+      mb-2
+      type="password"
+    />
 
     <c-card>
       <n-statistic label="Authorization header:" class="header">

src/tools/bcrypt/bcrypt.vue

@@ -1,21 +1,20 @@
 <template>
   <c-card title="Hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="input"
-          placeholder="Your string to bcrypt..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
-      <n-form-item label="Salt count: " label-placement="left">
-        <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
-      </n-form-item>
-      <n-input :value="hashed" readonly style="text-align: center" />
-    </n-form>
+    <c-input-text
+      v-model:value="input"
+      placeholder="Your string to bcrypt..."
+      raw-text
+      label="Your string: "
+      label-position="left"
+      label-width="120px"
+      mb-2
+    />
+    <n-form-item label="Salt count: " label-placement="left" label-width="120">
+      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+    </n-form-item>
+
+    <c-input-text :value="hashed" readonly text-center />
+
     <n-space justify="center" mt-5>
       <c-button @click="copy"> Copy hash </c-button>
     </n-space>
@@ -24,24 +23,10 @@
   <c-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="compareString"
-          placeholder="Your string to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
+        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
       </n-form-item>
       <n-form-item label="Your hash: " label-placement="left">
-        <n-input
-          v-model:value="compareHash"
-          placeholder="Your hahs to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
+        <c-input-text v-model:value="compareHash" placeholder="Your hahs to compare..." raw-text />
       </n-form-item>
       <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
         <div class="compare-result" :class="{ positive: compareMatch }">

src/tools/benchmark-builder/benchmark-builder.vue

@@ -1,11 +1,15 @@
 <template>
   <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5>
       <div v-for="(suite, index) of suites" :key="index">
-        <c-card style="width: 292px; margin: 0 8px 5px">
-          <n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
-            <n-input v-model:value="suite.title" placeholder="Suite name..." />
-          </n-form-item>
+        <c-card style="width: 294px">
+          <c-input-text
+            v-model:value="suite.title"
+            label-position="left"
+            label="Suite name"
+            placeholder="Suite name..."
+            clearable
+          />
 
           <n-divider></n-divider>
           <n-form-item label="Suite values" :show-feedback="false">
@@ -33,9 +37,7 @@
   <div style="flex: 0 0 100%">
     <div style="max-width: 600px; margin: 0 auto">
       <n-space justify="center">
-        <n-form-item label="Unit:" label-placement="left">
-          <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
-        </n-form-item>
+        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
 
         <c-button
           @click="

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

@@ -16,7 +16,8 @@
           :validation-status="entropyValidation.status"
         >
           <n-input-group>
-            <n-input v-model:value="entropy" placeholder="Your string..." />
+            <c-input-text v-model:value="entropy" placeholder="Your string..." />
+
             <c-button @click="refreshEntropy">
               <n-icon size="22">
                 <Refresh />
@@ -37,15 +38,7 @@
       :validation-status="mnemonicValidation.status"
     >
       <n-input-group>
-        <n-input
-          v-model:value="passphrase"
-          style="text-align: center; flex: 1"
-          placeholder="Your mnemonic..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
+        <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
 
         <c-button @click="copyPassphrase">
           <n-icon size="22" :component="Copy" />

src/tools/case-converter/case-converter.vue

@@ -1,9 +1,15 @@
 <template>
   <c-card>
     <n-form label-width="120" label-placement="left" :show-feedback="false">
-      <n-form-item label="Your string:">
-        <n-input v-model:value="input" />
-      </n-form-item>
+      <c-input-text
+        v-model:value="input"
+        label="Your string"
+        label-position="left"
+        label-width="120px"
+        label-align="right"
+        placeholder="Your string..."
+        raw-text
+      />
 
       <n-divider />
 

src/tools/chronometer/chronometer.vue

@@ -4,8 +4,8 @@
       <div class="duration">{{ formatMs(counter) }}</div>
     </c-card>
     <n-space justify="center" mt-5>
-      <c-button v-if="!isRunning" secondary type="primary" @click="resume">Start</c-button>
-      <c-button v-else secondary type="warning" @click="pause">Stop</c-button>
+      <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button>
+      <c-button v-else type="warning" @click="pause">Stop</c-button>
 
       <c-button @click="counter = 0">Reset</c-button>
     </n-space>

src/tools/color-converter/color-converter.vue

@@ -9,25 +9,25 @@
         />
       </n-form-item>
       <n-form-item label="color name:">
-        <input-copyable v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
+        <input-copyable v-model:value="name" @update:value="(v: string) => onInputUpdated(v, 'name')" />
       </n-form-item>
       <n-form-item label="hex:">
-        <input-copyable v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
+        <input-copyable v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')" />
       </n-form-item>
       <n-form-item label="rgb:">
-        <input-copyable v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
+        <input-copyable v-model:value="rgb" @update:value="(v: string) => onInputUpdated(v, 'rgb')" />
       </n-form-item>
       <n-form-item label="hsl:">
-        <input-copyable v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
+        <input-copyable v-model:value="hsl" @update:value="(v: string) => onInputUpdated(v, 'hsl')" />
       </n-form-item>
       <n-form-item label="hwb:">
-        <input-copyable v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
+        <input-copyable v-model:value="hwb" @update:value="(v: string) => onInputUpdated(v, 'hwb')" />
       </n-form-item>
       <n-form-item label="lch:">
-        <input-copyable v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
+        <input-copyable v-model:value="lch" @update:value="(v: string) => onInputUpdated(v, 'lch')" />
       </n-form-item>
       <n-form-item label="cmyk:">
-        <input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
+        <input-copyable v-model:value="cmyk" @update:value="(v: string) => onInputUpdated(v, 'cmyk')" />
       </n-form-item>
     </n-form>
   </c-card>
@@ -54,15 +54,19 @@ const cmyk = ref('');
 const lch = ref('');
 
 function onInputUpdated(value: string, omit: string) {
-  const color = colord(value);
+  try {
+    const color = colord(value);
 
-  if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
-  if (omit !== 'hex') hex.value = color.toHex();
-  if (omit !== 'rgb') rgb.value = color.toRgbString();
-  if (omit !== 'hsl') hsl.value = color.toHslString();
-  if (omit !== 'hwb') hwb.value = color.toHwbString();
-  if (omit !== 'cmyk') cmyk.value = color.toCmykString();
-  if (omit !== 'lch') lch.value = color.toLchString();
+    if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
+    if (omit !== 'hex') hex.value = color.toHex();
+    if (omit !== 'rgb') rgb.value = color.toRgbString();
+    if (omit !== 'hsl') hsl.value = color.toHslString();
+    if (omit !== 'hwb') hwb.value = color.toHwbString();
+    if (omit !== 'cmyk') cmyk.value = color.toCmykString();
+    if (omit !== 'lch') lch.value = color.toLchString();
+  } catch {
+    //
+  }
 }
 
 onInputUpdated(hex.value, 'hex');

src/tools/crontab-generator/crontab-generator.vue

@@ -1,13 +1,15 @@
 <template>
   <c-card>
-    <n-form-item
-      class="cron"
-      :show-label="false"
-      :feedback="cronValidation.message"
-      :validation-status="cronValidation.status"
-    >
-      <n-input v-model:value="cron" size="large" placeholder="* * * * *" />
-    </n-form-item>
+    <div mx-auto max-w-sm>
+      <c-input-text
+        v-model:value="cron"
+        size="large"
+        placeholder="* * * * *"
+        :validation-rules="cronValidationRules"
+        mb-3
+      />
+    </div>
+
     <div class="cron-string">
       {{ cronString }}
     </div>
@@ -86,7 +88,6 @@
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { computed, reactive, ref } from 'vue';
-import { useValidation } from '@/composable/validation';
 import { useStyleStore } from '@/stores/style.store';
 
 function isCronValid(v: string) {
@@ -185,30 +186,20 @@ const cronString = computed(() => {
   return ' ';
 });
 
-const cronValidation = useValidation({
-  source: cron,
-  rules: [
-    {
-      validator: (value) => isCronValid(value),
-      message: 'This cron is invalid',
-    },
-  ],
-});
+const cronValidationRules = [
+  {
+    validator: (value: string) => isCronValid(value),
+    message: 'This cron is invalid',
+  },
+];
 </script>
 
 <style lang="less" scoped>
-.cron {
+::v-deep(input) {
+  font-size: 30px;
+  font-family: monospace;
+  padding: 5px;
   text-align: center;
-
-  margin: auto;
-  max-width: 400px;
-  display: block;
-
-  .n-input {
-    font-size: 30px;
-    font-family: monospace;
-    padding: 5px;
-  }
 }
 
 .cron-string {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-form-item :show-label="false" v-bind="validation.attrs">
+    <n-form-item :show-label="false" v-bind="validation.attrs as any">
       <n-input-group>
         <n-input
           v-model:value="inputDate"
@@ -8,7 +8,7 @@
           :on-input="onDateInputChanged"
           placeholder="Put you date string here..."
           clearable
-          :input-props="{ 'data-test-id': 'date-time-converter-input' }"
+          :input-props="{ 'data-test-id': 'date-time-converter-input' } as any"
         />
 
         <n-select
@@ -20,16 +20,19 @@
       </n-input-group>
     </n-form-item>
     <n-divider style="margin-top: 0" />
-    <div v-for="{ name, fromDate } in formats" :key="name" mt-1>
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
-        <input-copyable
-          :value="formatDateUsingFormatter(fromDate, normalizedDate)"
-          placeholder="Invalid date..."
-          :input-props="{ 'data-test-id': name }"
-        />
-      </n-input-group>
-    </div>
+    <input-copyable
+      v-for="{ name, fromDate } in formats"
+      :key="name"
+      :label="name"
+      label-width="150px"
+      label-position="left"
+      label-align="right"
+      :value="formatDateUsingFormatter(fromDate, normalizedDate)"
+      placeholder="Invalid date..."
+      :test-id="name"
+      readonly
+      mt-2
+    />
   </div>
 </template>
 

src/tools/encryption/encryption.vue

@@ -7,12 +7,15 @@
           type="textarea"
           placeholder="The string to cypher"
           :autosize="{ minRows: 4 }"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
         />
       </n-form-item>
       <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="cypherSecret" />
-        </n-form-item>
+        <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
+
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
           <n-select
             v-model:value="cypherAlgo"
@@ -43,12 +46,15 @@
           type="textarea"
           placeholder="The string to cypher"
           :autosize="{ minRows: 4 }"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
         />
       </n-form-item>
       <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="decryptSecret" />
-        </n-form-item>
+        <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
+
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
           <n-select
             v-model:value="decryptAlgo"

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

@@ -22,59 +22,54 @@
       <n-alert v-if="error" style="margin-top: 25px" type="error">{{ error }}</n-alert>
       <n-divider />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
-          readonly
-          placeholder="Binary version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Binary (2)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
+        placeholder="Binary version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
-          readonly
-          placeholder="Octal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Octal (8)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
+        placeholder="Octal version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
-          readonly
-          placeholder="Decimal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Decimal (10)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
+        placeholder="Decimal version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
-          readonly
-          placeholder="Decimal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Hexadecimal (16)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
+        placeholder="Hexadecimal version will be here..."
+      />
+
+      <input-copyable
+        label="Base64 (64)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
+        placeholder="Base64 version will be here..."
+      />
+
+      <div flex items-baseline>
+        <n-input-group style="width: 160px; margin-right: 10px">
+          <n-input-group-label> Custom: </n-input-group-label>
+          <n-input-number v-model:value="outputBase" max="64" min="2" />
+        </n-input-group>
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
-          readonly
-          placeholder="Base64 version will be here..."
-        />
-      </n-input-group>
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
-        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
         <input-copyable
+          flex-1
+          v-bind="inputProps"
           :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
-          readonly
           :placeholder="`Base ${outputBase} will be here...`"
         />
-      </n-input-group>
+      </div>
     </c-card>
   </div>
 </template>
@@ -88,6 +83,14 @@ import InputCopyable from '../../components/InputCopyable.vue';
 
 const styleStore = useStyleStore();
 
+const inputProps = {
+  labelPosition: 'left',
+  labelWidth: '170px',
+  labelAlign: 'right',
+  readonly: true,
+  'mb-2': '',
+} as const;
+
 const input = ref('42');
 const inputBase = ref(10);
 const outputBase = ref(42);

src/tools/ipv4-address-converter/ipv4-address-converter.vue

@@ -1,23 +1,20 @@
 <template>
   <div>
-    <n-form-item label="An ipv4 address:" v-bind="validationAttrs">
-      <n-input v-model:value="rawIpAddress" placeholder="An ipv4 address..." />
-    </n-form-item>
+    <c-input-text v-model:value="rawIpAddress" label="The ipv4 address:" placeholder="The ipv4 address..." readonly />
 
-    <n-divider style="margin-top: 0" mt-0 />
+    <n-divider />
 
-    <n-form-item
+    <input-copyable
       v-for="{ label, value } of convertedSections"
       :key="label"
       :label="label"
-      label-placement="left"
-      label-width="100"
-    >
-      <input-copyable
-        :value="validationAttrs.validationStatus === 'error' ? '' : value"
-        placeholder="Set a correct ipv4 address"
-      />
-    </n-form-item>
+      label-position="left"
+      label-width="100px"
+      label-align="right"
+      mb-2
+      :value="validationAttrs.validationStatus === 'error' ? '' : value"
+      placeholder="Set a correct ipv4 address"
+    />
   </div>
 </template>
 
@@ -33,7 +30,7 @@ const convertedSections = computed(() => {
 
   return [
     {
-      label: 'Decimal : ',
+      label: 'Decimal: ',
       value: String(ipInDecimal),
     },
     {

src/tools/ipv4-range-expander/ipv4-range-expander.vue

@@ -3,10 +3,10 @@
     <n-space item-style="flex:1 1 0">
       <div>
         <n-space item-style="flex:1 1 0">
-          <n-form-item label="Start address" v-bind="startIpValidation.attrs">
+          <n-form-item label="Start address" v-bind="startIpValidation.attrs as any">
             <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
           </n-form-item>
-          <n-form-item label="End address" v-bind="endIpValidation.attrs">
+          <n-form-item label="End address" v-bind="endIpValidation.attrs as any">
             <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
           </n-form-item>
         </n-space>

src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <n-form-item label="An IPv4 address with or without mask" v-bind="validationAttrs">
-      <n-input v-model:value="ip" />
-    </n-form-item>
+    <c-input-text
+      v-model:value="ip"
+      label="An IPv4 address with or without mask"
+      placeholder="The ipv4 address..."
+      :validation-rules="ipValidationRules"
+      mb-4
+    />
 
     <div v-if="networkInfo">
       <n-table>
@@ -37,7 +41,6 @@
 import { computed } from 'vue';
 import { Netmask } from 'netmask';
 import { withDefaultOnError } from '@/utils/defaults';
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { useStorage } from '@vueuse/core';
 import { ArrowLeft, ArrowRight } from '@vicons/tabler';
@@ -50,15 +53,12 @@ const getNetworkInfo = (address: string) => new Netmask(address.trim());
 
 const networkInfo = computed(() => withDefaultOnError(() => getNetworkInfo(ip.value), undefined));
 
-const { attrs: validationAttrs } = useValidation({
-  source: ip,
-  rules: [
-    {
-      message: 'We cannot parse this address, check the format',
-      validator: (value) => isNotThrowing(() => getNetworkInfo(value.trim())),
-    },
-  ],
-});
+const ipValidationRules = [
+  {
+    message: 'We cannot parse this address, check the format',
+    validator: (value: string) => isNotThrowing(() => getNetworkInfo(value.trim())),
+  },
+];
 
 const sections: {
   label: string;

src/tools/ipv6-ula-generator/ipv6-ula-generator.vue

@@ -1,30 +1,32 @@
 <template>
   <div>
-    <n-space vertical :size="50">
-      <n-alert title="Info" type="info">
-        This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
-        and the lower 40 bits to generate your random ULA.
-      </n-alert>
+    <n-alert title="Info" type="info">
+      This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
+      and the lower 40 bits to generate your random ULA.
+    </n-alert>
 
-      <n-form-item label="MAC address:" v-bind="validationAttrs">
-        <n-input
-          v-model:value="macAddress"
-          size="large"
-          placeholder="Type a MAC address"
-          clearable
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
-    </n-space>
+    <c-input-text
+      v-model:value="macAddress"
+      placeholder="Type a MAC address"
+      clearable
+      label="MAC address:"
+      raw-text
+      my-8
+      :validation="addressValidation"
+    />
 
-    <div v-if="validationAttrs.validationStatus !== 'error'">
-      <n-input-group v-for="{ label, value } in calculatedSections" :key="label" style="margin: 5px 0">
-        <n-input-group-label style="flex: 0 0 160px"> {{ label }} </n-input-group-label>
-        <input-copyable :value="value" readonly />
-      </n-input-group>
+    <div v-if="addressValidation.isValid">
+      <input-copyable
+        v-for="{ label, value } in calculatedSections"
+        :key="label"
+        :value="value"
+        :label="label"
+        label-width="160px"
+        label-align="right"
+        label-position="left"
+        readonly
+        mb-2
+      />
     </div>
   </div>
 </template>
@@ -59,7 +61,7 @@ const calculatedSections = computed(() => {
   ];
 });
 
-const { attrs: validationAttrs } = macAddressValidation(macAddress);
+const addressValidation = macAddressValidation(macAddress);
 </script>
 
 <style lang="less" scoped></style>

src/tools/json-diff/json-diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs">
+  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs as any">
     <n-input
       v-model:value="rawLeftJson"
       placeholder="Paste your first json here..."
@@ -9,10 +9,10 @@
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
-      :input-props="{ 'data-test-id': 'leftJson' }"
+      :input-props="{ 'data-test-id': 'leftJson' }  as any"
     />
   </n-form-item>
-  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs">
+  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs as any">
     <n-input
       v-model:value="rawRightJson"
       placeholder="Paste your json to compare here..."
@@ -22,7 +22,7 @@
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
-      :input-props="{ 'data-test-id': 'rightJson' }"
+      :input-props="{ 'data-test-id': 'rightJson' }  as any"
     />
   </n-form-item>
 

src/tools/list-converter/list-converter.e2e.spec.ts

@@ -30,8 +30,8 @@ test.describe('Tool - List converter', () => {
     3
     5`);
     await page.getByTestId('removeDuplicates').check();
-    await page.getByTestId('itemPrefix').locator('input').fill("'");
-    await page.getByTestId('itemSuffix').locator('input').fill("'");
+    await page.getByTestId('itemPrefix').fill("'");
+    await page.getByTestId('itemSuffix').fill("'");
 
     const result = await page.getByTestId('area-content').innerText();
     expect(result.trim()).toEqual("'1', '2', '4', '3', '5'");

src/tools/list-converter/list-converter.vue

@@ -36,37 +36,39 @@
               />
             </n-form-item>
 
-            <n-form-item label="Separator" label-placement="left" label-width="120" :show-feedback="false" mb-2>
-              <n-input v-model:value="conversionConfig.separator" placeholder="," />
-            </n-form-item>
+            <c-input-text
+              v-model:value="conversionConfig.separator"
+              label="Separator"
+              label-position="left"
+              label-width="120px"
+              label-align="right"
+              mb-2
+              placeholder=","
+            />
 
             <n-form-item label="Wrap item" label-placement="left" label-width="120" :show-feedback="false" mb-2>
-              <n-input-group>
-                <n-input
-                  v-model:value="conversionConfig.itemPrefix"
-                  placeholder="Item prefix"
-                  data-test-id="itemPrefix"
-                />
-                <n-input
-                  v-model:value="conversionConfig.itemSuffix"
-                  placeholder="Item suffix"
-                  data-test-id="itemSuffix"
-                />
-              </n-input-group>
+              <c-input-text
+                v-model:value="conversionConfig.itemPrefix"
+                placeholder="Item prefix"
+                test-id="itemPrefix"
+              />
+              <c-input-text
+                v-model:value="conversionConfig.itemSuffix"
+                placeholder="Item suffix"
+                test-id="itemSuffix"
+              />
             </n-form-item>
             <n-form-item label="Wrap list" label-placement="left" label-width="120" :show-feedback="false" mb-2>
-              <n-input-group>
-                <n-input
-                  v-model:value="conversionConfig.listPrefix"
-                  placeholder="List prefix"
-                  data-test-id="listPrefix"
-                />
-                <n-input
-                  v-model:value="conversionConfig.listSuffix"
-                  placeholder="List suffix"
-                  data-test-id="listSuffix"
-                />
-              </n-input-group>
+              <c-input-text
+                v-model:value="conversionConfig.listPrefix"
+                placeholder="List prefix"
+                test-id="listPrefix"
+              />
+              <c-input-text
+                v-model:value="conversionConfig.listSuffix"
+                placeholder="List suffix"
+                test-id="listSuffix"
+              />
             </n-form-item>
           </div>
         </div>

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-form-item label="MAC address:" v-bind="validationAttrs">
+    <n-form-item label="MAC address:" v-bind="validationAttrs as any">
       <n-input
         v-model:value="macAddress"
         size="large"

src/tools/meta-tag-generator/meta-tag-generator.vue

@@ -5,7 +5,7 @@
 
       <n-input-group v-for="{ key, type, label, placeholder, ...element } of elements" :key="key">
         <n-input-group-label style="flex: 0 0 110px">{{ label }}</n-input-group-label>
-        <n-input v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" />
+        <c-input-text v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" clearable />
         <n-dynamic-input
           v-else-if="type === 'input-multiple'"
           v-model:value="metadata[key]"

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -1,19 +1,23 @@
 <template>
   <div style="max-width: 350px">
-    <n-form-item label="Secret" v-bind="secretValidationAttrs">
-      <n-input v-model:value="secret" placeholder="Paste your TOTP secret...">
-        <template #suffix>
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <c-button circle variant="text" @click="refreshSecret">
-                <n-icon :component="Refresh" />
-              </c-button>
-            </template>
-            Generate secret token
-          </n-tooltip>
-        </template>
-      </n-input>
-    </n-form-item>
+    <c-input-text
+      v-model:value="secret"
+      label="Secret"
+      placeholder="Paste your TOTP secret..."
+      mb-5
+      :validation-rules="secretValidationRules"
+    >
+      <template #suffix>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <c-button circle variant="text" size="small" @click="refreshSecret">
+              <icon-mdi-refresh />
+            </c-button>
+          </template>
+          Generate secret token
+        </n-tooltip>
+      </template>
+    </c-input-text>
 
     <div>
       <token-display :tokens="tokens" style="margin-top: 2px" />
@@ -27,49 +31,52 @@
     </n-space>
   </div>
   <div style="max-width: 350px">
-    <n-form-item label="Secret in hexadecimal">
-      <input-copyable :value="base32toHex(secret)" readonly placeholder="Secret in hex will be displayed here" />
-    </n-form-item>
+    <input-copyable
+      label="Secret in hexadecimal"
+      :value="base32toHex(secret)"
+      readonly
+      placeholder="Secret in hex will be displayed here"
+      mb-5
+    />
 
-    <n-form-item label="Epoch">
-      <input-copyable
-        :value="Math.floor(now / 1000).toString()"
-        readonly
-        placeholder="Epoch in sec will be displayed here"
-      />
-    </n-form-item>
-    <n-form-item label="Iteration" :show-feedback="false">
-      <n-input-group>
-        <n-input-group-label style="width: 110px">Count:</n-input-group-label>
-        <input-copyable
-          :value="String(getCounterFromTime({ now, timeStep: 30 }))"
-          readonly
-          placeholder="Iteration count will be displayed here"
-        />
-      </n-input-group>
-    </n-form-item>
+    <input-copyable
+      label="Epoch"
+      :value="Math.floor(now / 1000).toString()"
+      readonly
+      mb-5
+      placeholder="Epoch in sec will be displayed here"
+    />
 
-    <n-form-item label="Iteration" :show-label="false" style="margin-top: 5px">
-      <n-input-group>
-        <n-input-group-label style="width: 110px">Padded hex:</n-input-group-label>
-        <input-copyable
-          :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
-          readonly
-          placeholder="Iteration count in hex will be displayed here"
-        />
-      </n-input-group>
-    </n-form-item>
+    <p>Iteration</p>
+
+    <input-copyable
+      :value="String(getCounterFromTime({ now, timeStep: 30 }))"
+      readonly
+      label="Count:"
+      label-position="left"
+      label-width="90px"
+      label-align="right"
+      placeholder="Iteration count will be displayed here"
+    />
+
+    <input-copyable
+      :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
+      readonly
+      placeholder="Iteration count in hex will be displayed here"
+      label-position="left"
+      label-width="90px"
+      label-align="right"
+      label="Padded hex:"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Refresh } from '@vicons/tabler';
 import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
-import { useValidation } from '@/composable/validation';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 import { generateTOTP, buildKeyUri, generateSecret, base32toHex, getCounterFromTime } from './otp.service';
 import { useQRCode } from '../qr-code-generator/useQRCode';
@@ -106,19 +113,16 @@ const { qrcode } = useQRCode({
   options: { width: 210 },
 });
 
-const { attrs: secretValidationAttrs } = useValidation({
-  source: secret,
-  rules: [
-    {
-      message: 'Secret should be a base32 string',
-      validator: (value) => value.toUpperCase().match(/^[A-Z234567]+$/),
-    },
-    {
-      message: 'Please set a secret',
-      validator: (value) => value !== '',
-    },
-  ],
-});
+const secretValidationRules = [
+  {
+    message: 'Secret should be a base32 string',
+    validator: (value: string) => value.toUpperCase().match(/^[A-Z234567]+$/),
+  },
+  {
+    message: 'Please set a secret',
+    validator: (value: string) => value !== '',
+  },
+];
 </script>
 
 <style lang="less" scoped>

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue

@@ -3,9 +3,14 @@
     <n-form-item label="Default country code:">
       <n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
     </n-form-item>
-    <n-form-item label="Phone number:" v-bind="validation.attrs">
-      <n-input v-model:value="rawPhone" placeholder="Enter a phone number" />
-    </n-form-item>
+
+    <c-input-text
+      v-model:value="rawPhone"
+      placeholder="Enter a phone number"
+      label="Phone number:"
+      :validation="validation"
+      mb-5
+    />
 
     <n-table v-if="parsedDetails">
       <tbody>

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

@@ -2,7 +2,7 @@
   <div>
     <c-card title="Arabic to roman">
       <n-space align="center" justify="space-between">
-        <n-form-item v-bind="validationNumeral">
+        <n-form-item v-bind="validationNumeral as any">
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
         </n-form-item>
         <div class="result">
@@ -15,13 +15,12 @@
     </c-card>
     <c-card title="Roman to arabic" mt-5>
       <n-space align="center" justify="space-between">
-        <n-form-item v-bind="validationRoman">
-          <n-input v-model:value="inputRoman" style="width: 200px" />
-        </n-form-item>
+        <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" />
+
         <div class="result">
           {{ outputNumeral }}
         </div>
-        <c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
+        <c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button>
       </n-space>
     </c-card>
   </div>
@@ -55,7 +54,7 @@ const { attrs: validationNumeral } = useValidation({
 const inputRoman = ref('XLII');
 const outputNumeral = computed(() => romanToArabic(inputRoman.value));
 
-const { attrs: validationRoman } = useValidation({
+const validationRoman = useValidation({
   source: inputRoman,
   rules: [
     {

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="flex: 0 0 100%">
     <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
-      <n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
+      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 

src/tools/svg-placeholder-generator/svg-placeholder-generator.vue

@@ -21,9 +21,15 @@
         <n-form-item label="Font size">
           <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
         </n-form-item>
-        <n-form-item label="Custom text">
-          <n-input v-model:value="customText" :placeholder="`Default is ${width}x${height}`" />
-        </n-form-item>
+
+        <c-input-text
+          v-model:value="customText"
+          label="Custom text"
+          :placeholder="`Default is ${width}x${height}`"
+          label-position="left"
+          label-width="100px"
+          label-align="right"
+        />
       </n-space>
       <n-form-item label="Use exact size" label-placement="left">
         <n-switch v-model:value="useExactSize" />

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <n-form-item label="Your text to convert to NATO phonetic alphabet">
-      <n-input v-model:value="input" placeholder="Put your text here..." clearable />
-    </n-form-item>
+    <c-input-text
+      v-model:value="input"
+      label="Your text to convert to NATO phonetic alphabet"
+      placeholder="Put your text here..."
+      clearable
+      mb-5
+    />
 
     <n-space v-if="natoText" vertical>
       <n-text>Your text in NATO phonetic alphabet</n-text>

src/tools/url-parser/url-parser.vue

@@ -1,51 +1,59 @@
 <template>
   <c-card>
-    <n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
-      <n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
-    </n-form-item>
+    <c-input-text
+      v-model:value="urlToParse"
+      label="Your url to parse:"
+      placeholder="Your url to parse..."
+      raw-text
+      :validation-rules="urlValidationRules"
+    />
 
-    <n-divider style="margin-top: 0" />
+    <n-divider />
 
-    <n-form>
-      <n-input-group v-for="{ title, key } in properties" :key="key">
-        <n-input-group-label style="flex: 0 0 120px"> {{ title }}: </n-input-group-label>
-        <input-copyable :value="(urlParsed?.[key] as string) ?? ''" readonly placeholder=" " />
-      </n-input-group>
+    <input-copyable
+      v-for="{ title, key } in properties"
+      :key="key"
+      :label="title"
+      :value="(urlParsed?.[key] as string) ?? ''"
+      readonly
+      label-position="left"
+      label-width="110px"
+      mb-2
+      placeholder=" "
+    />
 
-      <n-input-group
-        v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
-        :key="k"
-      >
-        <n-input-group-label style="flex: 0 0 120px">
-          <n-icon :component="SubdirectoryArrowRightRound" />
-        </n-input-group-label>
-        <input-copyable :value="k" readonly />
-        <input-copyable :value="v" readonly />
-      </n-input-group>
-    </n-form>
+    <div
+      v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
+      :key="k"
+      mb-2
+      w-full
+      flex
+    >
+      <div style="flex: 1 0 110px">
+        <icon-mdi-arrow-right-bottom />
+      </div>
+
+      <input-copyable :value="k" readonly />
+      <input-copyable :value="v" readonly />
+    </div>
   </c-card>
 </template>
 
 <script setup lang="ts">
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
-import { SubdirectoryArrowRightRound } from '@vicons/material';
 import { computed, ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
 
 const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
 
 const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
-const validation = useValidation({
-  source: urlToParse,
-  rules: [
-    {
-      validator: (value) => isNotThrowing(() => new URL(value)),
-      message: 'Invalid url',
-    },
-  ],
-});
+const urlValidationRules = [
+  {
+    validator: (value: string) => isNotThrowing(() => new URL(value)),
+    message: 'Invalid url',
+  },
+];
 
 const properties: { title: string; key: keyof URL }[] = [
   { title: 'Protocol', key: 'protocol' },