Skip to content

Commit 5098fac

Browse files
leezngleezng
authored
Merge pull request #186 from leezng/dev
release
2 parents 350749c + 19e319e commit 5098fac

25 files changed

+1238
-555
lines changed

‎README.md‎

Lines changed: 45 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ English | [简体中文](./README.zh_CN.md)
2929
## Features
3030

3131
- As a JSON Formatter.
32-
- Get item data from JSON.
33-
- Written in TypeScript with predictable static types.
32+
- Written in TypeScript, support `d.ts`.
33+
- Support get item data from JSON.
3434
- Support big data.
35+
- Support editable.
3536

3637
## Environment Support
3738

@@ -52,10 +53,10 @@ $ npm install vue-json-pretty --save
5253
$ yarn add vue-json-pretty
5354
```
5455

55-
## Use Vue3
56+
## Use Vue2
5657

5758
```bash
58-
$ npm install vue-json-pretty@next --save
59+
$ npm install vue-json-pretty@v1-latest --save
5960
```
6061

6162
## Usage
@@ -65,7 +66,7 @@ The CSS file is included separately and needs to be imported manually. You can e
6566
```vue
6667
<template>
6768
<div>
68-
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
69+
<vue-json-pretty :data="{ key: 'value' }" />
6970
</div>
7071
</template>
7172
@@ -105,37 +106,47 @@ plugins: [
105106

106107
## Props
107108

108-
- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
109-
- If you are using higher features (Get data), you can use `base` and `higher` attributes.
110-
111-
| Attribute | Level | Description | Type | Default |
112-
| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
113-
| data | normal | JSON data | JSON object | - |
114-
| deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity |
115-
| deepCollapseChildren | normal | Whether children collapsed by `deep` prop should also be collapsed | boolean | false |
116-
| showLength | normal | Whether to show the length when closed | boolean | false |
117-
| showLine | normal | Whether to show the line | boolean | true |
118-
| showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |
119-
| virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false |
120-
| itemHeight | normal | The height of each item when using virtual scrolling | number | auto |
121-
| v-model | higher | Defines value when the tree can be selected | string, array | - |
122-
| path | higher | Root data path | string | root |
123-
| pathSelectable | higher | Defines whether a data path supports selection | function(path, content) | - |
124-
| selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - |
125-
| showSelectController | higher | Whether to show the select controller at left | boolean | false |
126-
| selectOnClickNode | higher | Whether to change selected value when click node | boolean | true |
127-
| highlightSelectedNode | higher | Highlight current node when selected | boolean | true |
128-
| collapsedOnClickBrackets | higher | Collapsed control | boolean | true |
129-
| customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | - |
109+
| Property | Description | Type | Default |
110+
| ------------------------ | ----------------------------------------------- | --------------------------------- | ------- |
111+
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112+
| deep | Paths greater than this depth will be collapsed | number | - |
113+
| showLength | Show the length when collapsed | boolean | false |
114+
| showLine | Show the line | boolean | true |
115+
| showLineNumber | Show the line number | boolean | false |
116+
| showIcon | Show the icon | boolean | false |
117+
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118+
| virtual | Use virtual scroll | boolean | false |
119+
| height | The height of list when using virtual | number | 400 |
120+
| itemHeight | The height of node when using virtual | number | 20 |
121+
| selectedValue(v-model) | Selected data path | string, array | - |
122+
| rootPath | Root data path | string | `root` |
123+
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
124+
| selectableType | Support path select, default none | `multiple` \| `single` | - |
125+
| showSelectController | Show the select controller | boolean | false |
126+
| selectOnClickNode | Trigger select when click node | boolean | true |
127+
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128+
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129+
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
130+
| editable | Support editable | boolean | false |
131+
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
130132

131133
## Events
132134

133-
| Event Name | Description | Callback Parameters |
134-
| ---------- | ---------------------------------------------------------------------------- | ------------------- |
135-
| click | triggered when a data item is clicked | (path, data) |
136-
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
135+
| Event Name | Description | Parameters |
136+
| -------------- | ---------------------------------------- | -------------------- |
137+
| nodeClick | triggers when click node | (node: NodeData) |
138+
| bracketsClick | triggers when click brackets | (collapsed: boolean) |
139+
| iconClick | triggers when click icon | (collapsed: boolean) |
140+
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
137141

138-
## Major Contributors
142+
## Slots
139143

140-
[![](https://avatars3.githubusercontent.com/u/153197?v=3&s=50)](https://github.com/rchl)
141-
[![](https://avatars1.githubusercontent.com/u/445616?v=3&s=50)](https://github.com/blackmad)
144+
| Slot Name | Description | Parameters |
145+
| --------------- | ----------------- | ---------------------- |
146+
| renderNodeValue | render node value | { node, defaultValue } |
147+
148+
## Contributors
149+
150+
<a href="https://github.com/leezng/vue-json-pretty/graphs/contributors">
151+
<img src="https://contrib.rocks/image?repo=leezng/vue-json-pretty" />
152+
</a>

‎README.zh_CN.md‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,48 @@
33
## 特性
44

55
- 一个 JSON 美化工具
6-
- 提取字段层级数据
7-
- 使用 Typescript，提供类型描述
6+
- 使用 Typescript，提供类型描述 `d.ts`
7+
- 支持字段层级数据提取
88
- 支持大数据虚拟滚动
9+
- 支持编辑
910

1011
## Props
1112

12-
- 若仅使用基础功能(JSON 美化)，只需关注功能级别为 `基础` 的属性。
13-
- 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。
14-
15-
| 属性 | 级别 | 说明 | 类型 | 默认值 |
16-
| ------------------------ | ---- | ----------------------------------------- | ---------------------------------------------- | ------------- |
17-
| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
18-
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
19-
| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
20-
| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
21-
| showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true |
22-
| virtual | 基础 | 是否使用虚拟滚动(大数据量时) | boolean | false |
23-
| itemHeight | 基础 | 使用虚拟滚动时，定义每一行高度 | number | auto |
24-
| v-model | 高级 | 双向绑定选中的数据层级 | string, array | string, array |
25-
| path | 高级 | 定义最顶层数据层级 | string | root |
26-
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | function(path, content) | - |
27-
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | multiple, single | - |
28-
| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
29-
| selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true |
30-
| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
31-
| collapsedOnClickBrackets | 高级 | 是否支持折叠 | boolean | true |
32-
| customValueFormatter | 高级 | 可以进行值的自定义渲染 | function(data, key, path, defaultFormatResult) | - |
13+
| 属性 | 说明 | 类型 | 默认值 |
14+
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
15+
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
16+
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
17+
| showLength | 在数据折叠的时候展示长度 | boolean | false |
18+
| showLine | 展示标识线 | boolean | true |
19+
| showLineNumber | 展示行计数 | boolean | false |
20+
| showIcon | 展示图标 | boolean | false |
21+
| showDoubleQuotes | 展示 key 名的双引号 | boolean | true |
22+
| virtual | 使用虚拟滚动(大数据量) | boolean | false |
23+
| height | 使用虚拟滚动时，定义总高度 | number | 400 |
24+
| itemHeight | 使用虚拟滚动时，定义节点高度 | number | 20 |
25+
| selectedValue(v-model) | 双向绑定选中的数据路径 | string, array | string, array |
26+
| rootPath | 定义最顶层数据路径 | string | `root` |
27+
| nodeSelectable | 定义哪些数据节点可以被选择 | function(node) | - |
28+
| selectableType | 定义选择功能，默认无 | `multiple` \| `single` | - |
29+
| showSelectController | 展示选择器 | boolean | false |
30+
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
31+
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
32+
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
33+
| renderNodeValue | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | - |
34+
| editable | 支持可编辑 | boolean | false |
35+
| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | `click` |
3336

3437
## Events
3538

36-
| 事件名 | 说明 | 回调参数 |
37-
| ------ | -------------------------------------- | ---------------- |
38-
| click | 点击某一个数据层级时触发的事件 | (path, data) |
39-
| change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) |
39+
| 事件名称 | 说明 | 回调参数 |
40+
| -------------- | -------------------- | -------------------- |
41+
| nodeClick | 点击节点时触发 | (node: NodeData) |
42+
| bracketsClick | 点击括号时触发 | (collapsed: boolean) |
43+
| iconClick | 点击图标时触发 | (collapsed: boolean) |
44+
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |
45+
46+
## Slots
47+
48+
| 插槽名 | 描述 | 参数 |
49+
| --------------- | ---------- | ---------------------- |
50+
| renderNodeValue | 渲染节点值 | { node, defaultValue } |

‎example/App.tsx‎

Lines changed: 77 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,91 @@
1-
import { defineComponent } from 'vue';
1+
import { defineComponent, reactive } from 'vue';
22
import Basic from './Basic.vue';
33
import VirtualList from './VirtualList.vue';
44
import SelectControl from './SelectControl.vue';
5+
import Editable from './Editable.vue';
6+
// import Tsx from './Tsx';
57
import './styles.less';
68

9+
const list = [
10+
{
11+
title: 'Basic Use',
12+
key: 'Basic',
13+
component: Basic,
14+
},
15+
{
16+
title: 'Virtual List',
17+
key: 'VirtualList',
18+
component: VirtualList,
19+
},
20+
{
21+
title: 'Selector',
22+
key: 'Selector',
23+
component: SelectControl,
24+
},
25+
{
26+
title: 'Editable',
27+
key: 'Editable',
28+
component: Editable,
29+
},
30+
// {
31+
// title: 'Tsx',
32+
// key: 'Tsx',
33+
// component: Tsx,
34+
// },
35+
];
36+
737
export default defineComponent({
38+
setup() {
39+
const state = reactive({
40+
activeKey: list[0].key,
41+
opened: [list[0].key],
42+
});
43+
44+
const onActiveChange = (key: string) => {
45+
state.activeKey = key;
46+
if (!state.opened.includes(key)) {
47+
state.opened.push(key);
48+
}
49+
};
50+
51+
return {
52+
state,
53+
onActiveChange,
54+
};
55+
},
56+
857
render() {
9-
const list = [
10-
{
11-
title: 'Basic Use',
12-
key: 'basic',
13-
component: <Basic />,
14-
},
15-
{
16-
title: 'Virtual List',
17-
key: 'virtual-list',
18-
component: <VirtualList />,
19-
},
20-
{
21-
title: 'Selector',
22-
key: 'select-control',
23-
component: <SelectControl />,
24-
},
25-
];
58+
const { state, onActiveChange } = this;
2659

2760
return (
2861
<div class="example">
29-
{list.map(item => (
30-
<div class="example-box" id={item.key}>
31-
<h2 class="title">{item.title}</h2>
32-
{item.component}
62+
<h1>Vue Json Pretty</h1>
63+
<p>
64+
Welcome to the demo space of Vue Json Pretty, here we provide the following different
65+
usage scenarios, try to click on different tab panel to browse.
66+
</p>
67+
68+
<div class="tabs">
69+
<div class="tabs-header">
70+
{list.map(({ title, key }) => (
71+
<div
72+
key={key}
73+
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
74+
onClick={() => onActiveChange(key)}
75+
>
76+
{title}
77+
</div>
78+
))}
79+
</div>
80+
81+
<div class="tabs-content">
82+
{list.map(({ component: Component, key }) => (
83+
<div key={key} style={{ display: `${key === state.activeKey ? 'block' : 'none'}` }}>
84+
{key === state.activeKey || state.opened.includes(key) ? <Component /> : null}
85+
</div>
86+
))}
3387
</div>
34-
))}
35-
36-
<a
37-
style="position: fixed; right: 0; top: 0;"
38-
href="https://github.com/leezng/vue-json-pretty"
39-
target="_blank"
40-
>
41-
<img
42-
style="position: absolute; top: 0; right: 0; border: 0;"
43-
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
44-
alt="Fork me on GitHub"
45-
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
46-
/>
47-
</a>
88+
</div>
4889
</div>
4990
);
5091
},

0 commit comments

Comments
 (0)