snail.vue 1.0.47 → 1.0.48

package/dist/snail.vue.d.ts

@@ -416,6 +416,12 @@ interface ITreeBaseContext<T> {
      * @param text 搜索文本
      */
     doSearch(text: string): void;
+    /**
+     * 是否是【已激活】节点
+     * @param node 要判断的节点
+     * @returns true 是已激活节点，false 否
+     */
+    isActived(node: TreeNode<T>): boolean;
     /**
      * 是否是【补丁】节点
      * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
@@ -568,6 +574,13 @@ type TreeNodeModel<T> = TreeNode<T, TreeNodeExtend>;
  * 树节点 渲染配置选项
  */
 type TreeNodeRenderOptions = {
+    /**
+     * 节点展开层级
+     * - 不传入则默认展开所有
+     * - 否则展开传入的层级；从2开始；第一级始终展开；如2则1、2层级展开
+     * -
+     */
+    expandLevel?: number;
     /**
      * 是否禁用【折叠】子节点操作
      * - true 时禁用 折叠操作
@@ -585,8 +598,8 @@ type TreeNodeRenderOptions = {
  */
 type TreeNodeSlotOptions<Node> = {
     /**
-         * 当前节点
-         */
+     * 当前节点
+     */
     node: Node;
     /**
      * 父节点
@@ -1177,9 +1190,10 @@ type SwitchEvents = {
 /**
  * 使用【树上下文】
  * @param nodes 树节点集合
+ * @param activeNodeRef 当前激活的树节点引用；不传入，则无法实现 isActived 判断
  * @returns 上下文对象+作用域
  */
-declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[]): ITreeBaseContext<T> & IScope;
+declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[], activeNodeRef?: ShallowRef<TreeNode<T, TreeNodeExtend>>): ITreeBaseContext<T> & IScope;
 
 /**
  * 使用【响应式管理器】
@@ -1720,8 +1734,9 @@ interface IPopupManager {
      * @param type 提示类型：成功、失败、、、
      * @param message 提示消息
      * @param options 提示框配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): void;
+    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
 }
 
 /**
@@ -1990,7 +2005,10 @@ declare const components: {
             onTop?: () => any;
             onXbar?: (show: boolean) => any;
             onYbar?: (show: boolean) => any;
-        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        }>, {
+            scroll: (left?: number, top?: number) => void;
+            scrollTo: (left?: number, top?: number) => void;
+        }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             left: () => any;
             right: () => any;
             bottom: () => any;
@@ -2011,7 +2029,10 @@ declare const components: {
             onTop?: () => any;
             onXbar?: (show: boolean) => any;
             onYbar?: (show: boolean) => any;
-        }>, {}, {}, {}, {}, {}>;
+        }>, {
+            scroll: (left?: number, top?: number) => void;
+            scrollTo: (left?: number, top?: number) => void;
+        }, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
@@ -2022,7 +2043,10 @@ declare const components: {
         onTop?: () => any;
         onXbar?: (show: boolean) => any;
         onYbar?: (show: boolean) => any;
-    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    }>, {
+        scroll: (left?: number, top?: number) => void;
+        scrollTo: (left?: number, top?: number) => void;
+    }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         left: () => any;
         right: () => any;
         bottom: () => any;
@@ -2153,6 +2177,7 @@ declare const components: {
             onSearched?: (text: string) => any;
         }>, {
             context: ITreeBaseContext<any>;
+            onTreeNodeClick: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => void;
         }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             click: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
             searched: (text: string) => any;
@@ -2172,6 +2197,7 @@ declare const components: {
             onSearched?: (text: string) => any;
         }>, {
             context: ITreeBaseContext<any>;
+            onTreeNodeClick: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => void;
         }, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -2185,6 +2211,7 @@ declare const components: {
         onSearched?: (text: string) => any;
     }>, {
         context: ITreeBaseContext<any>;
+        onTreeNodeClick: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => void;
     }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         click: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
         searched: (text: string) => any;

package/dist/snail.vue.js

@@ -877,7 +877,8 @@ var _sfc_main$j = defineComponent({
     const {
       onClient,
       onSize,
-      onEvent
+      onEvent,
+      onMutation
     } = useObserver();
     const {
       onTimeout
@@ -959,6 +960,11 @@ var _sfc_main$j = defineComponent({
           onEvent(window, "resize", () => __props.options.closeOnResize ? closePopup(void 0) : rootDom.value && buildFollow());
           onEvent(window, "keyup", evet => __props.options.closeOnEscape && evet.key === "Escape" && followExt.pinned.value != true && closePopup(void 0));
           onEvent(window, "click", event => __props.options.closeOnMask && rootDom.value != event.target && rootDom.value.contains(event.target) == false && followExt.pinned.value != true && closePopup(void 0));
+          onMutation(rootDom.value, {
+            childList: true,
+            attributes: false,
+            subtree: true
+          }, buildFollow);
         }, 100);
       });
     });
@@ -1151,7 +1157,7 @@ function usePopup() {
     });
   }
   function toast(type, message, options) {
-    popupInCustomContainer(_sfc_main$h, {
+    return popupInCustomContainer(_sfc_main$h, {
       url: "#ToastContainer",
       props: {
         ...(options || Object.create(null)),
@@ -1474,7 +1480,7 @@ var _sfc_main$e = defineComponent({
   }
 });
 
-function useTreeContext(nodes) {
+function useTreeContext(nodes, activeNodeRef) {
   const failed = shallowRef();
   const patched = shallowRef();
   function doSearch(text) {
@@ -1483,6 +1489,9 @@ function useTreeContext(nodes) {
     failed.value = result.failed;
     patched.value = result.patched;
   }
+  function isActived(node) {
+    return activeNodeRef && activeNodeRef.value == node;
+  }
   function isPatched(node) {
     return patched.value ? patched.value.includes(node) : false;
   }
@@ -1503,6 +1512,7 @@ function useTreeContext(nodes) {
   }
   const context = mountScope({
     doSearch,
+    isActived,
     isPatched,
     isShow,
     isShowChildren,
@@ -1884,6 +1894,7 @@ var _sfc_main$a = defineComponent({
   emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
   setup(__props, _ref) {
     let {
+      expose: __expose,
       emit: __emit
     } = _ref;
     const props = __props;
@@ -1900,6 +1911,18 @@ var _sfc_main$a = defineComponent({
       "scroll-y": props.scrollY == true
     }));
     var preStatus = void 0;
+    __expose({
+      scroll,
+      scrollTo
+    });
+    function scroll(left, top) {
+      left == void 0 || (rootDom.value.scrollLeft += left);
+      top == void 0 || (rootDom.value.scrollTop += top);
+    }
+    function scrollTo(left, top) {
+      left == void 0 || (rootDom.value.scrollLeft = left);
+      top == void 0 || (rootDom.value.scrollTop = top);
+    }
     function refreshScrollInfo() {
       const status = {
         xbar: rootDom.value.scrollWidth > rootDom.value.clientWidth,
@@ -1984,7 +2007,7 @@ var _sfc_main$9 = defineComponent({
       }, props.scroll), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3
-      }, 16), _ctx.$slots.end ? (openBlock(), createElementBlock("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode(' " '))], 2);
+      }, 16), _ctx.$slots.end ? (openBlock(), createElementBlock("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("", true)], 2);
     };
   }
 });
@@ -2194,7 +2217,7 @@ const _hoisted_3$1 = {
 };
 const _hoisted_4$1 = {
   key: 1,
-  class: "snail-tree-children",
+  class: "snail-tree-children hidden",
   ref: "children"
 };
 var _sfc_main$4 = defineComponent({
@@ -2222,13 +2245,13 @@ var _sfc_main$4 = defineComponent({
     const {
       transition
     } = useAnimation();
+    const {
+      watcher
+    } = useReactive();
+    const treeNodeDom = useTemplateRef("tree-node");
+    const isHoveredRef = shallowRef(false);
     const showRef = computed(() => __props.context.isShow(__props.node, true));
     const showChildrenRef = computed(() => __props.context.isShowChildren(__props.node, true));
-    const classRef = computed(() => {
-      const array = [`level-${__props.level}`];
-      __props.node.clickable && array.push("clickable");
-      return array;
-    });
     const slotOptions = Object.freeze({
       node: __props.node,
       parent: __props.parent,
@@ -2239,7 +2262,9 @@ var _sfc_main$4 = defineComponent({
     const statusRef = shallowRef("expand");
     const nextLevel = __props.level + 1;
     const childrenDom = useTemplateRef("children");
+    var nodeEmitsDisabled = false;
     function toggleFold() {
+      nodeEmitsDisabled = true;
       switch (statusRef.value) {
         case "expand":
           statusRef.value = "fold";
@@ -2253,7 +2278,7 @@ var _sfc_main$4 = defineComponent({
         const maxHeight = childrenDom.value.scrollHeight;
         transition(childrenDom.value, {
           from: {
-            transition: "height 0.2s ease",
+            transition: `height 0.2s ease`,
             overflow: "hidden",
             height: `${statusRef.value == "fold" ? maxHeight : minHeight}px`
           },
@@ -2268,7 +2293,10 @@ var _sfc_main$4 = defineComponent({
       }
     }
     function onNodeClick(node) {
-      node.clickable == true && emits("click", node, __props.parent ? [__props.parent] : void 0);
+      if (node.clickable == true && nodeEmitsDisabled != true) {
+        emits("click", node, __props.parent ? [__props.parent] : void 0);
+      }
+      nodeEmitsDisabled = false;
     }
     function onNodeDoubleClick() {
       __props.options.foldDisabled != true && toggleFold();
@@ -2277,17 +2305,36 @@ var _sfc_main$4 = defineComponent({
       parents = __props.parent ? [__props.parent, ...parents] : parents;
       emits("click", child, parents);
     }
+    watcher(isHoveredRef, newValue => {
+      treeNodeDom.value.classList.remove("hovered");
+      newValue && treeNodeDom.value.classList.add("hovered");
+    });
+    watcher(() => __props.context.isActived(__props.node), newValue => {
+      treeNodeDom.value.classList.remove("actived");
+      newValue && treeNodeDom.value.classList.add("actived");
+    });
+    onMounted(() => {
+      if (childrenDom.value) {
+        __props.options.expandLevel != void 0 && __props.options.expandLevel < nextLevel && toggleFold();
+        childrenDom.value && childrenDom.value.classList.remove("hidden");
+        nodeEmitsDisabled = false;
+      }
+    });
     return (_ctx, _cache) => {
       const _component_TreeNode = resolveComponent("TreeNode", true);
       return openBlock(), createElementBlock(Fragment, null, [showRef.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["snail-tree-node", classRef.value]),
+        class: normalizeClass(["snail-tree-node", _ctx.node.clickable ? "clickable" : "", `level-${_ctx.level}`]),
+        ref: "tree-node",
+        onMouseenter: _cache[0] || (_cache[0] = $event => isHoveredRef.value = true),
+        onMouseleave: _cache[1] || (_cache[1] = $event => isHoveredRef.value = false),
+        onClick: _cache[2] || (_cache[2] = $event => onNodeClick(_ctx.node)),
         onDblclick: onNodeDoubleClick
       }, [_ctx.options.rewrite == true ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({
         key: 0
       }, unref(slotOptions)))) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [_cache[2] || (_cache[2] = createElementVNode("div", {
+      }, [_cache[4] || (_cache[4] = createElementVNode("div", {
         class: "indent"
       }, null, -1)), _ctx.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$s, {
         key: 0,
@@ -2300,8 +2347,7 @@ var _sfc_main$4 = defineComponent({
       }, null, 8, ["class"])) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
         class: "node-text",
         title: _ctx.node.text,
-        textContent: toDisplayString(_ctx.node.text),
-        onClick: _cache[0] || (_cache[0] = $event => onNodeClick(_ctx.node))
+        textContent: toDisplayString(_ctx.node.text)
       }, null, 8, _hoisted_2$1), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34)) : createCommentVNode("", true), showRef.value && showChildrenRef.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.children, child => {
         return openBlock(), createBlock(_component_TreeNode, {
           key: child.id || unref(newId)(),
@@ -2310,7 +2356,7 @@ var _sfc_main$4 = defineComponent({
           level: nextLevel,
           options: _ctx.options,
           context: _ctx.context,
-          onClick: _cache[1] || (_cache[1] = (node, parents) => onChildNodeClick(node, parents))
+          onClick: _cache[3] || (_cache[3] = (node, parents) => onChildNodeClick(node, parents))
         }, {
           default: withCtx(slotProps => [renderSlot(_ctx.$slots, "default", mergeProps({
             ref_for: true
@@ -2344,14 +2390,20 @@ var _sfc_main$3 = defineComponent({
     } = _ref;
     const props = __props;
     const emits = __emit;
-    const context = useTreeContext(props.nodes);
+    const activedNodeRef = shallowRef(void 0);
+    const context = useTreeContext(props.nodes, activedNodeRef);
     __expose({
-      context
+      context,
+      onTreeNodeClick
     });
     function onSearch(text) {
       context.doSearch(text);
       emits("searched", text);
     }
+    function onTreeNodeClick(node, parents) {
+      activedNodeRef.value = node;
+      emits("click", node, parents);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [props.search ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
         key: 0
@@ -2368,13 +2420,13 @@ var _sfc_main$3 = defineComponent({
             level: 1,
             options: props.nodeOptions,
             context: unref(context),
-            onClick: (node2, parents) => emits("click", node2, parents)
+            onClick: onTreeNodeClick
           }, {
             default: withCtx(slotProps => [renderSlot(_ctx.$slots, "default", mergeProps({
               ref_for: true
             }, slotProps))]),
             _: 2
-          }, 1032, ["node", "options", "context", "onClick"]);
+          }, 1032, ["node", "options", "context"]);
         }), 128))]),
         _: 3
       })]);

package/dist/snail.vue.umd.js

@@ -879,7 +879,8 @@
       const {
         onClient,
         onSize,
-        onEvent
+        onEvent,
+        onMutation
       } = snail_view.useObserver();
       const {
         onTimeout
@@ -961,6 +962,11 @@
             onEvent(window, "resize", () => __props.options.closeOnResize ? closePopup(void 0) : rootDom.value && buildFollow());
             onEvent(window, "keyup", evet => __props.options.closeOnEscape && evet.key === "Escape" && followExt.pinned.value != true && closePopup(void 0));
             onEvent(window, "click", event => __props.options.closeOnMask && rootDom.value != event.target && rootDom.value.contains(event.target) == false && followExt.pinned.value != true && closePopup(void 0));
+            onMutation(rootDom.value, {
+              childList: true,
+              attributes: false,
+              subtree: true
+            }, buildFollow);
           }, 100);
         });
       });
@@ -1153,7 +1159,7 @@
       });
     }
     function toast(type, message, options) {
-      popupInCustomContainer(_sfc_main$h, {
+      return popupInCustomContainer(_sfc_main$h, {
         url: "#ToastContainer",
         props: {
           ...(options || Object.create(null)),
@@ -1476,7 +1482,7 @@
     }
   });
 
-  function useTreeContext(nodes) {
+  function useTreeContext(nodes, activeNodeRef) {
     const failed = vue.shallowRef();
     const patched = vue.shallowRef();
     function doSearch(text) {
@@ -1485,6 +1491,9 @@
       failed.value = result.failed;
       patched.value = result.patched;
     }
+    function isActived(node) {
+      return activeNodeRef && activeNodeRef.value == node;
+    }
     function isPatched(node) {
       return patched.value ? patched.value.includes(node) : false;
     }
@@ -1505,6 +1514,7 @@
     }
     const context = snail_core.mountScope({
       doSearch,
+      isActived,
       isPatched,
       isShow,
       isShowChildren,
@@ -1886,6 +1896,7 @@
     emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
     setup(__props, _ref) {
       let {
+        expose: __expose,
         emit: __emit
       } = _ref;
       const props = __props;
@@ -1902,6 +1913,18 @@
         "scroll-y": props.scrollY == true
       }));
       var preStatus = void 0;
+      __expose({
+        scroll,
+        scrollTo
+      });
+      function scroll(left, top) {
+        left == void 0 || (rootDom.value.scrollLeft += left);
+        top == void 0 || (rootDom.value.scrollTop += top);
+      }
+      function scrollTo(left, top) {
+        left == void 0 || (rootDom.value.scrollLeft = left);
+        top == void 0 || (rootDom.value.scrollTop = top);
+      }
       function refreshScrollInfo() {
         const status = {
           xbar: rootDom.value.scrollWidth > rootDom.value.clientWidth,
@@ -1986,7 +2009,7 @@
         }, props.scroll), {
           default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
           _: 3
-        }, 16), _ctx.$slots.end ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [vue.renderSlot(_ctx.$slots, "end")])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode(' " '))], 2);
+        }, 16), _ctx.$slots.end ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [vue.renderSlot(_ctx.$slots, "end")])) : vue.createCommentVNode("", true)], 2);
       };
     }
   });
@@ -2196,7 +2219,7 @@
   };
   const _hoisted_4$1 = {
     key: 1,
-    class: "snail-tree-children",
+    class: "snail-tree-children hidden",
     ref: "children"
   };
   var _sfc_main$4 = vue.defineComponent({
@@ -2224,13 +2247,13 @@
       const {
         transition
       } = snail_view.useAnimation();
+      const {
+        watcher
+      } = useReactive();
+      const treeNodeDom = vue.useTemplateRef("tree-node");
+      const isHoveredRef = vue.shallowRef(false);
       const showRef = vue.computed(() => __props.context.isShow(__props.node, true));
       const showChildrenRef = vue.computed(() => __props.context.isShowChildren(__props.node, true));
-      const classRef = vue.computed(() => {
-        const array = [`level-${__props.level}`];
-        __props.node.clickable && array.push("clickable");
-        return array;
-      });
       const slotOptions = Object.freeze({
         node: __props.node,
         parent: __props.parent,
@@ -2241,7 +2264,9 @@
       const statusRef = vue.shallowRef("expand");
       const nextLevel = __props.level + 1;
       const childrenDom = vue.useTemplateRef("children");
+      var nodeEmitsDisabled = false;
       function toggleFold() {
+        nodeEmitsDisabled = true;
         switch (statusRef.value) {
           case "expand":
             statusRef.value = "fold";
@@ -2255,7 +2280,7 @@
           const maxHeight = childrenDom.value.scrollHeight;
           transition(childrenDom.value, {
             from: {
-              transition: "height 0.2s ease",
+              transition: `height 0.2s ease`,
               overflow: "hidden",
               height: `${statusRef.value == "fold" ? maxHeight : minHeight}px`
             },
@@ -2270,7 +2295,10 @@
         }
       }
       function onNodeClick(node) {
-        node.clickable == true && emits("click", node, __props.parent ? [__props.parent] : void 0);
+        if (node.clickable == true && nodeEmitsDisabled != true) {
+          emits("click", node, __props.parent ? [__props.parent] : void 0);
+        }
+        nodeEmitsDisabled = false;
       }
       function onNodeDoubleClick() {
         __props.options.foldDisabled != true && toggleFold();
@@ -2279,17 +2307,36 @@
         parents = __props.parent ? [__props.parent, ...parents] : parents;
         emits("click", child, parents);
       }
+      watcher(isHoveredRef, newValue => {
+        treeNodeDom.value.classList.remove("hovered");
+        newValue && treeNodeDom.value.classList.add("hovered");
+      });
+      watcher(() => __props.context.isActived(__props.node), newValue => {
+        treeNodeDom.value.classList.remove("actived");
+        newValue && treeNodeDom.value.classList.add("actived");
+      });
+      vue.onMounted(() => {
+        if (childrenDom.value) {
+          __props.options.expandLevel != void 0 && __props.options.expandLevel < nextLevel && toggleFold();
+          childrenDom.value && childrenDom.value.classList.remove("hidden");
+          nodeEmitsDisabled = false;
+        }
+      });
       return (_ctx, _cache) => {
         const _component_TreeNode = vue.resolveComponent("TreeNode", true);
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [showRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.normalizeClass(["snail-tree-node", classRef.value]),
+          class: vue.normalizeClass(["snail-tree-node", _ctx.node.clickable ? "clickable" : "", `level-${_ctx.level}`]),
+          ref: "tree-node",
+          onMouseenter: _cache[0] || (_cache[0] = $event => isHoveredRef.value = true),
+          onMouseleave: _cache[1] || (_cache[1] = $event => isHoveredRef.value = false),
+          onClick: _cache[2] || (_cache[2] = $event => onNodeClick(_ctx.node)),
           onDblclick: onNodeDoubleClick
         }, [_ctx.options.rewrite == true ? vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({
           key: 0
         }, vue.unref(slotOptions)))) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 1
-        }, [_cache[2] || (_cache[2] = vue.createElementVNode("div", {
+        }, [_cache[4] || (_cache[4] = vue.createElementVNode("div", {
           class: "indent"
         }, null, -1)), _ctx.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
           key: 0,
@@ -2302,8 +2349,7 @@
         }, null, 8, ["class"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: "node-text",
           title: _ctx.node.text,
-          textContent: vue.toDisplayString(_ctx.node.text),
-          onClick: _cache[0] || (_cache[0] = $event => onNodeClick(_ctx.node))
+          textContent: vue.toDisplayString(_ctx.node.text)
         }, null, 8, _hoisted_2$1), vue.createElementVNode("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34)) : vue.createCommentVNode("", true), showRef.value && showChildrenRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.children, child => {
           return vue.openBlock(), vue.createBlock(_component_TreeNode, {
             key: child.id || vue.unref(snail_core.newId)(),
@@ -2312,7 +2358,7 @@
             level: nextLevel,
             options: _ctx.options,
             context: _ctx.context,
-            onClick: _cache[1] || (_cache[1] = (node, parents) => onChildNodeClick(node, parents))
+            onClick: _cache[3] || (_cache[3] = (node, parents) => onChildNodeClick(node, parents))
           }, {
             default: vue.withCtx(slotProps => [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
               ref_for: true
@@ -2346,14 +2392,20 @@
       } = _ref;
       const props = __props;
       const emits = __emit;
-      const context = useTreeContext(props.nodes);
+      const activedNodeRef = vue.shallowRef(void 0);
+      const context = useTreeContext(props.nodes, activedNodeRef);
       __expose({
-        context
+        context,
+        onTreeNodeClick
       });
       function onSearch(text) {
         context.doSearch(text);
         emits("searched", text);
       }
+      function onTreeNodeClick(node, parents) {
+        activedNodeRef.value = node;
+        emits("click", node, parents);
+      }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$o, vue.mergeProps({
           key: 0
@@ -2370,13 +2422,13 @@
               level: 1,
               options: props.nodeOptions,
               context: vue.unref(context),
-              onClick: (node2, parents) => emits("click", node2, parents)
+              onClick: onTreeNodeClick
             }, {
               default: vue.withCtx(slotProps => [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
                 ref_for: true
               }, slotProps))]),
               _: 2
-            }, 1032, ["node", "options", "context", "onClick"]);
+            }, 1032, ["node", "options", "context"]);
           }), 128))]),
           _: 3
         })]);

package/dist/styles/snail.vue.vue.css

@@ -2,12 +2,14 @@
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
 /* src:base\choose.vue 	 index:0 */
 .snail-choose{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose>div.choose-item{align-items:center;cursor:pointer;display:flex;flex-shrink:0;margin:0 8px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:first-child{margin-left:0}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>div.item-beautiful{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;overflow:hidden;width:16px}.snail-choose>div.choose-item>div.item-beautiful.radio{border-radius:50%}.snail-choose>div.choose-item>div.item-beautiful.item-unchecked{border:1px solid #8a9099}.snail-choose>div.choose-item>div.item-beautiful.item-checked{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose.readonly>div.choose-item{cursor:auto}.snail-choose.readonly>div.choose-item>div.item-beautiful.item-unchecked{opacity:.5}.snail-choose.readonly>div.choose-item>div.item-beautiful.item-checked{background-color:#d5d7db;border-color:#d5d7db}
-/* src:base\header.vue 	 index:0 */
-.snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:bold}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:base\icon.vue 	 index:0 */
 .snail-icon{cursor:pointer;opacity:1}
+/* src:base\search.vue 	 index:0 */
+.snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
 /* src:base\footer.vue 	 index:0 */
 .snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
+/* src:base\header.vue 	 index:0 */
+.snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:bold}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:base\select.vue 	 index:0 */
 .snail-select{align-items:center;background-color:#fff;border:1px solid #dddfed;border-radius:4px;color:#2e3033;cursor:pointer;display:flex;height:32px;width:100%}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.select-result>div.select-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{cursor:text;padding:0 8px}.snail-select.readonly{cursor:auto}.snail-select.readonly>svg.snail-icon{display:none}
 /* src:base\switch.vue 	 index:0 */
@@ -16,45 +18,43 @@
 .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:container\fold.vue 	 index:0 */
 .snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-fold>div.fold-header>.title{color:#2e3033;font-weight:bold;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{align-items:flex-end;display:flex;flex:1;justify-content:flex-end}.snail-fold>div.fold-header>div.status>svg.snail-icon{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>svg.snail-icon{transform:rotate(-90deg)}.snail-fold.fold>div.fold-header>div.status>svg.snail-icon{transform:rotate(90deg)}
-/* src:container\layout.vue 	 index:0 */
-.snail-layout{display:flex;height:100%;overflow:hidden;width:100%}.snail-layout>.layout-end,.snail-layout>.layout-start{flex-shrink:0}.snail-layout>.layout-body{flex:1}.snail-layout.horizontal{flex-direction:row}.snail-layout.horizontal>div{height:100%}.snail-layout.horizontal>.layout-end,.snail-layout.horizontal>.layout-start{width:-moz-fit-content;width:fit-content}.snail-layout.vertical{flex-direction:column}.snail-layout.vertical>div{width:100%}.snail-layout.vertical>.layout-end,.snail-layout.vertical>.layout-start{height:-moz-fit-content;height:fit-content}
 /* src:container\scroll.vue 	 index:0 */
 .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
-/* src:base\search.vue 	 index:0 */
-.snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
-/* src:container\table.vue 	 index:0 */
-.snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{background-color:#fff;position:sticky!important;top:0;z-index:1}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
+/* src:container\layout.vue 	 index:0 */
+.snail-layout{display:flex;height:100%;overflow:hidden;width:100%}.snail-layout>.layout-end,.snail-layout>.layout-start{flex-shrink:0}.snail-layout>.layout-body{flex:1}.snail-layout.horizontal{flex-direction:row}.snail-layout.horizontal>div{height:100%}.snail-layout.horizontal>.layout-end,.snail-layout.horizontal>.layout-start{width:-moz-fit-content;width:fit-content}.snail-layout.vertical{flex-direction:column}.snail-layout.vertical>div{width:100%}.snail-layout.vertical>.layout-end,.snail-layout.vertical>.layout-start{height:-moz-fit-content;height:fit-content}
 /* src:container\sort.vue 	 index:0 */
 .snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
-/* src:container\tree.vue 	 index:0 */
-.snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-shrink:0;margin:12px}.snail-tree .snail-scroll{flex:1}
+/* src:container\table.vue 	 index:0 */
+.snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{background-color:#fff;position:sticky!important;top:0;z-index:1}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
 /* src:container\components\table-row.vue 	 index:0 */
 .table-row{align-items:center;display:flex}
 /* src:container\components\table-col.vue 	 index:0 */
 .table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:flex-start}.table-col.center{justify-content:center}.table-col.right{justify-content:flex-end}
+/* src:container\tree.vue 	 index:0 */
+.snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-shrink:0;margin:12px}.snail-tree .snail-scroll{flex:1}
 /* src:container\wrapper.vue 	 index:0 */
 .snail-wrapper{background-color:#fff;display:flex;flex-direction:column}.snail-wrapper>.snail-scroll{flex:1}.snail-wrapper.in-normal{flex:1;height:100%;overflow:hidden;width:100%}.snail-wrapper.in-popup{height:80%;min-width:800px;overflow:hidden;width:60%}
+/* src:prompt\empty.vue 	 index:0 */
+.snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
 /* src:prompt\drag-verify.vue 	 index:0 */
 .snail-drag-verify{background:#f8f9fa;border:1px solid #dddfed;border-radius:8px;height:40px;overflow:hidden;position:relative;width:100%}.snail-drag-verify>div{height:100%;width:100%}.snail-drag-verify>.drag-progress{background-color:#0c6;transition:width .5s ease-in-out}.snail-drag-verify>.drag-handle,.snail-drag-verify>.verify-message{left:0;position:absolute;top:0;transition:left .5s ease-in-out}.snail-drag-verify>.verify-message{background-image:-webkit-linear-gradient(left,#666,#666 45%,#fff 50%,#666 55%,#666);-webkit-text-fill-color:transparent;align-items:center;animation:snail-drag-verify 2s linear infinite;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#7e848c;display:flex;font-size:12px;font-weight:400;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-drag-verify>.drag-handle{align-items:center;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURQAAAGBQUGBaWmJZWWJYWGNYWGNZWWJYWGJZWWBYWGNYWGNZWWRYWIqwlb0AAAANdFJOUwAQMMDQoFBgcCCw4ECQ8pPMAAAAP0lEQVQI12NgwATTGBgawAwRBYZwMIPRiYErAcxSFmA0AjN4HBikBcCsUgYmQxQGE0wKphhIQrSzwAyEW4EOACHhB32zIad6AAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;border-right:1px solid #dddfed;cursor:move;display:flex;justify-content:center;width:40px}.snail-drag-verify.dragging>.drag-handle,.snail-drag-verify.dragging>.drag-progress{transition:none!important}.snail-drag-verify.success>.verify-message{-webkit-text-fill-color:#fff;color:#fff}.snail-drag-verify.success>.drag-handle>svg{background:#76c61d;border-radius:50%;padding:4px}@keyframes snail-drag-verify{0%{background-position:0 0}to{background-position:-200% 0}}
 /* src:form\input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{flex:1}.snail-input>.input-body>span{background-color:red;flex-shrink:0}
-/* src:prompt\empty.vue 	 index:0 */
-.snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
 /* src:prompt\loading.vue 	 index:0 */
-.snail-loading{height:100%;left:0;position:absolute;top:0;width:100%;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .5s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
+.snail-loading{height:100%;left:0;position:absolute;top:0;width:100%;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .3s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
 /* src:popup\components\confirm-container.vue 	 index:0 */
 .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
-/* src:popup\components\popup-container.vue 	 index:0 */
-.snail-popup{left:0;position:fixed;top:0}
 /* src:popup\components\dialog-container.vue 	 index:0 */
 .snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;opacity:1;position:absolute;transition:opacity .4s ease-in-out;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);position:relative}.snail-dialog.unactive:before{opacity:0}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}
-/* src:popup\components\toast-container.vue 	 index:0 */
-.snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
 /* src:popup\components\follow-container.vue 	 index:0 */
 .snail-follow{background-color:#fff;display:inline-block;max-height:100%;max-width:100%;position:fixed;transition-duration:.5s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
-/* src:container\components\tree-node.vue 	 index:0 */
-.snail-tree-node{align-items:center;display:flex;flex-wrap:nowrap;height:40px;width:100%}.snail-tree-node:hover{background-color:#f8f9fa}.snail-tree-node>.indent,.snail-tree-node>.node-slot,.snail-tree-node>.snail-icon{flex-shrink:0}.snail-tree-node>.node-fold{align-items:center;display:flex;height:100%;justify-content:center;width:24px}.snail-tree-node>.node-fold>.snail-icon{transition:transform .1s ease-in}.snail-tree-node>.node-fold>.snail-icon.fold{transform:rotate(-90deg)}.snail-tree-node>.node-slot,.snail-tree-node>.node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snail-tree-node>.node-text{color:#2e3033;flex:1;min-width:30px}.snail-tree-node.clickable>.node-text{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-tree-children{width:100%}.snail-tree-node.level-1>.indent{padding-left:4px}.snail-tree-node.level-2>.indent{padding-left:24px}.snail-tree-node.level-3>.indent{padding-left:48px}.snail-tree-node.level-4>.indent{padding-left:72px}.snail-tree-node.level-5>.indent{padding-left:96px}.snail-tree-node.level-6>.indent{padding-left:120px}.snail-tree-node.level-7>.indent{padding-left:144px}.snail-tree-node.level-8>.indent{padding-left:168px}.snail-tree-node.level-9>.indent{padding-left:192px}.snail-tree-node.level-10>.indent{padding-left:216px}
+/* src:popup\components\popup-container.vue 	 index:0 */
+.snail-popup{left:0;position:fixed;top:0}
+/* src:popup\components\toast-container.vue 	 index:0 */
+.snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
 /* src:base\components\select-popup.vue 	 index:0 */
 .snail-select-popup{background:#fff;border:1px solid #dddfed;border-radius:4px;box-shadow:0 1px 5px 1px #dddfed;display:flex;flex-direction:column;max-height:90%;min-height:32px;overflow:auto}.snail-select-popup>div.snail-search{margin:12px}.snail-select-popup.child-popup{max-width:250px;min-width:200px;padding-bottom:6px;padding-top:6px}.snail-select-popup.child-popup.text-tips{justify-content:center;padding:0 12px;width:100px!important}
+/* src:container\components\tree-node.vue 	 index:0 */
+.snail-tree-node{align-items:center;display:flex;flex-wrap:nowrap;height:40px;width:100%}.snail-tree-node:hover{background-color:#f8f9fa}.snail-tree-node>.indent,.snail-tree-node>.node-slot,.snail-tree-node>.snail-icon{flex-shrink:0}.snail-tree-node>.node-fold{align-items:center;display:flex;height:100%;justify-content:center;width:24px}.snail-tree-node>.node-fold>.snail-icon{transition:transform .1s ease-in}.snail-tree-node>.node-fold>.snail-icon.fold{transform:rotate(-90deg)}.snail-tree-node>.node-slot,.snail-tree-node>.node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snail-tree-node>.node-text{color:#2e3033;flex:1;min-width:30px}.snail-tree-node.clickable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-tree-children{width:100%}.snail-tree-children.hidden{display:none;height:0;overflow:hidden}.snail-tree-node.level-1>.indent{padding-left:4px}.snail-tree-node.level-2>.indent{padding-left:24px}.snail-tree-node.level-3>.indent{padding-left:48px}.snail-tree-node.level-4>.indent{padding-left:72px}.snail-tree-node.level-5>.indent{padding-left:96px}.snail-tree-node.level-6>.indent{padding-left:120px}.snail-tree-node.level-7>.indent{padding-left:144px}.snail-tree-node.level-8>.indent{padding-left:168px}.snail-tree-node.level-9>.indent{padding-left:192px}.snail-tree-node.level-10>.indent{padding-left:216px}
 /* src:base\components\select-node.vue 	 index:0 */
 .snail-select-popup>div.select-node{align-items:center;display:flex;flex-shrink:0;flex-wrap:nowrap;height:32px;padding-left:12px}.snail-select-popup>div.select-node:hover{background:#f8f9fa}.snail-select-popup>div.select-node.clickable{cursor:pointer}.snail-select-popup>div.select-node.group{color:#8a9099}.snail-select-popup>div.select-node.item{color:#2e3033;padding-right:10px}.snail-select-popup>div.select-node.selected{color:#4c9aff!important}.snail-select-popup>div.select-node>div.item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-select-popup>div.select-node>svg.snail-icon{cursor:default;display:none}.snail-select-popup>div.select-node.child{color:#2e3033;padding-left:24px}.snail-select-popup>div.select-node.child>svg.snail-icon{display:initial}

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -15,7 +15,7 @@
   "dependencies": {
     "vue": "^3.5.14",
     "snail.core": ">=2.0.13",
-    "snail.view": ">=1.0.21",
+    "snail.view": ">=1.0.23",
     "sortablejs": ">=1.15.6"
   },
   "devDependencies": {