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

1 files changed, 27 insertions, 40 deletions

diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue
index 0db06cc..811f7fa 100644
--- a/src/tools/json-diff/json-diff.vue
+++ b/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>