mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-14 18:42:31 +03:00
rework of code extandable display + remove dependancy on ionicons + README & example
This commit is contained in:
STAFYNIAK Sacha
@@ -1,15 +1,14 @@
|
||||
# vue-json-viewer
|
||||
|
||||
Simple json display component, based on vue
|
||||
Simple JSON viewer component, for Vue.js 2
|
||||
|
||||
## Installing:
|
||||
Using npm:
|
||||
```
|
||||
$ npm install vue-json-viewer
|
||||
```
|
||||
Using bower:
|
||||
|
||||
|
||||
Using yarn:
|
||||
```
|
||||
$ yarn add vue-json-viewer
|
||||
```
|
||||
@@ -17,48 +16,104 @@ $ yarn add vue-json-viewer
|
||||
## Example:
|
||||
|
||||
``` html
|
||||
<json-viewer :value="jsonData"></json-viewer>
|
||||
|
||||
<hr />
|
||||
|
||||
<json-viewer
|
||||
:value="jsonData"
|
||||
:show-copy="true"
|
||||
icon-prefix="ion"
|
||||
:show-bigger="true"
|
||||
:sort-keys="true" />
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
```
|
||||
|
||||
``` js
|
||||
export default {
|
||||
name: 'Page',
|
||||
import Vue from 'vue'
|
||||
import JsonViewer from '../lib'
|
||||
|
||||
// Import JsonViewer as a Vue.js plugin
|
||||
Vue.use(JsonViewer)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
name: [
|
||||
{key: 2},
|
||||
{key: 'hello word'},
|
||||
],
|
||||
val: {
|
||||
c: () = {},
|
||||
b: 'a',
|
||||
a: 'hello word',
|
||||
asd2: 1,
|
||||
asd: false,
|
||||
foo: null,
|
||||
bar: undefined
|
||||
}
|
||||
total: 25,
|
||||
limit: 10,
|
||||
skip: 0,
|
||||
links: {
|
||||
previous: undefined,
|
||||
next: function () {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: '5968fcad629fa84ab65a5247',
|
||||
firstname: 'Ada',
|
||||
lastname: 'Lovelace',
|
||||
awards: null,
|
||||
known: [
|
||||
'mathematics',
|
||||
'computing'
|
||||
],
|
||||
position: {
|
||||
lat: 44.563836,
|
||||
lng: 6.495139
|
||||
},
|
||||
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
|
||||
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
|
||||
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
||||
and published the first algorithm intended to be carried out by such a machine.
|
||||
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}, {
|
||||
id: '5968fcad629fa84ab65a5246',
|
||||
firstname: 'Grace',
|
||||
lastname: 'Hopper',
|
||||
awards: [
|
||||
'Defense Distinguished Service Medal',
|
||||
'Legion of Merit',
|
||||
'Meritorious Service Medal',
|
||||
'American Campaign Medal',
|
||||
'World War II Victory Medal',
|
||||
'National Defense Service Medal',
|
||||
'Armed Forces Reserve Medal',
|
||||
'Naval Reserve Medal',
|
||||
'Presidential Medal of Freedom'
|
||||
],
|
||||
known: null,
|
||||
position: {
|
||||
lat: 43.614624,
|
||||
lng: 3.879995
|
||||
},
|
||||
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
|
||||
was an American computer scientist and United States Navy rear admiral.
|
||||
One of the first programmers of the Harvard Mark I computer,
|
||||
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
||||
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
||||
an early high-level programming language still in use today.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
## Result:
|
||||
|
||||
|
||||
|
||||
|
||||
## Options:
|
||||
|
||||
| Property | Description |
|
||||
| ----------- |:------------- |
|
||||
| value | json data |
|
||||
| show-copy | display the copy button |
|
||||
| show-bigger | display the bigger button |
|
||||
| icon-prefix | Custom Font icon prefix |
|
||||
| sort-keys | Sort items by key names |
|
||||
| Property | Description | Default |
|
||||
| ----------- |:------------- | ----------- |
|
||||
| `value` | JSON data (can be used with `v-model`) | **Required** |
|
||||
| `expand-depth` | Display the copy button | `1` |
|
||||
| `copyable` | Display the copy button | `false` |
|
||||
| `sort` | Sort keys before displaying | `false` |
|
||||
| `boxed` | Add a fancy "boxed" style to component | `false` |
|
||||
| `theme` | Add a custom CSS class for theming purposes | `jv-light` |
|
||||
|
||||
+69
-24
@@ -1,27 +1,72 @@
|
||||
import Vue from 'vue';
|
||||
import JsonViewer from '../lib';
|
||||
import './css/ionicons.css';
|
||||
import Vue from 'vue'
|
||||
import JsonViewer from '../lib'
|
||||
|
||||
Vue.use(JsonViewer)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
name: [
|
||||
{key: 2},
|
||||
{key: 'hello word'},
|
||||
],
|
||||
val: {
|
||||
c: function() {},
|
||||
b: 'a',
|
||||
a: 'hello word',
|
||||
asd2: 1,
|
||||
asd: false,
|
||||
foo: null,
|
||||
bar: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {JsonViewer}
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
jsonData: {
|
||||
total: 25,
|
||||
limit: 10,
|
||||
skip: 0,
|
||||
links: {
|
||||
previous: undefined,
|
||||
next: function () {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: '5968fcad629fa84ab65a5247',
|
||||
firstname: 'Ada',
|
||||
lastname: 'Lovelace',
|
||||
awards: null,
|
||||
known: [
|
||||
'mathematics',
|
||||
'computing'
|
||||
],
|
||||
position: {
|
||||
lat: 44.563836,
|
||||
lng: 6.495139
|
||||
},
|
||||
description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
|
||||
chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
|
||||
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
||||
and published the first algorithm intended to be carried out by such a machine.
|
||||
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}, {
|
||||
id: '5968fcad629fa84ab65a5246',
|
||||
firstname: 'Grace',
|
||||
lastname: 'Hopper',
|
||||
awards: [
|
||||
'Defense Distinguished Service Medal',
|
||||
'Legion of Merit',
|
||||
'Meritorious Service Medal',
|
||||
'American Campaign Medal',
|
||||
'World War II Victory Medal',
|
||||
'National Defense Service Medal',
|
||||
'Armed Forces Reserve Medal',
|
||||
'Naval Reserve Medal',
|
||||
'Presidential Medal of Freedom'
|
||||
],
|
||||
known: null,
|
||||
position: {
|
||||
lat: 43.614624,
|
||||
lng: 3.879995
|
||||
},
|
||||
description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
|
||||
was an American computer scientist and United States Navy rear admiral.
|
||||
One of the first programmers of the Harvard Mark I computer,
|
||||
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
||||
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
||||
an early high-level programming language still in use today.`,
|
||||
bornAt: '1815-12-10T00:00:00.000Z',
|
||||
diedAt: '1852-11-27T00:00:00.000Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
File diff suppressed because one or more lines are too long
Vendored
-11
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 326 KiB |
Binary file not shown.
Binary file not shown.
+16
-15
@@ -1,22 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>examples</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>vue-json-viewer - example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<json-viewer :value="jsonData"></json-viewer>
|
||||
<hr />
|
||||
<json-viewer
|
||||
:value="jsonData"
|
||||
icon-prefix="ion"
|
||||
boxed
|
||||
sort
|
||||
show-copy
|
||||
show-bigger></json-viewer>
|
||||
</div>
|
||||
<div id="app">
|
||||
<json-viewer :value="jsonData"></json-viewer>
|
||||
|
||||
<hr />
|
||||
|
||||
<json-viewer
|
||||
:value="jsonData"
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
+1
-1
@@ -4,4 +4,4 @@ const install = Vue => {
|
||||
Vue.component('JsonViewer', JsonView)
|
||||
}
|
||||
|
||||
export default Object.assign(JsonView, {install})
|
||||
export default Object.assign(JsonView, { install })
|
||||
|
||||
+43
-36
@@ -1,60 +1,78 @@
|
||||
<template>
|
||||
<div class="jv-node">
|
||||
<span class="jv-toggle" :class="{open: !!toggle}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
|
||||
<span class="jv-key" v-if="keyName">
|
||||
{{keyName}}:
|
||||
</span>
|
||||
<commponent v-model="toggle"
|
||||
<commponent
|
||||
:expand.sync="expand"
|
||||
:is="`Json${valueType}`"
|
||||
:json-value="value"
|
||||
:key-name="keyName"
|
||||
:sort="sort"></commponent>
|
||||
:sort="sort"
|
||||
:depth="depth"></commponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JIcon from './json-icon'
|
||||
import JsonString from './types/json-string';
|
||||
import JsonUndefined from './types/json-undefined';
|
||||
import JsonNumber from './types/json-number';
|
||||
import JsonBoolean from './types/json-boolean';
|
||||
import JsonObject from './types/json-object';
|
||||
import JsonArray from './types/json-array';
|
||||
import JsonFunction from './types/json-function';
|
||||
import JsonString from './types/json-string'
|
||||
import JsonUndefined from './types/json-undefined'
|
||||
import JsonNumber from './types/json-number'
|
||||
import JsonBoolean from './types/json-boolean'
|
||||
import JsonObject from './types/json-object'
|
||||
import JsonArray from './types/json-array'
|
||||
import JsonFunction from './types/json-function'
|
||||
|
||||
export default {
|
||||
name: 'JsonBox',
|
||||
inject: ['expandDepth'],
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean, Function],
|
||||
keyName: String,
|
||||
sort: Boolean
|
||||
sort: Boolean,
|
||||
depth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toggle: true
|
||||
};
|
||||
expand: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNode() {
|
||||
this.toggle = !this.toggle;
|
||||
this.expand = !this.expand
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.expand = this.depth >= this.expandDepth ? false : true
|
||||
},
|
||||
computed: {
|
||||
valueType() {
|
||||
if (this.value === null || this.value === undefined) {
|
||||
return 'Undefined';
|
||||
return 'Undefined'
|
||||
} else if (Array.isArray(this.value)) {
|
||||
return 'Array';
|
||||
return 'Array'
|
||||
} else if (typeof this.value === 'object') {
|
||||
return 'Object';
|
||||
return 'Object'
|
||||
} else if (typeof this.value === 'number') {
|
||||
return 'Number';
|
||||
return 'Number'
|
||||
} else if (typeof this.value === 'string') {
|
||||
return 'String';
|
||||
return 'String'
|
||||
} else if (typeof this.value === 'boolean') {
|
||||
return 'Boolean';
|
||||
return 'Boolean'
|
||||
} else if (typeof this.value === 'function') {
|
||||
return 'Function';
|
||||
return 'Function'
|
||||
}
|
||||
},
|
||||
isObject() {
|
||||
@@ -68,19 +86,14 @@ export default {
|
||||
JsonObject,
|
||||
JsonArray,
|
||||
JsonFunction,
|
||||
JsonUndefined,
|
||||
JIcon
|
||||
JsonUndefined
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.jv-node {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #525252;
|
||||
font-family: Consolas,Menlo,Courier,monospace;
|
||||
white-space: nowrap;
|
||||
|
||||
&:after {
|
||||
content: ','
|
||||
@@ -90,13 +103,7 @@ export default {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
/*.j-icon {
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 3px;
|
||||
color: #80848f;
|
||||
cursor: pointer;
|
||||
}*/
|
||||
|
||||
& .jv-node {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<i class="j-icon" :class="{
|
||||
[`${iconPrefix}`]: true,
|
||||
[`${iconPrefix}-${type}`]: true
|
||||
}" @click="iconClick"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonIcon',
|
||||
inject: ['iconPrefix'],
|
||||
props: {
|
||||
iconPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
iconClick(e) {
|
||||
this.$emit('click', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+134
-96
@@ -1,37 +1,38 @@
|
||||
<template>
|
||||
<div :class="jvClass">
|
||||
<div class="jv-tooltip" v-if="tooltip">
|
||||
<j-icon v-if="showBigger" type="qr-scanner" @click="bigger"></j-icon>
|
||||
<j-icon v-if="copied" class="copied" type="checkmark"></j-icon>
|
||||
<j-icon v-if="showCopy && !copied" class="copy" type="clipboard" @click="clip"></j-icon>
|
||||
<div class="jv-tooltip" v-if="copyable">
|
||||
<span class="jv-button" ref="clip" @click="clip" :class="{copied}">{{ copied ? 'copied!' : 'copy' }}</span>
|
||||
</div>
|
||||
<div class="jv-code" :class="{'more': moreCode}">
|
||||
<json-box :value="value" :key-name="keyName" :sort="sort"></json-box>
|
||||
<div class="jv-code" :class="{'open': expandCode}">
|
||||
<json-box
|
||||
ref="jsonBox"
|
||||
:value="value"
|
||||
:key-name="keyName"
|
||||
:sort="sort"></json-box>
|
||||
</div>
|
||||
<div class="jv-more" @click="toggleMoreCode">
|
||||
<j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
|
||||
<div v-if="expandableCode" class="jv-more" @click="toggleExpandCode">
|
||||
<span class="jv-toggle" :class="{open: !!expandCode}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import JIcon from './json-icon'
|
||||
import JsonBox from './json-box';
|
||||
import Clipboard from 'clipboard';
|
||||
import Vue from 'vue'
|
||||
import JsonBox from './json-box'
|
||||
import Clipboard from 'clipboard'
|
||||
|
||||
Vue.component(JsonBox.name, JsonBox);
|
||||
Vue.component(JsonBox.name, JsonBox)
|
||||
|
||||
export default {
|
||||
name: 'JsonViewer',
|
||||
props: {
|
||||
value: [Object, Array, String, Number, Boolean],
|
||||
keyName: String,
|
||||
showCopy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
expandDepth: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showBigger: {
|
||||
copyable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
@@ -45,62 +46,68 @@ export default {
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: "jv-light"
|
||||
},
|
||||
iconPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: 'jv-light'
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
iconPrefix: this.iconPrefix || 'ion'
|
||||
expandDepth: this.expandDepth,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copied: false,
|
||||
biggerModal: false,
|
||||
moreCode: false
|
||||
};
|
||||
expandableCode: false,
|
||||
expandCode: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.onResized()
|
||||
this.$el.addEventListener("resized", this.onResized, true)
|
||||
},
|
||||
computed: {
|
||||
jvClass() {
|
||||
return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
|
||||
},
|
||||
tooltip() {
|
||||
return this.showBigger || this.copied || (this.showCopy && !this.copied)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clip() {
|
||||
const clipBoard = new Clipboard('.copy', {
|
||||
text: () => {
|
||||
return JSON.stringify(this.value, null, 2);
|
||||
onResized() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.jsonBox.$el.clientHeight >= 250) {
|
||||
this.expandableCode = true
|
||||
} else {
|
||||
this.expandableCode = false
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
clip() {
|
||||
if (this.copied) {
|
||||
return
|
||||
}
|
||||
|
||||
const clipBoard = new Clipboard(this.$refs.clip, {
|
||||
text: () => {
|
||||
return JSON.stringify(this.value, null, 2)
|
||||
}
|
||||
})
|
||||
|
||||
clipBoard.on('success', () => {
|
||||
this.copied = true;
|
||||
this.copied = true
|
||||
setTimeout(() => {
|
||||
this.copied = false;
|
||||
}, 2000);
|
||||
this.$emit('copied');
|
||||
clipBoard.destroy();
|
||||
});
|
||||
this.copied = false
|
||||
}, 2000)
|
||||
this.$emit('copied')
|
||||
clipBoard.destroy()
|
||||
})
|
||||
},
|
||||
bigger() {
|
||||
this.biggerModal = true;
|
||||
},
|
||||
toggleMoreCode() {
|
||||
this.moreCode = !this.moreCode;
|
||||
toggleExpandCode() {
|
||||
this.expandCode = !this.expandCode
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JsonBox,
|
||||
JIcon
|
||||
JsonBox
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -121,6 +128,10 @@ export default {
|
||||
|
||||
&.jv-light {
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
color: #525252;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
|
||||
.jv-ellipsis {
|
||||
color: #999;
|
||||
@@ -134,6 +145,7 @@ export default {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.jv-button { color: #49b3ff }
|
||||
.jv-key { color: #111111 }
|
||||
.jv-item {
|
||||
&.jv-array { color: #111111 }
|
||||
@@ -141,17 +153,23 @@ export default {
|
||||
&.jv-function { color: #067bca }
|
||||
&.jv-number { color: #fc1e70 }
|
||||
&.jv-object { color: #111111 }
|
||||
&.jv-string { color: #42b983 }
|
||||
&.jv-undefined { color: #e08331 }
|
||||
}
|
||||
.jv-toggle {
|
||||
&:before {
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
&.jv-string {
|
||||
color: #42b983;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
&:hover {
|
||||
}
|
||||
.jv-code {
|
||||
.jv-toggle {
|
||||
&:before {
|
||||
background: #eee;
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -162,49 +180,55 @@ export default {
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
|
||||
.jv-toggle {
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: "⏶";
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&.open {
|
||||
&:before {
|
||||
content: "⏷";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.more {
|
||||
&.open {
|
||||
max-height: initial;
|
||||
overflow: visible;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.jv-toggle {
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: "⏷";
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&.open {
|
||||
&:before {
|
||||
content: "⏶";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jv-more {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.jv-toggle {
|
||||
position: relative;
|
||||
top:40%;
|
||||
z-index: 2;
|
||||
color: #888;
|
||||
transition: all 0.1s;
|
||||
// background: red;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@@ -215,25 +239,39 @@ export default {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
box-shadow: inset 0 -15px 30px #fff;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 1) 100%);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.jv-toggle {
|
||||
top:50%;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 0.3) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jv-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
z-index: 5;
|
||||
|
||||
&.copied {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.jv-tooltip {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 5px;
|
||||
color: #b2b2b2;
|
||||
cursor: pointer;
|
||||
|
||||
.copied {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.j-icon {
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.j-icon {
|
||||
|
||||
+42
-16
@@ -1,13 +1,23 @@
|
||||
<template>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!value}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-array">[</span>
|
||||
<template v-if="jsonValue.length">
|
||||
<json-box v-show="value" v-for="(val, index) in jsonValue" :key="index" :value="val"></json-box>
|
||||
<span v-show="!value" class="jv-ellipsis" @click.stop="toggle">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-array"Z>]</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-array">[</span>
|
||||
<template v-if="jsonValue.length">
|
||||
<json-box
|
||||
v-show="expand"
|
||||
v-for="(val, index) in ordered"
|
||||
:sort="sort"
|
||||
:key="index"
|
||||
:value="val"
|
||||
:depth="depth + 1"></json-box>
|
||||
<span
|
||||
v-show="!expand"
|
||||
class="jv-ellipsis"
|
||||
@click.stop="toggle"
|
||||
:title="!expand ? `click to reveal ${jsonValue.length} hidden items` : ''">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-array"Z>]</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -16,16 +26,32 @@ export default {
|
||||
props: {
|
||||
jsonValue: Array,
|
||||
keyName: String,
|
||||
value: Boolean
|
||||
sort: Boolean,
|
||||
expand: Boolean,
|
||||
depth: Number
|
||||
},
|
||||
computed: {
|
||||
ordered () {
|
||||
if (!this.sort) {
|
||||
return this.jsonValue
|
||||
}
|
||||
|
||||
return this.jsonValue.sort()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('input', !this.value);
|
||||
this.$emit('update:expand', !this.expand)
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-boolean">{{jsonValue}}</span>
|
||||
<span class="jv-item jv-boolean">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonBoolean',
|
||||
props: {
|
||||
jsonValue: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-boolean {
|
||||
color: #fc1e70;
|
||||
name: 'JsonBoolean',
|
||||
props: {
|
||||
jsonValue: Boolean
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-function"><function></span>
|
||||
<span class="jv-item jv-function"><function></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonFunction',
|
||||
props: {
|
||||
jsonValue: Function
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-function {
|
||||
color: #067bca;
|
||||
name: 'JsonFunction',
|
||||
props: {
|
||||
jsonValue: Function
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-number">{{jsonValue}}</span>
|
||||
<span class="jv-item jv-number">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonNumber',
|
||||
props: {
|
||||
jsonValue: Number
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-number {
|
||||
color: #fc1e70;
|
||||
name: 'JsonNumber',
|
||||
props: {
|
||||
jsonValue: Number
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
+40
-27
@@ -1,49 +1,62 @@
|
||||
<template>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!value}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-object">{</span>
|
||||
<template v-if="Object.keys(ordered).length">
|
||||
<json-box v-show="value" v-for="(v, k) in ordered" :sort="sort" :key="k" :key-name="k" :value="v"></json-box>
|
||||
<span v-show="!value" class="jv-ellipsis" @click.stop="toggle">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-object">}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
|
||||
<span class="jv-item jv-object">{</span>
|
||||
<template v-if="Object.keys(ordered).length">
|
||||
<json-box
|
||||
v-show="expand"
|
||||
v-for="(v, k) in ordered"
|
||||
:sort="sort"
|
||||
:key="k"
|
||||
:key-name="k"
|
||||
:value="v"
|
||||
:depth="depth + 1"></json-box>
|
||||
<span
|
||||
v-show="!expand"
|
||||
class="jv-ellipsis"
|
||||
@click.stop="toggle"
|
||||
:title="!expand ? `click to reveal object content (keys: ${Object.keys(ordered).join(', ')})` : ''">...</span>
|
||||
</template>
|
||||
<span class="jv-item jv-object">}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JIcon from '../json-icon'
|
||||
export default {
|
||||
name: 'JsonObject',
|
||||
props: {
|
||||
jsonValue: Object,
|
||||
keyName: String,
|
||||
value: Boolean,
|
||||
sort: Boolean
|
||||
expand: Boolean,
|
||||
sort: Boolean,
|
||||
depth: Number
|
||||
},
|
||||
computed: {
|
||||
ordered () {
|
||||
if (!this.sortKeys) {
|
||||
return this.jsonValue;
|
||||
if (!this.sort) {
|
||||
return this.jsonValue
|
||||
}
|
||||
|
||||
const ordered = {};
|
||||
const ordered = {}
|
||||
Object.keys(this.jsonValue).sort().forEach(key => {
|
||||
ordered[key] = this.jsonValue[key];
|
||||
});
|
||||
return ordered;
|
||||
ordered[key] = this.jsonValue[key]
|
||||
})
|
||||
return ordered
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('input', !this.value);
|
||||
this.$emit('update:expand', !this.expand)
|
||||
|
||||
try {
|
||||
this.$el.dispatchEvent(new Event("resized"))
|
||||
} catch (e) {
|
||||
// handle IE not supporting Event constructor
|
||||
var evt = document.createEvent("Event")
|
||||
evt.initEvent("resized", true, false)
|
||||
this.$el.dispatchEvent(evt)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JIcon
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-string">"{{jsonValue}}"</span>
|
||||
<span class="jv-item jv-string">"{{jsonValue}}"</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonString',
|
||||
props: {
|
||||
jsonValue: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-string {
|
||||
color: #42b983;
|
||||
name: 'JsonString',
|
||||
props: {
|
||||
jsonValue: String
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||
<span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JsonUndefined',
|
||||
props: {
|
||||
jsonValue: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.json-undefined {
|
||||
color: #e08331;
|
||||
name: 'JsonUndefined',
|
||||
props: {
|
||||
jsonValue: Object
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
Generated
+8
-8
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-json-viewer",
|
||||
"version": "1.0.4",
|
||||
"version": "2.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -2030,12 +2030,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"compressible": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz",
|
||||
"integrity": "sha1-MmxfUH+7BV9UEWeCuWmoG2einac=",
|
||||
"version": "2.0.15",
|
||||
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.15.tgz",
|
||||
"integrity": "sha512-4aE67DL33dSW9gw4CI2H/yTxqHLNcxp0yS6jB+4h+wr3e43+1z7vm0HU9qXOH8j+qjKuL8+UtkOxYQSMq60Ylw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mime-db": ">= 1.34.0 < 2"
|
||||
"mime-db": ">= 1.36.0 < 2"
|
||||
}
|
||||
},
|
||||
"compression": {
|
||||
@@ -2887,9 +2887,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.67",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.67.tgz",
|
||||
"integrity": "sha512-h3zEBLdHvsKfaXv1SHAtykJyNtwYFEKkrWGSFyW1BzGgPQ4ykAzD5Hd8C5MZGTAEhkCKmtyIwYUrapsI0xfKww==",
|
||||
"version": "1.3.68",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.68.tgz",
|
||||
"integrity": "sha512-NHs9Xm6+ZUDkRj7t1tFwizzfMO2XZg0nmHNRRTurXHDUcEoz3Kdjs2mxXsd8drpEDfg5aVL0S8aypUCTA0HJ/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"elliptic": {
|
||||
|
||||
+6
-6
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "vue-json-viewer",
|
||||
"version": "1.0.4",
|
||||
"version": "2.0.0",
|
||||
"description": "vuejs展示json的组件",
|
||||
"main": "src/index.js",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib/*"
|
||||
],
|
||||
@@ -33,12 +33,12 @@
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "陈峰",
|
||||
"email": "chenfengjw@hotmail.com"
|
||||
"name": "陈峰",
|
||||
"email": "chenfengjw@hotmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Sacha Stafyniak",
|
||||
"email": "sacha.stafyniak@gmail.com"
|
||||
"name": "Sacha Stafyniak",
|
||||
"email": "sacha.stafyniak@gmail.com"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
|
||||
Reference in New Issue
Block a user