mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-20 20:00:37 +03:00
refactor lib: clean directories + clean options + add theming capabilities + remove usage of ionicon (for arrows)
This commit is contained in:
STAFYNIAK Sacha
@@ -1,5 +1,5 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import JsonViewer from '../';
|
import JsonViewer from '../lib';
|
||||||
import './css/ionicons.css';
|
import './css/ionicons.css';
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
@@ -12,7 +12,7 @@ new Vue({
|
|||||||
{key: 'hello word'},
|
{key: 'hello word'},
|
||||||
],
|
],
|
||||||
val: {
|
val: {
|
||||||
c: () = {},
|
c: function() {},
|
||||||
b: 'a',
|
b: 'a',
|
||||||
a: 'hello word',
|
a: 'hello word',
|
||||||
asd2: 1,
|
asd2: 1,
|
||||||
@@ -2,14 +2,14 @@ const path = require('path');
|
|||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: './examples/app.js',
|
entry: './example/app.js',
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, '../dist'),
|
path: path.join(__dirname, '../dist'),
|
||||||
filename: 'main.js'
|
filename: 'main.js'
|
||||||
},
|
},
|
||||||
devtool: 'cheap-module-source-map',
|
devtool: 'cheap-module-source-map',
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 8080
|
port: 8081
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.vue'],
|
extensions: ['.js', '.vue'],
|
||||||
@@ -59,7 +59,7 @@ module.exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
template: './examples/index.html',
|
template: './example/index.html',
|
||||||
inject: true
|
inject: true
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 326 KiB |
@@ -8,7 +8,15 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
|
<json-viewer :value="jsonData"></json-viewer>
|
||||||
|
<hr />
|
||||||
|
<json-viewer
|
||||||
|
:value="jsonData"
|
||||||
|
icon-prefix="ion"
|
||||||
|
boxed
|
||||||
|
sort
|
||||||
|
show-copy
|
||||||
|
show-bigger></json-viewer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import JsonView from './json-viewer';
|
|
||||||
|
|
||||||
const install = (Vue) => {
|
|
||||||
Vue.component('JsonViewer', JsonView);
|
|
||||||
}
|
|
||||||
export default Object.assign(JsonView, {install});
|
|
||||||
-102
@@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="node">
|
|
||||||
<span class="key" v-if="keyName">
|
|
||||||
<j-icon v-if="isObject" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggleNode"></j-icon>
|
|
||||||
{{keyName}}:
|
|
||||||
</span>
|
|
||||||
<commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName" :sort-keys="sortKeys"></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';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'JsonBox',
|
|
||||||
props: {
|
|
||||||
value: [Object, Array, String, Number, Boolean, Function],
|
|
||||||
keyName: String,
|
|
||||||
sortKeys: Boolean
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
toggle: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleNode() {
|
|
||||||
this.toggle = !this.toggle;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
valueType() {
|
|
||||||
if (this.value === null || this.value === undefined) {
|
|
||||||
return 'Undefined';
|
|
||||||
} else if (Array.isArray(this.value)) {
|
|
||||||
return 'Array';
|
|
||||||
} else if (typeof this.value === 'object') {
|
|
||||||
return 'Object';
|
|
||||||
} else if (typeof this.value === 'number') {
|
|
||||||
return 'Number';
|
|
||||||
} else if (typeof this.value === 'string') {
|
|
||||||
return 'String';
|
|
||||||
} else if (typeof this.value === 'boolean') {
|
|
||||||
return 'Boolean';
|
|
||||||
} else if (typeof this.value === 'function') {
|
|
||||||
return 'Function';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isObject() {
|
|
||||||
return this.valueType == 'Array' || this.valueType == 'Object'; // eslint-disable-line
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
JsonString,
|
|
||||||
JsonNumber,
|
|
||||||
JsonBoolean,
|
|
||||||
JsonObject,
|
|
||||||
JsonArray,
|
|
||||||
JsonFunction,
|
|
||||||
JsonUndefined,
|
|
||||||
JIcon
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.node {
|
|
||||||
font-size: 14px;
|
|
||||||
position: relative;
|
|
||||||
color: #525252;
|
|
||||||
font-family: Consolas,Menlo,Courier,monospace;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: ','
|
|
||||||
}
|
|
||||||
&:last-of-type {
|
|
||||||
&:after {
|
|
||||||
content: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.j-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: -12px;
|
|
||||||
top: 3px;
|
|
||||||
color: #80848f;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .node {
|
|
||||||
margin-left: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
-160
@@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="json-viewer">
|
|
||||||
<div class="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>
|
|
||||||
<div class="code-box" :class="{'more': moreCode}">
|
|
||||||
<json-box :value="value" :key-name="keyName" :sort-keys="sortKeys"></json-box>
|
|
||||||
</div>
|
|
||||||
<div class="more-code" @click="toggleMoreCode">
|
|
||||||
<j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Vue from 'vue';
|
|
||||||
import JIcon from './json-icon'
|
|
||||||
import JsonBox from './json-box';
|
|
||||||
import Clipboard from 'clipboard';
|
|
||||||
|
|
||||||
Vue.component(JsonBox.name, JsonBox);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'JsonViewer',
|
|
||||||
props: {
|
|
||||||
value: [Object, Array, String, Number, Boolean],
|
|
||||||
keyName: String,
|
|
||||||
showCopy: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showBigger: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
iconPrefix: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
sortKeys: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
iconPrefix: this.iconPrefix || 'ion'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
copied: false,
|
|
||||||
biggerModal: false,
|
|
||||||
moreCode: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clip() {
|
|
||||||
const clipBoard = new Clipboard('.copy', {
|
|
||||||
text: () => {
|
|
||||||
return JSON.stringify(this.value, null, 2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
clipBoard.on('success', () => {
|
|
||||||
this.copied = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.copied = false;
|
|
||||||
}, 2000);
|
|
||||||
this.$emit('copied');
|
|
||||||
clipBoard.destroy();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
bigger() {
|
|
||||||
this.biggerModal = true;
|
|
||||||
},
|
|
||||||
toggleMoreCode() {
|
|
||||||
this.moreCode = !this.moreCode;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
JsonBox,
|
|
||||||
JIcon
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.json-viewer {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 6px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative
|
|
||||||
}
|
|
||||||
.code-box {
|
|
||||||
max-height: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
&.more {
|
|
||||||
max-height: initial;
|
|
||||||
overflow: visible;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-code {
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.j-icon {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
box-shadow: inset 0 -15px 30px #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: absolute;
|
|
||||||
right: 12px;
|
|
||||||
top: 5px;
|
|
||||||
color: #b2b2b2;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.copied {
|
|
||||||
color: #19be6b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.j-icon {
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.j-icon {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import JsonView from './json-viewer'
|
||||||
|
|
||||||
|
const install = Vue => {
|
||||||
|
Vue.component('JsonViewer', JsonView)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Object.assign(JsonView, {install})
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
<template>
|
||||||
|
<div class="jv-node">
|
||||||
|
<span class="jv-toggle" :class="{open: !!toggle}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
|
||||||
|
<span class="jv-key" v-if="keyName">
|
||||||
|
{{keyName}}:
|
||||||
|
</span>
|
||||||
|
<commponent v-model="toggle"
|
||||||
|
:is="`Json${valueType}`"
|
||||||
|
:json-value="value"
|
||||||
|
:key-name="keyName"
|
||||||
|
:sort="sort"></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';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JsonBox',
|
||||||
|
props: {
|
||||||
|
value: [Object, Array, String, Number, Boolean, Function],
|
||||||
|
keyName: String,
|
||||||
|
sort: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
toggle: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleNode() {
|
||||||
|
this.toggle = !this.toggle;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
valueType() {
|
||||||
|
if (this.value === null || this.value === undefined) {
|
||||||
|
return 'Undefined';
|
||||||
|
} else if (Array.isArray(this.value)) {
|
||||||
|
return 'Array';
|
||||||
|
} else if (typeof this.value === 'object') {
|
||||||
|
return 'Object';
|
||||||
|
} else if (typeof this.value === 'number') {
|
||||||
|
return 'Number';
|
||||||
|
} else if (typeof this.value === 'string') {
|
||||||
|
return 'String';
|
||||||
|
} else if (typeof this.value === 'boolean') {
|
||||||
|
return 'Boolean';
|
||||||
|
} else if (typeof this.value === 'function') {
|
||||||
|
return 'Function';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isObject() {
|
||||||
|
return this.valueType == 'Array' || this.valueType == 'Object'; // eslint-disable-line
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
JsonString,
|
||||||
|
JsonNumber,
|
||||||
|
JsonBoolean,
|
||||||
|
JsonObject,
|
||||||
|
JsonArray,
|
||||||
|
JsonFunction,
|
||||||
|
JsonUndefined,
|
||||||
|
JIcon
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.jv-node {
|
||||||
|
font-size: 14px;
|
||||||
|
position: relative;
|
||||||
|
color: #525252;
|
||||||
|
font-family: Consolas,Menlo,Courier,monospace;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ','
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
&:after {
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*.j-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: -12px;
|
||||||
|
top: 3px;
|
||||||
|
color: #80848f;
|
||||||
|
cursor: pointer;
|
||||||
|
}*/
|
||||||
|
& .jv-node {
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
<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>
|
||||||
|
<div class="jv-code" :class="{'more': moreCode}">
|
||||||
|
<json-box :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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
|
import JIcon from './json-icon'
|
||||||
|
import JsonBox from './json-box';
|
||||||
|
import Clipboard from 'clipboard';
|
||||||
|
|
||||||
|
Vue.component(JsonBox.name, JsonBox);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JsonViewer',
|
||||||
|
props: {
|
||||||
|
value: [Object, Array, String, Number, Boolean],
|
||||||
|
keyName: String,
|
||||||
|
showCopy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showBigger: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
sort: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
boxed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: "jv-light"
|
||||||
|
},
|
||||||
|
iconPrefix: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
iconPrefix: this.iconPrefix || 'ion'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
copied: false,
|
||||||
|
biggerModal: false,
|
||||||
|
moreCode: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
clipBoard.on('success', () => {
|
||||||
|
this.copied = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.copied = false;
|
||||||
|
}, 2000);
|
||||||
|
this.$emit('copied');
|
||||||
|
clipBoard.destroy();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
bigger() {
|
||||||
|
this.biggerModal = true;
|
||||||
|
},
|
||||||
|
toggleMoreCode() {
|
||||||
|
this.moreCode = !this.moreCode;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
JsonBox,
|
||||||
|
JIcon
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.jv-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.boxed {
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 7px rgba(0,0,0,.15);
|
||||||
|
border-color: transparent;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.jv-light {
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.jv-ellipsis {
|
||||||
|
color: #999;
|
||||||
|
background-color: #eee;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 0.9;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0px 4px 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
vertical-align: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.jv-key { color: #111111 }
|
||||||
|
.jv-item {
|
||||||
|
&.jv-array { color: #111111 }
|
||||||
|
&.jv-boolean { color: #fc1e70 }
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jv-code {
|
||||||
|
max-height: 300px;
|
||||||
|
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 {
|
||||||
|
max-height: initial;
|
||||||
|
overflow: visible;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jv-more {
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.jv-toggle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: inset 0 -15px 30px #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jv-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 5px;
|
||||||
|
color: #b2b2b2;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.copied {
|
||||||
|
color: #19be6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.j-icon {
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.j-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'JsonArray',
|
||||||
|
props: {
|
||||||
|
jsonValue: Array,
|
||||||
|
keyName: String,
|
||||||
|
value: Boolean
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle() {
|
||||||
|
this.$emit('input', !this.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="json-boolean">{{jsonValue}}</span>
|
<span class="jv-item jv-boolean">{{jsonValue}}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="json-function"><function></span>
|
<span class="jv-item jv-function"><function></span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="json-number">{{jsonValue}}</span>
|
<span class="jv-item jv-number">{{jsonValue}}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import JIcon from '../json-icon'
|
||||||
|
export default {
|
||||||
|
name: 'JsonObject',
|
||||||
|
props: {
|
||||||
|
jsonValue: Object,
|
||||||
|
keyName: String,
|
||||||
|
value: Boolean,
|
||||||
|
sort: Boolean
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
ordered () {
|
||||||
|
if (!this.sortKeys) {
|
||||||
|
return this.jsonValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ordered = {};
|
||||||
|
Object.keys(this.jsonValue).sort().forEach(key => {
|
||||||
|
ordered[key] = this.jsonValue[key];
|
||||||
|
});
|
||||||
|
return ordered;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle() {
|
||||||
|
this.$emit('input', !this.value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
JIcon
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="json-string">"{{jsonValue}}"</span>
|
<span class="jv-item jv-string">"{{jsonValue}}"</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="json-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
<span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Generated
+11477
File diff suppressed because it is too large
Load Diff
+24
-4
@@ -2,10 +2,17 @@
|
|||||||
"name": "vue-json-viewer",
|
"name": "vue-json-viewer",
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"description": "vuejs展示json的组件",
|
"description": "vuejs展示json的组件",
|
||||||
"main": "index.js",
|
"main": "src/index.js",
|
||||||
|
"files": [
|
||||||
|
"lib/*"
|
||||||
|
],
|
||||||
|
"directories": {
|
||||||
|
"lib": "./lib",
|
||||||
|
"example": "./example"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"examples": "webpack-dev-server --config ./examples/build/webpack.dev.conf.js"
|
"example": "webpack-dev-server --config ./example/build/webpack.dev.conf.js"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -15,12 +22,25 @@
|
|||||||
"vue",
|
"vue",
|
||||||
"json"
|
"json"
|
||||||
],
|
],
|
||||||
"author": "chenfengjw@hotmail.com",
|
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
||||||
|
"author": {
|
||||||
|
"name": "陈峰",
|
||||||
|
"email": "chenfengjw@hotmail.com"
|
||||||
|
},
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/chenfengjw163/vue-json-viewer/issues"
|
"url": "https://github.com/chenfengjw163/vue-json-viewer/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
"contributors": [
|
||||||
|
{
|
||||||
|
"name": "陈峰",
|
||||||
|
"email": "chenfengjw@hotmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Sacha Stafyniak",
|
||||||
|
"email": "sacha.stafyniak@gmail.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"clipboard": "^1.7.1"
|
"clipboard": "^1.7.1"
|
||||||
|
|||||||
@@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span>
|
|
||||||
<j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
|
|
||||||
<span>[</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="node-ellipsis">...</span>
|
|
||||||
</template>
|
|
||||||
<span>]</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'JsonArray',
|
|
||||||
props: {
|
|
||||||
jsonValue: Array,
|
|
||||||
keyName: String,
|
|
||||||
value: Boolean
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggle() {
|
|
||||||
this.$emit('input', !this.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span>
|
|
||||||
<j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
|
|
||||||
<span>{</span>
|
|
||||||
<template v-if="Object.keys(ordered).length">
|
|
||||||
<json-box v-show="value" v-for="(v, k) in ordered" :sort-keys="sortKeys" :key="k" :key-name="k" :value="v"></json-box>
|
|
||||||
<span v-show="!value" class="node-ellipsis">...</span>
|
|
||||||
</template>
|
|
||||||
<span>}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JIcon from '../json-icon'
|
|
||||||
export default {
|
|
||||||
name: 'JsonObject',
|
|
||||||
props: {
|
|
||||||
jsonValue: Object,
|
|
||||||
keyName: String,
|
|
||||||
value: Boolean,
|
|
||||||
sortKeys: Boolean
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
ordered () {
|
|
||||||
if (!this.sortKeys) {
|
|
||||||
return this.jsonValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ordered = {};
|
|
||||||
Object.keys(this.jsonValue).sort().forEach(key => {
|
|
||||||
ordered[key] = this.jsonValue[key];
|
|
||||||
});
|
|
||||||
return ordered;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggle() {
|
|
||||||
console.log('toggle')
|
|
||||||
this.$emit('input', !this.value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
JIcon
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user