├── index.js
├── img
    ├── compare.png
    └── version3.png
├── package.json
├── src
    ├── normalTree.vue
    ├── tree.vue
    ├── complexTree.vue
    ├── index.vue
    └── utils.js
├── LICENSE
└── README.md


/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | module.exports = require('./src/index.vue');
3 | 


--------------------------------------------------------------------------------
/img/compare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5SSS/vue-json-compare/HEAD/img/compare.png


--------------------------------------------------------------------------------
/img/version3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5SSS/vue-json-compare/HEAD/img/version3.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-json-compare",
 3 |   "version": "3.0.0",
 4 |   "description": "A vue(2.x) components for compare JSON data",
 5 |   "main": "./index.js",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "json",
 9 |     "compare"
10 |   ],
11 |   "author": "alpaca",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "vue": "^2.6.11"
15 |   }
16 | }


--------------------------------------------------------------------------------
/src/normalTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p :class="`c-json-p c-line-${lineType}`" :style="getIndent(level)">
 3 |     <span class="c-json-mark">{{ line }}</span>
 4 |     <span :class="`c-of-${lineType}`"></span>
 5 |     <span class="c-json-content">
 6 |       <span v-if="showIndex" class="c-json-key">{{ name }}: </span>
 7 |       <span :class="`c-json-${type}`">{{ value }}</span>
 8 |       <span class="c-json-comma">{{ needComma ? ',' : '' }}</span>
 9 |     </span>
10 |   </p>
11 | </template>
12 | <script>
13 | import { getIndent } from './utils.js';
14 | export default {
15 |   props: {
16 |     name: [String, Number],
17 |     value: [Array, String],
18 |     type: String,
19 |     line: Number,
20 |     showIndex: Boolean,
21 |     needComma: Boolean,
22 |     level: {
23 |       default: 1,
24 |     },
25 |     lineType: String,
26 |     lastLineType: String,
27 |     lastLine: {
28 |       default: null,
29 |     },
30 |   },
31 |   methods: {
32 |     getIndent: getIndent,
33 |   },
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/tree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Component
 3 |     :is="needFormat(type) ? 'ComplexTree' : 'NormalTree'"
 4 |     :name="name"
 5 |     :value="value"
 6 |     :type="type"
 7 |     :line="line"
 8 |     :showIndex="showIndex"
 9 |     :needComma="needComma"
10 |     :level="level"
11 |     :lineType="lineType"
12 |     :lastLineType="lastLineType"
13 |     :lastLine="lastLine"
14 |   />
15 | </template>
16 | 
17 | <script>
18 | import { needFormat } from './utils.js';
19 | import ComplexTree from './complexTree.vue';
20 | import NormalTree from './normalTree.vue';
21 | export default {
22 |   props: {
23 |     name: [String, Number],
24 |     value: [Array, String],
25 |     type: String,
26 |     line: Number,
27 |     showIndex: Boolean,
28 |     needComma: Boolean,
29 |     level: {
30 |       default: 1,
31 |     },
32 |     lineType: String,
33 |     lastLineType: String,
34 |     lastLine: {
35 |       default: null,
36 |     },
37 |   },
38 |   components: {
39 |     ComplexTree,
40 |     NormalTree,
41 |   },
42 |   methods: {
43 |     needFormat: needFormat,
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | Copyright (c) 2018 
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20 | SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-json-compare
 2 | 
 3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/5SSS/vue-json-compare)
 4 | 
 5 | A vue(2.x) components for compare Object or Array
 6 | 
 7 | ## Links
 8 | 
 9 | - [Github](https://github.com/5SSS/vue-json-compare)
10 | 
11 | ## Install
12 | 
13 | ```js
14 | npm install --save vue-json-compare
15 | ```
16 | 
17 | ## Usage
18 | 
19 | ```html
20 | <template>
21 |   <div>
22 |     <vue-json-compare :oldData="oldData" :newData="newData"></vue-json-compare>
23 |   </div>
24 | </template>
25 | ```
26 | 
27 | ```js
28 | import vueJsonCompare from 'vue-json-compare';
29 | const oldData = {
30 |   name: 'super',
31 |   age: 18,
32 |   task: [
33 |     { name: 'eat', time: '09:00' },
34 |     { name: 'work', time: '10:00', deleted: 'this prop has been deleted!' },
35 |     { name: 'sleep', time: '22:00' },
36 |   ],
37 | };
38 | const newData = {
39 |   name: 'coolapt',
40 |   age: 20,
41 |   task: [
42 |     { name: 'eat', time: '09:00' },
43 |     { name: 'work', time: '10:00' },
44 |     { name: 'sleep', time: '23:00' },
45 |     { name: 'running', time: '08:00' },
46 |   ],
47 | };
48 | export default {
49 |   components: {
50 |     vueJsonCompare,
51 |   },
52 |   data() {
53 |     return {
54 |       oldData: oldData,
55 |       newData: newData,
56 |     };
57 |   },
58 | };
59 | ```
60 | 
61 | ## Result
62 | 
63 | ![示例](./img/version3.png)
64 | 
65 | ## Props
66 | 
67 | | Attribute | Level | Description | Type                                          | Default |
68 | | --------- | ----- | ----------- | --------------------------------------------- | ------- |
69 | | oldData   | basic | json data   | object or object Array, {...}, [{...}, {...}] | -       |
70 | | newData   | basic | json data   | object or object Array, {...}, [{...}, {...}] | -       |
71 | 
72 | ## Events
73 | 
74 | not yet...
75 | 
76 | ## PS
77 | 
78 | 如果喜欢请给个星星，谢谢。
79 | If you like, please give me a star, thank you.
80 | 
81 | 如果需要帮助: QQ:1573815240 邮箱: 1573815240@qq.com
82 | if you need help: QQ:1573815240 email: 1573815240@qq.com
83 | 


--------------------------------------------------------------------------------
/src/complexTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="c-json-line">
 3 |     <p
 4 |       :class="`c-json-p c-line-${lineType}`"
 5 |       @click="setVisiable"
 6 |       :style="getIndent(level)"
 7 |     >
 8 |       <span class="c-json-mark">{{ line }}</span>
 9 |       <span :class="`c-of-${lineType}`"></span>
10 |       <span class="c-json-content">
11 |         <span v-if="showIndex" class="c-json-key">{{ name }}: </span>
12 |         <span class="c-json-pt">{{ isArray(type) ? '[' : '{' }}</span>
13 |       </span>
14 |       <span v-show="!visiable" class="c-json-pt"
15 |         >{{ isArray(type) ? '...]' : '...}' }}{{ needComma ? ',' : '' }}</span
16 |       >
17 |     </p>
18 |     <div :style="{ display: visiable ? 'block' : 'none' }">
19 |       <slot v-for="(item, index) in value">
20 |         <Component
21 |           :is="needFormat(item.type) ? 'self' : 'NormalTree'"
22 |           :key="index"
23 |           :level="level + 1"
24 |           :name="item.name"
25 |           :value="item.value"
26 |           :type="item.type"
27 |           :line="item.line"
28 |           :showIndex="item.showIndex"
29 |           :needComma="item.needComma"
30 |           :lineType="item.lineType"
31 |           :lastLineType="item.lastLineType"
32 |           :lastLine="item.lastLine"
33 |         />
34 |       </slot>
35 |       <p
36 |         class="c-json-feet"
37 |         :class="`c-json-p c-line-${lineType}`"
38 |         :style="getIndent(level)"
39 |       >
40 |         <span v-if="lastLine" class="c-json-mark">{{ lastLine }}</span>
41 |         <span v-if="lastLineType" :class="`c-of-${lastLineType}`"></span>
42 |         <span class="c-json-pt"
43 |           >{{ isArray(type) ? ']' : '}' }}{{ needComma ? ',' : '' }}</span
44 |         >
45 |       </p>
46 |     </div>
47 |   </div>
48 | </template>
49 | <script>
50 | import { isArray, getIndent, getType, needFormat } from './utils.js';
51 | import NormalTree from './normalTree.vue';
52 | export default {
53 |   name: 'self',
54 |   props: {
55 |     name: [String, Number],
56 |     value: [Array, String],
57 |     type: String,
58 |     line: Number,
59 |     showIndex: Boolean,
60 |     needComma: Boolean,
61 |     level: {
62 |       default: 1,
63 |     },
64 |     lineType: String,
65 |     lastLineType: String,
66 |     lastLine: {
67 |       default: null,
68 |     },
69 |   },
70 |   components: {
71 |     NormalTree,
72 |   },
73 |   data() {
74 |     return {
75 |       visiable: true,
76 |     };
77 |   },
78 |   methods: {
79 |     setVisiable() {
80 |       this.visiable = !this.visiable;
81 |     },
82 |     isArray: isArray,
83 |     getIndent: getIndent,
84 |     getType: getType,
85 |     needFormat: needFormat,
86 |   },
87 | };
88 | </script>
89 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <pre class="c-json-view">
  3 |     <p class="c-json-outter">{{isArray(newData) ? '[' : '{'}}</p>
  4 |       <Tree 
  5 |         v-for="(item, index) in mergeView" 
  6 |         :key="index" 
  7 |         :name="item.name"
  8 |         :value="item.value"
  9 |         :type="item.type"
 10 |         :line="item.line"
 11 |         :showIndex="item.showIndex"
 12 |         :needComma="item.needComma"
 13 |         :lineType="item.lineType"
 14 |         :lastLineType="item.lastLineType"
 15 |         :lastLine="item.lastLine" />
 16 |     <p class="c-json-outter">{{isArray(newData) ? ']' : '}'}}</p>
 17 |   </pre>
 18 | </template>
 19 | 
 20 | <script>
 21 | import { mergeData, isArray } from './utils.js';
 22 | import Tree from './tree.vue';
 23 | export default {
 24 |   props: ['oldData', 'newData'],
 25 |   components: {
 26 |     Tree,
 27 |   },
 28 |   data() {
 29 |     return {
 30 |       mergeView: [],
 31 |     };
 32 |   },
 33 |   watch: {
 34 |     oldData() {
 35 |       this.updateView();
 36 |     },
 37 |     newData() {
 38 |       this.updateView();
 39 |     },
 40 |   },
 41 |   methods: {
 42 |     isArray: isArray,
 43 |     updateView() {
 44 |       this.mergeView = mergeData(this.oldData, this.newData);
 45 |     },
 46 |   },
 47 |   mounted() {
 48 |     this.updateView();
 49 |   },
 50 | };
 51 | </script>
 52 | 
 53 | <style>
 54 | .c-json-view {
 55 |   display: block;
 56 |   width: 100%;
 57 |   padding: 10px 10px 10px 40px;
 58 |   background-color: #fbfbfb;
 59 |   box-sizing: border-box;
 60 |   white-space: pre-wrap;
 61 |   word-wrap: break-word;
 62 |   overflow: hidden;
 63 | }
 64 | 
 65 | .c-json-line,
 66 | .c-json-p,
 67 | .c-json-feet {
 68 |   position: relative;
 69 |   text-align: left;
 70 |   padding: 0;
 71 |   margin: 0;
 72 |   padding: 2px 0;
 73 | }
 74 | 
 75 | .c-json-line {
 76 |   padding: 0;
 77 | }
 78 | 
 79 | .c-line-del {
 80 |   background-color: #ffeef0;
 81 | }
 82 | 
 83 | .c-line-add {
 84 |   background-color: #e6ffed;
 85 | }
 86 | 
 87 | .c-of-del:after {
 88 |   content: '-';
 89 |   position: absolute;
 90 |   left: 5px;
 91 |   top: 3px;
 92 |   width: 10px;
 93 |   height: 15px;
 94 |   z-index: 5;
 95 |   text-indent: 0;
 96 |   color: #ff6f6f;
 97 | }
 98 | 
 99 | .c-of-add:after {
100 |   content: '+';
101 |   position: absolute;
102 |   left: 5px;
103 |   top: 3px;
104 |   width: 10px;
105 |   height: 15px;
106 |   z-index: 5;
107 |   color: #3eb93e;
108 |   text-indent: 0;
109 | }
110 | 
111 | .c-json-p {
112 |   cursor: pointer;
113 | }
114 | .c-json-p:hover {
115 |   background: #f6f6f6;
116 | }
117 | 
118 | .c-json-outter {
119 |   transform: translateX(-35px);
120 | }
121 | 
122 | .c-json-mark {
123 |   position: absolute;
124 |   left: -30px;
125 |   top: 2px;
126 |   text-indent: 0;
127 |   font-size: 12px;
128 |   color: #545454;
129 |   z-index: 5;
130 |   user-select: none;
131 |   -moz-user-select: none;
132 |   -ms-user-select: none;
133 |   -webkit-user-select: none;
134 | }
135 | 
136 | .c-json-content {
137 |   font-size: 14px;
138 | }
139 | 
140 | .c-json-content .c-json-key {
141 |   font-size: 15px;
142 |   color: #5cadff;
143 | }
144 | 
145 | .c-json-items {
146 |   color: #b1b1b1;
147 | }
148 | 
149 | .c-json-comma {
150 |   color: #5cadff;
151 | }
152 | 
153 | .c-json-pt {
154 |   color: #5cadff;
155 | }
156 | 
157 | .c-json-number {
158 |   color: #ae81ff;
159 | }
160 | 
161 | .c-json-string {
162 |   color: #a6e22e;
163 | }
164 | 
165 | .c-json-null,
166 | .c-json-boolean,
167 | .c-json-undefined,
168 | .c-json-regexp,
169 | .c-json-date,
170 | .c-json-set,
171 | .c-json-map,
172 | .c-json-error,
173 | .c-json-symbol,
174 | .c-json-function {
175 |   background-color: #f7f7f7;
176 |   border-radius: 3px;
177 |   padding: 0px 2px;
178 |   border: 1px solid #dedede;
179 | }
180 | 
181 | .c-json-boolean {
182 |   color: #6f73ff;
183 | }
184 | 
185 | .c-json-null {
186 |   color: #66d9ef;
187 | }
188 | 
189 | .c-json-undefined {
190 |   color: #f92672;
191 | }
192 | 
193 | .c-json-date {
194 |   color: #09d3ac;
195 | }
196 | 
197 | .c-json-regexp {
198 |   color: #2ea021;
199 | }
200 | 
201 | .c-json-function {
202 |   color: #a2af3d;
203 | }
204 | 
205 | .c-json-symbol {
206 |   color: #fd3db8;
207 | }
208 | 
209 | .c-json-error {
210 |   color: #afafaf;
211 | }
212 | 
213 | .c-json-set,
214 | .c-json-map {
215 |   color: #f56847;
216 | }
217 | </style>
218 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | const isArray = (item) => {
  2 |   if (item === 'array') {
  3 |     return true;
  4 |   }
  5 |   return Object.prototype.toString.call(item) === '[object Array]';
  6 | };
  7 | 
  8 | const isObject = (item) => {
  9 |   return Object.prototype.toString.call(item) === '[object Object]';
 10 | };
 11 | 
 12 | const needFormat = (type) => {
 13 |   return type === 'array' || type === 'object';
 14 | };
 15 | 
 16 | const getIndent = (level) => {
 17 |   if (level === 1) {
 18 |     return { textIndent: '20px' };
 19 |   }
 20 |   return { textIndent: `${level * 20}px` };
 21 | };
 22 | 
 23 | const getType = (item) => {
 24 |   let t = Object.prototype.toString.call(item);
 25 |   let match = /(?!\[).+(?=\])/g;
 26 |   t = t.match(match)[0].split(' ')[1];
 27 |   return t.toLowerCase();
 28 | };
 29 | 
 30 | const isComplexType = (param) => {
 31 |   return isObject(param) || isArray(param);
 32 | };
 33 | 
 34 | const isTheSametype = (a, b) => {
 35 |   return (
 36 |     Object.prototype.toString.call(a) === Object.prototype.toString.call(b)
 37 |   );
 38 | };
 39 | 
 40 | const mergeData = (_old, _new) => {
 41 |   // finally result
 42 |   let result = [];
 43 |   // each line No.
 44 |   let start = 1;
 45 | 
 46 |   // convert array or object to Array<object> [{}]
 47 |   const convertObject = (param, lineType) => {
 48 |     let list = [];
 49 |     if (isComplexType(param)) {
 50 |       let showIndex = getType(param) === 'object';
 51 |       let keys = Object.keys(param);
 52 |       let length = keys.length;
 53 |       keys.forEach((key, index) => {
 54 |         let type = getType(param[key]);
 55 |         list.push({
 56 |           name: key,
 57 |           line: start++,
 58 |           value: convertObject(param[key], lineType),
 59 |           type: type,
 60 |           showIndex: showIndex,
 61 |           needComma: length !== index + 1,
 62 |           lineType: lineType,
 63 |           lastLineType: lineType,
 64 |           lastLine: isComplexType(param[key]) ? start++ : null,
 65 |         });
 66 |       });
 67 |       return list;
 68 |     } else {
 69 |       switch (getType(param)) {
 70 |         case 'number':
 71 |         case 'boolean':
 72 |         case 'regexp':
 73 |           return param.toString();
 74 |         case 'null':
 75 |           return 'null';
 76 |         case 'undefined':
 77 |           return 'undefined';
 78 |         case 'function':
 79 |           return ' ƒ() {...}';
 80 |         default:
 81 |           return `"${param.toString()}"`;
 82 |       }
 83 |     }
 84 |   };
 85 | 
 86 |   // return parsed data
 87 |   const parseValue = (key, value, showIndex, needComma, lineType) => {
 88 |     return {
 89 |       name: key,
 90 |       line: start++,
 91 |       value: convertObject(value, lineType),
 92 |       type: getType(value),
 93 |       showIndex: showIndex,
 94 |       needComma: needComma,
 95 |       lineType: lineType,
 96 |       lastLineType: lineType,
 97 |       lastLine: isComplexType(value) ? start++ : null,
 98 |     };
 99 |   };
100 | 
101 |   // merge two vars to target,target type Array<object>[{}]
102 |   const parseData = (a, b, target) => {
103 |     let _ar = Object.keys(a);
104 |     let _br = Object.keys(b);
105 |     let showIndex = isObject(b);
106 |     // deleted keys
107 |     let _del = _ar.filter((ak) => !_br.some((bk) => bk === ak));
108 |     // not removed keys
109 |     let _stl = _ar.filter((ak) => _br.some((bk) => bk === ak));
110 |     // new added keys
111 |     let _add = _br.filter((bk) => !_ar.some((ak) => ak === bk));
112 |     // push deleted keys
113 |     _del.forEach((key, index) => {
114 |       let needComma = true;
115 |       if (_stl.length === 0 && _add.length === 0 && index === _del.length - 1) {
116 |         needComma = false;
117 |       }
118 |       target.push(parseValue(key, a[key], showIndex, needComma, 'del'));
119 |     });
120 |     // The core function: compare
121 |     _stl.forEach((key, index) => {
122 |       let needComma = true;
123 |       if (_add.length === 0 && index === _stl.length - 1) {
124 |         needComma = false;
125 |       }
126 |       if (a[key] === b[key]) {
127 |         target.push(parseValue(key, b[key], showIndex, needComma, 'none'));
128 |       } else if (isTheSametype(a[key], b[key])) {
129 |         if (isComplexType(b[key])) {
130 |           let _target = parseValue(
131 |             key,
132 |             isArray(a[key]) ? [] : {},
133 |             showIndex,
134 |             needComma,
135 |             'none'
136 |           );
137 |           target.push(_target);
138 |           // back one step
139 |           start -= 1;
140 |           // go inside
141 |           parseData(a[key], b[key], _target.value);
142 |           // rewrite lastline
143 |           _target.lastLine = start++;
144 |         } else {
145 |           target.push(parseValue(key, a[key], showIndex, true, 'del'));
146 |           target.push(parseValue(key, b[key], showIndex, needComma, 'add'));
147 |         }
148 |       } else {
149 |         target.push(parseValue(key, a[key], showIndex, true, 'del'));
150 |         target.push(parseValue(key, b[key], showIndex, needComma, 'add'));
151 |       }
152 |     });
153 |     // push new keys
154 |     _add.forEach((key, index) => {
155 |       target.push(
156 |         parseValue(key, b[key], showIndex, _add.length !== index + 1, 'add')
157 |       );
158 |     });
159 |   };
160 | 
161 |   if (isTheSametype(_old, _new) && isComplexType(_new)) {
162 |     parseData(_old, _new, result);
163 |   } else {
164 |     if (_old === _new) {
165 |       result.push(parseValue(0, _new, false, false, 'none'));
166 |     } else {
167 |       result.push(parseValue(0, _old, false, true, 'del'));
168 |       result.push(parseValue(1, _new, false, false, 'add'));
169 |     }
170 |   }
171 |   return result;
172 | };
173 | 
174 | export {
175 |   isArray,
176 |   isObject,
177 |   needFormat,
178 |   getIndent,
179 |   getType,
180 |   isComplexType,
181 |   isTheSametype,
182 |   mergeData,
183 | };
184 | 


--------------------------------------------------------------------------------