diff --git a/README.md b/README.md
index c75cd86..16f3113 100644
--- a/README.md
+++ b/README.md
@@ -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
@@ -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
@@ -65,7 +66,7 @@ The CSS file is included separately and needs to be imported manually. You can e
```vue
-
+
@@ -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://github.com/rchl)
-[](https://github.com/blackmad)
+| Slot Name | Description | Parameters |
+| --------------- | ----------------- | ---------------------- |
+| renderNodeValue | render node value | { node, defaultValue } |
+
+## Contributors
+
+
+
+
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 7b15a47..cec3008 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -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 } |
diff --git a/example/App.tsx b/example/App.tsx
index cc62ba7..730fd7f 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -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: ,
- },
- {
- title: 'Virtual List',
- key: 'virtual-list',
- component: ,
- },
- {
- title: 'Selector',
- key: 'select-control',
- component: ,
- },
- ];
+ const { state, onActiveChange } = this;
return (
- {list.map(item => (
-
-
{item.title}
- {item.component}
+
Vue Json Pretty
+
+ 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.
+
-
+