aboutsummaryrefslogtreecommitdiff
path: root/src/tools/json-diff/json-diff.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-05-15 00:41:45 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-05-15 01:31:22 +0200
commitf7fc779e6334af129e323ae6ec22d97059eb0363 (patch)
tree4435f7128b6aa7fcbf54f60bcce75c8f2eafe33e /src/tools/json-diff/json-diff.vue
parentb3b6b7c46bfe8b6c11e3ca97a4e2741c7225b534 (diff)
downloadit-tools-f7fc779e6334af129e323ae6ec22d97059eb0363.tar.gz
it-tools-f7fc779e6334af129e323ae6ec22d97059eb0363.tar.zst
it-tools-f7fc779e6334af129e323ae6ec22d97059eb0363.zip
refactor(ui): replaced some n-input with c-input-text
Diffstat (limited to 'src/tools/json-diff/json-diff.vue')
-rw-r--r--src/tools/json-diff/json-diff.vue67
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>