mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-08 17:22:32 +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 JsonViewer from '../';
|
||||
import JsonViewer from '../lib';
|
||||
import './css/ionicons.css';
|
||||
|
||||
new Vue({
|
||||
@@ -12,7 +12,7 @@ new Vue({
|
||||
{key: 'hello word'},
|
||||
],
|
||||
val: {
|
||||
c: () = {},
|
||||
c: function() {},
|
||||
b: 'a',
|
||||
a: 'hello word',
|
||||
asd2: 1,
|
||||
@@ -2,14 +2,14 @@ const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './examples/app.js',
|
||||
entry: './example/app.js',
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist'),
|
||||
filename: 'main.js'
|
||||
},
|
||||
devtool: 'cheap-module-source-map',
|
||||
devServer: {
|
||||
port: 8080
|
||||
port: 8081
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue'],
|
||||
@@ -59,8 +59,8 @@ module.exports = {
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: './examples/index.html',
|
||||
template: './example/index.html',
|
||||
inject: true
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 326 KiB |
@@ -8,7 +8,15 @@
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</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>
|
||||
<span class="json-boolean">{{jsonValue}}</span>
|
||||
<span class="jv-item jv-boolean">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span class="json-function"><function></span>
|
||||
<span class="jv-item jv-function"><function></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span class="json-number">{{jsonValue}}</span>
|
||||
<span class="jv-item jv-number">{{jsonValue}}</span>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
<span class="json-string">"{{jsonValue}}"</span>
|
||||
<span class="jv-item jv-string">"{{jsonValue}}"</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span class="json-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||
<span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Generated
+11477
File diff suppressed because it is too large
Load Diff
+24
-4
@@ -2,10 +2,17 @@
|
||||
"name": "vue-json-viewer",
|
||||
"version": "1.0.4",
|
||||
"description": "vuejs展示json的组件",
|
||||
"main": "index.js",
|
||||
"main": "src/index.js",
|
||||
"files": [
|
||||
"lib/*"
|
||||
],
|
||||
"directories": {
|
||||
"lib": "./lib",
|
||||
"example": "./example"
|
||||
},
|
||||
"scripts": {
|
||||
"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": {
|
||||
"type": "git",
|
||||
@@ -15,12 +22,25 @@
|
||||
"vue",
|
||||
"json"
|
||||
],
|
||||
"author": "chenfengjw@hotmail.com",
|
||||
"homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
|
||||
"author": {
|
||||
"name": "陈峰",
|
||||
"email": "chenfengjw@hotmail.com"
|
||||
},
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"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": {
|
||||
"vue": "^2.5.2",
|
||||
"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