fix: add node data on bracketsClick & iconClick

leezng · Mar 18, 2024 · 17ce791 · 17ce791
1 parent 847ec8c
commit 17ce791
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -135,12 +135,12 @@ plugins: [
 
 ## Events
 
-| 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)     |
+| Event Name     | Description                              | Parameters                           |
+| -------------- | ---------------------------------------- | ------------------------------------ |
+| nodeClick      | triggers when click 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
 

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -13,7 +13,7 @@
 | 属性                     | 说明                                        | 类型                              | 默认值        |
 | ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
 | data(v-model)            | 源数据，注意不是 `JSON` 字符串              | `JSON` 数据对象                   | -             |
-| collapsedNodeLength        | 长度大于此阈值的对象或数组将被折叠 | number               | Infinity      |
+| collapsedNodeLength      | 长度大于此阈值的对象或数组将被折叠          | number                            | Infinity      |
 | deep                     | 深度，大于该深度的节点将被折叠              | number                            | Infinity      |
 | showLength               | 在数据折叠的时候展示长度                    | boolean                           | false         |
 | showLine                 | 展示标识线                                  | boolean                           | true          |
@@ -31,23 +31,24 @@
 | selectOnClickNode        | 支持点击节点的时候触发选择                  | boolean                           | true          |
 | highlightSelectedNode    | 支持高亮已选择节点                          | boolean                           | true          |
 | collapsedOnClickBrackets | 支持点击括号折叠                            | boolean                           | true          |
-| renderNodeKey            | 渲染节点键，也可使用 #renderNodeKey    | ({ node, defaultKey }) => vNode | -             |
+| renderNodeKey            | 渲染节点键，也可使用 #renderNodeKey         | ({ node, defaultKey }) => vNode   | -             |
 | renderNodeValue          | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | -             |
 | editable                 | 支持可编辑                                  | boolean                           | false         |
 | editableTrigger          | 触发编辑的时机                              | `click` \| `dblclick`             | `click`       |
+| theme                    | 主题色                                      | `'light' \| 'dark'`               | `light`       |
 
 ## Events
 
-| 事件名称       | 说明                 | 回调参数             |
-| -------------- | -------------------- | -------------------- |
-| nodeClick      | 点击节点时触发       | (node: NodeData)     |
-| bracketsClick  | 点击括号时触发       | (collapsed: boolean) |
-| iconClick      | 点击图标时触发       | (collapsed: boolean) |
-| selectedChange | 选中值发生变化时触发 | (newVal, oldVal)     |
+| 事件名称       | 说明                 | 回调参数                             |
+| -------------- | -------------------- | ------------------------------------ |
+| nodeClick      | 点击节点时触发       | (node: NodeData)                     |
+| bracketsClick  | 点击括号时触发       | (collapsed: boolean, node: NodeData) |
+| iconClick      | 点击图标时触发       | (collapsed: boolean, node: NodeData) |
+| selectedChange | 选中值发生变化时触发 | (newVal, oldVal)                     |
 
 ## Slots
 
 | 插槽名          | 描述       | 参数                   |
 | --------------- | ---------- | ---------------------- |
-| renderNodeKey | 渲染节点键 | { node, defaultKey } |
+| renderNodeKey   | 渲染节点键 | { node, defaultKey }   |
 | renderNodeValue | 渲染节点值 | { node, defaultValue } |
diff --git a/example/Icons.tsx b/example/Icons.tsx
@@ -6,9 +6,9 @@ export const SunIcon = () => (
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
   >
     <circle cx="12" cy="12" r="5"></circle>
     <line x1="12" y1="1" x2="12" y2="3"></line>
@@ -30,9 +30,9 @@ export const MoonIcon = () => (
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
   >
     <path d="M21 12.79A9 9 0 0112.21 3C11.66 3 11.11 3.05 10.58 3.15A9 9 0 1021 12.79z"></path>
   </svg>

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
@@ -229,16 +229,16 @@ export default defineComponent({
       }
     };
 
-    const handleBracketsClick = (collapsed: boolean, path: string) => {
+    const handleBracketsClick = (collapsed: boolean, node: NodeDataType) => {
       if (props.collapsedOnClickBrackets) {
-        updateCollapsedPaths(collapsed, path);
+        updateCollapsedPaths(collapsed, node.path);
       }
-      emit('bracketsClick', collapsed, path);
+      emit('bracketsClick', collapsed, node);
     };
 
-    const handleIconClick = (collapsed: boolean, path: string) => {
-      updateCollapsedPaths(collapsed, path);
-      emit('iconClick', collapsed, path);
+    const handleIconClick = (collapsed: boolean, node: NodeDataType) => {
+      updateCollapsedPaths(collapsed, node.path);
+      emit('iconClick', collapsed, node);
     };
 
     const handleValueChange = (value: unknown, path: string) => {

diff --git a/src/components/TreeNode/index.tsx b/src/components/TreeNode/index.tsx
@@ -84,10 +84,10 @@ export const treeNodePropsPass = {
     type: Function as PropType<(node: NodeDataType) => void>,
   },
   onBracketsClick: {
-    type: Function as PropType<(collapsed: boolean, path: string) => void>,
+    type: Function as PropType<(collapsed: boolean, node: NodeDataType) => void>,
   },
   onIconClick: {
-    type: Function as PropType<(collapsed: boolean, path: string) => void>,
+    type: Function as PropType<(collapsed: boolean, node: NodeDataType) => void>,
   },
   onValueChange: {
     type: Function as PropType<(value: boolean, path: string) => void>,
@@ -171,11 +171,11 @@ export default defineComponent({
     };
 
     const handleBracketsClick = () => {
-      emit('bracketsClick', !props.collapsed, props.node.path);
+      emit('bracketsClick', !props.collapsed, props.node);
     };
 
     const handleIconClick = () => {
-      emit('iconClick', !props.collapsed, props.node.path);
+      emit('iconClick', !props.collapsed, props.node);
     };
 
     const handleSelectedChange = () => {