diff options
author | 2023-04-22 00:49:03 +0200 | |
---|---|---|
committer | 2023-04-23 15:24:20 +0200 | |
commit | 362f2fa280fdab210074e9a7e01dde6187924d29 (patch) | |
tree | 2a17c13e1db19e0b244cda22eabf8e107218f6b9 | |
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
-rw-r--r-- | components.d.ts | 264 | ||||
-rw-r--r-- | src/composable/copy.ts | 5 | ||||
-rw-r--r-- | src/tools/index.ts | 2 | ||||
-rw-r--r-- | src/tools/json-diff/diff-viewer/diff-viewer.models.tsx | 119 | ||||
-rw-r--r-- | src/tools/json-diff/diff-viewer/diff-viewer.vue | 110 | ||||
-rw-r--r-- | src/tools/json-diff/index.ts | 12 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.e2e.spec.ts | 39 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.models.test.ts | 80 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.models.ts | 140 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.types.ts | 29 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.vue | 59 | ||||
-rw-r--r-- | src/ui/theme/themes.ts | 26 |
12 files changed, 751 insertions, 134 deletions
diff --git a/components.d.ts b/components.d.ts index 700696c..ae1710f 100644 --- a/components.d.ts +++ b/components.d.ts @@ -5,139 +5,141 @@ // Read more: https://github.com/vuejs/core/pull/3399 import '@vue/runtime-core' -export {}; +export {} declare module '@vue/runtime-core' { export interface GlobalComponents { - '404.page': typeof import('./src/pages/404.page.vue')['default']; - About: typeof import('./src/pages/About.vue')['default']; - App: typeof import('./src/App.vue')['default']; - 'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']; - Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']; - Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']; - BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']; - Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']; - BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']; - Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']; - CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']; - CButton: typeof import('./src/ui/c-button/c-button.vue')['default']; - CCard: typeof import('./src/ui/c-card/c-card.vue')['default']; - ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']; - Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']; - CLink: typeof import('./src/ui/c-link/c-link.vue')['default']; - CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']; - ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']; - ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']; - CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']; - CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']; - DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']; - DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']; - DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']; - DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']; - Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']; - Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']; - EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']; - FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']; - FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']; - GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']; - HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']; - HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']; - 'Home.page': typeof import('./src/pages/Home.page.vue')['default']; - HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']; - HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']; - HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']; - InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']; - IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']; - Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']; - Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']; - Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']; - Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']; - JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']; - JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']; - JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']; - JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']; - KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']; - LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']; - MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']; - MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']; - MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']; - MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']; - MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']; - MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']; - MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']; - MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']; - NAlert: typeof import('naive-ui')['NAlert']; - NAutoComplete: typeof import('naive-ui')['NAutoComplete']; - NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']; - NButton: typeof import('naive-ui')['NButton']; - NCard: typeof import('naive-ui')['NCard']; - NCheckbox: typeof import('naive-ui')['NCheckbox']; - NCode: typeof import('naive-ui')['NCode']; - NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']; - NColorPicker: typeof import('naive-ui')['NColorPicker']; - NConfigProvider: typeof import('naive-ui')['NConfigProvider']; - NDatePicker: typeof import('naive-ui')['NDatePicker']; - NDivider: typeof import('naive-ui')['NDivider']; - NDynamicInput: typeof import('naive-ui')['NDynamicInput']; - NEllipsis: typeof import('naive-ui')['NEllipsis']; - NForm: typeof import('naive-ui')['NForm']; - NFormItem: typeof import('naive-ui')['NFormItem']; - NGi: typeof import('naive-ui')['NGi']; - NGrid: typeof import('naive-ui')['NGrid']; - NH1: typeof import('naive-ui')['NH1']; - NH2: typeof import('naive-ui')['NH2']; - NH3: typeof import('naive-ui')['NH3']; - NIcon: typeof import('naive-ui')['NIcon']; - NImage: typeof import('naive-ui')['NImage']; - NInput: typeof import('naive-ui')['NInput']; - NInputGroup: typeof import('naive-ui')['NInputGroup']; - NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']; - NInputNumber: typeof import('naive-ui')['NInputNumber']; - NLayout: typeof import('naive-ui')['NLayout']; - NLayoutSider: typeof import('naive-ui')['NLayoutSider']; - NMenu: typeof import('naive-ui')['NMenu']; - NP: typeof import('naive-ui')['NP']; - NPageHeader: typeof import('naive-ui')['NPageHeader']; - NProgress: typeof import('naive-ui')['NProgress']; - NScrollbar: typeof import('naive-ui')['NScrollbar']; - NSelect: typeof import('naive-ui')['NSelect']; - NSlider: typeof import('naive-ui')['NSlider']; - NSpace: typeof import('naive-ui')['NSpace']; - NStatistic: typeof import('naive-ui')['NStatistic']; - NSwitch: typeof import('naive-ui')['NSwitch']; - NTable: typeof import('naive-ui')['NTable']; - NTag: typeof import('naive-ui')['NTag']; - NText: typeof import('naive-ui')['NText']; - NTooltip: typeof import('naive-ui')['NTooltip']; - NUpload: typeof import('naive-ui')['NUpload']; - NUploadDragger: typeof import('naive-ui')['NUploadDragger']; - OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']; - QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']; - RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']; - ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']; - RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']; - RouterLink: typeof import('vue-router')['RouterLink']; - RouterView: typeof import('vue-router')['RouterView']; - RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']; - SearchBar: typeof import('./src/components/SearchBar.vue')['default']; - SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']; - SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']; - SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']; - SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']; - SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']; - TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']; - TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']; - TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']; - TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']; - TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']; - 'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']; - 'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']; - ToolCard: typeof import('./src/components/ToolCard.vue')['default']; - UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']; - UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']; - UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']; - UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']; - UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']; - YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']; + '404.page': typeof import('./src/pages/404.page.vue')['default'] + About: typeof import('./src/pages/About.vue')['default'] + App: typeof import('./src/App.vue')['default'] + 'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'] + Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'] + Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'] + BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'] + Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'] + BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'] + Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'] + CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'] + CButton: typeof import('./src/ui/c-button/c-button.vue')['default'] + CCard: typeof import('./src/ui/c-card/c-card.vue')['default'] + ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'] + Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'] + CLink: typeof import('./src/ui/c-link/c-link.vue')['default'] + CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'] + ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'] + ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'] + CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'] + CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'] + DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'] + DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'] + DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default'] + DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'] + DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'] + Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'] + Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'] + EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'] + FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'] + FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'] + GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'] + HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'] + HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'] + 'Home.page': typeof import('./src/pages/Home.page.vue')['default'] + HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'] + HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'] + HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'] + InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'] + IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'] + Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'] + Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'] + Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'] + Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'] + JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default'] + JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'] + JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'] + JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'] + JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'] + KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'] + LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'] + MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'] + MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'] + MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'] + MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'] + MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'] + MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'] + MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] + MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] + NAlert: typeof import('naive-ui')['NAlert'] + NAutoComplete: typeof import('naive-ui')['NAutoComplete'] + NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] + NButton: typeof import('naive-ui')['NButton'] + NCard: typeof import('naive-ui')['NCard'] + NCheckbox: typeof import('naive-ui')['NCheckbox'] + NCode: typeof import('naive-ui')['NCode'] + NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] + NColorPicker: typeof import('naive-ui')['NColorPicker'] + NConfigProvider: typeof import('naive-ui')['NConfigProvider'] + NDatePicker: typeof import('naive-ui')['NDatePicker'] + NDivider: typeof import('naive-ui')['NDivider'] + NDynamicInput: typeof import('naive-ui')['NDynamicInput'] + NEllipsis: typeof import('naive-ui')['NEllipsis'] + NForm: typeof import('naive-ui')['NForm'] + NFormItem: typeof import('naive-ui')['NFormItem'] + NGi: typeof import('naive-ui')['NGi'] + NGrid: typeof import('naive-ui')['NGrid'] + NH1: typeof import('naive-ui')['NH1'] + NH2: typeof import('naive-ui')['NH2'] + NH3: typeof import('naive-ui')['NH3'] + NIcon: typeof import('naive-ui')['NIcon'] + NImage: typeof import('naive-ui')['NImage'] + NInput: typeof import('naive-ui')['NInput'] + NInputGroup: typeof import('naive-ui')['NInputGroup'] + NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'] + NInputNumber: typeof import('naive-ui')['NInputNumber'] + NLayout: typeof import('naive-ui')['NLayout'] + NLayoutSider: typeof import('naive-ui')['NLayoutSider'] + NMenu: typeof import('naive-ui')['NMenu'] + NP: typeof import('naive-ui')['NP'] + NPageHeader: typeof import('naive-ui')['NPageHeader'] + NProgress: typeof import('naive-ui')['NProgress'] + NScrollbar: typeof import('naive-ui')['NScrollbar'] + NSelect: typeof import('naive-ui')['NSelect'] + NSlider: typeof import('naive-ui')['NSlider'] + NSpace: typeof import('naive-ui')['NSpace'] + NStatistic: typeof import('naive-ui')['NStatistic'] + NSwitch: typeof import('naive-ui')['NSwitch'] + NTable: typeof import('naive-ui')['NTable'] + NTag: typeof import('naive-ui')['NTag'] + NText: typeof import('naive-ui')['NText'] + NTooltip: typeof import('naive-ui')['NTooltip'] + NUpload: typeof import('naive-ui')['NUpload'] + NUploadDragger: typeof import('naive-ui')['NUploadDragger'] + OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] + QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'] + RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'] + ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'] + RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'] + SearchBar: typeof import('./src/components/SearchBar.vue')['default'] + SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'] + SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'] + SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'] + SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'] + SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'] + TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'] + TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'] + TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'] + TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'] + TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'] + 'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'] + 'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'] + ToolCard: typeof import('./src/components/ToolCard.vue')['default'] + UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'] + UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'] + UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'] + UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'] + UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'] + YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'] } } diff --git a/src/composable/copy.ts b/src/composable/copy.ts index fb29be5..c389001 100644 --- a/src/composable/copy.ts +++ b/src/composable/copy.ts @@ -1,8 +1,7 @@ -import { useClipboard } from '@vueuse/core'; +import { useClipboard, type MaybeRef } from '@vueuse/core'; import { useMessage } from 'naive-ui'; -import type { Ref } from 'vue'; -export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) { +export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<string>; text?: string }) { const { copy } = useClipboard({ source }); const message = useMessage(); diff --git a/src/tools/index.ts b/src/tools/index.ts index 016286c..73f0834 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as jsonDiff } from './json-diff'; import { tool as ipv4RangeExpander } from './ipv4-range-expander'; import { tool as httpStatusCodes } from './http-status-codes'; import { tool as yamlToJson } from './yaml-to-json-converter'; @@ -91,6 +92,7 @@ export const toolsByCategory: ToolCategory[] = [ htmlWysiwygEditor, userAgentParser, httpStatusCodes, + jsonDiff, ], }, { diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx new file mode 100644 index 0000000..5a19feb --- /dev/null +++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx @@ -0,0 +1,119 @@ +import _ from 'lodash'; +import { useCopy } from '@/composable/copy'; +import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types'; + +export const DiffRootViewer = ({ diff }: { diff: Difference }) => { + return ( + <div class={'diffs-viewer'}> + <ul>{DiffViewer({ diff, showKeys: false })}</ul> + </div> + ); +}; + +const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => { + const { type, status } = diff; + + if (status === 'updated') { + return ComparisonViewer({ diff, showKeys }); + } + + if (type === 'array') { + return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' }); + } + + if (type === 'object') { + return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' }); + } + + return LineDiffViewer({ diff, showKeys }); +}; + +const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { + const { value, key, status, oldValue } = diff; + const valueToDisplay = status === 'removed' ? oldValue : value; + + return ( + <li> + <span class={[status, 'result']}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + {Value({ value: valueToDisplay, status })} + </span> + , + </li> + ); +}; + +const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { + const { value, key, oldValue } = diff; + + return ( + <li class={'updated-line'}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + {Value({ value: oldValue, status: 'removed' })} + {Value({ value, status: 'added' })}, + </li> + ); +}; + +const ChildrenViewer = ({ + diff, + openTag, + closeTag, + showKeys, + showChildrenKeys = true, +}: { + diff: ArrayDifference | ObjectDifference; + showKeys: boolean; + showChildrenKeys?: boolean; + openTag: string; + closeTag: string; +}) => { + const { children, key, status, type } = diff; + + return ( + <li> + <div class={[type, status]} style={{ display: 'inline-block' }}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + + {openTag} + {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>} + {closeTag + ','} + </div> + </li> + ); +}; + +function formatValue(value: unknown) { + if (_.isNull(value)) { + return 'null'; + } + + return JSON.stringify(value); +} + +const Value = ({ value, status }: { value: unknown; status: string }) => { + const formatedValue = formatValue(value); + + const { copy } = useCopy({ source: formatedValue }); + + return ( + <span class={['value', status]} onClick={copy}> + {formatedValue} + </span> + ); +}; diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue new file mode 100644 index 0000000..c77d407 --- /dev/null +++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue @@ -0,0 +1,110 @@ +<template> + <div v-if="showResults"> + <n-space justify="center"> + <n-form-item label="Only show differences" label-placement="left"> + <n-switch v-model:value="onlyShowDifferences" /> + </n-form-item> + </n-space> + + <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'; + +const onlyShowDifferences = ref(false); +const props = defineProps<{ leftJson: unknown; rightJson: unknown }>(); +const { leftJson, rightJson } = toRefs(props); +const appTheme = useAppTheme(); + +const result = computed(() => + diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }), +); + +const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value)); +const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value)); +</script> + +<style lang="less" scoped> +::v-deep(.diffs-viewer) { + color: v-bind('appTheme.text.mutedColor'); + + & > ul { + padding-left: 0 !important; + } + + ul { + list-style: none; + padding-left: 20px; + margin: 0; + + li { + .updated-line { + padding: 3px 0; + } + + .result, + .array, + .object, + .value { + &:not(:last-child) { + margin-right: 4px; + } + + &.added { + padding: 3px 5px; + border-radius: 4px; + background-color: v-bind('appTheme.success.colorFaded'); + color: v-bind('appTheme.success.color'); + .key { + color: inherit; + } + } + + &.removed { + padding: 3px 5px; + border-radius: 4px; + background-color: v-bind('appTheme.error.colorFaded'); + color: v-bind('appTheme.error.color'); + + .key { + color: inherit; + } + } + } + + .value { + cursor: pointer; + border: 1px solid transparent; + transition: border-color 0.2s ease-in-out; + + &.added:hover { + border-color: v-bind('appTheme.success.color'); + } + + &.removed:hover { + border-color: v-bind('appTheme.error.color'); + } + } + + .added .added, + .removed .removed { + background-color: transparent; + color: inherit; + } + + .key { + font-weight: 500; + color: v-bind('appTheme.text.baseColor'); + } + } + } +} +</style> diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts new file mode 100644 index 0000000..7c4c1ee --- /dev/null +++ b/src/tools/json-diff/index.ts @@ -0,0 +1,12 @@ +import { CompareArrowsRound } from '@vicons/material'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'JSON diff', + path: '/json-diff', + description: 'Compare two JSON objects and get the differences between them.', + keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'], + component: () => import('./json-diff.vue'), + icon: CompareArrowsRound, + createdAt: new Date('2023-04-20'), +}); diff --git a/src/tools/json-diff/json-diff.e2e.spec.ts b/src/tools/json-diff/json-diff.e2e.spec.ts new file mode 100644 index 0000000..5370060 --- /dev/null +++ b/src/tools/json-diff/json-diff.e2e.spec.ts @@ -0,0 +1,39 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - JSON diff', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/json-diff'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('JSON diff - IT Tools'); + }); + + test('Identical JSONs have a custom result message', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{ "foo": "bar" } '); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain('The provided JSONs are the same'); + }); + + test('Different JSONs have differences listed', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}'); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`); + }); + + test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}'); + await page.getByRole('switch').click(); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain(`{\nbaz: "qux",\n},`); + }); +}); diff --git a/src/tools/json-diff/json-diff.models.test.ts b/src/tools/json-diff/json-diff.models.test.ts new file mode 100644 index 0000000..b8e699f --- /dev/null +++ b/src/tools/json-diff/json-diff.models.test.ts @@ -0,0 +1,80 @@ +import { expect, describe, it } from 'vitest'; +import { diff } from './json-diff.models'; + +describe('json-diff models', () => { + describe('diff', () => { + it('list object differences', () => { + const obj = { a: 1, b: 2 }; + const newObj = { a: 1, b: 2, c: 3 }; + const result = diff(obj, newObj); + + expect(result).toEqual({ + key: '', + type: 'object', + children: [ + { + key: 'a', + type: 'value', + value: 1, + oldValue: 1, + status: 'unchanged', + }, + { + key: 'b', + type: 'value', + value: 2, + oldValue: 2, + status: 'unchanged', + }, + { + key: 'c', + type: 'value', + value: 3, + oldValue: undefined, + status: 'added', + }, + ], + oldValue: { a: 1, b: 2 }, + value: { a: 1, b: 2, c: 3 }, + status: 'children-updated', + }); + }); + + it('list array differences', () => { + const obj = [1, 2]; + const newObj = [1, 2, 3]; + const result = diff(obj, newObj); + + expect(result).toEqual({ + key: '', + type: 'array', + children: [ + { + key: 0, + type: 'value', + value: 1, + oldValue: 1, + status: 'unchanged', + }, + { + key: 1, + type: 'value', + value: 2, + oldValue: 2, + status: 'unchanged', + }, + { + key: 2, + type: 'value', + value: 3, + oldValue: undefined, + status: 'added', + }, + ], + oldValue: [1, 2], + value: [1, 2, 3], + status: 'children-updated', + }); + }); + }); +}); diff --git a/src/tools/json-diff/json-diff.models.ts b/src/tools/json-diff/json-diff.models.ts new file mode 100644 index 0000000..ee6ba4b --- /dev/null +++ b/src/tools/json-diff/json-diff.models.ts @@ -0,0 +1,140 @@ +import _ from 'lodash'; +import type { Difference, DifferenceStatus } from './json-diff.types'; + +export { diff }; + +function diff( + obj: unknown, + newObj: unknown, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference { + if (_.isArray(obj) && _.isArray(newObj)) { + return { + key: '', + type: 'array', + children: diffArrays(obj, newObj, { onlyShowDifferences }), + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; + } + + if (_.isObject(obj) && _.isObject(newObj)) { + return { + key: '', + type: 'object', + children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }), + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; + } + + return { + key: '', + type: 'value', + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; +} + +function diffObjects( + obj: Record<string, unknown>, + newObj: Record<string, unknown>, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference[] { + const keys = Object.keys({ ...obj, ...newObj }); + return keys + .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences })) + .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged'); +} + +function createDifference( + value: unknown, + newValue: unknown, + key: string | number, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference { + const type = getType(value); + + if (type === 'object') { + return { + key, + type, + children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, { + onlyShowDifferences, + }), + oldValue: value, + value: newValue, + status: getStatus(value, newValue), + }; + } + + if (type === 'array') { + return { + key, + type, + children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }), + value: newValue, + oldValue: value, + status: getStatus(value, newValue), + }; + } + + return { + key, + type, + value: newValue, + oldValue: value, + status: getStatus(value, newValue), + }; +} + +function diffArrays( + arr: unknown[], + newArr: unknown[], + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference[] { + const maxLength = Math.max(0, arr?.length, newArr?.length); + return Array.from({ length: maxLength }, (_, i) => + createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }), + ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged'); +} + +function getType(value: unknown): 'object' | 'array' | 'value' { + if (value === null) { + return 'value'; + } + if (Array.isArray(value)) { + return 'array'; + } + if (typeof value === 'object') { + return 'object'; + } + return 'value'; +} + +function getStatus(value: unknown, newValue: unknown): DifferenceStatus { + if (value === undefined) { + return 'added'; + } + + if (newValue === undefined) { + return 'removed'; + } + + const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object'; + const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array'; + const bothAreDeepEqual = _.isEqual(value, newValue); + + if (bothAreDeepEqual) { + return 'unchanged'; + } + + if (bothAreObjects || bothAreArrays) { + return 'children-updated'; + } + + return 'updated'; +} diff --git a/src/tools/json-diff/json-diff.types.ts b/src/tools/json-diff/json-diff.types.ts new file mode 100644 index 0000000..8cf58ad --- /dev/null +++ b/src/tools/json-diff/json-diff.types.ts @@ -0,0 +1,29 @@ +export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated'; + +export type ObjectDifference = { + key: string | number; + type: 'object'; + children: Difference[]; + status: DifferenceStatus; + oldValue: unknown; + value: unknown; +}; + +export type ValueDifference = { + key: string | number; + type: 'value'; + value: unknown; + oldValue: unknown; + status: DifferenceStatus; +}; + +export type ArrayDifference = { + key: number | string; + type: 'array'; + children: Difference[]; + status: DifferenceStatus; + oldValue: unknown; + value: unknown; +}; + +export type Difference = ObjectDifference | ValueDifference | ArrayDifference; 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> diff --git a/src/ui/theme/themes.ts b/src/ui/theme/themes.ts index 94c87f6..eca63db 100644 --- a/src/ui/theme/themes.ts +++ b/src/ui/theme/themes.ts @@ -4,6 +4,7 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({ light: { text: { baseColor: 'rgb(51, 54, 57)', + mutedColor: 'rgba(118, 124, 130)', }, primary: { @@ -17,10 +18,23 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({ colorHover: '#f59e0b', colorPressed: '#f59e0b', }, + success: { + color: '#18a058', + colorHover: '#36ad6a', + colorPressed: '#0c7a43', + colorFaded: '#18a0582f', + }, + error: { + color: '#d03050', + colorHover: '#de576d', + colorPressed: '#ab1f3f', + colorFaded: '#d030502a', + }, }, dark: { text: { baseColor: 'rgba(255, 255, 255, 0.82)', + mutedColor: 'rgba(255, 255, 255, 0.5)', }, primary: { @@ -33,5 +47,17 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({ colorHover: '#f59e0b', colorPressed: '#f59e0b', }, + success: { + color: '#18a058', + colorHover: '#36ad6a', + colorPressed: '#0c7a43', + colorFaded: '#18a0582f', + }, + error: { + color: '#e88080', + colorHover: '#e98b8b', + colorPressed: '#e57272', + colorFaded: '#e8808029', + }, }, }); |