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

1 files changed, 20 insertions, 21 deletions

diff --git a/src/components/FormatTransformer.vue b/src/components/FormatTransformer.vue
index d187632..5b187b2 100644
--- a/src/components/FormatTransformer.vue
+++ b/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>