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

src/components/FormatTransformer.vue

@@ -1,26 +1,27 @@
 <template>
-  <n-form-item :label="inputLabel" v-bind="validationAttrs as any">
-    <n-input
-      ref="inputElement"
-      v-model:value="input"
-      :placeholder="inputPlaceholder"
-      type="textarea"
-      rows="20"
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-      :input-props="{ 'data-test-id': 'input' } as any"
-    />
-  </n-form-item>
-  <n-form-item :label="outputLabel">
-    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement" />
-  </n-form-item>
+  <c-input-text
+    ref="inputElement"
+    v-model:value="input"
+    :placeholder="inputPlaceholder"
+    :label="inputLabel"
+    multiline
+    autosize
+    rows="20"
+    raw-text
+    test-id="input"
+    :validation-rules="inputValidationRules"
+  />
+
+  <div>
+    <div mb-5px>{{ outputLabel }}</div>
+    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement?.inputWrapperRef" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useValidation, type UseValidationRule } from '@/composable/validation';
+import type { UseValidationRule } from '@/composable/validation';
 import _ from 'lodash';
+import CInputText from '@/ui/c-input-text/c-input-text.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -46,12 +47,10 @@ const props = withDefaults(
 const { transformer, inputValidationRules, inputLabel, outputLabel, outputLanguage, inputPlaceholder, inputDefault } =
   toRefs(props);
 
-const inputElement = ref();
+const inputElement = ref<typeof CInputText>();
 
 const input = ref(inputDefault.value);
 const output = computed(() => transformer.value(input.value));
-
-const { attrs: validationAttrs } = useValidation({ source: input, rules: inputValidationRules.value });
 </script>
 
 <style scoped></style>

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

@@ -1,17 +1,19 @@
 <template>
   <c-card title="Base64 to file">
-    <n-form-item
-      :feedback="base64InputValidation.message"
-      :validation-status="base64InputValidation.status"
-      :show-label="false"
-    >
-      <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
-    </n-form-item>
-    <n-space justify="center">
+    <c-input-text
+      v-model:value="base64Input"
+      multiline
+      placeholder="Put your base64 file string here..."
+      rows="5"
+      :validation="base64InputValidation"
+      mb-2
+    />
+
+    <div flex justify-center>
       <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
       </c-button>
-    </n-space>
+    </div>
   </c-card>
 
   <c-card title="File to base64">
@@ -24,10 +26,11 @@
       </n-upload-dragger>
     </n-upload>
 
-    <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
-    <n-space justify="center">
+    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" mb-2 />
+
+    <div flex justify-center>
       <c-button @click="copyFileBase64()"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
@@ -77,11 +80,6 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
 </script>
 
 <style lang="less" scoped>
-.n-input,
-.n-upload {
-  margin-bottom: 15px;
-}
-
 ::v-deep(.n-upload-trigger) {
   width: 100%;
 }

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

@@ -1,42 +1,59 @@
 <template>
   <c-card title="String to base64">
-    <n-form-item label="String to encode">
-      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
-    </n-form-item>
+    <c-input-text
+      v-model:value="textInput"
+      multiline
+      placeholder="Put your string here..."
+      rows="5"
+      label="String to encode"
+      raw-text
+      mb-5
+    />
 
-    <n-form-item label="Base64 of string">
-      <n-input
-        :value="base64Output"
-        type="textarea"
-        readonly
-        placeholder="The base64 encoding of your string will be here"
-        rows="5"
-      />
-    </n-form-item>
+    <c-input-text
+      label="Base64 of string"
+      :value="base64Output"
+      multiline
+      readonly
+      placeholder="The base64 encoding of your string will be here"
+      rows="5"
+      mb-5
+    />
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyTextBase64()"> Copy base64 </c-button>
-    </n-space>
+    </div>
   </c-card>
 
   <c-card title="Base64 to string">
-    <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>
+    <c-input-text
+      v-model:value="base64Input"
+      multiline
+      placeholder="Your base64 string..."
+      rows="5"
+      :validation-rules="b64ValidationRules"
+      label="Base64 string to decode"
+      mb-5
+    />
 
-    <n-form-item label="Decoded string">
-      <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
-    </n-form-item>
+    <c-input-text
+      v-model:value="textOutput"
+      label="Decoded string"
+      placeholder="The decoded string will be here"
+      multiline
+      rows="5"
+      readonly
+      mb-5
+    />
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyText()"> Copy decoded string </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { useValidation } from '@/composable/validation';
 import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
 import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
@@ -48,8 +65,8 @@ const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 s
 const base64Input = ref('');
 const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
 const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
-const b64Validation = useValidation({
-  source: base64Input,
-  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
-});
+
+const b64ValidationRules = [
+  { message: 'Invalid base64 string', validator: (value: string) => isValidBase64(value.trim()) },
+];
 </script>

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

@@ -1,25 +1,26 @@
 <template>
   <div>
-    <n-form-item :show-label="false" v-bind="validation.attrs as any">
-      <n-input-group>
-        <n-input
-          v-model:value="inputDate"
-          autofocus
-          :on-input="onDateInputChanged"
-          placeholder="Put you date string here..."
-          clearable
-          :input-props="{ 'data-test-id': 'date-time-converter-input' } as any"
-        />
+    <n-input-group>
+      <c-input-text
+        v-model:value="inputDate"
+        autofocus
+        placeholder="Put you date string here..."
+        clearable
+        test-id="date-time-converter-input"
+        :validation="validation"
+        @update:value="onDateInputChanged"
+      />
+
+      <n-select
+        v-model:value="formatIndex"
+        style="flex: 0 0 170px"
+        :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
+        data-test-id="date-time-converter-format-select"
+      />
+    </n-input-group>
+
+    <n-divider />
 
-        <n-select
-          v-model:value="formatIndex"
-          style="flex: 0 0 170px"
-          :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
-          data-test-id="date-time-converter-format-select"
-        />
-      </n-input-group>
-    </n-form-item>
-    <n-divider style="margin-top: 0" />
     <input-copyable
       v-for="{ name, fromDate } in formats"
       :key="name"

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

@@ -2,14 +2,23 @@
   <div>
     <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 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 as any">
-            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
-          </n-form-item>
-        </n-space>
+        <div mb-4 flex gap-4>
+          <c-input-text
+            v-model:value="rawStartAddress"
+            label="Start address"
+            placeholder="Start IPv4 address..."
+            :validation="startIpValidation"
+            clearable
+          />
+
+          <c-input-text
+            v-model:value="rawEndAddress"
+            label="End address"
+            placeholder="End IPv4 address..."
+            :validation="endIpValidation"
+            clearable
+          />
+        </div>
 
         <n-table v-if="showResult" data-test-id="result">
           <thead>

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

@@ -1,30 +1,25 @@
 <template>
-  <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..."
-      type="textarea"
-      rows="20"
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-      :input-props="{ 'data-test-id': 'leftJson' }  as any"
-    />
-  </n-form-item>
-  <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..."
-      type="textarea"
-      rows="20"
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-      :input-props="{ 'data-test-id': 'rightJson' }  as any"
-    />
-  </n-form-item>
+  <c-input-text
+    v-model:value="rawLeftJson"
+    :validation-rules="jsonValidationRules"
+    label="Your first json"
+    placeholder="Paste your first json here..."
+    rows="20"
+    multiline
+    test-id="leftJson"
+    raw-text
+  />
+
+  <c-input-text
+    v-model:value="rawRightJson"
+    :validation-rules="jsonValidationRules"
+    label="Your json to compare"
+    placeholder="Paste your json to compare here..."
+    rows="20"
+    multiline
+    test-id="rightJson"
+    raw-text
+  />
 
   <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
 </template>
@@ -33,7 +28,6 @@
 import JSON5 from 'json5';
 
 import { withDefaultOnError } from '@/utils/defaults';
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import DiffsViewer from './diff-viewer/diff-viewer.vue';
 
@@ -43,17 +37,10 @@ const rawRightJson = ref('');
 const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
 const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
 
-const createJsonValidation = (json: Ref) =>
-  useValidation({
-    source: json,
-    rules: [
-      {
-        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
-        message: 'Invalid JSON',
-      },
-    ],
-  });
-
-const leftJsonValidation = createJsonValidation(rawLeftJson);
-const rightJsonValidation = createJsonValidation(rawRightJson);
+const jsonValidationRules = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+    message: 'Invalid JSON format',
+  },
+];
 </script>

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

@@ -1,37 +1,37 @@
 <template>
   <div>
-    <n-form-item label="MAC address:" v-bind="validationAttrs as any">
-      <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>
+    <c-input-text
+      v-model:value="macAddress"
+      label="MAC address:"
+      size="large"
+      placeholder="Type a MAC address"
+      clearable
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :validation-rules="macAddressValidationRules"
+      mb-5
+    />
 
-    <n-form-item label="Vendor info:">
-      <c-card>
-        <n-text v-if="details">
-          <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
-        </n-text>
+    <div mb-5px>Vendor info:</div>
+    <c-card mb-5>
+      <div v-if="details">
+        <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
+      </div>
 
-        <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
-      </c-card>
-    </n-form-item>
+      <div v-else italic op-60>Unknown vendor for this address</div>
+    </c-card>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button :disabled="!details" @click="copy"> Copy vendor info </c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import db from 'oui/oui.json';
-import { macAddressValidation } from '@/utils/macAddress';
+import { macAddressValidationRules } from '@/utils/macAddress';
 import { useCopy } from '@/composable/copy';
 
 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
@@ -39,8 +39,6 @@ const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '')
 const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
-const { attrs: validationAttrs } = macAddressValidation(macAddress);
-
 const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
 </script>
 

src/ui/c-input-text/c-input-text.vue

@@ -133,6 +133,10 @@ const appTheme = useAppTheme();
 const textareaRef = ref<HTMLTextAreaElement>();
 const inputWrapperRef = ref<HTMLElement>();
 
+defineExpose({
+  inputWrapperRef,
+});
+
 watch(
   value,
   () => {

src/utils/macAddress.ts

@@ -1,16 +1,18 @@
 import { useValidation } from '@/composable/validation';
 import type { Ref } from 'vue';
 
+const macAddressValidationRules = [
+  {
+    message: 'Invalid MAC address',
+    validator: (value: string) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){2,5}([0-9A-Fa-f]{2})$/),
+  },
+];
+
 function macAddressValidation(value: Ref) {
   return useValidation({
     source: value,
-    rules: [
-      {
-        message: 'Invalid MAC address',
-        validator: (value) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){2,5}([0-9A-Fa-f]{2})$/),
-      },
-    ],
+    rules: macAddressValidationRules,
   });
 }
 
-export { macAddressValidation };
+export { macAddressValidation, macAddressValidationRules };