diff --git a/.eslintrc.js b/.eslintrc.js
index 9aa7030..8e4fa14 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ '@typescript-eslint/explicit-module-boundary-types': 'off',
// 'prettier/prettier': [1, { arrowParens: 'avoid' }],
},
};
diff --git a/README.md b/README.md
index c6bfa9e..72c07f5 100644
--- a/README.md
+++ b/README.md
@@ -106,48 +106,52 @@ plugins: [
## Props
-| Property | Description | Type | Default |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |
-| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
-| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
-| 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 |
-| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
-| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
-| editable | Support editable | boolean | false |
-| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
-| theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'` | `light` |
+| Property | Description | Type | Default |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
+| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
+| indent | JSON indent | number | 2 |
+| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
+| 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 |
+| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
+| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
+| renderNodeActions | render node actions, or use slot #renderNodeActions | boolean \| ({ node, defaultActions }) => vNode | false |
+| editable | Support editable | boolean | false |
+| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
+| theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'` | `light` |
## Events
| Event Name | Description | Parameters |
| -------------- | ---------------------------------------- | ------------------------------------ |
| nodeClick | triggers when click node | (node: NodeData) |
+| nodeMouseover | triggers when mouseover node | (node: NodeData) |
| bracketsClick | triggers when click brackets | (collapsed: boolean, node: NodeData) |
| iconClick | triggers when click icon | (collapsed: boolean, node: NodeData) |
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
## Slots
-| Slot Name | Description | Parameters |
-| --------------- | ----------------- | ---------------------- |
-| renderNodeKey | render node key | { node, defaultKey } |
-| renderNodeValue | render node value | { node, defaultValue } |
+| Slot Name | Description | Parameters |
+| ----------------- | ------------------- | ---------------------------------------------- | ----- |
+| renderNodeKey | render node key | { node, defaultKey } |
+| renderNodeValue | render node value | { node, defaultValue } |
+| renderNodeActions | render node actions | boolean \| ({ node, defaultActions }) => vNode | false |
## Contributors
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 65247b5..1b222b8 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -10,45 +10,49 @@
## Props
-| 属性 | 说明 | 类型 | 默认值 |
-| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
-| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
-| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
-| 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 |
-| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
-| renderNodeValue | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | - |
-| editable | 支持可编辑 | boolean | false |
-| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | `click` |
-| theme | 主题色 | `'light' \| 'dark'` | `light` |
+| 属性 | 说明 | 类型 | 默认值 |
+| ------------------------ | ----------------------------------------------- | ---------------------------------------------- | ------------- |
+| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
+| indent | 缩进 | number | 2 |
+| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
+| 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 |
+| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
+| renderNodeValue | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | - |
+| renderNodeActions | 自定义渲染节点操作，也可使用 #renderNodeActions | boolean \| ({ node, defaultActions }) => vNode | false |
+| editable | 支持可编辑 | boolean | false |
+| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | `click` |
+| theme | 主题色 | `'light' \| 'dark'` | `light` |
## Events
| 事件名称 | 说明 | 回调参数 |
| -------------- | -------------------- | ------------------------------------ |
| nodeClick | 点击节点时触发 | (node: NodeData) |
+| nodeMouseover | 悬浮节点时触发 | (node: NodeData) |
| bracketsClick | 点击括号时触发 | (collapsed: boolean, node: NodeData) |
| iconClick | 点击图标时触发 | (collapsed: boolean, node: NodeData) |
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |
## Slots
-| 插槽名 | 描述 | 参数 |
-| --------------- | ---------- | ---------------------- |
-| renderNodeKey | 渲染节点键 | { node, defaultKey } |
-| renderNodeValue | 渲染节点值 | { node, defaultValue } |
+| 插槽名 | 描述 | 参数 |
+| ----------------- | ------------ | ---------------------------------------------- | ----- |
+| renderNodeKey | 渲染节点键 | { node, defaultKey } |
+| renderNodeValue | 渲染节点值 | { node, defaultValue } |
+| renderNodeActions | 渲染节点操作 | boolean \| ({ node, defaultActions }) => vNode | false |
diff --git a/example/Basic.vue b/example/Basic.vue
index 64df3a1..c6724ac 100644
--- a/example/Basic.vue
+++ b/example/Basic.vue
@@ -34,6 +34,13 @@
+
+
+
+
+
+
+
+
@@ -73,6 +88,7 @@
:theme="localDarkMode"
:data="state.data"
:deep="state.deep"
+ :indent="state.indent"
:path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"
:show-double-quotes="state.showDoubleQuotes"
:show-length="state.showLength"
@@ -81,6 +97,11 @@
:collapsed-on-click-brackets="state.collapsedOnClickBrackets"
:show-icon="state.showIcon"
:show-key-value-space="state.showKeyValueSpace"
+ :render-node-actions="
+ typeof state.useRenderNodeActionsSlot === 'boolean'
+ ? state.useRenderNodeActionsSlot
+ : undefined
+ "
style="position: relative"
>
@@ -96,6 +117,14 @@
{{ defaultValue }}
+
+
+ link
+ copy
+