Skip to content

Commit 5eb990d

Browse files
leezngleezng
committed
Merge branch '1.8-dev' into 1.x
# Conflicts: # package-lock.json # package.json
2 parents fe61561 + 9848da4 commit 5eb990d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+9026
-19255
lines changed

‎.babelrc‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
22
"presets": [
3-
["env", {
3+
["@babel/preset-env", {
44
"modules": false,
55
"targets": {
6-
"browsers": ["> 1%", "last 5 versions", "not ie <= 10"]
6+
"browsers": ["> 1%", "last 10 versions", "not ie <= 11"]
77
}
88
}],
9-
"stage-2"
9+
'@vue/babel-preset-jsx'
1010
],
11-
"plugins": ["transform-runtime"],
11+
"plugins": ["@babel/plugin-transform-runtime"],
1212
"env": {
1313
"test": {
14-
"presets": ["env", "stage-2"],
14+
"presets": ["@babel/preset-env"],
1515
"plugins": ["istanbul"]
1616
}
1717
}

‎.eslintrc.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
// http://eslint.org/docs/user-guide/configuring
22

33
module.exports = {
4-
extends: [
5-
'plugin:vue/recommended'
6-
],
4+
extends: ['plugin:vue/recommended'],
75
// add your custom rules here
8-
'rules': {
6+
rules: {
97
// allow debugger during development
10-
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
11-
}
12-
}
8+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
9+
},
10+
};

‎.postcssrc.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// https://github.com/michael-ciniawsky/postcss-load-config
22

33
module.exports = {
4-
"plugins": {
4+
plugins: {
55
// to edit target browsers: use "browserslist" field in package.json
6-
"autoprefixer": {}
7-
}
8-
}
6+
autoprefixer: {},
7+
},
8+
};

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"printWidth": 100,
5+
"overrides": [
6+
{
7+
"files": ".prettierrc",
8+
"options": { "parser": "json" }
9+
}
10+
]
11+
}

‎README.md‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
1-
# vue-json-pretty
1+
<p align="center">
2+
<a href="https://github.com/leezng/vue-json-pretty">
3+
<img width="200" src="./static/logo.svg">
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
<a href="https://github.com/leezng/vue-json-pretty" target="_blank">Vue Json Pretty</a>
9+
</h1>
10+
11+
<div align="center">
12+
13+
<p>A Vue component for rendering JSON data as a tree structure.</p>
14+
<p>Use Vue2, see <a href="https://github.com/leezng/vue-json-pretty/tree/1.x">1.x</a>.</p>
15+
<p>Use Vue3, see <a href="https://github.com/leezng/vue-json-pretty/tree/master">master</a>.</p>
216

317
[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
418
[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
519
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)
20+
[![Sizes](https://img.shields.io/bundlephobia/min/vue-json-pretty)](https://bundlephobia.com/result?p=vue-json-pretty)
21+
[![NPM downloads](http://img.shields.io/npm/dm/vue-json-pretty.svg?style=flat-square)](https://www.npmtrends.com/vue-json-pretty)
22+
[![Issues](https://img.shields.io/github/issues-raw/leezng/vue-json-pretty)](https://github.com/leezng/vue-json-pretty/issues)
23+
24+
</div>
25+
26+
[![](./static/screenshot.png)](https://github.com/leezng/vue-json-pretty)
27+
28+
English | [简体中文](./README.zh_CN.md)
629

7-
A vue 2.x component for rendering JSON data as a tree structure.
30+
## Features
831

9-
- As a JSON Formatter
10-
- Get item data from JSON
32+
- As a JSON Formatter.
33+
- Get item data from JSON.
34+
- Support big data.
1135

12-
## Links
36+
## Environment Support
1337

14-
- [Demo](https://leezng.github.io/vue-json-pretty)
15-
- [Github](https://github.com/leezng/vue-json-pretty)
16-
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
17-
- [中文文档](./README.zh-CN.md)
38+
- Modern browsers, Electron and Internet Explorer 11 (with polyfills)
39+
- Server-side Rendering
1840

19-
## Install
41+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
42+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
43+
| IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |
44+
45+
## Using NPM or Yarn
2046

2147
```bash
22-
npm install vue-json-pretty --save
48+
$ npm install vue-json-pretty --save
49+
```
50+
51+
```bash
52+
$ yarn add vue-json-pretty
2353
```
2454

2555
## Usage
@@ -29,28 +59,23 @@ The CSS file is included separately and needs to be imported manually. You can e
2959
```vue
3060
<template>
3161
<div>
32-
...
33-
<vue-json-pretty
34-
:path="'res'"
35-
:data="{ key: 'value' }"
36-
@click="handleClick">
37-
</vue-json-pretty>
62+
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
3863
</div>
3964
</template>
4065
4166
<script>
42-
import VueJsonPretty from 'vue-json-pretty'
43-
import 'vue-json-pretty/lib/styles.css'
67+
import VueJsonPretty from 'vue-json-pretty';
68+
import 'vue-json-pretty/lib/styles.css';
4469
4570
export default {
4671
components: {
47-
VueJsonPretty
48-
}
49-
}
72+
VueJsonPretty,
73+
},
74+
};
5075
</script>
5176
```
5277

53-
## Nuxt.js
78+
## Use Nuxt.js
5479

5580
1. In `plugins/vue-json-pretty.js`
5681

@@ -77,31 +102,31 @@ plugins: [
77102
- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
78103
- If you are using higher features (Get data), you can use `base` and `higher` attributes.
79104

80-
| Attribute | Level | Description | Type | Default |
81-
|-------- |-------- |-------- |-------- | -------- |
82-
| data | normal | json data | JSON object | - |
83-
| deep | normal | data depth, data larger than this depth will not be expanded | number | Infinity |
84-
| showLength | normal | whether to show the length when closed | boolean | false |
85-
| showLine | normal | whether to show the line | boolean | true |
86-
| showDoubleQuotes | normal | whether to show doublequotes on key | boolean | true |
87-
| highlightMouseoverNode | normal | highlight current node when mouseover | boolean | false |
88-
| v-model | higher | defines value when the tree can be selected | string, array | -, [] |
89-
| path | higher | root data path | string | root |
90-
| pathChecked | higher | defines the selected data path | array | [] |
91-
| pathSelectable | higher | defines whether a data path supports selection | Function(itemPath, itemData) | - |
92-
| selectableType | higher | defines the selected type, this feature is not supported by default | enum: -, multiple, single | - |
93-
| showSelectController | higher | whether to show the select controller at left | boolean | false |
94-
| selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
95-
| highlightSelectedNode | higher | highlight current node when selected | boolean | true |
96-
| collapsedOnClickBrackets | higher | collapsed control | boolean | true |
97-
| customValueFormatter | higher | a function that can return different html or strings to display for values in the data. | Function(data, key, parent, defaultFormatted) | - |
105+
| Attribute | Level | Description | Type | Default |
106+
| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
107+
| data | normal | JSON data | JSON object | - |
108+
| deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity |
109+
| showLength | normal | Whether to show the length when closed | boolean | false |
110+
| showLine | normal | Whether to show the line | boolean | true |
111+
| showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |
112+
| virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false |
113+
| itemHeight | normal | The height of each item when using virtual scrolling | number | auto |
114+
| v-model | higher | Defines value when the tree can be selected | string, array | - |
115+
| path | higher | Root data path | string | root |
116+
| pathSelectable | higher | Defines whether a data path supports selection | function(path, content) | - |
117+
| selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - |
118+
| showSelectController | higher | Whether to show the select controller at left | boolean | false |
119+
| selectOnClickNode | higher | Whether to change selected value when click node | boolean | true |
120+
| highlightSelectedNode | higher | Highlight current node when selected | boolean | true |
121+
| collapsedOnClickBrackets | higher | Collapsed control | boolean | true |
122+
| customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | - |
98123

99124
## Events
100125

101-
| Event Name | Description | Callback Parameters |
102-
|---------- |-------- |---------- |
103-
| click | triggered when a data item is clicked | (path, data) |
104-
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
126+
| Event Name | Description | Callback Parameters |
127+
| ---------- | ---------------------------------------------------------------------------- | ------------------- |
128+
| click | triggered when a data item is clicked | (path, data) |
129+
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
105130

106131
## Major Contributors
107132

‎README.zh-CN.md‎

Lines changed: 28 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,38 @@
1-
# vue-json-pretty
1+
简体中文 | [English](./README.md)
22

3-
[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
4-
[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
5-
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)
3+
## 特性
64

7-
一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件
8-
9-
- 基础功能: JSON 的美化
10-
- 高级功能: JSON 数据对应层级数据的获取
11-
12-
## 链接
13-
14-
- [Demo](https://leezng.github.io/vue-json-pretty)
15-
- [Github](https://github.com/leezng/vue-json-pretty)
16-
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
17-
- [English Document](./README.md)
18-
19-
## 安装
20-
21-
```js
22-
npm install vue-json-pretty -save
23-
```
24-
25-
## 快速开始
26-
27-
```html
28-
<template>
29-
<div>
30-
...
31-
<vue-json-pretty
32-
:path="'res'"
33-
:data="{ key: 'value' }"
34-
@click="handleClick">
35-
</vue-json-pretty>
36-
</div>
37-
</template>
38-
```
39-
40-
```js
41-
// 更多用法请见demo页面
42-
import VueJsonPretty from 'vue-json-pretty'
43-
44-
export default {
45-
components: {
46-
VueJsonPretty
47-
}
48-
}
49-
```
5+
- 一个 JSON 美化工具
6+
- 提取字段层级数据
7+
- 支持大数据虚拟滚动
508

519
## Props
5210

53-
- 若仅使用基础功能(JSON美化)，只需关注功能级别为 `基础` 的属性。
11+
- 若仅使用基础功能(JSON 美化)，只需关注功能级别为 `基础` 的属性。
5412
- 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。
5513

56-
| 属性 | 级别 | 说明 | 类型 | 默认值 |
57-
|-------- |-------- |-------- |-------- | -------- |
58-
| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
59-
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
60-
| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
61-
| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
62-
| showDoubleQuotes | 基础 | 是否展示key名的双引号 | boolean | true |
63-
| highlightMouseoverNode | 基础 | 是否在mouseover的时候高亮 | boolean | false |
64-
| v-model | 高级 | 双向绑定选中的数据层级 | string, array | -, [] |
65-
| path | 高级 | 定义最顶层数据层级 | string | root |
66-
| pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] |
67-
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |
68-
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: -, multiple, single | - |
69-
| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
70-
| selectOnClickNode | 高级 | 是否在点击节点的时候触发v-model双向绑定 | boolean | true |
71-
| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
72-
| customValueFormatter | 高级 | 可以进行值的自定义渲染 | Function(data, key, parent, defaultFormatted) | - |
14+
| 属性 | 级别 | 说明 | 类型 | 默认值 |
15+
| ------------------------ | ---- | ----------------------------------------- | ---------------------------------------------- | ------------- |
16+
| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
17+
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
18+
| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
19+
| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
20+
| showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true |
21+
| virtual | 基础 | 是否使用虚拟滚动(大数据量时) | boolean | false |
22+
| itemHeight | 基础 | 使用虚拟滚动时，定义每一行高度 | number | auto |
23+
| v-model | 高级 | 双向绑定选中的数据层级 | string, array | string, array |
24+
| path | 高级 | 定义最顶层数据层级 | string | root |
25+
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | function(path, content) | - |
26+
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | multiple, single | - |
27+
| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
28+
| selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true |
29+
| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
30+
| collapsedOnClickBrackets | 高级 | 是否支持折叠 | boolean | true |
31+
| customValueFormatter | 高级 | 可以进行值的自定义渲染 | function(data, key, path, defaultFormatResult) | - |
7332

7433
## Events
7534

76-
| 事件名 | 说明 | 回调参数 |
77-
|---------- |-------- |---------- |
78-
| click | 点击某一个数据层级时触发的事件 | (path, data) |
79-
| change | v-model改变的事件(仅在选择模式下可用) | (newVal, oldVal) |
35+
| 事件名 | 说明 | 回调参数 |
36+
| ------ | -------------------------------------- | ---------------- |
37+
| click | 点击某一个数据层级时触发的事件 | (path, data) |
38+
| change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) |

0 commit comments

Comments
 (0)