Skip to content

release 2.2.0 #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Aug 16, 2022
Merged

release 2.2.0 #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
5b0f8f9
feat: support carets, add `showIcon` prop
leezng Jul 17, 2022
7b27626
Merge pull request #178 from leezng/feat-carets
leezng Jul 17, 2022
943f006
feat: support value editable
leezng Jul 17, 2022
0a09645
Merge pull request #179 from leezng/feat-editable
leezng Jul 17, 2022
435727a
chore: update example.
leezng Jul 30, 2022
d3e7317
chore: add hooks(useError).
leezng Jul 30, 2022
00e59cc
chore: Optimize array flat performance, optimize types.
leezng Jul 31, 2022
56dd09d
chore: Optimize json flat performance.
leezng Jul 31, 2022
f4a66e2
feat: support bracketsClick event.
leezng Jul 31, 2022
541668f
fix: itemHeight is invalid, delete virtualLines at the same time, use…
leezng Aug 1, 2022
cda5ed3
chore: don't bind scroll event in non-virtual mode
mawi1512 Aug 1, 2022
1469744
Merge pull request #181 from mawi1512/dev
leezng Aug 2, 2022
4a5b934
feat: support showLineNumber, close #35 #48
leezng Aug 3, 2022
662bdbe
chore: code optimization.
leezng Aug 9, 2022
ad51494
doc: update README.
leezng Aug 9, 2022
16ea14a
doc: update README.
leezng Aug 9, 2022
1df6ac7
chore(deps): bump moment from 2.29.3 to 2.29.4
dependabot[bot] Aug 10, 2022
c800d0d
chore: update path to rootPath.
leezng Aug 11, 2022
c26760e
feat: support renderNodeValue slot.
leezng Aug 11, 2022
37fdb31
chore: change classname style.
leezng Aug 13, 2022
ded52bc
doc: update README.
leezng Aug 13, 2022
e81c564
Merge pull request #184 from leezng/dependabot/npm_and_yarn/moment-2.…
leezng Aug 13, 2022
e9b23dd
chore: change pathSelectable to nodeSelectable
leezng Aug 16, 2022
19e319e
Merge remote-tracking branch 'origin/master' into dev
leezng Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 45 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ English | [简体中文](./README.zh_CN.md)
## Features

- As a JSON Formatter.
- Get item data from JSON.
- Written in TypeScript with predictable static types.
- Written in TypeScript, support `d.ts`.
- Support get item data from JSON.
- Support big data.
- Support editable.

## Environment Support

Expand All @@ -52,10 +53,10 @@ $ npm install vue-json-pretty --save
$ yarn add vue-json-pretty
```

## Use Vue3
## Use Vue2

```bash
$ npm install vue-json-pretty@next --save
$ npm install vue-json-pretty@v1-latest --save
```

## Usage
Expand All @@ -65,7 +66,7 @@ The CSS file is included separately and needs to be imported manually. You can e
```vue
<template>
<div>
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
<vue-json-pretty :data="{ key: 'value' }" />
</div>
</template>

Expand Down Expand Up @@ -105,37 +106,47 @@ plugins: [

## Props

- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
- If you are using higher features (Get data), you can use `base` and `higher` attributes.

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

## Events

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

## Major Contributors
## Slots

[![](https://avatars3.githubusercontent.com/u/153197?v=3&s=50)](https://github.com/rchl)
[![](https://avatars1.githubusercontent.com/u/445616?v=3&s=50)](https://github.com/blackmad)
| Slot Name | Description | Parameters |
| --------------- | ----------------- | ---------------------- |
| renderNodeValue | render node value | { node, defaultValue } |

## Contributors

<a href="https://github.com/leezng/vue-json-pretty/graphs/contributors">
<img src="https://contrib.rocks/image?repo=leezng/vue-json-pretty" />
</a>
65 changes: 38 additions & 27 deletions README.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,48 @@
## 特性

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

## Props

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

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

## Events

| 事件名 | 说明 | 回调参数 |
| ------ | -------------------------------------- | ---------------- |
| click | 点击某一个数据层级时触发的事件 | (path, data) |
| change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) |
| 事件名称 | 说明 | 回调参数 |
| -------------- | -------------------- | -------------------- |
| nodeClick | 点击节点时触发 | (node: NodeData) |
| bracketsClick | 点击括号时触发 | (collapsed: boolean) |
| iconClick | 点击图标时触发 | (collapsed: boolean) |
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |

## Slots

| 插槽名 | 描述 | 参数 |
| --------------- | ---------- | ---------------------- |
| renderNodeValue | 渲染节点值 | { node, defaultValue } |
113 changes: 77 additions & 36 deletions example/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,91 @@
import { defineComponent } from 'vue';
import { defineComponent, reactive } from 'vue';
import Basic from './Basic.vue';
import VirtualList from './VirtualList.vue';
import SelectControl from './SelectControl.vue';
import Editable from './Editable.vue';
// import Tsx from './Tsx';
import './styles.less';

const list = [
{
title: 'Basic Use',
key: 'Basic',
component: Basic,
},
{
title: 'Virtual List',
key: 'VirtualList',
component: VirtualList,
},
{
title: 'Selector',
key: 'Selector',
component: SelectControl,
},
{
title: 'Editable',
key: 'Editable',
component: Editable,
},
// {
// title: 'Tsx',
// key: 'Tsx',
// component: Tsx,
// },
];

export default defineComponent({
setup() {
const state = reactive({
activeKey: list[0].key,
opened: [list[0].key],
});

const onActiveChange = (key: string) => {
state.activeKey = key;
if (!state.opened.includes(key)) {
state.opened.push(key);
}
};

return {
state,
onActiveChange,
};
},

render() {
const list = [
{
title: 'Basic Use',
key: 'basic',
component: <Basic />,
},
{
title: 'Virtual List',
key: 'virtual-list',
component: <VirtualList />,
},
{
title: 'Selector',
key: 'select-control',
component: <SelectControl />,
},
];
const { state, onActiveChange } = this;

return (
<div class="example">
{list.map(item => (
<div class="example-box" id={item.key}>
<h2 class="title">{item.title}</h2>
{item.component}
<h1>Vue Json Pretty</h1>
<p>
Welcome to the demo space of Vue Json Pretty, here we provide the following different
usage scenarios, try to click on different tab panel to browse.
</p>

<div class="tabs">
<div class="tabs-header">
{list.map(({ title, key }) => (
<div
key={key}
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
onClick={() => onActiveChange(key)}
>
{title}
</div>
))}
</div>

<div class="tabs-content">
{list.map(({ component: Component, key }) => (
<div key={key} style={{ display: `${key === state.activeKey ? 'block' : 'none'}` }}>
{key === state.activeKey || state.opened.includes(key) ? <Component /> : null}
</div>
))}
</div>
))}

<a
style="position: fixed; right: 0; top: 0;"
href="https://github.com/leezng/vue-json-pretty"
target="_blank"
>
<img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
/>
</a>
</div>
</div>
);
},
Expand Down
Loading