Skip to content

Commit 65917b4

Browse files
stafyniaksachastafyniaksacha
committed
rework of code extandable display + remove dependancy on ionicons + README & example
1 parent c29fa56 commit 65917b4

24 files changed

+6461
-4064
lines changed

Diff for: ‎README.md

+86-31
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,119 @@
11
# vue-json-viewer
22

3-
Simple json display component, based on vue
3+
Simple JSON viewer component, for Vue.js 2
44

55
## Installing:
66
Using npm:
77
```
88
$ npm install vue-json-viewer
99
```
10-
Using bower:
11-
1210

11+
Using yarn:
1312
```
1413
$ yarn add vue-json-viewer
1514
```
1615

1716
## Example:
1817

1918
``` html
19+
<json-viewer :value="jsonData"></json-viewer>
20+
21+
<hr />
22+
2023
<json-viewer
2124
:value="jsonData"
22-
:show-copy="true"
23-
icon-prefix="ion"
24-
:show-bigger="true"
25-
:sort-keys="true" />
25+
:expand-depth=5
26+
copyable
27+
boxed
28+
sort></json-viewer>
2629
```
2730

2831
``` js
29-
export default {
30-
name: 'Page',
32+
import Vue from 'vue'
33+
import JsonViewer from '../lib'
34+
35+
// Import JsonViewer as a Vue.js plugin
36+
Vue.use(JsonViewer)
37+
38+
new Vue({
39+
el: '#app',
3140
data() {
3241
return {
3342
jsonData: {
34-
name: [
35-
{key: 2},
36-
{key: 'hello word'},
37-
],
38-
val: {
39-
c: () = {},
40-
b: 'a',
41-
a: 'hello word',
42-
asd2: 1,
43-
asd: false,
44-
foo: null,
45-
bar: undefined
46-
}
43+
total: 25,
44+
limit: 10,
45+
skip: 0,
46+
links: {
47+
previous: undefined,
48+
next: function () {},
49+
},
50+
data: [
51+
{
52+
id: '5968fcad629fa84ab65a5247',
53+
firstname: 'Ada',
54+
lastname: 'Lovelace',
55+
awards: null,
56+
known: [
57+
'mathematics',
58+
'computing'
59+
],
60+
position: {
61+
lat: 44.563836,
62+
lng: 6.495139
63+
},
64+
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
65+
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
66+
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
67+
and published the first algorithm intended to be carried out by such a machine.
68+
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
69+
bornAt: '1815-12-10T00:00:00.000Z',
70+
diedAt: '1852-11-27T00:00:00.000Z'
71+
}, {
72+
id: '5968fcad629fa84ab65a5246',
73+
firstname: 'Grace',
74+
lastname: 'Hopper',
75+
awards: [
76+
'Defense Distinguished Service Medal',
77+
'Legion of Merit',
78+
'Meritorious Service Medal',
79+
'American Campaign Medal',
80+
'World War II Victory Medal',
81+
'National Defense Service Medal',
82+
'Armed Forces Reserve Medal',
83+
'Naval Reserve Medal',
84+
'Presidential Medal of Freedom'
85+
],
86+
known: null,
87+
position: {
88+
lat: 43.614624,
89+
lng: 3.879995
90+
},
91+
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
92+
was an American computer scientist and United States Navy rear admiral.
93+
One of the first programmers of the Harvard Mark I computer,
94+
she was a pioneer of computer programming who invented one of the first compiler related tools.
95+
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
96+
an early high-level programming language still in use today.`,
97+
bornAt: '1815-12-10T00:00:00.000Z',
98+
diedAt: '1852-11-27T00:00:00.000Z'
99+
}
100+
]
47101
}
48102
}
49103
}
50-
}
104+
})
51105
```
52106
## Result:
53-
![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png)
107+
![preview](./example/preview.png)
54108

55109

56110
## Options:
57111

58-
| Property | Description |
59-
| ----------- |:------------- |
60-
| value | json data |
61-
| show-copy | display the copy button |
62-
| show-bigger | display the bigger button |
63-
| icon-prefix | Custom Font icon prefix |
64-
| sort-keys | Sort items by key names |
112+
| Property | Description | Default |
113+
| ----------- |:------------- | ----------- |
114+
| `value` | JSON data (can be used with `v-model`) | **Required** |
115+
| `expand-depth` | Display the copy button | `1` |
116+
| `copyable` | Display the copy button | `false` |
117+
| `sort` | Sort keys before displaying | `false` |
118+
| `boxed` | Add a fancy "boxed" style to component | `false` |
119+
| `theme` | Add a custom CSS class for theming purposes | `jv-light` |

Diff for: ‎example/app.js

+69-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,72 @@
1-
import Vue from 'vue';
2-
import JsonViewer from '../lib';
3-
import './css/ionicons.css';
1+
import Vue from 'vue'
2+
import JsonViewer from '../lib'
3+
4+
Vue.use(JsonViewer)
45

56
new Vue({
6-
el: '#app',
7-
data() {
8-
return {
9-
jsonData: {
10-
name: [
11-
{key: 2},
12-
{key: 'hello word'},
13-
],
14-
val: {
15-
c: function() {},
16-
b: 'a',
17-
a: 'hello word',
18-
asd2: 1,
19-
asd: false,
20-
foo: null,
21-
bar: undefined
22-
}
23-
}
24-
}
25-
},
26-
components: {JsonViewer}
7+
el: '#app',
8+
data() {
9+
return {
10+
jsonData: {
11+
total: 25,
12+
limit: 10,
13+
skip: 0,
14+
links: {
15+
previous: undefined,
16+
next: function () {},
17+
},
18+
data: [
19+
{
20+
id: '5968fcad629fa84ab65a5247',
21+
firstname: 'Ada',
22+
lastname: 'Lovelace',
23+
awards: null,
24+
known: [
25+
'mathematics',
26+
'computing'
27+
],
28+
position: {
29+
lat: 44.563836,
30+
lng: 6.495139
31+
},
32+
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
33+
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
34+
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
35+
and published the first algorithm intended to be carried out by such a machine.
36+
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
37+
bornAt: '1815-12-10T00:00:00.000Z',
38+
diedAt: '1852-11-27T00:00:00.000Z'
39+
}, {
40+
id: '5968fcad629fa84ab65a5246',
41+
firstname: 'Grace',
42+
lastname: 'Hopper',
43+
awards: [
44+
'Defense Distinguished Service Medal',
45+
'Legion of Merit',
46+
'Meritorious Service Medal',
47+
'American Campaign Medal',
48+
'World War II Victory Medal',
49+
'National Defense Service Medal',
50+
'Armed Forces Reserve Medal',
51+
'Naval Reserve Medal',
52+
'Presidential Medal of Freedom'
53+
],
54+
known: null,
55+
position: {
56+
lat: 43.614624,
57+
lng: 3.879995
58+
},
59+
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
60+
was an American computer scientist and United States Navy rear admiral.
61+
One of the first programmers of the Harvard Mark I computer,
62+
she was a pioneer of computer programming who invented one of the first compiler related tools.
63+
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
64+
an early high-level programming language still in use today.`,
65+
bornAt: '1815-12-10T00:00:00.000Z',
66+
diedAt: '1852-11-27T00:00:00.000Z'
67+
}
68+
]
69+
}
70+
}
71+
}
2772
})

Diff for: ‎example/css/ionicons.css

-1,480
This file was deleted.

Diff for: ‎example/css/ionicons.min.css

-11
This file was deleted.

Diff for: ‎example/fonts/ionicons.eot

-118 KB
Binary file not shown.

0 commit comments

Comments
 (0)