diff options
author | 2023-05-28 23:13:24 +0200 | |
---|---|---|
committer | 2023-05-28 23:29:14 +0200 | |
commit | 33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch) | |
tree | f313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/json-diff/diff-viewer/diff-viewer.vue | |
parent | 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff) | |
download | it-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.vue | 38 |
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'); |