bkui-vue 0.0.1-beta.58 → 0.0.1-beta.60

package/dist/index.esm.js

@@ -20239,6 +20239,7 @@ const Transfer = withInstall(Component$1);
 const treeProps = {
   data: PropTypes.arrayOf(PropTypes.any).def([]),
   label: PropTypes.oneOfType([PropTypes.func.def(void 0), PropTypes.string.def("label")]),
+  nodeKey: PropTypes.string.def(null),
   children: PropTypes.string.def("children"),
   indent: PropTypes.number.def(18),
   lineHeight: PropTypes.number.def(32),
@@ -20255,10 +20256,49 @@ const treeProps = {
   ]).def(true),
   async: PropTypes.shape({
     callback: PropTypes.func.def(null),
-    cache: PropTypes.bool.def(true)
+    cache: PropTypes.bool.def(true),
+    deepAutoOpen: PropTypes.commonType(["once", "every"], "columnType").def("once")
   }),
   offsetLeft: PropTypes.number.def(5)
 };
+var useNodeAttribute = (flatData) => {
+  const schemaValues = computed(() => Array.from(flatData.schema.values()));
+  const getSchemaVal2 = (key) => flatData.schema.get(key);
+  const getNodeAttr2 = (node, attr) => {
+    var _a;
+    return (_a = getSchemaVal2(node.__uuid)) == null ? void 0 : _a[attr];
+  };
+  const setNodeAttr = (node, attr, val) => flatData.schema.set(node.__uuid, __spreadProps(__spreadValues({}, getSchemaVal2(node.__uuid)), {
+    [attr]: val
+  }));
+  const getNodePath = (node) => getNodeAttr2(node, "__path");
+  const isRootNode = (node) => getNodeAttr2(node, "__isRoot");
+  const isNodeOpened = (node) => getNodeAttr2(node, "__isOpen");
+  const hasChildNode = (node) => getNodeAttr2(node, "__hasChild");
+  const isItemOpen = (item) => {
+    var _a;
+    if (typeof item === "object") {
+      return isNodeOpened(item);
+    }
+    if (typeof item === "string") {
+      return (_a = getSchemaVal2(item)) == null ? void 0 : _a.__isOpen;
+    }
+    return false;
+  };
+  const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
+  return {
+    schemaValues,
+    getSchemaVal: getSchemaVal2,
+    getNodeAttr: getNodeAttr2,
+    setNodeAttr,
+    getNodePath,
+    isRootNode,
+    isNodeOpened,
+    hasChildNode,
+    isItemOpen,
+    checkNodeIsOpen
+  };
+};
 var rngBrowser = { exports: {} };
 var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
 if (getRandomValues) {
@@ -20403,6 +20443,13 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
   const outputData = [];
   let order2 = 0;
   const schema = /* @__PURE__ */ new Map();
+  function getUid(item) {
+    let uid = null;
+    if (typeof props.nodeKey === "string") {
+      uid = item[props.nodeKey];
+    }
+    return uid || item.__uuid || uuid_1.v4();
+  }
   function getCachedTreeNodeAttr(uuid2, node, attr, cachedAttr) {
     const cached = (cachedSchema || []).find((item) => item.__uuid === uuid2);
     if (cached) {
@@ -20424,7 +20471,7 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
         flatten(item, depth, parent, path);
       } else {
         if (typeof item === "object" && item !== null) {
-          const uuid2 = item.__uuid || uuid_1.v4();
+          const uuid2 = getUid(item);
           const currentPath = path !== null ? `${path}-${i}` : `${i}`;
           const hasChildren = !!(item[children] || []).length;
           const attrs = {
@@ -20436,7 +20483,7 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
             __path: currentPath,
             __isRoot: parent === null,
             __order: order2,
-            __isOpen: isCachedTreeNodeOpened(uuid2, item) && hasChildren,
+            __isOpen: isCachedTreeNodeOpened(uuid2, item),
             __checked: isCachedTreeNodeChecked(uuid2, item),
             [children]: null
           };
@@ -20538,202 +20585,302 @@ const assignTreeNode = (path, treeData, childKey, assignVal) => {
   }, treeData);
   Object.assign(targetNode, assignVal || {});
 };
+var useAsync = (props, flatData) => {
+  const {
+    setNodeAttr,
+    getNodePath,
+    getNodeAttr: getNodeAttr2
+  } = useNodeAttribute(flatData);
+  const setNodeRemoteLoad = (resp, item) => {
+    if (typeof resp === "object" && resp !== null) {
+      setNodeAttr(item, "__isOpen", true);
+      const nodeValue = Array.isArray(resp) ? resp : [resp];
+      updateTreeNode(getNodePath(item), props.data, props.children, props.children, nodeValue);
+    }
+  };
+  const asyncNodeClick = (item) => {
+    if (item.async) {
+      const {
+        callback = null,
+        cache = true
+      } = props.async || {};
+      setNodeAttr(item, "__isAsyncInit", true);
+      if (typeof callback === "function") {
+        if (!item.cached) {
+          Object.assign(item, {
+            loading: true
+          });
+          return Promise.resolve(callback(item, (resp) => setNodeRemoteLoad(resp, item)).then((resp) => setNodeRemoteLoad(resp, item)).catch((err) => console.error("load remote data error:", err)).finally(() => {
+            assignTreeNode(getNodePath(item), props.data, props.children, __spreadValues({
+              loading: false
+            }, cache ? {
+              cached: true
+            } : {}));
+          }));
+        }
+        return Promise.resolve(true);
+      }
+      return Promise.reject("async need to set prop: asyncLoad with function wich will return promise object");
+    }
+  };
+  const deepAutoOpen = () => {
+    const autoOpenNodes = flatData.data.filter((item) => item.async && item.isOpen && !getNodeAttr2(item, "__isAsyncInit"));
+    if (autoOpenNodes.length) {
+      Promise.all(autoOpenNodes.map((item) => asyncNodeClick(item))).then(() => {
+        deepAutoOpen();
+      }).catch((err) => {
+        console.warn(err);
+      });
+    }
+  };
+  return {
+    asyncNodeClick,
+    deepAutoOpen
+  };
+};
+var useNodeAction = (props, ctx, flatData, renderData) => {
+  const checkedNodes = [];
+  const {
+    setNodeAttr,
+    getNodePath,
+    getSchemaVal: getSchemaVal2,
+    getNodeAttr: getNodeAttr2,
+    isRootNode,
+    hasChildNode,
+    isItemOpen,
+    isNodeOpened,
+    schemaValues
+  } = useNodeAttribute(flatData);
+  const {
+    asyncNodeClick,
+    deepAutoOpen
+  } = useAsync(props, flatData);
+  const getRootIcon = (item) => isItemOpen(item) ? createVNode(folderShapeOpen, {
+    "class": resolveClassName("tree-icon")
+  }, null) : createVNode(folder, {
+    "class": resolveClassName("tree-icon")
+  }, null);
+  const renderPrefixVal = (val) => {
+    if (typeof val === "string") {
+      return val;
+    }
+    if (typeof val === "object" && val !== null) {
+      if (val.__v_isVNode) {
+        return val;
+      }
+      const {
+        node,
+        className,
+        text,
+        style
+      } = val;
+      return h$1(node, {
+        class: className,
+        style
+      }, text);
+    }
+    return null;
+  };
+  const getActionIcon = (item) => {
+    let prefixFnVal = null;
+    if (typeof props.prefixIcon === "function") {
+      prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "action", item);
+      if (prefixFnVal !== "default") {
+        return renderPrefixVal(prefixFnVal);
+      }
+    }
+    if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
+      if (hasChildNode(item) || item.async) {
+        return isItemOpen(item) ? createVNode(downShape, null, null) : createVNode(rightShape, null, null);
+      }
+    }
+    return null;
+  };
+  const getNodePrefixIcon = (item) => {
+    let prefixFnVal = null;
+    if (typeof props.prefixIcon === "function") {
+      prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "node_type", item);
+      if (prefixFnVal !== "default") {
+        return renderPrefixVal(prefixFnVal);
+      }
+    }
+    if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
+      return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : createVNode(textFile, {
+        "class": resolveClassName("tree-icon")
+      }, null);
+    }
+    return null;
+  };
+  const getLoadingIcon = (item) => item.loading ? createVNode(spinner, null, null) : "";
+  const setNodeOpened = (item) => {
+    const newVal = !isItemOpen(item);
+    setNodeAttr(item, "__isOpen", newVal);
+    if (newVal) {
+      return;
+    }
+    renderData.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, "__isOpen", newVal));
+  };
+  const hanldeTreeNodeClick = (item) => {
+    asyncNodeClick(item);
+    if (hasChildNode(item)) {
+      setNodeOpened(item);
+    }
+  };
+  const handleNodeActionClick = (e, node) => {
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    e.preventDefault();
+    hanldeTreeNodeClick(node);
+  };
+  const handleNodeContentClick = (item) => {
+    if (!checkedNodes.includes(item.__uuid)) {
+      checkedNodes.forEach((__uuid) => setNodeAttr({
+        __uuid
+      }, "__checked", false));
+      checkedNodes.length = 0;
+      setNodeAttr(item, "__checked", true);
+      checkedNodes.push(item.__uuid);
+      if (!isNodeOpened(item)) {
+        hanldeTreeNodeClick(item);
+      }
+      ctx.emit("check", item, getSchemaVal2(item.__uuid));
+    }
+  };
+  const filterNextNode = (depth, node) => {
+    if (isRootNode(node)) {
+      return false;
+    }
+    const nodepath = getNodePath(node);
+    const paths = `${nodepath}`.split("-").slice(0, depth + 1);
+    const currentPath = paths.join("-");
+    if (currentPath === nodepath) {
+      return true;
+    }
+    const lastLevel = paths.pop();
+    const nextLevel = parseInt(lastLevel, 10);
+    paths.push(`${nextLevel + 1}`);
+    const nextNodePath = paths.join("-");
+    return schemaValues.value.some((val) => val.__path === nextNodePath);
+  };
+  const getVirtualLines = (node) => {
+    if (!props.levelLine) {
+      return null;
+    }
+    const getNodeLineStyle = (dpth) => ({
+      "--depth": dpth
+    });
+    const maxDeep = getNodeAttr2(node, "__depth") + 1;
+    return new Array(maxDeep).fill("").map((_2, index) => index).filter((depth) => filterNextNode(depth, node)).filter((depth) => depth > 0).map((index) => createVNode("span", {
+      "class": "node-virtual-line",
+      "style": getNodeLineStyle(maxDeep - index)
+    }, null));
+  };
+  const renderTreeNode = (item) => {
+    var _a, _b, _c, _d, _e;
+    return createVNode("div", {
+      "class": getNodeRowClass(item, flatData.schema)
+    }, [createVNode("div", {
+      "class": getNodeItemClass(item, flatData.schema, props),
+      "style": getNodeItemStyle(item, props, flatData),
+      "onClick": () => handleNodeContentClick(item)
+    }, [createVNode("span", {
+      "class": resolveClassName("node-action"),
+      "onClick": (e) => handleNodeActionClick(e, item)
+    }, [getActionIcon(item)]), createVNode("span", {
+      "class": resolveClassName("node-content")
+    }, [[getNodePrefixIcon(item), getLoadingIcon(item)], createVNode("span", {
+      "class": resolveClassName("node-text")
+    }, [(_e = (_b = (_a = ctx.slots).node) == null ? void 0 : _b.call(_a, item)) != null ? _e : [getLabel(item, props), (_d = (_c = ctx.slots).nodeAppend) == null ? void 0 : _d.call(_c, item)]])]), getVirtualLines(item)])]);
+  };
+  return {
+    renderTreeNode,
+    hanldeTreeNodeClick,
+    deepAutoOpen
+  };
+};
 var Component = defineComponent({
   name: "Tree",
   props: treeProps,
   emits: ["check"],
   setup(props, ctx) {
+    var _a;
     const formatData = getFlatdata(props);
-    const checkedNodes = [];
     const flatData = reactive({
       data: formatData[0],
       schema: formatData[1],
       levelLineSchema: {}
     });
+    const {
+      schemaValues,
+      setNodeAttr,
+      checkNodeIsOpen,
+      getNodeAttr: getNodeAttr2,
+      isRootNode
+    } = useNodeAttribute(flatData);
+    const renderData = computed(() => flatData.data.filter((item) => checkNodeIsOpen(item)));
+    const {
+      renderTreeNode,
+      hanldeTreeNodeClick,
+      deepAutoOpen
+    } = useNodeAction(props, ctx, flatData, renderData);
+    if ((_a = props.async) == null ? void 0 : _a.callback) {
+      deepAutoOpen();
+    }
     watch(() => [props.data], (newData) => {
+      var _a2, _b;
       const formatData2 = getFlatdata(props, newData, schemaValues.value);
       flatData.data = formatData2[0];
       flatData.schema = formatData2[1];
+      if (((_a2 = props.async) == null ? void 0 : _a2.callback) && ((_b = props.async) == null ? void 0 : _b.deepAutoOpen) === "every") {
+        deepAutoOpen();
+      }
     }, {
       deep: true
     });
-    const schemaValues = computed(() => Array.from(flatData.schema.values()));
-    const getSchemaVal2 = (key) => flatData.schema.get(key);
-    const getNodeAttr2 = (node, attr) => {
-      var _a;
-      return (_a = getSchemaVal2(node.__uuid)) == null ? void 0 : _a[attr];
-    };
-    const setNodeAttr = (node, attr, val) => flatData.schema.set(node.__uuid, __spreadProps(__spreadValues({}, getSchemaVal2(node.__uuid)), {
-      [attr]: val
-    }));
-    const getNodePath = (node) => getNodeAttr2(node, "__path");
-    const isRootNode = (node) => getNodeAttr2(node, "__isRoot");
-    const isNodeOpened = (node) => getNodeAttr2(node, "__isOpen");
-    const hasChildNode = (node) => getNodeAttr2(node, "__hasChild");
-    const renderData = computed(() => flatData.data.filter((item) => checkNodeIsOpen(item)));
-    const isItemOpen = (item) => {
-      var _a;
-      if (typeof item === "object") {
-        return isNodeOpened(item);
-      }
-      if (typeof item === "string") {
-        return (_a = getSchemaVal2(item)) == null ? void 0 : _a.__isOpen;
-      }
-      return false;
-    };
-    const getRootIcon = (item) => isItemOpen(item) ? createVNode(folderShapeOpen, {
-      "class": resolveClassName("tree-icon")
-    }, null) : createVNode(folder, {
-      "class": resolveClassName("tree-icon")
-    }, null);
-    const renderPrefixVal = (val) => {
-      if (typeof val === "string") {
-        return val;
-      }
-      if (typeof val === "object" && val !== null) {
-        if (val.__v_isVNode) {
-          return val;
-        }
-        const {
-          node,
-          className,
-          text,
-          style
-        } = val;
-        return h$1(node, {
-          class: className,
-          style
-        }, text);
-      }
-      return null;
-    };
-    const getActionIcon = (item) => {
-      let prefixFnVal = null;
-      if (typeof props.prefixIcon === "function") {
-        prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "action", item);
-        if (prefixFnVal !== "default") {
-          return renderPrefixVal(prefixFnVal);
-        }
-      }
-      if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
-        if (hasChildNode(item) || item.async) {
-          return isItemOpen(item) ? createVNode(downShape, null, null) : createVNode(rightShape, null, null);
-        }
-      }
-      return null;
-    };
-    const getNodePrefixIcon = (item) => {
-      let prefixFnVal = null;
-      if (typeof props.prefixIcon === "function") {
-        prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "node_type", item);
-        if (prefixFnVal !== "default") {
-          return renderPrefixVal(prefixFnVal);
-        }
+    const resolveNodeItem = (node) => {
+      if (typeof node === "string") {
+        return {
+          __uuid: node
+        };
       }
-      if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
-        return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : createVNode(textFile, {
-          "class": resolveClassName("tree-icon")
-        }, null);
+      if (Object.prototype.hasOwnProperty.call(node, "__uuid")) {
+        return node;
       }
-      return null;
+      console.error("setNodeAction Error: cannot find uid for the ndoe item");
+      return node;
     };
-    const getLoadingIcon = (item) => item.loading ? createVNode(spinner, null, null) : "";
-    const setNodeOpened = (item) => {
-      const newVal = !isItemOpen(item);
-      setNodeAttr(item, "__isOpen", newVal);
-      if (newVal) {
+    const setNodeAction = (args, action, value) => {
+      if (Array.isArray(args)) {
+        args.forEach((node) => setNodeAttr(resolveNodeItem(node), action, value));
         return;
       }
-      renderData.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, "__isOpen", newVal));
-    };
-    const setNodeRemoteLoad = (resp, item) => {
-      if (typeof resp === "object" && resp !== null) {
-        setNodeAttr(item, "__isOpen", true);
-        const nodeValue = Array.isArray(resp) ? resp : [resp];
-        updateTreeNode(getNodePath(item), props.data, props.children, props.children, nodeValue);
-      }
+      setNodeAttr(resolveNodeItem(args), action, value);
     };
-    const hanldeTreeNodeClick = (item) => {
-      if (item.async) {
-        const {
-          callback = null,
-          cache = true
-        } = props.async || {};
-        if (typeof callback === "function") {
-          if (!item.cached) {
-            Object.assign(item, {
-              loading: true
-            });
-            callback(item, (resp) => setNodeRemoteLoad(resp, item)).then((resp) => setNodeRemoteLoad(resp, item)).catch((err) => console.error("load remote data error:", err)).finally(() => {
-              assignTreeNode(getNodePath(item), props.data, props.children, __spreadValues({
-                loading: false
-              }, cache ? {
-                cached: true
-              } : {}));
-            });
-          }
-        } else {
-          console.error("async need to set prop: asyncLoad with function wich will return promise object");
+    const setOpen = (item, isOpen = true, autoOpenParents = false) => {
+      const resolvedItem = resolveNodeItem(item);
+      if (autoOpenParents && isOpen) {
+        setNodeAction(resolvedItem, "__isOpen", isOpen);
+        if (!isRootNode(resolvedItem)) {
+          const parentId = getNodeAttr2(resolvedItem, "__parentId");
+          setOpen(parentId, true, true);
         }
-      }
-      if (hasChildNode(item)) {
-        setNodeOpened(item);
-      }
-    };
-    const handleNodeActionClick = (e, node) => {
-      e.stopImmediatePropagation();
-      e.stopPropagation();
-      e.preventDefault();
-      hanldeTreeNodeClick(node);
-    };
-    const handleNodeContentClick = (item) => {
-      if (!checkedNodes.includes(item.__uuid)) {
-        checkedNodes.forEach((__uuid) => setNodeAttr({
-          __uuid
-        }, "__checked", false));
-        checkedNodes.length = 0;
-        setNodeAttr(item, "__checked", true);
-        checkedNodes.push(item.__uuid);
-        if (!isNodeOpened(item)) {
-          hanldeTreeNodeClick(item);
-        }
-        ctx.emit("check", item, getSchemaVal2(item.__uuid));
+      } else {
+        setNodeAction(resolvedItem, "__isOpen", isOpen);
       }
     };
-    const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
-    const filterNextNode = (depth, node) => {
-      if (isRootNode(node)) {
-        return false;
-      }
-      const nodepath = getNodePath(node);
-      const paths = `${nodepath}`.split("-").slice(0, depth + 1);
-      const currentPath = paths.join("-");
-      if (currentPath === nodepath) {
-        return true;
-      }
-      const lastLevel = paths.pop();
-      const nextLevel = parseInt(lastLevel, 10);
-      paths.push(`${nextLevel + 1}`);
-      const nextNodePath = paths.join("-");
-      return schemaValues.value.some((val) => val.__path === nextNodePath);
-    };
-    const getVirtualLines = (node) => {
-      if (!props.levelLine) {
-        return null;
-      }
-      const getNodeLineStyle = (dpth) => ({
-        "--depth": dpth
-      });
-      const maxDeep = getNodeAttr2(node, "__depth") + 1;
-      return new Array(maxDeep).fill("").map((_2, index) => index).filter((depth) => filterNextNode(depth, node)).filter((depth) => depth > 0).map((index) => createVNode("span", {
-        "class": "node-virtual-line",
-        "style": getNodeLineStyle(maxDeep - index)
-      }, null));
+    const setChecked = (item, checked = true) => {
+      setNodeAction(resolveNodeItem(item), "__checked", checked);
     };
+    ctx.expose({
+      hanldeTreeNodeClick,
+      setOpen,
+      setChecked,
+      setNodeAction
+    });
     const root = ref();
     const setNodeTextStyle = () => {
-      var _a;
-      if ((_a = root.value) == null ? void 0 : _a.$el) {
+      var _a2;
+      if ((_a2 = root.value) == null ? void 0 : _a2.$el) {
         const selector = `.${resolveClassName("tree-node")}`;
         const ctxSelector = `.${resolveClassName("node-content")}`;
         Array.prototype.forEach.call(root.value.$el.querySelectorAll(selector), (nodeEl) => {
@@ -20752,48 +20899,15 @@ var Component = defineComponent({
     onUpdated(() => {
       setNodeTextStyle();
     });
-    return {
-      renderData,
-      flatData,
-      root,
-      hanldeTreeNodeClick,
-      handleNodeContentClick,
-      handleNodeActionClick,
-      getActionIcon,
-      getRootIcon,
-      getVirtualLines,
-      getNodePrefixIcon,
-      getLoadingIcon
-    };
-  },
-  render() {
-    const props = this.$props;
-    const renderTreeNode = (item) => {
-      var _a, _b, _c, _d, _e;
-      return createVNode("div", {
-        "class": getNodeRowClass(item, this.flatData.schema)
-      }, [createVNode("div", {
-        "class": getNodeItemClass(item, this.flatData.schema, props),
-        "style": getNodeItemStyle(item, props, this.flatData),
-        "onClick": () => this.handleNodeContentClick(item)
-      }, [createVNode("span", {
-        "class": resolveClassName("node-action"),
-        "onClick": (e) => this.handleNodeActionClick(e, item)
-      }, [this.getActionIcon(item)]), createVNode("span", {
-        "class": resolveClassName("node-content")
-      }, [[this.getNodePrefixIcon(item), this.getLoadingIcon(item)], createVNode("span", {
-        "class": resolveClassName("node-text")
-      }, [(_e = (_b = (_a = this.$slots).node) == null ? void 0 : _b.call(_a, item)) != null ? _e : [getLabel(item, props), (_d = (_c = this.$slots).nodeAppend) == null ? void 0 : _d.call(_c, item)]])]), this.getVirtualLines(item)])]);
-    };
-    return createVNode(BkVirtualRender, {
+    return () => createVNode(BkVirtualRender, {
       "class": resolveClassName("tree"),
       "style": getTreeStyle(null, props),
-      "list": this.renderData,
+      "list": renderData.value,
       "lineHeight": props.lineHeight,
       "enabled": props.virtualRender,
       "contentClassName": resolveClassName("container"),
       "throttleDelay": 0,
-      "ref": "root"
+      "ref": root
     }, {
       default: (scoped) => (scoped.data || []).map(renderTreeNode)
     });