diff options
author | 2023-05-15 00:41:45 +0200 | |
---|---|---|
committer | 2023-05-15 01:31:22 +0200 | |
commit | f7fc779e6334af129e323ae6ec22d97059eb0363 (patch) | |
tree | 4435f7128b6aa7fcbf54f60bcce75c8f2eafe33e /src/tools/json-diff/json-diff.vue | |
parent | b3b6b7c46bfe8b6c11e3ca97a4e2741c7225b534 (diff) | |
download | it-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.vue | 67 |
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> |