diff --git a/.gitignore b/.gitignore index 9d08bab..a532bea 100644 --- a/.gitignore +++ b/.gitignore @@ -146,4 +146,9 @@ public/bundle/* nbproject/* .DS_Store .devhost -examples/dist/ \ No newline at end of file +examples/dist/ +/vue-json-viewer.js +/ssr.js +/style.css +yarn.lock +package-lock.json \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 112b5b2..0000000 --- a/.travis.yml +++ /dev/null @@ -1,33 +0,0 @@ -language : node_js -node_js: - - "10" - -branches: - only: - - master - -install: -- npm install - -os: - - linux - -stages: - - name: deploy - -jobs: - include: - - stage: deploy - script: - - echo "NPM Deploying Started ..." - - npm version - - npm run build - - echo "NPM Building Finished." - - deploy: - provider: npm - email: chenfengjw@hotmail.com - api_key: "$NPM_TOKEN" - skip_cleanup: true - on: - all_branches: true \ No newline at end of file diff --git a/History.md b/History.md new file mode 100644 index 0000000..5a9169a --- /dev/null +++ b/History.md @@ -0,0 +1,32 @@ +## 2.2.20 2021-10-31 + +- 给box加getPath方法 [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/79) +- chore: move "vue" to "peerDependencies" [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/75) + + +## 2.2.17 2020-12-29 + +- fix: issues [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/64) +- fix: issues [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/65) +- fix: issues [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/66) + +## 2.2.17 2020-12-29 + +- fix: long string expand arrow display error [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/62) + +## 2.2.16 2020-11-13 + +- support long string expand [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/60) + +## 2.2.15 2020-10-13 + +- Add Preview Mode + +## 2.2.14 2020-07-27 + +- Allow add specific style for float and integer numbers [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/51) + + +## 2.2.13 2020-07-14 + +- Add timeformat props to support custom time format [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/48) \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..cf23bad --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 陈峰 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 69c18c0..59aa593 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,37 @@ # vue-json-viewer -Simple JSON viewer component, for Vue.js 2 +[中文版](https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md) -[![Build Status](https://travis-ci.org//.svg?branch=master)](https://travis-ci.org//) +Simple JSON viewer component, for Vue.js 2 or 3. +Support for incremental update components + +[![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer) +[![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer) +![npm](https://img.shields.io/npm/dw/vue-json-viewer.svg?style=flat-square) - [Installing](#installing) - [Example](#example) - [Options](#options) +- [Listeners](#listeners) +- [Slots](#slots) - [Theming](#theming) ## Installing Using npm: ``` -$ npm install vue-json-viewer --save +$ npm install vue-json-viewer@2 --save +// Vue2 +$ npm install vue-json-viewer@3 --save +// Vue3 ``` Using yarn: ``` -$ yarn add vue-json-viewer +$ yarn add vue-json-viewer@2 +// Vue2 +$ yarn add vue-json-viewer@3 +// Vue3 ``` ## Example @@ -38,10 +51,13 @@ $ yarn add vue-json-viewer ``` js import Vue from 'vue' -import JsonViewer from '../lib' +import JsonViewer from 'vue-json-viewer' // Import JsonViewer as a Vue.js plugin Vue.use(JsonViewer) +// or +// components: {JsonViewer} + new Vue({ el: '#app', @@ -111,6 +127,22 @@ new Vue({ } }) ``` +### SSR +``` js +import JsonViewer from 'vue-json-viewer/ssr' + +// Import JsonViewer as a Vue.js plugin +Vue.use(JsonViewer) +// or +// components: {JsonViewer} +``` +and + +``` js +import 'vue-json-viewer/style.css' +``` + + ### Preview ![preview](./example/preview.png) @@ -121,10 +153,25 @@ new Vue({ | ----------- |:------------- | ----------- | | `value` | JSON data (can be used with `v-model`) | **Required** | | `expand-depth` | Collapse blocs under this depth | `1` | -| `copyable` | Display the copy button | `false` | +| `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied', timeout: 2000}` or set `true` use default copytext | `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` | +| `expanded` | Default expand the view | `false` | +| `timeformat` | custom time format function | time => time.toLocaleString() | +| `preview-mode` | no expand mode | `false` | + +## Listeners + +| Listener | Description | Value | +| ----------- |:------------- | ----------- | +| `copied` | Emits copyEvent after text copied | Clipboard success event | + +## Slots + +| Name | Description | Scope | +| ----------- |:------------- | ----------- | +| `copy` | Custom content for copy button | `{copied: boolean}` | ## Theming @@ -160,6 +207,8 @@ To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps: &.jv-boolean { color: #fc1e70 } &.jv-function { color: #067bca } &.jv-number { color: #fc1e70 } + &.jv-number-float { color: #fc1e70 } + &.jv-number-integer { color: #fc1e70 } &.jv-object { color: #111111 } &.jv-undefined { color: #e08331 } &.jv-string { diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 0000000..48811bf --- /dev/null +++ b/README_CN.md @@ -0,0 +1,216 @@ +# vue-json-viewer + +简单易用的json内容展示组件，支持vue@2和3，支持SSR，组件支持增量渲染即使大文件json也可以快速渲染。 + +[![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer) +[![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer) +![npm](https://img.shields.io/npm/dw/vue-json-viewer.svg?style=flat-square) + +- [安装](#安装) +- [示例](#示例) +- [选项](#选项) +- [主题](#主题) + +## 安装 +使用 npm: +``` +$ npm install vue-json-viewer@2 --save +// Vue2 +$ npm install vue-json-viewer@3 --save +// Vue3 +``` + +使用 yarn: +``` +$ yarn add vue-json-viewer@2 +// Vue2 +$ yarn add vue-json-viewer@3 +// Vue3 +``` + +## 示例 + +``` html + + +
+ + +``` + +``` js +import Vue from 'vue' +import JsonViewer from 'vue-json-viewer' + +// Import JsonViewer as a Vue.js plugin +Vue.use(JsonViewer) +// or +// components: {JsonViewer} + + +new Vue({ + 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' + } + ] + } + } + } +}) +``` +### 支持SSR +``` js +import JsonViewer from 'vue-json-viewer/ssr' + +// Import JsonViewer as a Vue.js plugin +Vue.use(JsonViewer) +// or +// components: {JsonViewer} +``` +and + +``` js +import 'vue-json-viewer/style.css' +``` + + +### 图片预览 +![preview](./example/preview.png) + + +## 选项 + +| 属性 | 描述 | 默认值 | +| ----------- |:------------- | ----------- | +| `value` | json对象的值，可以使用v-model，支持响应式 | **必填** | +| `expand-depth` | 默认展开的层级 | `1` | +| `copyable` | 展示复制按钮，默认文案为：copy、copied!, 你可以设置一个对象`{copyText: 'copy', copiedText: 'copied'}` 来自定义复制按钮文案 | `false` | +| `sort` | 按照key排序展示 | `false` | +| `boxed` | 为组件添加一个盒样式 | `false` | +| `theme` | 添加一个自定义的样式class用作主题 | `jv-light` | +| `expanded` | 默认展开视图 | `false` | +| `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() | +| `preview-mode` | 不可折叠模式，默认全部展开 | `false` | + +## 主题 + +有两个办法创建自定义主题, (e.g. `my-awesome-json-theme`): +1. 添加 `theme="my-awesome-json-theme"` JsonViewer的组件属性 +2. 复制粘贴下面的模板并且根据自定义的theme名称做对应调整: + +``` scss +// values are default one from jv-light template +.my-awesome-json-theme { + background: #fff; + white-space: nowrap; + color: #525252; + font-size: 14px; + font-family: Consolas, Menlo, Courier, monospace; + + .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-button { color: #49b3ff } + .jv-key { color: #111111 } + .jv-item { + &.jv-array { color: #111111 } + &.jv-boolean { color: #fc1e70 } + &.jv-function { color: #067bca } + &.jv-number { color: #fc1e70 } + &.jv-number-float { color: #fc1e70 } + &.jv-number-integer { color: #fc1e70 } + &.jv-object { color: #111111 } + &.jv-undefined { color: #e08331 } + &.jv-string { + color: #42b983; + word-break: break-word; + white-space: normal; + } + } + .jv-code { + .jv-toggle { + &:before { + padding: 0px 2px; + border-radius: 2px; + } + &:hover { + &:before { + background: #eee; + } + } + } + } +} +``` diff --git a/build/webpack.config.js b/build/webpack.config.js index de3c567..a4c0d93 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -1,14 +1,29 @@ const path = require('path'); -const webpack = require('webpack') +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const VueLoaderPlugin = require('vue-loader/lib/plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { + mode: 'production', entry: './lib/index.js', + optimization: { + minimizer: [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + sourceMap: true, + uglifyOptions: { + comments: false + } + }), + ], + }, output: { - path: path.join(__dirname, '../dist'), + path: path.join(__dirname, '../'), filename: 'vue-json-viewer.js', libraryTarget: 'umd', - library: 'JsonView' + library: 'JsonView', + globalObject: 'this' }, resolve: { extensions: ['.js', '.vue'], @@ -17,7 +32,8 @@ module.exports = { ] }, externals: { - vue: 'vue' + vue: 'vue', + clipboard: 'clipboard' }, module: { rules: [ @@ -27,8 +43,8 @@ module.exports = { exclude: /node_modules/ }, { - test: /\.css$/, - use: ['vue-style-loader', 'css-loader', 'autoprefixer-loader'] + test: /\.s?css$/, + use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, @@ -55,15 +71,10 @@ module.exports = { ] }, plugins: [ - new webpack.optimize.UglifyJsPlugin({ - parallel: true, - uglifyOptions: { - compress: { - warnings: false - }, - comments: false - } - }), - // new BundleAnalyzerPlugin() + new VueLoaderPlugin() ] } + +if (process.argv.some(a => a === '--report')) { + module.exports.plugins.push(new BundleAnalyzerPlugin()); +} \ No newline at end of file diff --git a/build/webpack.ssr.config.js b/build/webpack.ssr.config.js new file mode 100644 index 0000000..c8bc068 --- /dev/null +++ b/build/webpack.ssr.config.js @@ -0,0 +1,89 @@ +const path = require('path'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const VueLoaderPlugin = require('vue-loader/lib/plugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; + +module.exports = { + mode: 'production', + entry: './lib/index.js', + optimization: { + minimizer: [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + sourceMap: false, + uglifyOptions: { + comments: false + } + }), + new OptimizeCSSAssetsPlugin({ + cssProcessorOptions: { safe: true, sourceMap: false} + }) + ], + }, + output: { + path: path.join(__dirname, '../'), + filename: 'ssr.js', + libraryTarget: 'umd', + library: 'JsonView', + globalObject: 'this' + }, + resolve: { + extensions: ['.js', '.vue'], + modules: [ + 'node_modules' + ] + }, + externals: { + vue: 'vue', + clipboard: 'clipboard' + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, + { + test: /\.s?css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: 'img/[name].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: 'fonts/[name].[ext]' + } + }, + { + test: /\.vue$/, + use: [{ + loader: 'vue-loader' + }] + } + ] + }, + plugins: [ + new VueLoaderPlugin(), + new MiniCssExtractPlugin({ + filename: 'style.css', + allChunks: true, + }) + ] +} + +if (process.argv.some(a => a === '--report')) { + module.exports.plugins.push(new BundleAnalyzerPlugin()); +} \ No newline at end of file diff --git a/example/app.css b/example/app.css new file mode 100644 index 0000000..06dea9f --- /dev/null +++ b/example/app.css @@ -0,0 +1,6 @@ +.jv-number-float { + color: #faa !important; +} +.jv-key-node { + display: flex; +} \ No newline at end of file diff --git a/example/app.js b/example/app.js index 221b1fe..5500ea1 100644 --- a/example/app.js +++ b/example/app.js @@ -1,21 +1,57 @@ import Vue from 'vue' -import JsonViewer from '../dist/vue-json-viewer' +import JsonViewer from '../lib' +import './app.css' Vue.use(JsonViewer) new Vue({ el: '#app', render() { + const scopedSlots = { + copy: ({ copied }) => { + if (copied) return + return + }, + } + const onCopied = (copyEvent) => { + alert(`Text successfully copied!\n${copyEvent.text}`); + } return (
+
new Date(time)} sort> +
+
) }, @@ -25,6 +61,7 @@ new Vue({ total: 25, limit: 10, skip: 0, + numbers: 10.11, success: true, links: { previous: undefined, @@ -34,6 +71,7 @@ new Vue({ { id: '5968fcad629fa84ab65a5247', firstname: 'Ada', + link: 'http://google.com', lastname: 'Lovelace', awards: null, known: [ @@ -49,8 +87,8 @@ new Vue({ 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' + bornAt: new Date('1815-12-10T00:00:00.000Z'), + diedAt: new Date('1852-11-27T00:00:00.000Z') }, { id: '5968fcad629fa84ab65a5246', firstname: 'Grace', @@ -77,8 +115,8 @@ new Vue({ 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' + bornAt: new Date('1815-12-10T00:00:00.000Z'), + diedAt: new Date('1852-11-27T00:00:00.000Z') } ] } diff --git a/example/build/webpack.dev.conf.js b/example/build/webpack.dev.conf.js index 6b9ca22..56c715b 100644 --- a/example/build/webpack.dev.conf.js +++ b/example/build/webpack.dev.conf.js @@ -1,7 +1,9 @@ const path = require('path'); +const VueLoaderPlugin = require('vue-loader/lib/plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { + mode: 'development', entry: './example/app.js', output: { path: path.join(__dirname, '../dist'), @@ -9,7 +11,8 @@ module.exports = { }, devtool: 'cheap-module-source-map', devServer: { - port: 8081 + port: 8082, + disableHostCheck: true }, resolve: { extensions: ['.js', '.vue'], @@ -26,8 +29,8 @@ module.exports = { exclude: /node_modules/ }, { - test: /\.css$/, - use: ['vue-style-loader', 'css-loader', 'autoprefixer-loader'] + test: /\.s?css$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, @@ -59,5 +62,6 @@ module.exports = { template: './example/index.html', inject: true }), + new VueLoaderPlugin(), ] } diff --git a/lib/icon.svg b/lib/icon.svg new file mode 100644 index 0000000..d47cde8 --- /dev/null +++ b/lib/icon.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/lib/json-box.vue b/lib/json-box.vue index c562bbf..1c4b23c 100644 --- a/lib/json-box.vue +++ b/lib/json-box.vue @@ -6,13 +6,14 @@ 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 JsonDate from './types/json-date' export default { name: 'JsonBox', inject: ['expandDepth'], props: { value: { - type: [Object, Array, String, Number, Boolean, Function], + type: [Object, Array, String, Number, Boolean, Function, Date], default: null }, keyName: { @@ -23,20 +24,32 @@ export default { depth: { type: Number, default: 0 - } + }, + previewMode: Boolean, + forceExpand: Boolean, }, data() { return { - expand: true + expand: true, + forceExpandMe: this.forceExpand, } }, mounted() { - this.expand = this.depth >= this.expandDepth ? false : true + this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe }, methods: { toggle() { this.expand = !this.expand + this.dispatchEvent() + }, + toggleAll() { + this.expand = !this.expand + this.forceExpandMe = this.expand + + this.dispatchEvent() + }, + dispatchEvent() { try { this.$el.dispatchEvent(new Event('resized')) } catch (e) { @@ -45,16 +58,29 @@ export default { evt.initEvent('resized', true, false) this.$el.dispatchEvent(evt) } + }, + getPath() { + const path = [this.keyName]; + let p = this.$parent; + while(p.depth) { + if (p.$el.classList.contains('jv-node')) { + path.push(p.keyName); + } + p = p.$parent; + } + return path.reverse() } }, render (h) { let elements = [] let dataType - if (this.value === null || this.value === undefined) { + if (this.value === null || this.value === undefined) { dataType = JsonUndefined } else if (Array.isArray(this.value)) { dataType = JsonArray + } else if (Object.prototype.toString.call(this.value) === '[object Date]') { + dataType = JsonDate } else if (typeof this.value === 'object') { dataType = JsonObject } else if (typeof this.value === 'number') { @@ -66,15 +92,22 @@ export default { } else if (typeof this.value === 'function') { dataType = JsonFunction } + const complex = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]'))) - if (this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))) { + if (!this.previewMode && complex) { elements.push(h('span', { class: { 'jv-toggle': true, open: !!this.expand }, on: { - click: this.toggle + click: (event) => { + if (event.altKey) { + this.toggleAll() + } else { + this.toggle() + } + } } })) } @@ -85,7 +118,7 @@ export default { 'jv-key': true }, domProps: { - innerHTML: `${this.keyName}:` + innerText: `${this.keyName}:` } })) } @@ -99,18 +132,26 @@ export default { keyName: this.keyName, sort: this.sort, depth: this.depth, - expand: this.expand + expand: this.expand, + previewMode: this.previewMode, + forceExpand: this.forceExpandMe }, on: { 'update:expand': value => { this.expand = value + }, + 'update:expandAll': value => { + this.expand = value + this.forceExpandMe = this.expand } } })) return h('div', { - class: { - 'jv-node': true + class: { + 'jv-node': true, + 'jv-key-node': Boolean(this.keyName) && !complex, + 'toggle': !this.previewMode && complex } }, elements) } @@ -130,6 +171,10 @@ export default { } } + &.toggle { + margin-left: 13px !important; + } + & .jv-node { margin-left: 25px; } diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 99c68da..3f31385 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -1,28 +1,38 @@