snail.vue 1.0.37 → 1.0.39

package/dist/snail.vue.d.ts

@@ -1,7 +1,7 @@
-import * as vue from 'vue';
-import { ShallowRef, Component, Ref, WatchSource, App } from 'vue';
 import * as snail_view from 'snail.view';
 import { BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
+import * as vue from 'vue';
+import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
 import { IScope, RunResult, IAsyncScope } from 'snail.core';
 
 /**
@@ -166,35 +166,12 @@ type DragVerifyInfo = {
     distance: number;
 };
 
-/**
- * 搜索组件配置选项
- */
-type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
-    /**
-     * 启用【自动完成】
-     * - true 时，只要文本变化了，就触发 search 事件
-     * - false 时，只有点击【搜索】按钮，才触发 search 事件
-     */
-    autoComplete?: boolean;
-};
-/**
- * 搜索组件事件
- */
-type SearchEvents = {
-    /**
-     * 事件：执行搜索
-     * @param value 为搜索文本
-     */
-    search: [value: string];
-};
-
 /**
  * 树形 数据相关的基础实体结构
  * 1、封装一些基础实体；如树形节点数据结构
  * 2、配合树形组件使用；如select的多级筛选，树组件等
  * 3、封装树的基础共性操作，如显隐判断、搜索查询等
  */
-
 /**
  * 树节点
  * - 仅提供树节点基础属性；可以基于 Extend 为 TreeNode 扩展节点属性
@@ -222,7 +199,7 @@ type TreeNodeExtend = {
      * 节点Id，确保唯一
      * - 不传入则内部自动 newId()
      */
-    id?: string;
+    readonly id?: string;
     /**
      * 是否可点击
      * - true 此节点可点击，点击时触发 click 事件
@@ -247,41 +224,84 @@ type TreeNodeExtend = {
     fixed?: boolean;
 };
 /**
- * 树的上下文对象
+ * 树的基础上下文对象
  */
-interface ITreeContext<T> {
+interface ITreeBaseContext<T> {
     /**
      * 执行搜索
      * @param text 搜索文本
      */
     doSearch(text: string): void;
     /**
-     * 指定节点是否可显示
+     * 是否是【补丁】节点
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * @param node 要判断的节点
+     * @returns true 是补丁节点，false 不是补丁节点
+     */
+    isPatched(node: TreeNode<T>): boolean;
+    /**
+     * 是否显示【树节点】
      * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
      * @returns 能显示返回true；否则返回false
      */
-    canShow(node: TreeNode<T, TreeNodeExtend>): boolean;
+    isShow(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
     /**
-     * 获取指定树节点的上下文
-     * @param node
-     * @returns 节点上下文
+     * 是否显示指定【树节点】的子节点
+     * - 不会判断node节点自身是否可显示
+     * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
+     * @returns 能显示返回true；否则返回false
      */
-    getContext(node: TreeNode<T, TreeNodeExtend>): ITreeNodeContext<T>;
+    isShowChildren(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
+    /**
+     * 获取指定【树节点】的路径
+     * @param node 树节点
+     * @returns 从【顶级节点】->【指定节点】的全路径数据
+     */
+    getPath(node: TreeNode<T, TreeNodeExtend>): TreeNode<T, TreeNodeExtend>[];
 }
 /**
- * 树节点 上下文
+ * 树搜索结果
  */
-interface ITreeNodeContext<T> {
+type TreeSearchResult<T> = {
     /**
-     * 节点是否展示：响应式
+     * 匹配上的节点集合
      */
-    show: ShallowRef<boolean>;
+    matched: TreeNode<T>[];
     /**
-     * 是否显示子节点
-     * - 若node.children有值，但不能显示出来，则也算无子节点
+     * 未匹配上的节点集合
      */
-    showChildren: ShallowRef<boolean>;
-}
+    failed: TreeNode<T>[];
+    /**
+     * 搜索时的【补丁】节点集合
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * - 仅在有搜索条件时成立，补丁节点同时在【failed】节点集合中
+     */
+    patched: TreeNode<T>[];
+};
+
+/**
+ * 搜索组件配置选项
+ */
+type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
+    /**
+     * 启用【自动完成】
+     * - true 时，只要文本变化了，就触发 search 事件
+     * - false 时，只有点击【搜索】按钮，才触发 search 事件
+     */
+    autoComplete?: boolean;
+};
+/**
+ * 搜索组件事件
+ */
+type SearchEvents = {
+    /**
+     * 事件：执行搜索
+     * @param value 为搜索文本
+     */
+    search: [value: string];
+};
 
 /**
  * 树组件 相关实体
@@ -309,7 +329,13 @@ type TreeOptions<T> = {
 /**
  * 树组件事件
  */
-type TreeEvents<T> = TreeNodeEvents<T> & {};
+type TreeEvents<T> = TreeNodeEvents<T> & {
+    /**
+     * 搜索完成后
+     * @param text 搜索文本
+     */
+    (el: "searched", text: string): any;
+};
 /**
  * 树节点 组件配置选项
  */
@@ -334,7 +360,7 @@ type TreeNodeOptions<T> = {
     /**
      * 树组件的上下文对象
      */
-    context: ITreeContext<T>;
+    context: ITreeBaseContext<T>;
 };
 /**
  * 树节点事件
@@ -373,7 +399,7 @@ type TreeNodeRenderOptions = {
 /**
  * 树节点 插槽配置选项
  */
-type TreeNodeSoltOptions<T> = {
+type TreeNodeSlotOptions<T> = {
     /**
          * 当前节点
          */
@@ -594,10 +620,27 @@ type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions
  * 选项菜单 组件 事件
  */
 type SelectEvents<T> = SelectBaseEvents<T> & {};
+/**
+ * 选项菜单 组件的Slot配置选项
+ */
+type SelectSlotOptions<T> = {
+    /**
+     * 关闭Follow弹窗
+     * - 将隐藏已弹出的选项 follow 弹窗
+     * @returns 已弹出则销毁成功返回true；未弹出则销毁失败返回false
+     */
+    closeFollow(): boolean;
+    /**
+     * 停止事件冒泡
+     * - 解决问题：插槽内元素需要处理自定义click事件，此时不希望Select组件响应click事件
+     * @param delay 在此延迟时间内，停止事件冒泡
+     */
+    stopPropagation(delay: number): any;
+};
 /**
  * 【选项菜单】 组件上下文
  */
-interface ISelectContext<T> extends ITreeContext<T> {
+interface ISelectContext<T> extends ITreeBaseContext<T> {
     /**
      * 指定节点是否选中了
      * @param multiple 是否是【多选模式】
@@ -933,6 +976,18 @@ type SwitchEvents = {
     change: [value: boolean];
 };
 
+/**
+ * 树的基础组件信息
+ *  1、组件基础上下文 默认实现
+ */
+
+/**
+ * 使用【树上下文】
+ * @param nodes 树节点集合
+ * @returns 上下文对象+作用域
+ */
+declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[]): ITreeBaseContext<T> & IScope;
+
 /**
  * 使用【响应式管理器】
  * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
@@ -1585,17 +1640,47 @@ declare const components: {
         onSearch?: (value: string) => any;
         "onUpdate:modelValue"?: (value: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-    Select: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<any> & {
-        modelValue?: SelectItem<any>[];
-    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        change: (values: SelectItem<any>[]) => any;
-        "update:modelValue": (value: SelectItem<any>[]) => any;
-    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<any> & {
+    Select: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<any> & {
+            modelValue?: SelectItem<any>[];
+        }> & Readonly<{
+            onChange?: (values: SelectItem<any>[]) => any;
+            "onUpdate:modelValue"?: (value: SelectItem<any>[]) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            change: (values: SelectItem<any>[]) => any;
+            "update:modelValue": (value: SelectItem<any>[]) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<any> & {
+            modelValue?: SelectItem<any>[];
+        }> & Readonly<{
+            onChange?: (values: SelectItem<any>[]) => any;
+            "onUpdate:modelValue"?: (value: SelectItem<any>[]) => any;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<any> & {
         modelValue?: SelectItem<any>[];
     }> & Readonly<{
         onChange?: (values: SelectItem<any>[]) => any;
         "onUpdate:modelValue"?: (value: SelectItem<any>[]) => any;
-    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (values: SelectItem<any>[]) => any;
+        "update:modelValue": (value: SelectItem<any>[]) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {
+                closeFollow: () => boolean;
+                stopPropagation: (delay: number) => any;
+            }) => any;
+        };
+    });
     Switch: vue.DefineComponent<ReadonlyOptions & {
         modelValue?: boolean;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -1801,8 +1886,12 @@ declare const components: {
             nodeOptions?: TreeNodeRenderOptions;
         }> & Readonly<{
             onClick?: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
-        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
+            onSearched?: (text: string) => any;
+        }>, {
+            context: ITreeBaseContext<any>;
+        }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
             click: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
+            searched: (text: string) => any;
         }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
@@ -1816,7 +1905,10 @@ declare const components: {
             nodeOptions?: TreeNodeRenderOptions;
         }> & Readonly<{
             onClick?: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
-        }>, {}, {}, {}, {}, {}>;
+            onSearched?: (text: string) => any;
+        }>, {
+            context: ITreeBaseContext<any>;
+        }, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
@@ -1826,11 +1918,21 @@ declare const components: {
         nodeOptions?: TreeNodeRenderOptions;
     }> & Readonly<{
         onClick?: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
-    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
+        onSearched?: (text: string) => any;
+    }>, {
+        context: ITreeBaseContext<any>;
+    }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
         click: (node: TreeNodeModel<any>, parents?: TreeNodeModel<any>[]) => any;
+        searched: (text: string) => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
-            default?: (props: any) => any;
+            default?: (props: {
+                node: TreeNodeModel<any>;
+                parent?: TreeNodeModel<any>;
+                level: number;
+                click(): void;
+                toggle(): void;
+            }) => any;
         };
     });
     Input: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
@@ -1895,5 +1997,5 @@ declare const components: {
     });
 };
 
-export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
-export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, MessageOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupExtend, SelectPopupOptions, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNodeEvents, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSoltOptions, TreeOptions };
+export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };
+export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, MessageOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult };

package/dist/snail.vue.js

@@ -1205,25 +1205,25 @@ var _sfc_main$d = defineComponent({
       emit: __emit
     } = _ref;
     const emits = __emit;
-    const show = computed(() => __props.context.canShow(__props.item));
-    const children = __props.showChildren == true && __props.item.type == "group" ? computed(() => (__props.item.children || []).filter(__props.context.canShow)) : [];
-    const selectNodDom = useTemplateRef("select-node");
+    const rootDom = useTemplateRef("select-node");
+    const selectedRef = computed(() => __props.context.selected(__props.multiple, __props.item));
+    const showRef = computed(() => __props.context.isShow(__props.item, true));
+    const showChildrenRef = __props.showChildren == true && __props.item.type == "group" ? computed(() => (__props.item.children || []).filter(item => __props.context.isShow(item, true))) : [];
     const classRef = computed(() => ({
       child: __props.showChildren != true,
       clickable: __props.item.clickable,
       group: __props.item.type == "group",
       item: __props.item.type != "group",
-      selected: selected.value
+      selected: selectedRef.value
     }));
-    const selected = computed(() => __props.context.selected(__props.multiple, __props.item));
     return (_ctx, _cache) => {
       const _component_SelectNode = resolveComponent("SelectNode", true);
-      return openBlock(), createElementBlock(Fragment, null, [show.value ? (openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock(Fragment, null, [showRef.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["select-node", classRef.value]),
         title: _ctx.item.text,
         ref: "select-node",
-        onMouseenter: _cache[0] || (_cache[0] = $event => emits("enter", selectNodDom.value, _ctx.item)),
+        onMouseenter: _cache[0] || (_cache[0] = $event => emits("enter", rootDom.value, _ctx.item)),
         onClick: _cache[1] || (_cache[1] = () => emits("click", _ctx.item))
       }, [createElementVNode("div", {
         class: "item-text",
@@ -1232,9 +1232,9 @@ var _sfc_main$d = defineComponent({
         key: 0,
         type: "arrow",
         color: "#8a9099"
-      })) : createCommentVNode("", true)], 42, _hoisted_1$7)) : createCommentVNode("", true), show.value ? (openBlock(true), createElementBlock(Fragment, {
+      })) : createCommentVNode("", true)], 42, _hoisted_1$7)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
-      }, renderList(unref(children), child => {
+      }, renderList(unref(showChildrenRef), child => {
         return openBlock(), createBlock(_component_SelectNode, {
           key: child.id || unref(newId)(),
           multiple: _ctx.multiple,
@@ -1285,9 +1285,6 @@ var _sfc_main$c = defineComponent({
       emit: __emit
     } = _ref;
     const props = __props;
-    const {
-      context
-    } = props;
     const emits = __emit;
     const {
       follow
@@ -1299,24 +1296,25 @@ var _sfc_main$c = defineComponent({
       watcher
     } = useReactive();
     const {
+      context,
       popupStatus,
       pinned,
       parentPinned
     } = props;
-    const items = computed(() => (props.items || []).filter(context.canShow));
+    const itemsRef = computed(() => (props.items || []).filter(item => context.isShow(item, true)));
     const classRef = computed(() => ({
       "snail-select-popup": true,
       "child-popup": props.level > 1,
-      "text-tips": items.value.length == 0,
-      "has-group": items.value.find(node => node.type == "group") != void 0
+      "text-tips": itemsRef.value.length == 0,
+      "has-group": itemsRef.value.find(node => node.type == "group") != void 0
     }));
-    const childDestroyTimer = shallowRef(void 0);
+    const childDestroyTimerRef = shallowRef(void 0);
     var mouseStatus = "Leave";
     var childFollowTargetDom = void 0;
     var childFollowScope = void 0;
     function destroyChildFollow(onlyTimer) {
-      childDestroyTimer.value && childDestroyTimer.value.destroy();
-      childDestroyTimer.value = void 0;
+      childDestroyTimerRef.value && childDestroyTimerRef.value.destroy();
+      childDestroyTimerRef.value = void 0;
       if (onlyTimer != true && childFollowScope && childFollowScope.destroyed == false) {
         childFollowScope.destroy();
         childFollowScope = void 0;
@@ -1372,7 +1370,7 @@ var _sfc_main$c = defineComponent({
             search: void 0,
             level: props.level + 1,
             popupStyle: props.popupStyle,
-            childDestroyTimer,
+            childDestroyTimer: childDestroyTimerRef,
             parentPinned: pinned
           })
         });
@@ -1402,7 +1400,7 @@ var _sfc_main$c = defineComponent({
         key: 0
       }, props.search, {
         onSearch
-      }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, item => {
+      }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(itemsRef.value, item => {
         return openBlock(), createBlock(_sfc_main$d, {
           key: item.id || unref(newId)(),
           multiple: props.multiple,
@@ -1412,7 +1410,7 @@ var _sfc_main$c = defineComponent({
           onEnter: onEnterSelectNode,
           onClick: onClickSelectNode
         }, null, 8, ["multiple", "item", "context"]);
-      }), 128)), items.value.length == 0 ? (openBlock(), createBlock(_sfc_main$e, {
+      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$e, {
         key: 1,
         message: "无结果"
       })) : createCommentVNode("", true)], 64))], 38);
@@ -1423,66 +1421,92 @@ var _sfc_main$c = defineComponent({
 function useTreeContext(nodes) {
   const scopes = useScopes();
   const failed = shallowRef();
+  const patched = shallowRef();
   function doSearch(text) {
     text = isStringNotEmpty(text) ? text.toLowerCase() : void 0;
     const result = searchTree(nodes, text);
     failed.value = result.failed;
+    patched.value = result.patched;
   }
-  function canShow(node) {
-    return node.hidden != true && (failed.value == void 0 || failed.value.includes(node) == false);
+  function isPatched(node) {
+    return patched.value ? patched.value.includes(node) : false;
   }
-  function getContext(node) {
-    const show = computed(() => canShow(node));
-    const showChildren = computed(() => node.children ? node.children.filter(canShow).length > 0 : false);
-    return {
-      show,
-      showChildren
-    };
+  function isShow(node, needPatched) {
+    if (node.hidden == true) {
+      return false;
+    }
+    if (failed.value == void 0 || failed.value.includes(node) == false) {
+      return true;
+    }
+    return needPatched == true ? isPatched(node) : false;
+  }
+  function isShowChildren(node, needPatched) {
+    return node.children ? node.children.find(child => isShow(child, needPatched)) != void 0 : false;
+  }
+  function getPath(node) {
+    return searchPath(nodes, node);
   }
   const context = mountScope({
     doSearch,
-    canShow,
-    getContext
+    isPatched,
+    isShow,
+    isShowChildren,
+    getPath
   });
   context.onDestroy(() => {
     scopes.destroy();
     failed.value = void 0;
+    patched.value = void 0;
   });
   return Object.freeze(context);
 }
 function searchTree(nodes, text) {
   const result = Object.freeze({
     matched: [],
-    failed: []
+    failed: [],
+    patched: []
   });
   for (const node of nodes || []) {
-    var matched = false;
+    const matched = node.fixed == true || text == void 0 || (node.text || "").toLowerCase().indexOf(text) != -1;
+    matched ? result.matched.push(node) : result.failed.push(node);
+    var childMatched = false;
     if (hasAny(node.children) == true) {
       const childResult = searchTree(node.children, text);
       result.matched.push(...childResult.matched);
       result.failed.push(...childResult.failed);
-      matched = childResult.matched.length > 0;
+      result.patched.push(...childResult.patched);
+      childMatched = childResult.matched.length > 0 || childResult.patched.length > 0;
     }
-    matched = matched || node.fixed == true;
-    if (matched == false && node.searchable == true) {
-      matched = text == void 0 || (node.text || "").toLowerCase().indexOf(text) != -1;
-    }
-    matched ? result.matched.push(node) : result.failed.push(node);
+    childMatched && matched == false && result.patched.push(node);
   }
   return result;
 }
+function searchPath(nodes, target) {
+  for (const node of nodes || []) {
+    if (target === node) {
+      return [node];
+    }
+  }
+  for (const node of nodes || []) {
+    const childPath = searchPath(node.children, target);
+    if (childPath.length > 0) {
+      return [node, ...childPath];
+    }
+  }
+  return [];
+}
 
-function useSelectContext(items, selects) {
+function useSelectContext(items, selectsRef) {
   const treeContxt = useTreeContext(items);
   function selected(multiple, item) {
-    if (selects.value) {
-      return multiple == true ? selects.value.includes(item) : selects.value[selects.value.length - 1] == item;
+    if (selectsRef.value) {
+      return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
     }
     return false;
   }
   function selectedText(multiple, showPath) {
-    if (selects.value) {
-      return multiple == true || showPath == true ? selects.value.map(item => item.text).join(multiple ? "、" : " / ") : selects.value[selects.value.length - 1].text;
+    if (selectsRef.value) {
+      return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(multiple ? "、" : " / ") : selectsRef.value[selectsRef.value.length - 1].text;
     }
     return "";
   }
@@ -1493,8 +1517,11 @@ function useSelectContext(items, selects) {
   });
 }
 
-const _hoisted_1$6 = ["textContent"];
-const _hoisted_2$3 = ["title"];
+const _hoisted_1$6 = {
+  key: 0,
+  class: "select-result"
+};
+const _hoisted_2$3 = ["title", "textContent"];
 const _hoisted_3$3 = ["textContent"];
 const _hoisted_4$3 = {
   key: 1,
@@ -1540,18 +1567,35 @@ var _sfc_main$b = defineComponent({
     const {
       follow
     } = usePopup();
-    const selects = shallowRef([...valuesModel.value]);
-    const context = useSelectContext(props.items, selects);
+    const {
+      onTimeout
+    } = useTimer();
     const rootDom = useTemplateRef("select");
-    const selectText = computed(() => context.selectedText(props.multiple, props.showPath));
+    const context = useSelectContext(props.items, valuesModel);
+    const selectTextRef = computed(() => context.selectedText(props.multiple, props.showPath));
+    const slotOptions = Object.freeze({
+      closeFollow,
+      stopPropagation
+    });
     var followScope = void 0;
+    var stopPropagationScope = void 0;
+    function closeFollow() {
+      if (followScope != void 0) {
+        followScope.destroy();
+        followScope = void 0;
+        return true;
+      }
+      return false;
+    }
+    function stopPropagation(delay) {
+      stopPropagationScope && stopPropagationScope.destroy();
+      stopPropagationScope = onTimeout(() => stopPropagationScope = void 0, delay);
+    }
     async function onClick() {
       if (props.readonly == true || rootDom.value == void 0) {
         return;
       }
-      if (followScope != void 0) {
-        followScope.destroy();
-        followScope = void 0;
+      if (closeFollow() == true || stopPropagationScope != void 0) {
         return;
       }
       const values = valuesModel.value && valuesModel.value.length > 0 ? [...valuesModel.value] : [];
@@ -1582,7 +1626,6 @@ var _sfc_main$b = defineComponent({
     }
     function onSelectItemChange(items) {
       items = hasAny(items) ? [...items] : [];
-      selects.value = items;
       valuesModel.value = items;
       emits("change", items);
     }
@@ -1593,20 +1636,17 @@ var _sfc_main$b = defineComponent({
         }]),
         onClick: _cache[0] || (_cache[0] = $event => onClick()),
         ref: "select"
-      }, [props.items && props.items.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+      }, [unref(hasAny)(props.items) == true ? (openBlock(), createElementBlock(Fragment, {
         key: 0
-      }, [unref(isArrayNotEmpty)(selects.value) == false ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      }, [unref(hasAny)(valuesModel.value) ? (openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
+        class: "select-text",
+        title: selectTextRef.value,
+        textContent: toDisplayString(selectTextRef.value)
+      }, null, 8, _hoisted_2$3)])])) : (openBlock(), createElementBlock("div", {
+        key: 1,
         class: "select-result text-tips",
         textContent: toDisplayString(props.placeholder || "请选择")
-      }, null, 8, _hoisted_1$6)) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: "select-result",
-        title: selectText.value
-      }, [createElementVNode("div", {
-        class: "select-text",
-        textContent: toDisplayString(selectText.value)
-      }, null, 8, _hoisted_3$3)], 8, _hoisted_2$3)), createVNode(_sfc_main$o, {
+      }, null, 8, _hoisted_3$3)), createVNode(_sfc_main$o, {
         type: "arrow",
         size: 24,
         color: "#8a9099",
@@ -2020,10 +2060,13 @@ var _sfc_main$3 = defineComponent({
     const {
       transition
     } = useAnimation();
-    const {
-      show,
-      showChildren
-    } = __props.context.getContext(__props.node);
+    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,
@@ -2071,16 +2114,16 @@ var _sfc_main$3 = defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_TreeNode = resolveComponent("TreeNode", true);
-      return openBlock(), createElementBlock(Fragment, null, [unref(show) ? (openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock(Fragment, null, [showRef.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["snail-tree-node", [`level-${_ctx.level}`, _ctx.node.clickable ? "clickable" : ""]])
+        class: normalizeClass(["snail-tree-node", classRef.value])
       }, [_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", {
         class: "indent"
-      }, null, -1)), _ctx.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$3, [unref(showChildren) ? (openBlock(), createBlock(_sfc_main$o, {
+      }, null, -1)), _ctx.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$o, {
         key: 0,
         class: normalizeClass(statusRef.value),
         type: "custom",
@@ -2093,7 +2136,7 @@ var _sfc_main$3 = defineComponent({
         title: _ctx.node.text,
         textContent: toDisplayString(_ctx.node.text),
         onClick: _cache[0] || (_cache[0] = $event => onNodeClick(_ctx.node))
-      }, null, 8, _hoisted_2$1), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 2)) : createCommentVNode("", true), unref(show) && unref(showChildren) ? (openBlock(), createElementBlock("div", _hoisted_4$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.children, child => {
+      }, null, 8, _hoisted_2$1), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 2)) : 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)(),
           node: child,
@@ -2127,21 +2170,28 @@ var _sfc_main$2 = defineComponent({
     search: {},
     nodeOptions: {}
   },
-  emits: ["click"],
+  emits: ["click", "searched"],
   setup(__props, _ref) {
     let {
+      expose: __expose,
       emit: __emit
     } = _ref;
     const props = __props;
     const emits = __emit;
     const context = useTreeContext(props.nodes);
-    shallowRef([]);
+    __expose({
+      context
+    });
+    function onSearch(text) {
+      context.doSearch(text);
+      emits("searched", text);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [props.search ? (openBlock(), createBlock(_sfc_main$m, mergeProps({
         key: 0
       }, props.search, {
-        onSearch: unref(context).doSearch
-      }), null, 16, ["onSearch"])) : createCommentVNode("", true), createVNode(_sfc_main$8, {
+        onSearch
+      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$8, {
         "scroll-y": true
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.nodes || [], node => {
@@ -2394,4 +2444,4 @@ const components = {
 
 onMountScope(scope => getCurrentScope() && onScopeDispose(scope.destroy));
 
-export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
+export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };

package/dist/snail.vue.umd.js

@@ -1207,25 +1207,25 @@
         emit: __emit
       } = _ref;
       const emits = __emit;
-      const show = vue.computed(() => __props.context.canShow(__props.item));
-      const children = __props.showChildren == true && __props.item.type == "group" ? vue.computed(() => (__props.item.children || []).filter(__props.context.canShow)) : [];
-      const selectNodDom = vue.useTemplateRef("select-node");
+      const rootDom = vue.useTemplateRef("select-node");
+      const selectedRef = vue.computed(() => __props.context.selected(__props.multiple, __props.item));
+      const showRef = vue.computed(() => __props.context.isShow(__props.item, true));
+      const showChildrenRef = __props.showChildren == true && __props.item.type == "group" ? vue.computed(() => (__props.item.children || []).filter(item => __props.context.isShow(item, true))) : [];
       const classRef = vue.computed(() => ({
         child: __props.showChildren != true,
         clickable: __props.item.clickable,
         group: __props.item.type == "group",
         item: __props.item.type != "group",
-        selected: selected.value
+        selected: selectedRef.value
       }));
-      const selected = vue.computed(() => __props.context.selected(__props.multiple, __props.item));
       return (_ctx, _cache) => {
         const _component_SelectNode = vue.resolveComponent("SelectNode", true);
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [show.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [showRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["select-node", classRef.value]),
           title: _ctx.item.text,
           ref: "select-node",
-          onMouseenter: _cache[0] || (_cache[0] = $event => emits("enter", selectNodDom.value, _ctx.item)),
+          onMouseenter: _cache[0] || (_cache[0] = $event => emits("enter", rootDom.value, _ctx.item)),
           onClick: _cache[1] || (_cache[1] = () => emits("click", _ctx.item))
         }, [vue.createElementVNode("div", {
           class: "item-text",
@@ -1234,9 +1234,9 @@
           key: 0,
           type: "arrow",
           color: "#8a9099"
-        })) : vue.createCommentVNode("", true)], 42, _hoisted_1$7)) : vue.createCommentVNode("", true), show.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        })) : vue.createCommentVNode("", true)], 42, _hoisted_1$7)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
-        }, vue.renderList(vue.unref(children), child => {
+        }, vue.renderList(vue.unref(showChildrenRef), child => {
           return vue.openBlock(), vue.createBlock(_component_SelectNode, {
             key: child.id || vue.unref(snail_core.newId)(),
             multiple: _ctx.multiple,
@@ -1287,9 +1287,6 @@
         emit: __emit
       } = _ref;
       const props = __props;
-      const {
-        context
-      } = props;
       const emits = __emit;
       const {
         follow
@@ -1301,24 +1298,25 @@
         watcher
       } = useReactive();
       const {
+        context,
         popupStatus,
         pinned,
         parentPinned
       } = props;
-      const items = vue.computed(() => (props.items || []).filter(context.canShow));
+      const itemsRef = vue.computed(() => (props.items || []).filter(item => context.isShow(item, true)));
       const classRef = vue.computed(() => ({
         "snail-select-popup": true,
         "child-popup": props.level > 1,
-        "text-tips": items.value.length == 0,
-        "has-group": items.value.find(node => node.type == "group") != void 0
+        "text-tips": itemsRef.value.length == 0,
+        "has-group": itemsRef.value.find(node => node.type == "group") != void 0
       }));
-      const childDestroyTimer = vue.shallowRef(void 0);
+      const childDestroyTimerRef = vue.shallowRef(void 0);
       var mouseStatus = "Leave";
       var childFollowTargetDom = void 0;
       var childFollowScope = void 0;
       function destroyChildFollow(onlyTimer) {
-        childDestroyTimer.value && childDestroyTimer.value.destroy();
-        childDestroyTimer.value = void 0;
+        childDestroyTimerRef.value && childDestroyTimerRef.value.destroy();
+        childDestroyTimerRef.value = void 0;
         if (onlyTimer != true && childFollowScope && childFollowScope.destroyed == false) {
           childFollowScope.destroy();
           childFollowScope = void 0;
@@ -1374,7 +1372,7 @@
               search: void 0,
               level: props.level + 1,
               popupStyle: props.popupStyle,
-              childDestroyTimer,
+              childDestroyTimer: childDestroyTimerRef,
               parentPinned: pinned
             })
           });
@@ -1404,7 +1402,7 @@
           key: 0
         }, props.search, {
           onSearch
-        }), null, 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, item => {
+        }), null, 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(itemsRef.value, item => {
           return vue.openBlock(), vue.createBlock(_sfc_main$d, {
             key: item.id || vue.unref(snail_core.newId)(),
             multiple: props.multiple,
@@ -1414,7 +1412,7 @@
             onEnter: onEnterSelectNode,
             onClick: onClickSelectNode
           }, null, 8, ["multiple", "item", "context"]);
-        }), 128)), items.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
+        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
           key: 1,
           message: "无结果"
         })) : vue.createCommentVNode("", true)], 64))], 38);
@@ -1425,66 +1423,92 @@
   function useTreeContext(nodes) {
     const scopes = snail_core.useScopes();
     const failed = vue.shallowRef();
+    const patched = vue.shallowRef();
     function doSearch(text) {
       text = snail_core.isStringNotEmpty(text) ? text.toLowerCase() : void 0;
       const result = searchTree(nodes, text);
       failed.value = result.failed;
+      patched.value = result.patched;
     }
-    function canShow(node) {
-      return node.hidden != true && (failed.value == void 0 || failed.value.includes(node) == false);
+    function isPatched(node) {
+      return patched.value ? patched.value.includes(node) : false;
     }
-    function getContext(node) {
-      const show = vue.computed(() => canShow(node));
-      const showChildren = vue.computed(() => node.children ? node.children.filter(canShow).length > 0 : false);
-      return {
-        show,
-        showChildren
-      };
+    function isShow(node, needPatched) {
+      if (node.hidden == true) {
+        return false;
+      }
+      if (failed.value == void 0 || failed.value.includes(node) == false) {
+        return true;
+      }
+      return needPatched == true ? isPatched(node) : false;
+    }
+    function isShowChildren(node, needPatched) {
+      return node.children ? node.children.find(child => isShow(child, needPatched)) != void 0 : false;
+    }
+    function getPath(node) {
+      return searchPath(nodes, node);
     }
     const context = snail_core.mountScope({
       doSearch,
-      canShow,
-      getContext
+      isPatched,
+      isShow,
+      isShowChildren,
+      getPath
     });
     context.onDestroy(() => {
       scopes.destroy();
       failed.value = void 0;
+      patched.value = void 0;
     });
     return Object.freeze(context);
   }
   function searchTree(nodes, text) {
     const result = Object.freeze({
       matched: [],
-      failed: []
+      failed: [],
+      patched: []
     });
     for (const node of nodes || []) {
-      var matched = false;
+      const matched = node.fixed == true || text == void 0 || (node.text || "").toLowerCase().indexOf(text) != -1;
+      matched ? result.matched.push(node) : result.failed.push(node);
+      var childMatched = false;
       if (snail_core.hasAny(node.children) == true) {
         const childResult = searchTree(node.children, text);
         result.matched.push(...childResult.matched);
         result.failed.push(...childResult.failed);
-        matched = childResult.matched.length > 0;
+        result.patched.push(...childResult.patched);
+        childMatched = childResult.matched.length > 0 || childResult.patched.length > 0;
       }
-      matched = matched || node.fixed == true;
-      if (matched == false && node.searchable == true) {
-        matched = text == void 0 || (node.text || "").toLowerCase().indexOf(text) != -1;
-      }
-      matched ? result.matched.push(node) : result.failed.push(node);
+      childMatched && matched == false && result.patched.push(node);
     }
     return result;
   }
+  function searchPath(nodes, target) {
+    for (const node of nodes || []) {
+      if (target === node) {
+        return [node];
+      }
+    }
+    for (const node of nodes || []) {
+      const childPath = searchPath(node.children, target);
+      if (childPath.length > 0) {
+        return [node, ...childPath];
+      }
+    }
+    return [];
+  }
 
-  function useSelectContext(items, selects) {
+  function useSelectContext(items, selectsRef) {
     const treeContxt = useTreeContext(items);
     function selected(multiple, item) {
-      if (selects.value) {
-        return multiple == true ? selects.value.includes(item) : selects.value[selects.value.length - 1] == item;
+      if (selectsRef.value) {
+        return multiple == true ? selectsRef.value.includes(item) : selectsRef.value[selectsRef.value.length - 1] == item;
       }
       return false;
     }
     function selectedText(multiple, showPath) {
-      if (selects.value) {
-        return multiple == true || showPath == true ? selects.value.map(item => item.text).join(multiple ? "、" : " / ") : selects.value[selects.value.length - 1].text;
+      if (selectsRef.value) {
+        return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(multiple ? "、" : " / ") : selectsRef.value[selectsRef.value.length - 1].text;
       }
       return "";
     }
@@ -1495,8 +1519,11 @@
     });
   }
 
-  const _hoisted_1$6 = ["textContent"];
-  const _hoisted_2$3 = ["title"];
+  const _hoisted_1$6 = {
+    key: 0,
+    class: "select-result"
+  };
+  const _hoisted_2$3 = ["title", "textContent"];
   const _hoisted_3$3 = ["textContent"];
   const _hoisted_4$3 = {
     key: 1,
@@ -1542,18 +1569,35 @@
       const {
         follow
       } = usePopup();
-      const selects = vue.shallowRef([...valuesModel.value]);
-      const context = useSelectContext(props.items, selects);
+      const {
+        onTimeout
+      } = snail_core.useTimer();
       const rootDom = vue.useTemplateRef("select");
-      const selectText = vue.computed(() => context.selectedText(props.multiple, props.showPath));
+      const context = useSelectContext(props.items, valuesModel);
+      const selectTextRef = vue.computed(() => context.selectedText(props.multiple, props.showPath));
+      const slotOptions = Object.freeze({
+        closeFollow,
+        stopPropagation
+      });
       var followScope = void 0;
+      var stopPropagationScope = void 0;
+      function closeFollow() {
+        if (followScope != void 0) {
+          followScope.destroy();
+          followScope = void 0;
+          return true;
+        }
+        return false;
+      }
+      function stopPropagation(delay) {
+        stopPropagationScope && stopPropagationScope.destroy();
+        stopPropagationScope = onTimeout(() => stopPropagationScope = void 0, delay);
+      }
       async function onClick() {
         if (props.readonly == true || rootDom.value == void 0) {
           return;
         }
-        if (followScope != void 0) {
-          followScope.destroy();
-          followScope = void 0;
+        if (closeFollow() == true || stopPropagationScope != void 0) {
           return;
         }
         const values = valuesModel.value && valuesModel.value.length > 0 ? [...valuesModel.value] : [];
@@ -1584,7 +1628,6 @@
       }
       function onSelectItemChange(items) {
         items = snail_core.hasAny(items) ? [...items] : [];
-        selects.value = items;
         valuesModel.value = items;
         emits("change", items);
       }
@@ -1595,20 +1638,17 @@
           }]),
           onClick: _cache[0] || (_cache[0] = $event => onClick()),
           ref: "select"
-        }, [props.items && props.items.length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        }, [vue.unref(snail_core.hasAny)(props.items) == true ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
-        }, [vue.unref(snail_core.isArrayNotEmpty)(selects.value) == false ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
+        }, [vue.unref(snail_core.hasAny)(valuesModel.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
+          class: "select-text",
+          title: selectTextRef.value,
+          textContent: vue.toDisplayString(selectTextRef.value)
+        }, null, 8, _hoisted_2$3)])])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
           class: "select-result text-tips",
           textContent: vue.toDisplayString(props.placeholder || "请选择")
-        }, null, 8, _hoisted_1$6)) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "select-result",
-          title: selectText.value
-        }, [vue.createElementVNode("div", {
-          class: "select-text",
-          textContent: vue.toDisplayString(selectText.value)
-        }, null, 8, _hoisted_3$3)], 8, _hoisted_2$3)), vue.createVNode(_sfc_main$o, {
+        }, null, 8, _hoisted_3$3)), vue.createVNode(_sfc_main$o, {
           type: "arrow",
           size: 24,
           color: "#8a9099",
@@ -2022,10 +2062,13 @@
       const {
         transition
       } = snail_view.useAnimation();
-      const {
-        show,
-        showChildren
-      } = __props.context.getContext(__props.node);
+      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,
@@ -2073,16 +2116,16 @@
       }
       return (_ctx, _cache) => {
         const _component_TreeNode = vue.resolveComponent("TreeNode", true);
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [showRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.normalizeClass(["snail-tree-node", [`level-${_ctx.level}`, _ctx.node.clickable ? "clickable" : ""]])
+          class: vue.normalizeClass(["snail-tree-node", classRef.value])
         }, [_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", {
           class: "indent"
-        }, null, -1)), _ctx.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [vue.unref(showChildren) ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        }, null, -1)), _ctx.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
           key: 0,
           class: vue.normalizeClass(statusRef.value),
           type: "custom",
@@ -2095,7 +2138,7 @@
           title: _ctx.node.text,
           textContent: vue.toDisplayString(_ctx.node.text),
           onClick: _cache[0] || (_cache[0] = $event => onNodeClick(_ctx.node))
-        }, null, 8, _hoisted_2$1), vue.createElementVNode("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 2)) : vue.createCommentVNode("", true), vue.unref(show) && vue.unref(showChildren) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.children, child => {
+        }, null, 8, _hoisted_2$1), vue.createElementVNode("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 2)) : 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)(),
             node: child,
@@ -2129,21 +2172,28 @@
       search: {},
       nodeOptions: {}
     },
-    emits: ["click"],
+    emits: ["click", "searched"],
     setup(__props, _ref) {
       let {
+        expose: __expose,
         emit: __emit
       } = _ref;
       const props = __props;
       const emits = __emit;
       const context = useTreeContext(props.nodes);
-      vue.shallowRef([]);
+      __expose({
+        context
+      });
+      function onSearch(text) {
+        context.doSearch(text);
+        emits("searched", text);
+      }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$m, vue.mergeProps({
           key: 0
         }, props.search, {
-          onSearch: vue.unref(context).doSearch
-        }), null, 16, ["onSearch"])) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$8, {
+          onSearch
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$8, {
           "scroll-y": true
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.nodes || [], node => {
@@ -2403,5 +2453,6 @@
   exports.triggerAppCreated = triggerAppCreated;
   exports.usePopup = usePopup;
   exports.useReactive = useReactive;
+  exports.useTreeContext = useTreeContext;
 
 }));

package/dist/styles/app.css

@@ -1 +1 @@
-.snail-app{font-family:"Microsoft YaHei","微软雅黑","Hiragino Sans GB","tahoma","arial","simsun","宋体","sans-serif"}.snail-app,.snail-app *{box-sizing:border-box!important}.snail-app div,.snail-app span{font-size:14px}.snail-app input[type=email],.snail-app input[type=number],.snail-app input[type=password],.snail-app input[type=search],.snail-app input[type=text],.snail-app input[type=url]{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:1px solid #dddfed;border-radius:4px;color:#2e3033;font:inherit;font-size:14px;font-weight:400;margin:0;min-width:10px;outline:0!important;padding:0 10px;text-overflow:ellipsis}.snail-app input[type=email]::-webkit-search-cancel-button,.snail-app input[type=number]::-webkit-search-cancel-button,.snail-app input[type=password]::-webkit-search-cancel-button,.snail-app input[type=search]::-webkit-search-cancel-button,.snail-app input[type=text]::-webkit-search-cancel-button,.snail-app input[type=url]::-webkit-search-cancel-button{display:none}.snail-app input[type=email]:focus,.snail-app input[type=number]:focus,.snail-app input[type=password]:focus,.snail-app input[type=search]:focus,.snail-app input[type=text]:focus,.snail-app input[type=url]:focus{border:1px solid #3292ea}.snail-app input[type=email]:-moz-read-only:focus,.snail-app input[type=number]:-moz-read-only:focus,.snail-app input[type=password]:-moz-read-only:focus,.snail-app input[type=search]:-moz-read-only:focus,.snail-app input[type=text]:-moz-read-only:focus,.snail-app input[type=url]:-moz-read-only:focus{border:1px solid #dddfed}.snail-app input[type=email]:read-only:focus,.snail-app input[type=number]:read-only:focus,.snail-app input[type=password]:read-only:focus,.snail-app input[type=search]:read-only:focus,.snail-app input[type=text]:read-only:focus,.snail-app input[type=url]:read-only:focus{border:1px solid #dddfed}.snail-app input[type=checkbox],.snail-app input[type=radio]{margin:0;padding:0}.snail-app ::-webkit-scrollbar{background-color:transparent;border-radius:12px;height:10px;width:10px}.snail-app ::-webkit-scrollbar-button{display:none!important;height:0;width:0}.snail-app ::-webkit-scrollbar-thumb{background-color:hsla(0,0%,71%,.9);border:1px solid hsla(0,0%,100%,.85);border-radius:10px}.snail-app ::-webkit-scrollbar-track{background-color:transparent;border-radius:10px}.snail-app .text-tips{color:#8a9099;font-size:14px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-fade-in{animation:snail-fade-in .4s ease-in-out;opacity:1}@keyframes snail-fade-in{0%{opacity:0}to{opacity:1}}.snail-fade-out{animation:snail-fade-out .4s ease-in-out;opacity:0}@keyframes snail-fade-out{0%{opacity:1}to{opacity:0}}.snail-scale-in{animation:snail-scale-in .2s ease-in-out;scale:1}@keyframes snail-scale-in{0%{scale:0}to{scale:1}}.snail-scale-out{animation:snail-scale-out .2s ease-in-out;scale:0}@keyframes snail-scale-out{0%{scale:1}to{scale:0}}
+.snail-app{font-family:"Microsoft YaHei","微软雅黑","Hiragino Sans GB","tahoma","arial","simsun","宋体","sans-serif"}.snail-app,.snail-app *{box-sizing:border-box!important}.snail-app div,.snail-app span{font-size:14px}.snail-app input[type=email],.snail-app input[type=number],.snail-app input[type=password],.snail-app input[type=search],.snail-app input[type=text],.snail-app input[type=url]{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:1px solid #dddfed;border-radius:4px;color:#2e3033;font:inherit;font-size:14px;font-weight:400;margin:0;min-width:10px;outline:0!important;padding:0 10px;text-overflow:ellipsis}.snail-app input[type=email]::-webkit-search-cancel-button,.snail-app input[type=number]::-webkit-search-cancel-button,.snail-app input[type=password]::-webkit-search-cancel-button,.snail-app input[type=search]::-webkit-search-cancel-button,.snail-app input[type=text]::-webkit-search-cancel-button,.snail-app input[type=url]::-webkit-search-cancel-button{display:none}.snail-app input[type=email]:focus,.snail-app input[type=number]:focus,.snail-app input[type=password]:focus,.snail-app input[type=search]:focus,.snail-app input[type=text]:focus,.snail-app input[type=url]:focus{border:1px solid #3292ea}.snail-app input[type=email]:-moz-read-only:focus,.snail-app input[type=number]:-moz-read-only:focus,.snail-app input[type=password]:-moz-read-only:focus,.snail-app input[type=search]:-moz-read-only:focus,.snail-app input[type=text]:-moz-read-only:focus,.snail-app input[type=url]:-moz-read-only:focus{border:1px solid #dddfed}.snail-app input[type=email]:read-only:focus,.snail-app input[type=number]:read-only:focus,.snail-app input[type=password]:read-only:focus,.snail-app input[type=search]:read-only:focus,.snail-app input[type=text]:read-only:focus,.snail-app input[type=url]:read-only:focus{border:1px solid #dddfed}.snail-app input[type=checkbox],.snail-app input[type=radio]{margin:0;padding:0}.snail-app ::-webkit-scrollbar{background-color:transparent;border-radius:12px;height:10px;width:10px}.snail-app ::-webkit-scrollbar-button{display:none!important;height:0;width:0}.snail-app ::-webkit-scrollbar-thumb{background-color:hsla(0,0%,71%,.9);border:1px solid hsla(0,0%,100%,.85);border-radius:10px}.snail-app ::-webkit-scrollbar-track{background-color:transparent;border-radius:10px}.snail-app .text-tips{color:#8a9099;font-size:14px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}

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

@@ -1,53 +1,53 @@
 /* src:base\button.vue 	 index:0 */
-.snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;font-size:14px;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}
+.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: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>span{margin-left:4px}.snail-choose.readonly>div.choose-item{cursor:not-allowed}
 /* 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\icon.vue 	 index:0 */
 .snail-icon{cursor:pointer;opacity:1}
-/* 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: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>span{margin-left:4px}.snail-choose.readonly>div.choose-item{cursor:not-allowed}
 /* 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:left}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:right}
-/* 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\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;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 */
 .snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:default}
-/* 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-size:14px;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:right;display:flex;flex:1;justify-content:right}.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\dynamic.vue 	 index:0 */
 .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
+/* 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\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:right;display:flex;flex:1;justify-content:right}.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\scroll.vue 	 index:0 */
 .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
-/* 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\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:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
-/* 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\tree.vue 	 index:0 */
-.snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-direction:0;margin:12px}.snail-tree .snail-scroll{flex:1}
+.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\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:form\input.vue 	 index:0 */
-.snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;font-size:14px;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-size:14px;font-weight:400;padding:0 10px 10px}
+.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\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: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}
-/* 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;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word}
+/* 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: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\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}
-/* src:popup\components\popup-container.vue 	 index:0 */
-.snail-popup{left:0;position:fixed;top: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\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}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
+/* src:popup\components\popup-container.vue 	 index:0 */
+.snail-popup{left:0;position:fixed;top:0}
 /* 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}.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:base\components\select-popup.vue 	 index:0 */

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "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.11",
-    "snail.view": ">=1.0.17",
+    "snail.view": ">=1.0.18",
     "sortablejs": ">=1.15.6"
   },
   "devDependencies": {