aboutsummaryrefslogtreecommitdiff
path: root/src/tools/json-diff/diff-viewer/diff-viewer.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-05-28 23:13:24 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-05-28 23:29:14 +0200
commit33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch)
treef313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/json-diff/diff-viewer/diff-viewer.vue
parent4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff)
downloadit-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.gz
it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.zst
it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.zip
chore(lint): switched to a better lint config
Diffstat (limited to 'src/tools/json-diff/diff-viewer/diff-viewer.vue')
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.vue38
1 files changed, 20 insertions, 18 deletions
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index 8d17e6b..08c4784 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -1,26 +1,11 @@
-<template>
- <div v-if="showResults">
- <div flex justify-center>
- <n-form-item label="Only show differences" label-placement="left">
- <n-switch v-model:value="onlyShowDifferences" />
- </n-form-item>
- </div>
-
- <c-card data-test-id="diff-result">
- <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
- <diff-root-viewer v-else :diff="result" />
- </c-card>
- </div>
-</template>
-
<script lang="ts" setup>
-import { useAppTheme } from '@/ui/theme/themes';
import _ from 'lodash';
-import { DiffRootViewer } from './diff-viewer.models';
import { diff } from '../json-diff.models';
+import { DiffRootViewer } from './diff-viewer.models';
+import { useAppTheme } from '@/ui/theme/themes';
-const onlyShowDifferences = ref(false);
const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const onlyShowDifferences = ref(false);
const { leftJson, rightJson } = toRefs(props);
const appTheme = useAppTheme();
@@ -32,6 +17,23 @@ const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value)
const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
</script>
+<template>
+ <div v-if="showResults">
+ <div flex justify-center>
+ <n-form-item label="Only show differences" label-placement="left">
+ <n-switch v-model:value="onlyShowDifferences" />
+ </n-form-item>
+ </div>
+
+ <c-card data-test-id="diff-result">
+ <n-text v-if="jsonAreTheSame" depth="3" block text-center italic>
+ The provided JSONs are the same
+ </n-text>
+ <DiffRootViewer v-else :diff="result" />
+ </c-card>
+ </div>
+</template>
+
<style lang="less" scoped>
::v-deep(.diffs-viewer) {
color: v-bind('appTheme.text.mutedColor');