snail.vue 1.0.33 → 1.0.36

package/dist/snail.vue.d.ts

@@ -1,7 +1,7 @@
 import * as snail_view from 'snail.view';
-import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
+import { BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 import * as vue from 'vue';
-import { Component, ShallowRef, Ref, App } from 'vue';
+import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
 import { IScope, RunResult, IAsyncScope } from 'snail.core';
 
 /**
@@ -32,14 +32,102 @@ type LoadingOptions = {
 };
 
 /**
- * 空状态配置选项
+ * 组件基础的数据实体
+ *  1、元数据形式存在；方便外部做&组装
+ */
+/**
+ * 组件标题 配置选项
+ */
+type TitleOptions = {
+    /**
+     * 标题信息
+     * - 根据组件自身逻辑，渲染效果不一样
+     * - - html元素的title属性：鼠标移入时的提示消息，如 Icon
+     * - - 组件展示的标题文本，如 Confirm
+     */
+    title?: string;
+};
+/**
+ * 占位提示语 配置选项
  */
-type EmptyOptions = {
+type PlaceholderOptions = {
     /**
-     * 提醒消息
-     * - 默认值：无数据
+     * 提示语
+     * - 根据组件自身逻辑，渲染效果不一样
+     * - - html元素的placeholder属性：如 Input、Search
+     * - - 独立占位提示语，作为说明文字存在；如排序时，可提示“拖拽元素可排序”
+     */
+    placeholder?: string;
+};
+/**
+ * 消息信息 配置选项
+ */
+type MessageOptions = {
+    /**
+     * 消息内容
+     * - 如 Confirm 显示的 确认信息
+     * - 如 Empty 中显示的 空状态消息
      */
     message?: string;
+};
+/**
+ * 只读 配置选项
+ * - 抽取出来，方便外部服用
+ */
+type ReadonlyOptions = {
+    /**
+     * 是否只读
+     * - true 时，为只读状态
+     */
+    readonly?: boolean;
+};
+/**
+ * 禁用 配置选项
+ * - 抽取出来，方便外部服用
+ */
+type DisabledOptions = {
+    /**
+     * 是否禁用；
+     * - true 时，为禁用状态
+     * - 根据组件自身逻辑，禁用效果不一样
+     * - - 禁用时：组件不显示，如 TreeNode
+     * - - 禁用时：组件不可编辑，如 Input、Switch
+     * - - 禁用时：组件核心功能不可用；如 Fold，不再可折叠；Sort，不能再拖拽排序、、、
+     */
+    disabled?: boolean;
+};
+/**
+ * 确认区域 配置选项
+ * - 约束 确认区域 的 确定、取消 按钮
+ */
+type ConfirmAreaOptions = {
+    /**
+     * 【取消】按钮名称
+     * - 默认【取消】
+     */
+    cancelName?: string;
+    /**
+     * 禁用【取消】按钮
+     * - 为true时，不显示【取消】按钮
+     */
+    cancelDisabled?: boolean;
+    /**
+     * 【确定】按钮名称
+     * - 默认【确定】
+     */
+    confirmName?: string;
+    /**
+     * 禁用【确定】按钮
+     * - 为true时，不显示【确定】按钮
+     */
+    confirmDisabled?: boolean;
+};
+
+/**
+ * 空状态配置选项
+ * - message        提醒消息 ；默认值：无数据
+ */
+type EmptyOptions = MessageOptions & {
     /**
      * 提醒图标Url地址
      * - 不传入则使用默认的
@@ -78,63 +166,6 @@ type DragVerifyInfo = {
     distance: number;
 };
 
-/**
- * 输入框配置选项
- */
-type InputOptions = {
-    /**
-     * 输入框类型
-     * - text: 文本输入框
-     * - number: 数字输入框
-     * - password: 密码输入框
-     */
-    type?: "text" | "number" | "password";
-    /**
-     * 输入框标题
-     * - 不传入则不展示 标题区域
-     */
-    title?: string;
-    /**
-     * 输入框是否必填
-     * - 必填，则验证不通过时，显示错误信息
-     * - 必填时，显示必填标记，红色 * 号
-     */
-    required?: boolean;
-    /**
-     * 输入框提示语
-     */
-    placeholder?: string;
-    /**
-     * 是否为只读状态
-     */
-    readonly?: boolean;
-    /**
-     * 是否为禁用状态
-     * - 暂时不对外开放
-    disabled?: boolean;
-     */
-    /**
-     * 标题区域样式
-     * - 对齐方式
-     * - 标题区域宽度
-     */
-    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
-};
-/**
- * 输入框事件
- */
-type InputEvents = {
-    /**
-     * 输入框点击时
-     */
-    click: [];
-    /**
-     * 输入框内容发生改变时
-     * @param value 输入框内容
-     */
-    change: [value: string];
-};
-
 /**
  * 树组件配置选项
  */
@@ -149,10 +180,15 @@ type TreeOptions<T> = {
      */
     nodeExtend?: TreeNodeExtendOptions;
 };
+/**
+ * 树组件事件
+ */
+type TreeEvents<T> = {};
 /**
  * 树节点
+ * - disabled       不展示节点和子节点
  */
-type TreeNode<T> = {
+type TreeNode<T> = DisabledOptions & {
     /**
      * 树节点 文本
      */
@@ -167,10 +203,11 @@ type TreeNode<T> = {
      */
     data?: T;
     /**
-     * 是否禁用
-     * - true：禁用此节点 禁用时不显示此节点及其子节点
+     * 是否可点击
+     * - true 此节点可点击，点击时触发 click 事件
+     * - false 此节点不可点击
      */
-    disabled?: boolean;
+    clickable?: boolean;
     /**
      * 子节点 数据
      */
@@ -184,6 +221,10 @@ type TreeNodeOptions<T> = {
      * 树节点
      */
     node: TreeNode<T>;
+    /**
+     * 父节点
+     */
+    parent?: TreeNode<T>;
     /**
      * 节点层级
      * - 从1开始
@@ -195,6 +236,18 @@ type TreeNodeOptions<T> = {
      */
     extend?: TreeNodeExtendOptions;
 };
+/**
+ * 树节点事件
+ */
+type TreeNodeEvents<T> = {
+    /**
+     * 点击树节点
+     * - 节点 clickable 为 true 时，点击此节点时触发
+     * @param node 点击的树节点
+     * @param parent node 所属 父节点
+     */
+    click: [node: TreeNode<T>, parent?: TreeNode<T>];
+};
 /**
  * 树节点扩展配置选项
  */
@@ -285,22 +338,15 @@ type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & Pad
 
 /**
  * 折叠面板配置选项
+ * - title          折叠面板标题
+ * - disabled       禁用折叠效果，始终展开
  */
-type FoldOptions = {
-    /**
-     * 折叠面板标题
-     */
-    title?: string;
+type FoldOptions = DisabledOptions & TitleOptions & {
     /**
      * 副标题
      * - 跟随在title后
      */
     subtitle?: string;
-    /**
-     * 禁用【折叠】功能
-     * - true 则禁用折叠，始终展开内容区域
-     */
-    disabled?: boolean;
 };
 /**
  * 折叠状态
@@ -357,55 +403,11 @@ type ComponentMountOptions = ComponentOptions & {
     props?: Record<string, any>;
 };
 
-/**
- * 开关 配置选项
- */
-type SwitchOptions = {
-    /**
-     * 是否只读
-     */
-    readonly?: boolean;
-};
-/**
- * 开关 事件
- */
-type SwitchEvents = {
-    /**
-     * 开关 状态变化时
-     * @param value 开启、还是关闭
-     */
-    change: [value: boolean];
-};
-
-/**
- * 搜索组件配置选项
- */
-type SearchOptions = {
-    /**
-     * 是否为只读模式
-     */
-    readonly?: boolean;
-    /**
-     * 搜索提示语
-     */
-    placeholder?: string;
-};
-/**
- * 搜索组件事件
- */
-type SearchEvents = {
-    /**
-     * 事件：执行搜索
-     * @param value 为搜索文本
-     */
-    search: [value: string];
-};
-
 /**
  * 图标配置选项
- * - 后续支持外部直接传入svg路径，这样实现更细粒度的控制
+ * - title          作为鼠标移入图标时的提示
  */
-type IconOptions = {
+type IconOptions = TitleOptions & {
     /**
      * 图标类型
      */
@@ -444,8 +446,9 @@ type IconType = "success" | "close" | "error" | "warn" | "trash" | "grip" | "cus
 
 /**
  * 头部配置选项
+ * - title          将作为头部标题，无则不展示标题区域
  */
-type HeaderOptions = {
+type HeaderOptions = TitleOptions & {
     /**
      * 使用到哪里
      * - page   ：页面头部：默认类型；标题、关闭按钮等对齐一行；
@@ -457,11 +460,6 @@ type HeaderOptions = {
      * 启用后，则组件顶部设置边框 border-bottom: 1px solid #dddfed;;
      */
     divider?: boolean;
-    /**
-     * 弹窗标题
-     * - 无则不展示标题区域
-     */
-    title?: string;
     /** 弹窗标题对齐方式
      * - 默认值：center
      */
@@ -484,7 +482,7 @@ type HeaderEvents = {
 /**
  * 底部组件配置选项
  */
-type FooterOptions = {
+type FooterOptions = ConfirmAreaOptions & {
     /**
      * 内部的按钮等对齐方式：
      * - 默认 right
@@ -495,26 +493,6 @@ type FooterOptions = {
      * 启用后，则组件顶部设置边框 border-top: 1px solid #dddfed;
      */
     divider?: boolean;
-    /**
-     * 【取消】按钮名称
-     * - 默认【取消】
-     */
-    cancelName?: string;
-    /**
-     * 禁用【取消】按钮
-     * - 为true时，不显示【取消】按钮
-     */
-    cancelDisabled?: boolean;
-    /**
-     * 【确定】按钮名称
-     * - 默认【确定】
-     */
-    confirmName?: string;
-    /**
-     * 禁用【确定】按钮
-     * - 为true时，不显示【确定】按钮
-     */
-    confirmDisabled?: boolean;
 };
 /**
  * 底部组件事件
@@ -537,7 +515,7 @@ type FooterEvents = {
 /**
  * 选择 组件配置选项
  */
-type ChooseOptions<T> = {
+type ChooseOptions<T> = ReadonlyOptions & {
     /**
      * 是否为多选模式
      * - true 多选模式，可以选中items中多个选项
@@ -550,10 +528,6 @@ type ChooseOptions<T> = {
      * - checkbox:  多选框样式
      */
     type: "checkbox" | "radio";
-    /**
-     * 是否是只读模式
-     */
-    readonly?: boolean;
     /**
      * 待选项目
      * text 可不传入
@@ -641,12 +615,52 @@ interface IReactiveManager {
      * @returns 任务自身
      */
     load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
+    /**
+     * 监听器：监听单个值变化
+     * - 内部利用vue的watch逻辑实现
+     * - 自动进行生命周期管理，作用域销毁时自动清理watch监听
+     * - 仅实现简化版本watch监听；复杂的监听逻辑，自行使用watch方法
+     * @param source 监听源
+     * @param callback 回调方法：可接收新旧值变化
+     * @returns 监听作用域，destroy可销毁监听
+     */
+    watcher<T>(source: WatchSource<T>, callback: (newValue: T, oldValue: T) => void): IScope;
 }
 /**
  * 响应式变量
  */
 type ReactiveVar<T> = ShallowRef<T> | Ref<T>;
 
+/**
+ * 搜索组件配置选项
+ */
+type SearchOptions = ReadonlyOptions & PlaceholderOptions & {};
+/**
+ * 搜索组件事件
+ */
+type SearchEvents = {
+    /**
+     * 事件：执行搜索
+     * @param value 为搜索文本
+     */
+    search: [value: string];
+};
+
+/**
+ * 开关 配置选项
+ */
+type SwitchOptions = ReadonlyOptions & {};
+/**
+ * 开关 事件
+ */
+type SwitchEvents = {
+    /**
+     * 开关 状态变化时
+     * @param value 开启、还是关闭
+     */
+    change: [value: boolean];
+};
+
 /**
  * 使用【响应式管理器】
  * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
@@ -683,6 +697,67 @@ declare function triggerAppCreated(app: App): App;
  */
 declare function getSvgDraw(options: IconOptions): string[];
 
+/**
+ * 排序组件 配置选项
+ * - disabled       禁用排序效果，不能再拖拽元素排序
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
+ */
+type SortOptions<T> = DisabledOptions & {
+    /**
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
+     */
+    changer: T;
+    /**
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
+     */
+    draggable: string;
+    /**
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
+     */
+    handle?: string;
+    /**
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
+     */
+    dragClass?: string;
+    /**
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
+     */
+    ghostClass?: string;
+    /**
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     */
+    group?: string;
+    /**
+     * 动画时间
+     * - 单位ms；默认150ms
+     */
+    animation?: number;
+};
+/**
+ * 排序组件 事件
+ */
+type SortEvents = {
+    /**
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
+     */
+    update: [oldIndex: number, newIndex: number];
+};
+
 /**
  * 挂载vue组件
  * - 全新创建一个Vue实例挂载的传入组件
@@ -693,6 +768,47 @@ declare function getSvgDraw(options: IconOptions): string[];
  */
 declare function mount(options: ComponentMountOptions, onDestroyed?: (fn: () => void) => void): IScope;
 
+/**
+ * 输入框配置选项
+ * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
+ * - 暂不提供 disabled 逻辑
+ */
+type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
+    /**
+     * 输入框类型
+     * - text: 文本输入框
+     * - number: 数字输入框
+     * - password: 密码输入框
+     */
+    type?: "text" | "number" | "password";
+    /**
+     * 输入框是否必填
+     * - 必填，则验证不通过时，显示错误信息
+     * - 必填时，显示必填标记，红色 * 号
+     */
+    required?: boolean;
+    /**
+     * 标题区域样式
+     * - 对齐方式
+     * - 标题区域宽度
+     */
+    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
+};
+/**
+ * 输入框事件
+ */
+type InputEvents = {
+    /**
+     * 输入框点击时
+     */
+    click: [];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
 /**
  * 公共通用数据结构：
  *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
@@ -778,7 +894,7 @@ type PopupExtend = {
  */
 
 /**
- * 模态弹窗配置选项
+ * 模态弹窗 配置选项
  * - 继承 ComponentOptions ，动态加载组件
  */
 type DialogOptions = PopupOptions & {
@@ -846,53 +962,110 @@ type DailogExtend = {
 
 /**
  * 确认弹窗配置选项
+ * - title          弹窗标题，默认“提示”
+ * - message        确认提示信息；默认“请确认？”；支持html格式内容
+ */
+type ConfirmOptions = TitleOptions & MessageOptions & ConfirmAreaOptions & {};
+
+/**
+ * Toast配置选项
  */
-type ConfirmOptions = {
+type ToastOptions = {
     /**
-     * 弹窗标题
-     * - 默认“提示”
+     * 提示类型，基于类型展示图标
      */
-    title?: string;
+    type?: IconType;
     /**
-     * 确认提示信息
-     * - 支持html格式内容
-     * - 默认“请确认？”
+     * 提示消息；支持html格式
      */
-    message?: string;
+    message: string;
+};
+
+/**
+ * 跟随效果 弹窗
+ */
+
+/**
+ * 跟随弹窗 配置选项
+ * - 传入的组件，根据配置跟随 target 位置和大小；
+ */
+type FollowOptions = PopupOptions & {
     /**
-     * 【取消】按钮名称
-     * - 默认【取消】
+     * 启用【宽度】跟随
+     * - 为true则和 target 宽度保持一致
+     * - false时，宽度由 弹出组件 自己维护
+     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
      */
-    cancelName?: string;
+    width?: boolean;
     /**
-     * 禁用【取消】按钮
-     * - 为true时，不显示【取消】按钮
+     * 启用【高度】更碎
+     * - 为true则和 target 高度保持一致
+     * - false时，高度由 弹出组件 自己维护
+     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
      */
-    cancelDisabled?: boolean;
+    height?: boolean;
     /**
-     * 【确定】按钮名称
-     * - 默认【确定】
+     * x轴方向上的位置跟随效果
+     * - start : 和 target 的 left 值保持一致
+     * - center：和 target x轴中心位置一致
+     * - end ： 和 target 的 right 值保持一致
+     * - 不传入则自动裁决最合适位置：start ，然后 end，最后 center
      */
-    confirmName?: string;
+    followX?: "start" | "center" | "end";
     /**
-     * 禁用【确定】按钮
-     * - 为true时，不显示【确定】按钮
+     * y轴方向上的位置跟随效果
+     * - start : 和 target 的 top 值保持一致
+     * - center：和 target y轴中心位置一致
+     * - end ： 和 target 的 bottom 值保持一致
+     * - 不传入则自动裁决最合适位置：start ，然后 end，最后 center
      */
-    confirmDisabled?: boolean;
+    followY?: "start" | "center" | "end";
+    /**
+     * x轴方向上的位置跟随偏移量
+     * - 默认为0；>0 向右偏移，<0 向左偏移
+     * - followX 计算出来的位置值 加 此偏移量值，最最终x方向上的跟随位置
+     */
+    offsetX?: number;
+    /**
+     * y轴方向上的位置跟随偏移量
+     * - 默认为0；>0 向下偏移，<0 向上偏移
+     * - followy 计算出来的位置值 加 此偏移量值，最最终x方向上的跟随位置
+     */
+    offsetY?: number;
+    /**
+     * 客户端留白空间
+     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
+     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
+     */
+    clientSpace?: number;
 };
-
 /**
- * Toast配置选项
+ * 跟随弹窗 句柄
+ * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
  */
-type ToastOptions = {
+type FollowHandle<T> = {
     /**
-     * 提示类型，基于类型展示图标
+     * 组件是否处于【跟随弹窗】模式
      */
-    type?: IconType;
+    inFollow?: boolean;
     /**
-     * 提示消息；支持html格式
+     * 关闭跟随
+     * @param data 关闭时传递数据
      */
-    message: string;
+    closeFollow(data?: T): void;
+};
+/**
+ * 跟随弹窗 扩展配置
+ */
+type FollowExtend = {
+    /**
+     * 跟随状态
+     */
+    followStatus: PopupStatus;
+    /**
+     * 跟随的目标元素
+     */
+    target: HTMLElement;
 };
 
 /**
@@ -914,6 +1087,14 @@ interface IPopupManager {
      * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
     dialog<T>(options: DialogOptions): IAsyncScope<T>;
+    /**
+     * 跟随弹窗
+     * - 跟随指定的target对象，可跟随位置、大小
+     * @param target 跟随的目标元素
+     * @param options 跟随配置选项
+     * @returns 弹窗异步作用域，外部可手动关闭弹窗
+     */
+    follow<T>(target: HTMLElement, options: FollowOptions): IAsyncScope<T>;
     /**
      * 打开【确认】弹窗
      * @param title  弹窗标题
@@ -972,10 +1153,9 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
-    Choose: vue.DefineComponent<{
+    Choose: vue.DefineComponent<ReadonlyOptions & {
         multi?: boolean;
         type: "checkbox" | "radio";
-        readonly?: boolean;
         items: ChooseItem<any>[];
         itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
     } & {
@@ -983,10 +1163,9 @@ declare const components: {
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (values: any) => any;
         "update:modelValue": (value: any) => any;
-    }, string, vue.PublicProps, Readonly<{
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         multi?: boolean;
         type: "checkbox" | "radio";
-        readonly?: boolean;
         items: ChooseItem<any>[];
         itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
     } & {
@@ -1055,23 +1234,23 @@ declare const components: {
         };
     });
     Icon: vue.DefineComponent<IconOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-    Search: vue.DefineComponent<SearchOptions & {
+    Search: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & {
         modelValue?: string;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         search: (value: string) => any;
         "update:modelValue": (value: string) => any;
-    }, string, vue.PublicProps, Readonly<SearchOptions & {
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & {
         modelValue?: string;
     }> & Readonly<{
         onSearch?: (value: string) => any;
         "onUpdate:modelValue"?: (value: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-    Switch: vue.DefineComponent<SwitchOptions & {
+    Switch: vue.DefineComponent<ReadonlyOptions & {
         modelValue?: boolean;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (value: boolean) => any;
         "update:modelValue": (value: boolean) => any;
-    }, string, vue.PublicProps, Readonly<SwitchOptions & {
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         modelValue?: boolean;
     }> & Readonly<{
         onChange?: (value: boolean) => any;
@@ -1096,7 +1275,9 @@ declare const components: {
         };
     });
     Fold: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FoldOptions & {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & TitleOptions & {
+            subtitle?: string;
+        } & {
             status?: FoldStatus;
         }> & Readonly<{
             onChange?: (status: FoldStatus) => any;
@@ -1111,7 +1292,9 @@ declare const components: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<FoldOptions & {
+        }, Readonly<DisabledOptions & TitleOptions & {
+            subtitle?: string;
+        } & {
             status?: FoldStatus;
         }> & Readonly<{
             onChange?: (status: FoldStatus) => any;
@@ -1120,7 +1303,9 @@ declare const components: {
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<FoldOptions & {
+    } & vue.ComponentOptionsBase<Readonly<DisabledOptions & TitleOptions & {
+        subtitle?: string;
+    } & {
         status?: FoldStatus;
     }> & Readonly<{
         onChange?: (status: FoldStatus) => any;
@@ -1152,6 +1337,57 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Sort: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & {
+            changer: any;
+            draggable: string;
+            handle?: string;
+            dragClass?: string;
+            ghostClass?: string;
+            group?: string;
+            animation?: number;
+        }> & Readonly<{
+            onUpdate?: (oldIndex: number, newIndex: number) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            update: (oldIndex: number, newIndex: number) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<DisabledOptions & {
+            changer: any;
+            draggable: string;
+            handle?: string;
+            dragClass?: string;
+            ghostClass?: string;
+            group?: string;
+            animation?: number;
+        }> & Readonly<{
+            onUpdate?: (oldIndex: number, newIndex: number) => any;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<DisabledOptions & {
+        changer: any;
+        draggable: string;
+        handle?: string;
+        dragClass?: string;
+        ghostClass?: string;
+        group?: string;
+        animation?: number;
+    }> & Readonly<{
+        onUpdate?: (oldIndex: number, newIndex: number) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        update: (oldIndex: number, newIndex: number) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
     Table: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TableOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -1211,7 +1447,11 @@ declare const components: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
             nodes: TreeNode<any>[];
             nodeExtend?: TreeNodeExtendOptions;
-        }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        }> & Readonly<{
+            onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
@@ -1221,25 +1461,39 @@ declare const components: {
         }, Readonly<{
             nodes: TreeNode<any>[];
             nodeExtend?: TreeNodeExtendOptions;
-        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }> & Readonly<{
+            onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & vue.ComponentOptionsBase<Readonly<{
         nodes: TreeNode<any>[];
         nodeExtend?: TreeNodeExtendOptions;
-    }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    }> & Readonly<{
+        onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: any) => any;
         };
     });
-    Input: vue.DefineComponent<InputOptions & {
+    Input: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
+        type?: "text" | "number" | "password";
+        required?: boolean;
+        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
+    } & {
         modelValue?: string;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (value: string) => any;
         click: () => any;
         "update:modelValue": (value: string) => any;
-    }, string, vue.PublicProps, Readonly<InputOptions & {
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
+        type?: "text" | "number" | "password";
+        required?: boolean;
+        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
+    } & {
         modelValue?: string;
     }> & Readonly<{
         onChange?: (value: string) => any;
@@ -1288,4 +1542,4 @@ declare const components: {
 };
 
 export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
-export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ReactiveVar, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions, TreeNode, TreeNodeExtendOptions, TreeNodeOptions, TreeOptions };
+export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FollowExtend, FollowHandle, FollowOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, MessageOptions, PlaceholderOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtendOptions, TreeNodeOptions, TreeOptions };