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

auto-imports.d.ts

@@ -19,9 +19,7 @@ declare global {
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -41,6 +39,9 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -91,9 +92,8 @@ declare global {
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('@vueuse/core')['toRef']
+  const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('@vueuse/core')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -104,19 +104,6 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAnimate: typeof import('@vueuse/core')['useAnimate']
-  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
-  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
-  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
-  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
-  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
-  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
-  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
-  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
-  const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -127,8 +114,8 @@ declare global {
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
@@ -202,18 +189,12 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
-  const useParentElement: typeof import('@vueuse/core')['useParentElement']
-  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
-  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
-  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
-  const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -227,17 +208,14 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
-  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
-  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
   const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
   const useThrottle: typeof import('@vueuse/core')['useThrottle']
@@ -249,8 +227,6 @@ declare global {
   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
   const useTitle: typeof import('@vueuse/core')['useTitle']
-  const useToNumber: typeof import('@vueuse/core')['useToNumber']
-  const useToString: typeof import('@vueuse/core')['useToString']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
@@ -271,10 +247,8 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -308,9 +282,7 @@ declare module 'vue' {
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@@ -330,6 +302,9 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly logicAnd: UnwrapRef<typeof import('@vueuse/core')['logicAnd']>
+    readonly logicNot: UnwrapRef<typeof import('@vueuse/core')['logicNot']>
+    readonly logicOr: UnwrapRef<typeof import('@vueuse/core')['logicOr']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
@@ -380,9 +355,8 @@ declare module 'vue' {
     readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
-    readonly toRef: UnwrapRef<typeof import('@vueuse/core')['toRef']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toValue: UnwrapRef<typeof import('@vueuse/core')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -393,19 +367,6 @@ declare module 'vue' {
     readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
-    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
-    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
-    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
-    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
-    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
-    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
-    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
-    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
-    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
@@ -416,8 +377,8 @@ declare module 'vue' {
     readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClamp: UnwrapRef<typeof import('@vueuse/core')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
-    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
@@ -491,18 +452,12 @@ declare module 'vue' {
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
-    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
     readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
-    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
-    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
-    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
@@ -516,17 +471,14 @@ declare module 'vue' {
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
-    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
-    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
-    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
     readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
     readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
@@ -538,8 +490,6 @@ declare module 'vue' {
     readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
     readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
     readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
-    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
-    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
@@ -560,10 +510,8 @@ declare module 'vue' {
     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
     readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
     readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
     readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

src/components/FormatTransformer.vue

@@ -1,26 +1,27 @@
 <template>
-  <n-form-item :label="inputLabel" v-bind="validationAttrs as any">
+  <c-input-text
-    <n-input
+    ref="inputElement"
-      ref="inputElement"
+    v-model:value="input"
-      v-model:value="input"
+    :placeholder="inputPlaceholder"
-      :placeholder="inputPlaceholder"
+    :label="inputLabel"
-      type="textarea"
+    multiline
-      rows="20"
+    autosize
-      autocomplete="off"
+    rows="20"
-      autocorrect="off"
+    raw-text
-      autocapitalize="off"
+    test-id="input"
-      spellcheck="false"
+    :validation-rules="inputValidationRules"
-      :input-props="{ 'data-test-id': 'input' } as any"
+  />
-    />
+
-  </n-form-item>
+  <div>
-  <n-form-item :label="outputLabel">
+    <div mb-5px>{{ outputLabel }}</div>
-    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement" />
+    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement?.inputWrapperRef" />
-  </n-form-item>
+  </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
+    <c-input-text
-      :feedback="base64InputValidation.message"
+      v-model:value="base64Input"
-      :validation-status="base64InputValidation.status"
+      multiline
-      :show-label="false"
+      placeholder="Put your base64 file string here..."
-    >
+      rows="5"
-      <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
+      :validation="base64InputValidation"
-    </n-form-item>
+      mb-2
-    <n-space justify="center">
+    />
+
+    <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" />
+    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" mb-2 />
-    <n-space justify="center">
+
+    <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">
+    <c-input-text
-      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
+      v-model:value="textInput"
-    </n-form-item>
+      multiline
+      placeholder="Put your string here..."
+      rows="5"
+      label="String to encode"
+      raw-text
+      mb-5
+    />
 
-    <n-form-item label="Base64 of string">
+    <c-input-text
-      <n-input
+      label="Base64 of string"
-        :value="base64Output"
+      :value="base64Output"
-        type="textarea"
+      multiline
-        readonly
+      readonly
-        placeholder="The base64 encoding of your string will be here"
+      placeholder="The base64 encoding of your string will be here"
-        rows="5"
+      rows="5"
-      />
+      mb-5
-    </n-form-item>
+    />
 
-    <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">
+    <c-input-text
-      <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
+      v-model:value="base64Input"
-    </n-form-item>
+      multiline
+      placeholder="Your base64 string..."
+      rows="5"
+      :validation-rules="b64ValidationRules"
+      label="Base64 string to decode"
+      mb-5
+    />
 
-    <n-form-item label="Decoded string">
+    <c-input-text
-      <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
+      v-model:value="textOutput"
-    </n-form-item>
+      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,
+const b64ValidationRules = [
-  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
+  { 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-group>
+      <c-input-text
-        <n-input
+        v-model:value="inputDate"
-          v-model:value="inputDate"
+        autofocus
-          autofocus
+        placeholder="Put you date string here..."
-          :on-input="onDateInputChanged"
+        clearable
-          placeholder="Put you date string here..."
+        test-id="date-time-converter-input"
-          clearable
+        :validation="validation"
-          :input-props="{ 'data-test-id': 'date-time-converter-input' } as any"
+        @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">
+        <div mb-4 flex gap-4>
-          <n-form-item label="Start address" v-bind="startIpValidation.attrs as any">
+          <c-input-text
-            <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
+            v-model:value="rawStartAddress"
-          </n-form-item>
+            label="Start address"
-          <n-form-item label="End address" v-bind="endIpValidation.attrs as any">
+            placeholder="Start IPv4 address..."
-            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
+            :validation="startIpValidation"
-          </n-form-item>
+            clearable
-        </n-space>
+          />
+
+          <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">
+  <c-input-text
-    <n-input
+    v-model:value="rawLeftJson"
-      v-model:value="rawLeftJson"
+    :validation-rules="jsonValidationRules"
-      placeholder="Paste your first json here..."
+    label="Your first json"
-      type="textarea"
+    placeholder="Paste your first json here..."
-      rows="20"
+    rows="20"
-      autocomplete="off"
+    multiline
-      autocorrect="off"
+    test-id="leftJson"
-      autocapitalize="off"
+    raw-text
-      spellcheck="false"
+  />
-      :input-props="{ 'data-test-id': 'leftJson' }  as any"
+
-    />
+  <c-input-text
-  </n-form-item>
+    v-model:value="rawRightJson"
-  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs as any">
+    :validation-rules="jsonValidationRules"
-    <n-input
+    label="Your json to compare"
-      v-model:value="rawRightJson"
+    placeholder="Paste your json to compare here..."
-      placeholder="Paste your json to compare here..."
+    rows="20"
-      type="textarea"
+    multiline
-      rows="20"
+    test-id="rightJson"
-      autocomplete="off"
+    raw-text
-      autocorrect="off"
+  />
-      autocapitalize="off"
-      spellcheck="false"
-      :input-props="{ 'data-test-id': 'rightJson' }  as any"
-    />
-  </n-form-item>
 
   <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) =>
+const jsonValidationRules = [
-  useValidation({
+  {
-    source: json,
+    validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
-    rules: [
+    message: 'Invalid JSON format',
-      {
+  },
-        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+];
-        message: 'Invalid JSON',
-      },
-    ],
-  });
-
-const leftJsonValidation = createJsonValidation(rawLeftJson);
-const rightJsonValidation = createJsonValidation(rawRightJson);
 </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">
+    <c-input-text
-      <n-input
+      v-model:value="macAddress"
-        v-model:value="macAddress"
+      label="MAC address:"
-        size="large"
+      size="large"
-        placeholder="Type a MAC address"
+      placeholder="Type a MAC address"
-        clearable
+      clearable
-        autocomplete="off"
+      autocomplete="off"
-        autocorrect="off"
+      autocorrect="off"
-        autocapitalize="off"
+      autocapitalize="off"
-        spellcheck="false"
+      spellcheck="false"
-      />
+      :validation-rules="macAddressValidationRules"
-    </n-form-item>
+      mb-5
+    />
 
-    <n-form-item label="Vendor info:">
+    <div mb-5px>Vendor info:</div>
-      <c-card>
+    <c-card mb-5>
-        <n-text v-if="details">
+      <div v-if="details">
-          <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
+        <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
-        </n-text>
+      </div>
 
-        <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
+      <div v-else italic op-60>Unknown vendor for this address</div>
-      </c-card>
+    </c-card>
-    </n-form-item>
 
-    <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: [
+    rules: macAddressValidationRules,
-      {
-        message: 'Invalid MAC address',
-        validator: (value) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){2,5}([0-9A-Fa-f]{2})$/),
-      },
-    ],
   });
 }
 
-export { macAddressValidation };
+export { macAddressValidation, macAddressValidationRules };