diff options
author | 2023-04-22 00:49:03 +0200 | |
---|---|---|
committer | 2023-04-23 15:24:20 +0200 | |
commit | 362f2fa280fdab210074e9a7e01dde6187924d29 (patch) | |
tree | 2a17c13e1db19e0b244cda22eabf8e107218f6b9 /src/tools/json-diff/json-diff.vue | |
parent | 61ece2387f7061d67177ee41c35db572ffeb84a7 (diff) | |
download | it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.gz it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.zst it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.zip |
feat(new-tool): diff of two json objects
Diffstat (limited to 'src/tools/json-diff/json-diff.vue')
-rw-r--r-- | src/tools/json-diff/json-diff.vue | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue new file mode 100644 index 0000000..df106c6 --- /dev/null +++ b/src/tools/json-diff/json-diff.vue @@ -0,0 +1,59 @@ +<template> + <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs"> + <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' }" + /> + </n-form-item> + <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs"> + <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' }" + /> + </n-form-item> + + <DiffsViewer :left-json="leftJson" :right-json="rightJson" /> +</template> + +<script setup lang="ts"> +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'; + +const rawLeftJson = ref(''); +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); +</script> |