json-diff-viewer-component 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -4
- package/package.json +4 -1
- package/src/lib/styles.js +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/
|
|
2
|
+
<img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/logo.svg" alt="logo" height="128" />
|
|
3
3
|
<h2>json-diff-viewer</h2>
|
|
4
4
|
<h5>
|
|
5
5
|
Compare JSON side-by-side, visually
|
|
@@ -8,13 +8,12 @@
|
|
|
8
8
|
A zero-dependency web component for visualizing JSON differences
|
|
9
9
|
<br>
|
|
10
10
|
with synchronized scrolling, collapsible nodes, and syntax highlighting
|
|
11
|
-
<br>
|
|
12
|
-
Perfect for debugging, API comparisons, and configuration diffs
|
|
13
11
|
</p>
|
|
14
|
-
<img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/screenshot.png" alt="demo" width="80%" />
|
|
15
12
|
<h5>
|
|
16
13
|
<a href="https://metaory.github.io/json-diff-viewer-component/" target="_blank">metaory.github.io/json-diff-viewer-component</a>
|
|
17
14
|
</h5>
|
|
15
|
+
<img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot.jpg" alt="demo" width="80%" />
|
|
16
|
+
<img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot-light.jpg" alt="demo-light" width="80%" />
|
|
18
17
|
</div>
|
|
19
18
|
|
|
20
19
|
## Features
|
package/package.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "json-diff-viewer-component",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Vanilla JS web component for side-by-side JSON diff visualization",
|
|
6
|
+
"bugs": "https://github.com/metaory/json-diff-viewer-component/issues",
|
|
7
|
+
"homepage": "https://metaory.github.io/json-diff-viewer-component/",
|
|
8
|
+
"repository": "git+https://github.com/metaory/json-diff-viewer-component.git",
|
|
6
9
|
"keywords": [
|
|
7
10
|
"json",
|
|
8
11
|
"diff",
|
package/src/lib/styles.js
CHANGED
|
@@ -47,7 +47,7 @@ export default `
|
|
|
47
47
|
.switch { display: inline-block; cursor: pointer; }
|
|
48
48
|
.checkbox { display: none; }
|
|
49
49
|
.slider { width: 48px; height: 24px; background-color: var(--bdr); border-radius: 16px; overflow: hidden; display: flex; align-items: center; border: 3px solid transparent; transition: .3s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) inset; cursor: pointer; }
|
|
50
|
-
.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--
|
|
50
|
+
.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--br); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
|
|
51
51
|
.checkbox:checked ~ .slider::before { transform: translateX(24px); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
|
|
52
52
|
.checkbox:checked ~ .slider { background-color: var(--slider); }
|
|
53
53
|
.checkbox:active ~ .slider::before { transform: translate(0); }
|