aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-04-22 00:49:03 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-04-23 15:24:20 +0200
commit362f2fa280fdab210074e9a7e01dde6187924d29 (patch)
tree2a17c13e1db19e0b244cda22eabf8e107218f6b9
parent61ece2387f7061d67177ee41c35db572ffeb84a7 (diff)
downloadit-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.ts264
-rw-r--r--src/composable/copy.ts5
-rw-r--r--src/tools/index.ts2
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.models.tsx119
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.vue110
-rw-r--r--src/tools/json-diff/index.ts12
-rw-r--r--src/tools/json-diff/json-diff.e2e.spec.ts39
-rw-r--r--src/tools/json-diff/json-diff.models.test.ts80
-rw-r--r--src/tools/json-diff/json-diff.models.ts140
-rw-r--r--src/tools/json-diff/json-diff.types.ts29
-rw-r--r--src/tools/json-diff/json-diff.vue59
-rw-r--r--src/ui/theme/themes.ts26
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',
+ },
},
});