chore: change pathSelectable to nodeSelectable

Author: leezng

README.md

@@ -120,7 +120,7 @@ plugins: [
 | itemHeight               | The height of node when using virtual           | number                            | 20      |
 | selectedValue(v-model)   | Selected data path                              | string, array                     | -       |
 | rootPath                 | Root data path                                  | string                            | `root`  |
-| pathSelectable           | Defines whether a path supports selection       | (path, content) => boolean        | -       |
+| 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    |

README.zh_CN.md

@@ -13,7 +13,7 @@
 | 属性                     | 说明                                        | 类型                              | 默认值        |
 | ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
 | data(v-model)            | 源数据，注意不是 `JSON` 字符串              | `JSON` 数据对象                   | -             |
-| deep                     | 深度，大于该深度的路径将被折叠              | number                            | Infinity      |
+| deep                     | 深度，大于该深度的节点将被折叠              | number                            | Infinity      |
 | showLength               | 在数据折叠的时候展示长度                    | boolean                           | false         |
 | showLine                 | 展示标识线                                  | boolean                           | true          |
 | showLineNumber           | 展示行计数                                  | boolean                           | false         |
@@ -24,7 +24,7 @@
 | itemHeight               | 使用虚拟滚动时，定义节点高度                | number                            | 20            |
 | selectedValue(v-model)   | 双向绑定选中的数据路径                      | string, array                     | string, array |
 | rootPath                 | 定义最顶层数据路径                          | string                            | `root`        |
-| pathSelectable           | 定义哪些数据路径可以被选择                  | function(path, content)           | -             |
+| nodeSelectable           | 定义哪些数据节点可以被选择                  | function(node)                    | -             |
 | selectableType           | 定义选择功能，默认无                        | `multiple` \| `single`            | -             |
 | showSelectController     | 展示选择器                                  | boolean                           | false         |
 | selectOnClickNode        | 支持点击节点的时候触发选择                  | boolean                           | true          |

example/SelectControl.vue

@@ -78,7 +78,7 @@
         :show-line-number="state.showLineNumber"
         :select-on-click-node="state.selectOnClickNode"
         :collapsed-on-click-brackets="state.collapsedOnClickBrackets"
-        :path-selectable="(path, data) => typeof state.data !== 'number'"
+        :node-selectable="node => typeof node.content !== 'number'"
         :selectable-type="state.selectableType"
         :show-select-controller="state.showSelectController"
         :show-icon="state.showIcon"

example/VirtualList.vue

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="block">
-      <h3>vue-json-pretty(1000+ items):</h3>
+      <h3>vue-json-pretty(10000+ items):</h3>
       <vue-json-pretty
         :virtual="true"
         :item-height="+state.itemHeight"
@@ -52,7 +52,7 @@ const defaultData = {
   data: [],
 };
 
-for (let i = 0; i < 1000; i++) {
+for (let i = 0; i < 10000; i++) {
   defaultData.data.push({
     news_id: i,
     title: 'iPhone X Review: Innovative future with real black technology',

src/components/Tree/index.tsx

@@ -77,6 +77,7 @@ export default defineComponent({
     'update:selectedValue',
     'update:data',
   ],
+
   setup(props, { emit, slots }) {
     const treeRef = ref<HTMLElement>();
 
@@ -264,7 +265,7 @@ export default defineComponent({
             showLineNumber={props.showLineNumber}
             showSelectController={props.showSelectController}
             selectOnClickNode={props.selectOnClickNode}
-            pathSelectable={props.pathSelectable}
+            nodeSelectable={props.nodeSelectable}
             highlightSelectedNode={props.highlightSelectedNode}
             editable={props.editable}
             editableTrigger={props.editableTrigger}

src/components/TreeNode/index.tsx

@@ -47,8 +47,8 @@ export const treeNodePropsPass = {
     default: true,
   },
   // When using the selectableType, define whether current path/content is enabled.
-  pathSelectable: {
-    type: Function as PropType<(path: string, content: unknown) => boolean>,
+  nodeSelectable: {
+    type: Function as PropType<(node: NodeDataType) => boolean>,
     default: (): boolean => true,
   },
   // Highlight current node when selected.
@@ -119,9 +119,7 @@ export default defineComponent({
 
     // Whether the current node supports the selected function.
     const selectable = computed(
-      () =>
-        props.pathSelectable(props.node.path, props.node.content) &&
-        (isMultiple.value || isSingle.value),
+      () => props.nodeSelectable(props.node) && (isMultiple.value || isSingle.value),
     );
 
     const state = reactive({