snail.vue 2.0.27 → 2.0.29

package/dist/snail.vue.d.ts

@@ -1,9 +1,9 @@
 import * as snail_core from 'snail.core';
-import { DateFormat, DateValue, TimeValue, IScope, RunResult, IAsyncScope } from 'snail.core';
-import * as snail_view from 'snail.view';
-import { ScrollbarOptions, ScrollStatus, CSSClassOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
+import { DateFormat, DateValue, TimeValue, IAsyncScope, IScope, RunResult } from 'snail.core';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
+import * as snail_view from 'snail.view';
+import { ScrollbarOptions, ScrollStatus, CSSClassOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 
 /**
  * loading提示框的配置选项
@@ -212,6 +212,12 @@ type DatePickerOptions = {
      * - 默认 “yyyy-MM-dd"
      */
     format?: DateFormat;
+    /**
+     * 渲染模式
+     * - default    默认模式，文本框+图标，文本框填充满+边框
+     * - simple     简单模式，有值时才显示文本框，且无边框+不填充满
+     */
+    mode?: "default" | "simple";
     /**
      * 日期最小值
      * - 选择年月日时，早于此值的年月日不可选
@@ -249,6 +255,12 @@ type TimePickerOptions = {
      * 时间格式
      */
     format?: "HH:mm:ss" | "HH:mm";
+    /**
+     * 渲染模式
+     * - default    默认模式，文本框+图标，文本框填充满+边框
+     * - simple     简单模式，有值时才显示文本框，且无边框+不填充满
+     */
+    mode?: "default" | "simple";
     /**
      * 最小时间
      * - 传入值格式为 "时:分:秒"
@@ -313,6 +325,188 @@ type TimePickerMinuteItem = Required<Pick<TimeValue, "minute" | "hour"> & Disabl
  */
 type TimePickerSecondItem = Required<TimeValue & DisabledOptions>;
 
+/**
+ * 组件配置选项
+ */
+type ComponentOptions = {
+    /**
+     * 组件名称；
+     * - 确保组件已注册，否则会加载不出来
+     */
+    name?: string;
+    /**
+     * Vue组件对象
+     * - name未传入时生效
+     * - 推荐外部使用 shallowRef 包裹对象，避免响应式的性能问题
+     */
+    component?: Component;
+    /**
+     * 组件js文件url地址
+     * - 支持#号锚点钻取
+     * - name、component未传入时生效
+     */
+    url?: string;
+};
+/**
+ * 提取组件的props类型
+ * - 有效的 Props 类型：extends Record<string, any>
+ * - 有效类型则返回 Props 自身；否则无效，为undefined
+ */
+type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
+/**
+ * 事件发射器类型
+ * - 将【组件中组件】转换为vue的 defineEmits 类型
+ * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
+ */
+type EmitterType<Events extends Record<string, any[]>> = {
+    <K extends keyof Events>(event: K, ...payload: Events[K]): any;
+};
+/**
+ * 提取【组件插槽】类型
+ */
+type SlotsType<Slots extends Record<string, any>> = {
+    [key in keyof Slots]: (props: Slots[key]) => any;
+};
+/**
+ * 提取【组件事件】类型
+ * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
+ * - T的类型约束：Record<string, unknown[]>
+ */
+type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
+    [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
+}) : never;
+/**
+ * 组件绑定 配置选项
+ * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
+ * - 若泛型类型无效，则对应属性类型强制为undefined；详细参照对应属性说明
+ */
+type ComponentBindOptions<Props = void, Model = void> = {
+    /**
+     * 传递给组件的属性值，执行 v-bind 绑定
+     * - key为属性名称，遵循vue解析规则；若绑定事件，则key为 on事件名称 ，事件名称首字母大写
+     * - 通过泛型类型 Props 约束，有效类型：Props extends Record<string, any>
+     * @see EventsType<Events> 获取组件事件类型
+     */
+    props?: PropsType<Props>;
+    /**
+     * 传递给组件的双向绑定数据，执行 v-model 绑定
+     * - 使用 ShallowRef/Ref 包裹；推荐 ShallowRef，仅和组件进行.value值交互，避免深层双向影响性能
+     * - 通过泛型类型 Model 约束，有效类型： 非void、never、null、undefined等无效类型
+     */
+    model?: Model extends (void | never | null | undefined) ? undefined : (ShallowRef<Model> | Ref<Model>);
+};
+
+/**
+ * 公共通用数据结构：
+ *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
+ */
+
+/**
+ * 弹窗配置选项
+ * - 约束弹出组件信息
+ * - 弹出组件时传递的参数信息
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+ */
+type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
+    /**
+     * 弹窗动画名
+     * - 不传则默认“fade”
+     * - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
+     * - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
+     */
+    transition?: string;
+    /**
+     * 动画持续时间
+     * - 配合 transition 使用；单位ms，默认500ms
+     * - 外部传入自定义动画时，传入动画持续时间，否则可能导致关闭时动画失效
+     */
+    transitionDuration?: number;
+    /**
+     * 自定义class
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    class?: string | string[];
+     */
+    /**
+     * 自定义style
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    style?: AllStyle;
+     */
+    /**
+     * 弹窗的z-index值
+     * - 无特殊情况，建议不指定，内部会自动生成，确保弹窗正确性
+     */
+    zIndex?: number;
+};
+/**
+ * 弹出组件句柄
+ */
+type PopupHandle<T> = {
+    /**
+     * 组件是否在【弹出窗口】中
+     * - popup  ：  普通弹出弹窗
+     * - dialog ：  模态对话弹窗
+     * - follow ：  跟随效果弹窗
+     */
+    inPopup: Readonly<"popup" | "dialog" | "follow">;
+    /**
+     * 关闭弹窗
+     * @param data 关闭时传递数据
+     */
+    closePopup(data?: T): void;
+};
+/**
+ * 弹窗状态：响应式
+ * - open       打开
+ * - active     激活，针对Dialog弹窗生效
+ * - unactive   非激活，针对Dialog弹窗生效
+ * - closed     关闭
+ */
+type PopupStatus = ShallowRef<"open" | "active" | "unactive" | "closed">;
+/**
+ * 弹窗状态 配置选项
+ */
+type PopupStatusOptions = {
+    /**
+     * 弹窗状态：响应式
+     */
+    popupStatus: PopupStatus;
+};
+/**
+ * 弹窗对象描述器
+ * - 给弹窗容器使用，传递过去作为props使用
+ */
+type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOptions & {
+    /**
+     * 弹窗Id
+     * - 自动分配，全局唯一
+     */
+    popupId: string;
+    /**
+     * 弹窗配置选项
+     * - 由外部传递过来的业务数据配置信息
+     * - 约束具体弹窗的业务组件和业务组件所需props等数据
+     */
+    options: Options;
+    /**
+     * 弹窗扩展配置选项
+     * - 由 popup、follow等方法内部组件：如关闭弹窗方法、钩子函数等
+     * - 配合业务组件使用的一些配置数据
+     */
+    extOptions: ExtOptions;
+    /**
+     * 实际分配的zIndex值
+     */
+    zIndex: number;
+    /**
+     * 弹窗动画名
+     * - 约束打开、关闭动画；基于 PopupOptions.transition 构建出来的
+     * - 具体使用方，将此值绑定的根元素上
+     */
+    popupTransition: ShallowRef<string>;
+};
+
 /**
  * 头部配置选项
  * - title          将作为头部标题，无则不展示标题区域
@@ -470,2391 +664,2240 @@ type WrapperOptions = {
 type WrapperEvents = FooterEvents;
 
 /**
- * 树形 数据相关的基础实体结构
- * 1、封装一些基础实体；如树形节点数据结构
- * 2、配合树形组件使用；如select的多级筛选，树组件等
- * 3、封装树的基础共性操作，如显隐判断、搜索查询等
- */
-/**
- * 树节点
- * - 仅提供树节点基础属性；可以基于 Extend 为 TreeNode 扩展节点属性
+ * 模态弹窗数据结构
  */
-type TreeNode<T, Extend extends Record<string, any> | void = void> = {
-    /**
-     * 展示文本
-     */
-    text: string;
-    /**
-     * 附带数据
-     */
-    data?: T;
-    /**
-     * 子选择项 数据源
-     */
-    children?: TreeNode<T, Extend>[];
-} & (Extend extends void ? {} : Extend);
+
 /**
- * 树节点 扩展
- * - 配合 树上下文 使用
+ * 模态弹窗 配置选项
+ * - 继承 ComponentOptions ，动态加载组件
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type TreeNodeExtend = {
+type DialogOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
     /**
-     * 节点Id，确保唯一
-     * - 不传入则内部自动 newId()
+     * 包裹器配置
+     * - 若传入配置，则启用弹窗包裹；弹窗打开时使用`Wrapper`包裹弹窗内容组件
      */
-    readonly id?: string;
+    wrapper?: Pick<WrapperOptions, "header" | "content" | "footer">;
     /**
-     * 是否可点击
-     * - true 此节点可点击，点击时触发 click 事件
-     * - false 此节点不可点击
+     * 禁用【遮罩层】
+     * - 目前没实现，先忽略
+    maskDisabled?: boolean;
      */
-    clickable?: boolean;
     /**
-     * 是否可搜索
-     * - 为true时，此节点可搜索
+     * 点击【遮罩层】时是否关闭弹窗
+     * - 针对无遮罩层的弹窗，则点击非【弹窗组件】区域时是否关闭
      */
-    searchable?: boolean;
+    closeOnMask?: boolean;
     /**
-     * 是否隐藏
-     * - true 隐藏 节点 和 子节点
-     * - 隐藏组件，不参与点击、搜索等
+     * 按下【ESC】健时是否关闭弹窗
      */
-    hidden?: boolean;
+    closeOnEscape?: boolean;
     /**
-     * 是否固定
-     * - true 固定 节点；则节点不参与 搜索、移动等动态操作
+     * 模态弹窗的自定义class
+     * - 绑定到模态弹窗的根元素上
      */
-    fixed?: boolean;
+    rootClass?: string | string[];
 };
 /**
- * 树的基础上下文对象
+ * 弹窗组件句柄
+ * - 用于在弹窗内容组件中进行模式判断和关闭
  */
-interface ITreeBaseContext<T> {
-    /**
-     * 执行搜索
-     * @param text 搜索文本
-     */
-    doSearch(text: string): void;
-    /**
-     * 是否是【已激活】节点
-     * @param node 要判断的节点
-     * @returns true 是已激活节点，false 否
-     */
-    isActived(node: TreeNode<T>): boolean;
-    /**
-     * 是否是【补丁】节点
-     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
-     * @param node 要判断的节点
-     * @returns true 是补丁节点，false 不是补丁节点
-     */
-    isPatched(node: TreeNode<T>): boolean;
-    /**
-     * 是否显示【树节点】
-     * @param node 要判断的节点
-     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
-     * @returns 能显示返回true；否则返回false
-     */
-    isShow(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
-    /**
-     * 是否显示指定【树节点】的子节点
-     * - 不会判断node节点自身是否可显示
-     * @param node 要判断的节点
-     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
-     * @returns 能显示返回true；否则返回false
-     */
-    isShowChildren(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
-    /**
-     * 获取指定【树节点】的路径
-     * @param node 树节点
-     * @returns 从【顶级节点】->【指定节点】的全路径数据
-     */
-    getPath(node: TreeNode<T, TreeNodeExtend>): TreeNode<T, TreeNodeExtend>[];
-    /**
-     * 获取指定【树节点】的唯一Key值
-     * - 相同节点确保唯一，且不变；用于唯一标记此节点
-     * @param node
-     * @returns 返回节点唯一Key值
-     */
-    getKey(node: TreeNode<T>): string;
-}
-/**
- * 树搜索结果
- */
-type TreeSearchResult<T> = {
-    /**
-     * 匹配上的节点集合
-     */
-    matched: TreeNode<T>[];
-    /**
-     * 未匹配上的节点集合
-     */
-    failed: TreeNode<T>[];
-    /**
-     * 搜索时的【补丁】节点集合
-     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
-     * - 仅在有搜索条件时成立，补丁节点同时在【failed】节点集合中
-     */
-    patched: TreeNode<T>[];
-};
-
-/**
- * 搜索组件配置选项
- */
-type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
+type DialogHandle<T> = PopupHandle<T> & {
     /**
-     * 启用【自动完成】
-     * - true 时，只要文本变化了，就触发 search 事件
-     * - false 时，只有点击【搜索】按钮，才触发 search 事件
+     * 注册监听【弹窗关闭】事件方法
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 关闭时执行的钩子函数，支持异步；；调用后若返回false时将阻止弹窗关闭
      */
-    autoComplete?: boolean;
+    onBeforeClose(fn: (data?: T) => false | undefined | Promise<false | undefined>): void;
 };
 /**
- * 搜索组件事件
+ * 弹窗包裹器操作句柄
  */
-type SearchEvents = {
+type DialogWrapperHandle<T> = {
     /**
-     * 事件：执行搜索
-     * @param value 为搜索文本
+     * 注册【构建数据】事件方法
+     * - 仅在Dialog为使用了wrapper模式时生效，用于在【确认】按钮点击时，构建实际内容组件中的数据
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 取数据时执行的钩子函数，支持异步；若需要阻止弹窗关闭则`fn`方法直接报错即可
      */
-    search: [value: string];
+    onBuildData(fn: () => T | Promise<T>): void;
 };
 
 /**
- * 树组件 相关实体
- * - 基于 snail.core中的TreeNode做扩展
+ * 确认弹窗配置选项
+ * - title          弹窗标题，默认“提示”
+ * - message        确认提示信息；默认“请确认？”；支持html格式内容
  */
+type ConfirmOptions = TitleOptions & MessageOptions & ConfirmAreaOptions & {};
 
 /**
- * 树组件 配置选项
+ * 图标配置选项
+ * - title          作为鼠标移入图标时的提示
  */
-type TreeOptions<T> = {
-    /**
-     * 树节点 集合
-     */
-    nodes: TreeNodeModel<T>[];
+type IconOptions = TitleOptions & {
     /**
-     * 树节点搜索配置
-     * - 不配置则不启用【搜索】功能
+     * 是否为自定义图标
+     * - 为true时，外部通过插槽自己绘制图标
+     * - 为false时，使用`type`值绘制对应的内置图标
+     * - 默认false
      */
-    search?: SearchOptions;
+    custom?: boolean;
     /**
-     * 树节点的配置选项
+     * 内置的图标类型
+     * - `custom`为false时生效
      */
-    nodeOptions?: TreeNodeRenderOptions;
-};
-/**
- * 树组件事件
- */
-type TreeEvents<T> = TreeNodeEvents<T> & {
+    type?: IconType;
     /**
-     * 搜索完成后
-     * @param text 搜索文本
+     * 是否是按钮图标
+     * - true时，鼠标移入时 cursor:pointer;
      */
-    searched: [text: string];
-};
-/**
- * 树节点 组件配置选项
- */
-type TreeNodeOptions<T> = {
+    button?: boolean;
     /**
-     * 要渲染的树节点
+     * 图标大小
+     * - 可指定对象，如 { width: 24, height: 24 }，则图标大小为 24 * 24
+     * - 可指定数字，如 24，则图标大小为 24 * 24
+     * - 默认 24
      */
-    node: TreeNodeModel<T>;
+    size?: number | {
+        width?: number;
+        height?: number;
+    };
     /**
-     * 父节点
+     * 图标颜色
      */
-    parent?: TreeNodeModel<T>;
+    color?: string;
     /**
-     * 树节点所处层级
-     * - 用于控制缩进
+     * 鼠标移入时的图标颜色
      */
-    level: number;
+    hoverColor?: string;
     /**
-     * 树节点的配置选项
+     * 旋转角度
+     * - 默认0
+     * - 通过：transform: rotate(1.06); 实现
      */
-    options?: TreeNodeRenderOptions;
+    rotate?: number;
     /**
-     * 树组件的上下文对象
+     * 图标透明度
+     * - 不传入，默认1
      */
-    context: ITreeBaseContext<T>;
-};
-/**
- * 树节点事件
- */
-type TreeNodeEvents<T> = {
+    opacity?: number;
     /**
-     * 树节点 点击事件
-     * @param node 点击的树节点
-     * @param parents node的父节点路径，从【顶级父节点】->【直属父节点】
+     * 图标边样式
      */
-    click: [node: TreeNodeModel<T>, parents?: TreeNodeModel<T>[]];
-};
-/**
- * 树节点数据结构
- * - 简化外部使用 树节点 时需要频繁写 TreeNode<T, TreeNodeExtend>；
- * - 避免和 Vue 组件“tree-node.vue”命名重复
- * - 推荐使用时，将此对象做响应式，否则 .hidden 等 更新时，无法实时反应到树上
- */
-type TreeNodeModel<T> = TreeNode<T, TreeNodeExtend>;
-/**
- * 树节点 渲染配置选项
- */
-type TreeNodeRenderOptions = {
+    border?: string;
     /**
-     * 节点展开层级
-     * - 不传入则默认展开所有
-     * - 否则展开传入的层级；从2开始；第一级始终展开；如2则1、2层级展开
-     * -
+     * 图标圆角样式
      */
-    expandLevel?: number;
+    radius?: string;
     /**
-     * 是否禁用【折叠】子节点操作
-     * - true 时禁用 折叠操作
+     * 图标背景样式
      */
-    foldDisabled?: boolean;
+    background?: string;
     /**
-     * 重写树节点
-     * - true 时，插槽作为完整树节点对象；
-     * - false 时，插槽仅作为扩展元素，如自定义操作等
+     * 图形伸展
+     * - svg.viewBox 属性
+     * - 为空则默认“0 0 1024 1024”
      */
-    rewrite?: boolean;
+    viewBox?: string;
 };
 /**
- * 树节点 插槽配置选项
+ * 图标类型
+ * - 状态类：
+ * - - success      成功图标，对勾
+ * - - error        错误
+ * - - warn         警告图标
+ * - 操作类：
+ * - - close        关闭 用作数据删除，弹窗关闭
+ * - - trash        垃圾桶图标，常用于【删除】操作
+ * - - download     下载
+ * - - print        打印
+ * - - edit         编辑
+ * - - pause        暂停，两道竖线
+ * - 指向类：
+ * - - arrow        向右箭头
+ * - - datepicker   日期选择器
+ * - - timepicker   时间选择器
+ * - 其他类：
+ * - - plus         加号
+ * - - subtract     减号
+ * - - more         更多，默认垂直三个点
+ * - - grip         紧握图标，垂直方向，一般用于拖动句柄
  */
-type TreeNodeSlotOptions<Node> = {
-    /**
-     * 当前节点
-     */
-    node: Node;
+type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "pause" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "more" | "grip";
+
+/**
+ * Toast配置选项
+ */
+type ToastOptions = {
     /**
-     * 父节点
+     * 提示类型，基于类型展示图标
      */
-    parent?: Node;
+    type?: IconType;
     /**
-     * 所处层级
+     * 提示消息；支持html格式
      */
-    level: number;
+    message: string;
     /**
-     * 点击节点
+     * 提示显示时间
+     * - 单位毫秒，默认1500ms
      */
-    click(): void;
+    duration?: number;
     /**
-     * 切换【子节点】折叠窗台
+     * 关闭按钮是否禁用
      */
-    toggle(): void;
+    closeDisabled?: boolean;
 };
 
 /**
- * Table配置选项
+ * 跟随效果 弹窗
  */
-type TableOptions = Pick<ScrollOptions, "scroll" | "barSize"> & {
-    /**
-     * 是否启用表格边框
-     */
-    border?: boolean;
-    /**
-     * 表头样式
-     * - 约束高度和背景颜色
-     * - 后期再增加其他的
-     */
-    headerStyle?: BaseStyle & HeightStyle;
-    /**
-     * 表尾部样式
-     * - 约束高度和背景颜色
-     * - 后期再增加其他的
-     */
-    footerStyle?: BaseStyle & HeightStyle;
-};
-/**
- * Table 行配置选项
- */
-type TableRowOptions = HeightStyle & {};
+
 /**
- * Table 列配置选项
- * - border 样式需要配合TableOptions.border使用，否则会导致边框线重叠
+ * 跟随弹窗 配置选项
+ * - 传入的组件，根据配置跟随 target 位置和大小；
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
-
+type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
 /**
- * 排序组件 配置选项
- * - 整理部分SortableJs中的配置，不分逻辑不开放
+ * 跟随位置 配置选项
+ * - 基于此计算出最终的跟随效果
  */
-type SortOptions<T> = {
-    /**
-     * 变化器
-     * - 在此元素值发生变化时，重新刷新排序面板
-     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
-     */
-    changer: T;
-    /**
-     * 拖动哪个元素
-     * - 传入类样式选择器；如 .table-row
-     */
-    draggable: string;
+type FollowPositionOptions = {
     /**
-     * 哪个元素启动拖拽
-     * - 传入类样式选择器；如 .sort-handle
-     * - 不传入则默认 draggable
-     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
+     * 启用【宽度】跟随
+     * - 为true则和 target 宽度保持一致
+     * - false时，宽度由 弹出组件 自己维护
+     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
      */
-    handle?: string;
+    followWidth?: boolean;
     /**
-     * 拖动的元素上增加的类样式
-     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
-     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
-     * - 默认：snail-sort-drag
+     * 启用【高度】跟随
+     * - 为true则和 target 高度保持一致
+     * - false时，高度由 弹出组件 自己维护
+     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
      */
-    dragClass?: string;
+    followHeight?: boolean;
     /**
-     * 幽灵元素类样式名称
-     * - 拖动时在面板上占位的元素
-     * - 默认：snail-sort-ghost
+     * x轴方向上的跟随策略
+     * - 支持传入一个或者多个，依次尝试选举最优位置（全宽度展示，否则取最大宽度位置）
+     * - 不传入则按照默认策略；["start","end","after","before","center","ratio"]
+     * - 可选策略值如下：
+     * - - start  ： 起点跟随，和 target 起始位置（left）一致
+     * - - end    ： 终点跟随，和 target 结束位置（right）一致
+     * - - center ： 中心跟随，和 target 中心位置一致
+     * - - before ： 之前跟随，组件在 target 左侧展示
+     * - - after  ： 之后跟随，组件在 target 右侧展示
+     * - - ratio  ： 比例跟随，按比例（target中心点/窗口宽度）锚定位置，动态计算left值。
      */
-    ghostClass?: string;
+    followX?: FollowStrategy | FollowStrategy[];
     /**
-     * 过滤器，不需要进行拖动的元素
-     * - 传入类样式选择器；如 .sort-handle
-     * - 实现特定子元素不触发拖动排序功能
+     * y轴方向上的跟随策略
+     * - 支持传入一个或者多个，依次尝试选举最优位置（全高度展示，否则取最大高度位置）
+     * - 不传入则按照默认策略；["after","before","start","end","center","ratio"]
+     * - 可选策略值如下：
+     * - - start  ： 起点跟随，和 target 起始位置（top）一致
+     * - - end    ： 终点跟随，和 target 结束位置（bottom）一致
+     * - - center ： 中心跟随，和 target 中心位置一致
+     * - - before ： 之前跟随，组件在 target 顶部展示
+     * - - after  ： 之后跟随，组件在 target 底部展示
+     * - - ratio  ： 比例跟随，按比例（target中心点/窗口高度）锚定位置，动态计算top值。
      */
-    filter?: string;
+    followY?: FollowStrategy | FollowStrategy[];
     /**
-     * 排序组
-     * - 组相同时，可跨组拖拽排序
-     * - 不传入，则内部生成guid
-     * - 为
+     * x轴方向上 target 之间的留白空间
+     * - 默认0； followX 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
+     * -
      */
-    group?: string | SortGroupOptions;
+    spaceX?: number;
     /**
-     * 动画时间
-     * - 单位ms；默认150ms
+     * y轴方向上 target 之间的留白空间
+     * - 默认0；followY 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
      */
-    animation?: number;
+    spaceY?: number;
     /**
-     * 禁用排序效果
-     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
+     * 和 浏览器客户 端之间的留白空间
+     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
+     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
+     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
      */
-    disabled?: boolean;
+    spaceClient?: number;
     /**
-     * 在当前容器内是否禁用拖拽排序
-     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
-     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
+     * 点击【遮罩层】时是否关闭弹窗
+     * - 则点击非【跟随组件】区域时是否关闭
      */
-    sortDisabled?: boolean;
-};
-/**
- * 排序组件的Group属性配置选项
- */
-type SortGroupOptions = {
+    closeOnMask?: boolean;
     /**
-     * 排序组名称；
-     * - 不传入时自动生成
+     * 按下【ESC】健时是否关闭弹窗
      */
-    name: string;
+    closeOnEscape?: boolean;
     /**
-     * 定义从这个列表容器移动出去的设置
-     * - true:列表容器内的列表单元可以被移出；
-     * - false：列表容器内的列表单元不可以被移出；
-     * - "clone"：列表单元移出，移动的为该元素的副本；
-     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
+     * window窗口【resize】时是否关闭弹窗
      */
-    pull: true | false | "clone" | SortGroupHook;
+    closeOnResize?: boolean;
     /**
-     * 用来定义往这个列表容器放置列表单元的的设置
-     * - true:列表容器可以从其他列表容器内放入列表单元；
-     * - false：与true相反；
-     * - string|string[]：代表的是group配置项里定义的name值。如['foo','bar']
-     * - function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
+     * target改变时是否关闭弹窗
+     * - target尺寸、位置变化
+     * - target点击时
      */
-    put: true | false | string | string[] | SortGroupHook;
+    closeOnTarget?: boolean;
 };
 /**
- * 排序组件的Group属性钩子
- * - 用于pull和put中使用，返回false时不执行pull、put操作
- * - @param item 移动的元素
- * - @param to 目标容器dom元素
- * - @param from 来源容器dom元素
+ * 跟随策略
+ * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
  */
-type SortGroupHook = (item: HTMLElement, to: HTMLElement, from: HTMLElement) => void;
+type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
 /**
- * 排序组件 事件
+ * 跟随弹窗 句柄
+ * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
  */
-type SortEvents = {
-    /**
-     * 开始拖拽
-     */
-    start: [evt: SortEvent];
-    /**
-     * 移动中
-     */
-    move: [evt: SortEvent, originalEvent: SortEvent];
+type FollowHandle<T> = PopupHandle<T> & {};
+/**
+ * 跟随弹窗 扩展配置
+ */
+type FollowExtend = PopupStatusOptions & {
     /**
-     * 移动到新容器时
+     * 跟随的目标元素
      */
-    add: [evt: SortEvent];
+    target: Element;
     /**
-     * 从当前容器移除时
+     * x轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
      */
-    remove: [evt: SortEvent];
+    followX: ShallowRef<FollowStrategy>;
     /**
-     * 结束拖拽
+     * y轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
      */
-    end: [evt: SortEvent];
+    followY: ShallowRef<FollowStrategy>;
     /**
-     * 元素排序顺序变化
-     * @param oldIndex 旧位置索引值
-     * @param newIndex 新顺序索引值
+     * Follow弹窗是否【钉住】了
+     * - 为true时，closeOnMask、closeOnEscape失效
+     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
      */
-    update: [oldIndex: number, newIndex: number];
+    pinned: ShallowRef<boolean>;
 };
 /**
- * 排序事件对象
+ * 跟随策略 配置选项
  */
-type SortEvent = {
-    /**
-     * 目标容器
-     */
-    to: HTMLElement;
+type FollowStrategyOptions = {
     /**
-     * 来源容器
+     * x轴的跟随策略
      */
-    from: HTMLElement;
+    followX?: FollowStrategy;
     /**
-     * 被移动的元素
-     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
+     * x轴的跟随策略
      */
-    item: HTMLElement;
+    followY?: FollowStrategy;
+};
+/**
+ * 跟随选举结果
+ */
+type FollowElectResult = {
     /**
-     * 副本的元素
-     * - 在`group.pull`配置为 clone 时
+     * 跟随策略
      */
-    clone: HTMLElement;
+    strategy: FollowStrategy;
     /**
-     * 容器中的原序号
+     * 开始位置：x/top
      */
-    oldIndex: number | undefined;
+    start: number;
     /**
-     * 容器中的新序号
+     * 调整后的尺寸（width/height)
+     * - 为undefined表示无需调整尺寸
      */
-    newIndex: number | undefined;
+    size?: number;
 };
 
 /**
- * 组件配置选项
+ * 弹窗管理器
  */
-type ComponentOptions = {
+interface IPopupManager {
     /**
-     * 组件名称；
-     * - 确保组件已注册，否则会加载不出来
+     * 弹出
+     * - 弹窗位置位置、大小、动画效果等由组件自己完成
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param options 弹窗配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    name?: string;
+    popup<T, Props = void, Model = void>(options: PopupOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * Vue组件对象
-     * - name未传入时生效
-     * - 推荐外部使用 shallowRef 包裹对象，避免响应式的性能问题
-     */
-    component?: Component;
+     * 对话框
+     * - 支持指定模态和非模态对话框
+     * - 默认垂直水平居中展示
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param options 弹窗配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
+     */
+    dialog<T, Props = void, Model = void>(options: DialogOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * 组件js文件url地址
-     * - 支持#号锚点钻取
-     * - name、component未传入时生效
+     * 跟随弹窗
+     * - 跟随指定的target对象，可跟随位置、大小
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param target 跟随的目标元素
+     * @param options 跟随配置选项
+     * @returns 弹窗异步作用域，外部可手动关闭弹窗
      */
-    url?: string;
-};
-/**
- * 提取组件的props类型
- * - 有效的 Props 类型：extends Record<string, any>
- * - 有效类型则返回 Props 自身；否则无效，为undefined
- */
-type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
-/**
- * 事件发射器类型
- * - 将【组件中组件】转换为vue的 defineEmits 类型
- * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
- */
-type EmitterType<Events extends Record<string, any[]>> = {
-    <K extends keyof Events>(event: K, ...payload: Events[K]): any;
-};
-/**
- * 提取【组件插槽】类型
- */
-type SlotsType<Slots extends Record<string, any>> = {
-    [key in keyof Slots]: (props: Slots[key]) => any;
-};
-/**
- * 提取【组件事件】类型
- * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
- * - T的类型约束：Record<string, unknown[]>
- */
-type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
-    [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
-}) : never;
-/**
- * 组件绑定 配置选项
- * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
- * - 若泛型类型无效，则对应属性类型强制为undefined；详细参照对应属性说明
- */
-type ComponentBindOptions<Props = void, Model = void> = {
+    follow<T, Props = void, Model = void>(target: HTMLElement, options: FollowOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * 传递给组件的属性值，执行 v-bind 绑定
-     * - key为属性名称，遵循vue解析规则；若绑定事件，则key为 on事件名称 ，事件名称首字母大写
-     * - 通过泛型类型 Props 约束，有效类型：Props extends Record<string, any>
-     * @see EventsType<Events> 获取组件事件类型
+     * 打开【确认】弹窗
+     * @param title  弹窗标题
+     * @param message 确认提示信息，支持html片段
+     * @param options 确认弹窗其他配置信息
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    props?: PropsType<Props>;
+    confirm(title: string, message: string, options?: Omit<ConfirmOptions, "title" | "message">): IAsyncScope<boolean>;
     /**
-     * 传递给组件的双向绑定数据，执行 v-model 绑定
-     * - 使用 ShallowRef/Ref 包裹；推荐 ShallowRef，仅和组件进行.value值交互，避免深层双向影响性能
-     * - 通过泛型类型 Model 约束，有效类型： 非void、never、null、undefined等无效类型
+     * Toast 提示框
+     * @param type 提示类型：成功、失败、、、
+     * @param message 提示消息
+     * @param options 提示框配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    model?: Model extends (void | never | null | undefined) ? undefined : (ShallowRef<Model> | Ref<Model>);
-};
+    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
+}
 
 /**
- * 布局组件 数据结构
+ * 使用【弹窗管理器】
+ * @returns 全新的【弹窗管理器】实例+作用域对象
  */
+declare function usePopup(): IPopupManager & IScope;
 
 /**
- * 布局组件 配置选项
+ * 选择器 相关数据实体
  */
-type LayoutOptions = {
+
+/**
+ * 接口：选择器管理器
+ */
+interface IPickerManager {
     /**
-     * 布局方向
-     * - horizontal 水平布局：左中右
-     * - vertical 垂直布局：上中下
-     * - 默认为 `horizontal`
+    * 显示【日期】选择器
+    * @param target 哪个元素触发，基于此元素计算位置
+    * @param options 日期选择器配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
+    * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
+    */
+    showDate(target: HTMLElement, options?: DatePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
+    /**
+     * 显示【时间】选择控件
+     * @param target 哪个元素触发，基于此元素计算位置
+     * @param options 时间选择控件配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
+     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
      */
-    direction?: "horizontal" | "vertical";
+    showTime(target: HTMLElement, options?: TimePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
+}
+/**
+ * 选择器弹窗配置选项
+ * - 放开一些属性，方便用户做一些自定义
+ */
+type PickerPopupOptions = {
     /**
-     * 主内容区域配置
-     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
-     * - 配置主内容区域的滚动条配置
+     * 弹窗模式
+     * - follow     【默认值】跟随弹窗，跟随制定的target
+     * - dialog     模态弹窗
      */
-    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
+    mode?: "dialog" | "follow";
     /**
-     * 【左侧】区域配置
-     * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
-     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
-     * -
+     * 跟随效果
+     * - mode 为 `follow` 生效
      */
-    left?: LayoutAraeOptions<WidthStyle>;
+    follow?: FollowPositionOptions;
     /**
-     * 【右测】区域配置
-     * - 对应插槽名`right` ；`mode` 为 `horizontal` 时生效
-     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     * 弹窗配置
+     * - mode 为 `dialog` 生效
      */
-    right?: LayoutAraeOptions<WidthStyle>;
+    dialog?: Pick<DialogOptions, "closeOnEscape" | "closeOnMask" | "rootClass">;
+} /** & FollowPositionOptions */;
+/**
+ * 选择器扩展
+ */
+type PickerExtend = {
     /**
-     * 【顶部】区域配置
-     * - 对应插槽名`top`；`mode` 为 `vertical` 时生效
-     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
-     * -
+     * 弹窗管理器
+     * - 方便下级再弹窗，公用一个管理器，方便生命周期管理
      */
-    top?: LayoutAraeOptions<HeightStyle>;
+    popup: IPopupManager;
     /**
-     * 【底部】区域配置
-     * - 对应插槽名`bottom`；`mode` 为 `vertical` 时生效
-     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     * 选择器对象，方便内部在弹出选择
+     * - 如日期选择器中，在选择时间
      */
-    bottom?: LayoutAraeOptions<HeightStyle>;
+    picker: IPickerManager;
 };
+
 /**
- * 布局组件子区域 配置选项
+ * 树形 数据相关的基础实体结构
+ * 1、封装一些基础实体；如树形节点数据结构
+ * 2、配合树形组件使用；如select的多级筛选，树组件等
+ * 3、封装树的基础共性操作，如显隐判断、搜索查询等
  */
-type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
-    /**
-     * 滚动视图配置
-     * - 视图属性：滚动条大小、显示时机
-     * - 滚动事件：滚动条显隐、滚动到顶部、底部、、、
-     * - 不传入则当前区域`overflow:hidden`溢出隐藏
-     */
-    scroll?: ScrollOptions & EventsType<ScrollEvents>;
-};
 /**
- * 布局组件的子区域项目 描述
+ * 树节点
+ * - 仅提供树节点基础属性；可以基于 Extend 为 TreeNode 扩展节点属性
  */
-type LayoutAreaItem = {
+type TreeNode<T, Extend extends Record<string, any> | void = void> = {
     /**
-     * 是否可滚动
+     * 展示文本
      */
-    scrollable: boolean;
+    text: string;
     /**
-     * 内容区域元素的类样式名
+     * 附带数据
      */
-    class: string[];
+    data?: T;
     /**
-     * css样式
+     * 子选择项 数据源
      */
-    style: Record<string, string>;
-};
-
+    children?: TreeNode<T, Extend>[];
+} & (Extend extends void ? {} : Extend);
 /**
- * 动画组件配置选项
- * - 实现组件入/退场的动画效果
+ * 树节点 扩展
+ * - 配合 树上下文 使用
  */
-type MotionOptions = {
-    /**
-     * 是否是多元素模式
-     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
-     * - 为false时，则使用 Transition 组件实现单元素动画控制
-     */
-    multiple?: boolean;
+type TreeNodeExtend = {
     /**
-     * 动画效果
-     * - 为Object时，显式指定 `enter`和`leave`样式，此时应使用`animation`实现动画样式
-     * - - 可访问`MOTION`使用内置动画效果
-     * - 为string时，为动画的根样式，实现动画效果时：
-     * - - 入场动画：`${effect}.enter-active` `${effect}.enter-from` `${effect}.enter-to`
-     * - - 退场动画：`${effect}.leave-active` `${effect}.leave-from` `${effect}.leave-to`
-     * - 为空时，使用`MOTION.fade`值；
+     * 节点Id，确保唯一
+     * - 不传入则内部自动 newId()
      */
-    effect?: MotionEffectOptions | string;
+    readonly id?: string;
     /**
-     * 动画持续时间，单位ms，默认200ms
-     * - `>0`时生效，否则禁用动画
+     * 是否可点击
+     * - true 此节点可点击，点击时触发 click 事件
+     * - false 此节点不可点击
      */
-    duration?: number;
+    clickable?: boolean;
     /**
-     * 动画模式
-     * - default（默认） 入场和退场动画同时执行
-     * - in-out 入场动画先执行，退场动画后执行
-     * - out-in 退场动画先执行，入场动画后执行
-     * - 在多个元素之间切换时生效，一个元素的显隐切换无效果
+     * 是否可搜索
+     * - 为true时，此节点可搜索
      */
-    mode?: "in-out" | "out-in" | "default";
-};
-/**
- * 动画效果配置选项
- */
-type MotionEffectOptions = {
+    searchable?: boolean;
     /**
-     * 入场进入时的动画效果
-     * - 用于初始化入场动画；最终映射成 Transition 组件的 `enter-active-class` 属性
+     * 是否隐藏
+     * - true 隐藏 节点 和 子节点
+     * - 隐藏组件，不参与点击、搜索等
      */
-    enter?: string;
+    hidden?: boolean;
     /**
-     * 退场离开时的动画效果
-     * - 用于初始化退场动画；最终映射成 Transition 组件的 `leave-active-class` 属性
+     * 是否固定
+     * - true 固定 节点；则节点不参与 搜索、移动等动态操作
      */
-    leave?: string;
+    fixed?: boolean;
 };
-
 /**
- * 折叠面板配置选项
- * - title          折叠面板标题
- * - disabled       禁用折叠效果，始终展开
+ * 树的基础上下文对象
  */
-type FoldOptions = DisabledOptions & TitleOptions & {
+interface ITreeBaseContext<T> {
     /**
-     * 副标题
-     * - 跟随在title后
+     * 执行搜索
+     * @param text 搜索文本
      */
-    subtitle?: string;
+    doSearch(text: string): void;
     /**
-     * 面板头部区域配置
-     * - 如指定特定的css式
+     * 是否是【已激活】节点
+     * @param node 要判断的节点
+     * @returns true 是已激活节点，false 否
      */
-    header?: CSSClassOptions;
+    isActived(node: TreeNode<T>): boolean;
     /**
-     * 面板内容区域配置
-     * - 如指定特定的css样式
+     * 是否是【补丁】节点
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * @param node 要判断的节点
+     * @returns true 是补丁节点，false 不是补丁节点
      */
-    body?: CSSClassOptions;
-};
-/**
- * 折叠状态
- * - expand ： 展开状态
- * - fold   ： 折叠状态
- */
-type FoldStatus = "expand" | "fold";
+    isPatched(node: TreeNode<T>): boolean;
+    /**
+     * 是否显示【树节点】
+     * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
+     * @returns 能显示返回true；否则返回false
+     */
+    isShow(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
+    /**
+     * 是否显示指定【树节点】的子节点
+     * - 不会判断node节点自身是否可显示
+     * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
+     * @returns 能显示返回true；否则返回false
+     */
+    isShowChildren(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
+    /**
+     * 获取指定【树节点】的路径
+     * @param node 树节点
+     * @returns 从【顶级节点】->【指定节点】的全路径数据
+     */
+    getPath(node: TreeNode<T, TreeNodeExtend>): TreeNode<T, TreeNodeExtend>[];
+    /**
+     * 获取指定【树节点】的唯一Key值
+     * - 相同节点确保唯一，且不变；用于唯一标记此节点
+     * @param node
+     * @returns 返回节点唯一Key值
+     */
+    getKey(node: TreeNode<T>): string;
+}
 /**
- * 折叠面板组件插槽句柄
- * - 将折叠面板状态和操作共享给插槽中自定义组件使用
+ * 树搜索结果
  */
-type FoldSlotHandle = {
+type TreeSearchResult<T> = {
     /**
-     * 获取折叠面板状态
-     * @returns
+     * 匹配上的节点集合
      */
-    getStatus(): FoldStatus;
+    matched: TreeNode<T>[];
     /**
-     * 设置折叠面板状态
-     * @param status 新的状态
+     * 未匹配上的节点集合
      */
-    setStatus(status: FoldStatus): void;
+    failed: TreeNode<T>[];
     /**
-     * 切换面板状态
-     * @returns 新的状态
+     * 搜索时的【补丁】节点集合
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * - 仅在有搜索条件时成立，补丁节点同时在【failed】节点集合中
      */
-    toggle(): FoldStatus;
+    patched: TreeNode<T>[];
 };
+
 /**
- * 折叠面板事件
+ * 搜索组件配置选项
  */
-type FoldEvents = {
+type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
     /**
-     * 折叠状态发生改变时
-     * @param status 折叠状态
+     * 启用【自动完成】
+     * - true 时，只要文本变化了，就触发 search 事件
+     * - false 时，只有点击【搜索】按钮，才触发 search 事件
      */
-    change: [status: FoldStatus];
+    autoComplete?: boolean;
+};
+/**
+ * 搜索组件事件
+ */
+type SearchEvents = {
+    /**
+     * 事件：执行搜索
+     * @param value 为搜索文本
+     */
+    search: [value: string];
 };
 
 /**
- * 弹性布局组件配置选项
+ * 树组件 相关实体
+ * - 基于 snail.core中的TreeNode做扩展
  */
-type FlexOptions = {
+
+/**
+ * 树组件 配置选项
+ */
+type TreeOptions<T> = {
     /**
-     * 主轴方向
-     * - css属性：flex-direction
-     * - 取值范围：
-     * - - row（默认值） 水平主轴，起点在左端
-     * - - row-reverse 水平主轴，起点在右端
-     * - - column 垂直主轴，起点在上沿
-     * - - column-reverse 垂直主轴，起点在下沿
+     * 树节点 集合
      */
-    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    nodes: TreeNodeModel<T>[];
     /**
-     * 是否换行
-     * - css属性：flex-wrap
-     * - 取值范围：
-     * - - nowrap（默认值） 不换行，所有 flex 项都排在一行
-     * - - wrap 换行，第一行在上方
-     * - - wrap-reverse 换行，第一行在下方
+     * 树节点搜索配置
+     * - 不配置则不启用【搜索】功能
      */
-    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    search?: SearchOptions;
     /**
-     * 行与列之间的间隙（网格间距）
-     * - css属性：gap
-     * - row-gap、column-gap的缩写
-     * - 举例：gap: "10px 20px" 表示行间距为10px，列间距为20px；gap: "10px" 表示行间距和列间距都为10px
+     * 树节点的配置选项
      */
-    gap?: string;
+    nodeOptions?: TreeNodeRenderOptions;
+};
+/**
+ * 树组件事件
+ */
+type TreeEvents<T> = TreeNodeEvents<T> & {
     /**
-     * 主轴对齐方式
-     * - css属性：justify-content
-     * - 取值范围：
-     * - - start（默认值） 主轴起点对齐
-     * - - end 主轴终点对齐
-     * - - center 主轴居中对齐
-     * - - between 主轴两端对齐，项目之间间隔平均分布
-     * - - around 主轴每个项目两侧间隔平均分布
-     * - - evenly 主轴每个项目之间间隔平均分布
+     * 搜索完成后
+     * @param text 搜索文本
      */
-    main?: "start" | "end" | "center" | "between" | "around" | "evenly";
+    searched: [text: string];
+};
+/**
+ * 树节点 组件配置选项
+ */
+type TreeNodeOptions<T> = {
     /**
-     * 交叉轴对齐方式
-     * - css属性：align-items
-     * - 取值范围：
-     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
-     * - - start 交叉轴起点对齐
-     * - - end 交叉轴终点对齐
-     * - - center 交叉轴居中对齐
-     * - - baseline 交叉轴第一行文字基线对齐
+     * 要渲染的树节点
      */
-    cross?: "start" | "end" | "center" | "stretch" | "baseline";
+    node: TreeNodeModel<T>;
     /**
-     * 多行时的交叉轴对齐方式
-     * - css属性：align-content
-     * - 取值范围：
-     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
-     * - - start 交叉轴起点对齐
-     * - - end 交叉轴终点对齐
-     * - - center 交叉轴居中对齐
-     * - - between 交叉轴两端对齐，行之间间隔平均分布
-     * - - around 交叉轴每行两侧间隔平均分布
-     * - - evenly 交叉轴每行之间间隔平均分布
+     * 父节点
      */
-    content?: "start" | "end" | "center" | "stretch" | "between" | "around" | "evenly";
+    parent?: TreeNodeModel<T>;
     /**
-     * 启用子项修复
-     * - 在`justify-content`启用`space-`相关属性时，子项之间会有间隔，当子项数量较少时，可能出现空间过大的问题，特别时多行的最后一样时
-     * - 启动后，会基于子项数量补全最后一行缺失的子项数量，来修复空间过大的问题
-     * - 推荐仅在所有子项主轴方向尺寸一样时，否则修复可能不准确
+     * 树节点所处层级
+     * - 用于控制缩进
      */
-    repairItem?: boolean;
+    level: number;
     /**
-     * flex容器的子项数量
-     * - 配合 `repairSpace` 构建修复空间的子项数量
-     * - 当 `repairSpace` 启用时，自动监听子项数量变化来动态调整修复空间的子项数量；不启用时忽略
+     * 树节点的配置选项
      */
-    itemCount?: number;
+    options?: TreeNodeRenderOptions;
     /**
-     * flex容器的子项标签名
-     * - 配合 `repairSpace` 构建修复空间的子项元素标签名
-     * - 默认值为`div`，即子项元素为`<div>`标签
-     * - 可配置为其他标签名，如`span`，则子项元素为`<span>`标签
+     * 树组件的上下文对象
      */
-    itemTag?: string;
+    context: ITreeBaseContext<T>;
+};
+/**
+ * 树节点事件
+ */
+type TreeNodeEvents<T> = {
     /**
-     * flex容器的子项类样式名
-     * - 配合 `repairSpace` 构建修复空间的子项元素类样式名
-     * - 推荐设置为一个固定值的类样式名，如`flex-item`，来方便用户通过该类样式名来设置子项元素的样式
-     * - 构建的子项，会自动追加一个 "repair-item”的类样式名，来方便用户通过该类样式名来设置修复空间子项元素的样式
+     * 树节点 点击事件
+     * @param node 点击的树节点
+     * @param parents node的父节点路径，从【顶级父节点】->【直属父节点】
      */
-    itemClass?: string;
+    click: [node: TreeNodeModel<T>, parents?: TreeNodeModel<T>[]];
 };
-
 /**
- * 弹性容器组件 配置选项
+ * 树节点数据结构
+ * - 简化外部使用 树节点 时需要频繁写 TreeNode<T, TreeNodeExtend>；
+ * - 避免和 Vue 组件“tree-node.vue”命名重复
+ * - 推荐使用时，将此对象做响应式，否则 .hidden 等 更新时，无法实时反应到树上
  */
-type ElasticOptions = ScrollOptions & {
+type TreeNodeModel<T> = TreeNode<T, TreeNodeExtend>;
+/**
+ * 树节点 渲染配置选项
+ */
+type TreeNodeRenderOptions = {
     /**
-     * 滚动条弹簧效果
-     * - x 仅在x轴方向上启用弹簧效果
-     * - y 仅在y轴方向上启用弹簧效果
-     * - both ：同时启用x轴和y轴的弹簧效果
+     * 节点展开层级
+     * - 不传入则默认展开所有
+     * - 否则展开传入的层级；从2开始；第一级始终展开；如2则1、2层级展开
+     * -
      */
-    spring?: "x" | "y" | "both";
+    expandLevel?: number;
     /**
-     * 是否启用【下拉刷新】功能
-     * - `spring` 为 `y/both`时生效
-     * - 满足下拉刷新条件后，触发`refresh`事件，处理完成后调用resolve函数，通知完成刷新数据操作
+     * 是否禁用【折叠】子节点操作
+     * - true 时禁用 折叠操作
      */
-    downRefresh?: boolean;
+    foldDisabled?: boolean;
     /**
-     * 是否启用【上拉加载】功能
-     * - `spring` 为 `y/both`时生效
-     * - 满足上拉加载条件后，触发`more`事件，处理完成后调用resolve函数，通知完成加载数据操作
+     * 重写树节点
+     * - true 时，插槽作为完整树节点对象；
+     * - false 时，插槽仅作为扩展元素，如自定义操作等
      */
-    upMore?: boolean;
+    rewrite?: boolean;
 };
 /**
- * 弹性容器组件 事件监听
+ * 树节点 插槽配置选项
  */
-type ElasticEvents = ScrollEvents & {
+type TreeNodeSlotOptions<Node> = {
     /**
-     * 刷新数据
-     * - 配合 `downRefresh`实现下拉刷新功能
-     * @param resolve 处理完成后调用resolve函数，通知完成刷新数据操作
+     * 当前节点
      */
-    refresh: [resolve: () => void];
+    node: Node;
     /**
-     * 加载更多
-     * - 配合 `upMore`实现上拉加载功能
-     * @param resolve 处理完成后调用resolve函数，通知完成加载数据操作
+     * 父节点
      */
-    more: [resolve: () => void];
-};
-/**
- * 弹性组件 对外暴露属性接口
- */
-type ElasticExpose = {
+    parent?: Node;
     /**
-     * 加载刷新数据
-     * - 触发下拉刷新数据
-     * @returns 异步任务对象，外部感知任务执行完成
+     * 所处层级
      */
-    loadRefresh(): Promise<void>;
+    level: number;
     /**
-     * 加载更多数据
-     * - 触发上拉加载更多数据
-     * @returns 异步任务对象，外部感知任务执行完成
+     * 点击节点
      */
-    loadMore(): Promise<void>;
+    click(): void;
+    /**
+     * 切换【子节点】折叠窗台
+     */
+    toggle(): void;
 };
+
 /**
- * 弹性组件的弹簧状态信息
+ * Table配置选项
  */
-type ElasticSpringStatus = {
-    x: number | undefined;
+type TableOptions = Pick<ScrollOptions, "scroll" | "barSize"> & {
     /**
-     * y轴方向的橡皮筋效果偏移量
+     * 是否启用表格边框
      */
-    y: number | undefined;
+    border?: boolean;
+    /**
+     * 表头样式
+     * - 约束高度和背景颜色
+     * - 后期再增加其他的
+     */
+    headerStyle?: BaseStyle & HeightStyle;
+    /**
+     * 表尾部样式
+     * - 约束高度和背景颜色
+     * - 后期再增加其他的
+     */
+    footerStyle?: BaseStyle & HeightStyle;
 };
+/**
+ * Table 行配置选项
+ */
+type TableRowOptions = HeightStyle & {};
+/**
+ * Table 列配置选项
+ * - border 样式需要配合TableOptions.border使用，否则会导致边框线重叠
+ */
+type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
 
 /**
- * 选项菜单 基础配置选项
+ * 排序组件 配置选项
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
  */
-type SelectBaseOptions<T> = {
+type SortOptions<T> = {
     /**
-     * 【选择项】集合
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
      */
-    items: SelectItem<T>[];
+    changer: T;
     /**
-     * 搜索功能配置
-     * - 不配置则不启用【搜索】功能
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
      */
-    search?: SearchOptions;
+    draggable: string;
     /**
-     * 是否【多选模式】
-     * - 为true时，多选，【选择项】后面出【选择】框；底部出【全选】和【清空已选】
-     * - items为多级时，不支持【多选模式】；传入会报错
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
      */
-    multiple?: boolean;
+    handle?: string;
     /**
-     * 是否显示【路径】
-     * - 为true时，显示选项的父级文本路径，用“ / ”分割
-     * - 仅针对【单选模式】生效
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
      */
-    showPath?: boolean;
+    dragClass?: string;
     /**
-     * 是否显示【清空已选】按钮
-     * - true：则在弹窗的底部显示【清空已选】按钮，点击时清空所有已选选项
-     * - 若存在多级选项，仅在第一级弹窗中显示
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
      */
-    showClear?: boolean;
+    ghostClass?: string;
     /**
-     * 选择项 follow弹窗样式
-     * - 支持指定弹窗高度，如最大高度，不指定则默认尽可能展示全
+     * 过滤器，不需要进行拖动的元素
+     * - 传入类样式选择器；如 .sort-handle
+     * - 实现特定子元素不触发拖动排序功能
      */
-    popupStyle?: HeightStyle;
-};
-/**
- * 选项菜单 基础事件
- */
-type SelectBaseEvents<T> = {
+    filter?: string;
     /**
-     * 选中的【选择项】改变时
-     * - @param values 已选的【选择项】，未选中则为空数组：单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     * - 为
      */
-    change: [values: SelectItem<T>[]];
+    group?: string | SortGroupOptions;
+    /**
+     * 动画时间
+     * - 单位ms；默认150ms
+     */
+    animation?: number;
+    /**
+     * 禁用排序效果
+     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
+     */
+    disabled?: boolean;
+    /**
+     * 在当前容器内是否禁用拖拽排序
+     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
+     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
+     */
+    sortDisabled?: boolean;
 };
 /**
- * 选项菜单组件的【选择项】
+ * 排序组件的Group属性配置选项
  */
-type SelectItem<T> = TreeNode<T, TreeNodeExtend & {
+type SortGroupOptions = {
     /**
-    * 节点类型
-    * - group  分组选择项；可包含子节点
-    * - item   选择项；默认值；不可包含子节点，即使传入也会忽略
-    */
-    type?: "group" | "item";
-}>;
-/**
- * 选项菜单组件 配置选项
- * - value 已选的【选择项】;单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
- */
-type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {
-    /** 父类<see cref="SelectBaseOptions"/>已有属性：
-     *      items                   【选择项】集合
-     *      search                  启用 【搜索】功能
-     *      searchPlaceholder       搜索框提示语
-     *      multiple                是否【多选模式】
-     *      showPath                显示选项路径
-     *      popupStyle              弹出的选项选择窗体样式
+     * 排序组名称；
+     * - 不传入时自动生成
      */
+    name: string;
     /**
-     * 选项分隔符
-     * - 单选有多级时的分割路径；默认为 /
-     * - 多选时分割多个选项；默认为 、
+     * 定义从这个列表容器移动出去的设置
+     * - true:列表容器内的列表单元可以被移出；
+     * - false：列表容器内的列表单元不可以被移出；
+     * - "clone"：列表单元移出，移动的为该元素的副本；
+     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
      */
-    separator?: string;
+    pull: true | false | "clone" | SortGroupHook;
+    /**
+     * 用来定义往这个列表容器放置列表单元的的设置
+     * - true:列表容器可以从其他列表容器内放入列表单元；
+     * - false：与true相反；
+     * - string|string[]：代表的是group配置项里定义的name值。如['foo','bar']
+     * - function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
+     */
+    put: true | false | string | string[] | SortGroupHook;
 };
 /**
- * 选项菜单 组件 事件
+ * 排序组件的Group属性钩子
+ * - 用于pull和put中使用，返回false时不执行pull、put操作
+ * - @param item 移动的元素
+ * - @param to 目标容器dom元素
+ * - @param from 来源容器dom元素
  */
-type SelectEvents<T> = SelectBaseEvents<T> & {};
+type SortGroupHook = (item: HTMLElement, to: HTMLElement, from: HTMLElement) => void;
 /**
- * 选项菜单 组件的Slot配置选项
+ * 排序组件 事件
  */
-type SelectSlotOptions = {
+type SortEvents = {
     /**
-     * 清空已选【选择项】
-     * @param closeFollow 是否关闭【选择项】Follow弹窗
-     * @param stopPropagation 是否停止事件冒泡
+     * 开始拖拽
      */
-    clear(closeFollow: boolean, stopPropagation: boolean): void;
-};
-/**
- * 【选项菜单】 组件上下文
- */
-interface ISelectContext<T> extends ITreeBaseContext<T> {
+    start: [evt: SortEvent];
     /**
-     * 指定节点是否选中了
-     * @param multiple 是否是【多选模式】
-     * @param item 要判断的节点
-     * @returns true 选中，false 未选中
+     * 移动中
      */
-    selected(multiple: boolean, item: SelectItem<T>): boolean;
+    move: [evt: SortEvent, originalEvent: SortEvent];
     /**
-     * 获取已选【选择项】的展示文本
-     * @param multiple 是否是【多选模式】
-     * @param showPath 是否显示路径
-     * @returns 已选【选择项】的展示文本
+     * 移动到新容器时
      */
-    selectedText(multiple: boolean, showPath: boolean): string;
-}
-/**
- * 【选项菜单】 弹窗组件配置选项
- */
-type SelectPopupOptions<T> = SelectBaseOptions<T> & {
-    /** 父类<see cref="SelectBaseOptions"/>已有属性：
-     *      items                   选择项 集合
-     *      search                  启用 【搜索】功能
-     *      searchPlaceholder       搜索框提示语
-     *      multiple                是否【多选模式】
+    add: [evt: SortEvent];
+    /**
+     * 从当前容器移除时
      */
+    remove: [evt: SortEvent];
     /**
-     * 树形上下文
+     * 结束拖拽
      */
-    context: ISelectContext<T>;
+    end: [evt: SortEvent];
     /**
-     * 第几级 选项弹窗
-     * - 从1开始
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
      */
-    level: number;
+    update: [oldIndex: number, newIndex: number];
 };
 /**
- * 【选项菜单】 弹窗组件事件
+ * 排序事件对象
  */
-type SelectPopupEvents<T> = {
+type SortEvent = {
     /**
-     * 清空选项
+     * 目标容器
      */
-    clear: [];
+    to: HTMLElement;
     /**
-     * 选项点击事件
-     * @param path 选中的【选择项】路径；父->子
+     * 来源容器
      */
-    click: [path: SelectItem<T>[]];
-};
-/**
- * 【选项菜单】 弹窗组件扩展
- */
-type SelectPopupExtend = {
+    from: HTMLElement;
     /**
-     * 子选项弹窗的销毁定时器
-     * - 父级弹窗可根据需要销毁定时器，取消子选择弹窗销毁
-     * - 鼠标离开弹窗时，做延迟销毁；避免回到 此弹窗 的父【选择项】时，又重新打开此弹窗
+     * 被移动的元素
+     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
      */
-    childDestroyTimer: ShallowRef<IScope>;
+    item: HTMLElement;
     /**
-     * 父级弹窗的pin状态
-     * - 可在子弹窗中设置为true，这样父级弹窗就不会自动关闭了
+     * 副本的元素
+     * - 在`group.pull`配置为 clone 时
      */
-    parentPinned: ShallowRef<boolean>;
+    clone: HTMLElement;
+    /**
+     * 容器中的原序号
+     */
+    oldIndex: number | undefined;
+    /**
+     * 容器中的新序号
+     */
+    newIndex: number | undefined;
 };
+
 /**
- * 【选项菜单】节点 组件配置选项
+ * 布局组件 数据结构
  */
-type SelectNodeOptions<T> = {
+
+/**
+ * 布局组件 配置选项
+ */
+type LayoutOptions = {
     /**
-     * 是否为【多选模式】
+     * 布局方向
+     * - horizontal 水平布局：左中右
+     * - vertical 垂直布局：上中下
+     * - 默认为 `horizontal`
      */
-    multiple: boolean;
+    direction?: "horizontal" | "vertical";
     /**
-     * 要展示的节点
+     * 主内容区域配置
+     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
+     * - 配置主内容区域的滚动条配置
      */
-    item: SelectItem<T>;
+    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
     /**
-     * 树形上下文
+     * 【左侧】区域配置
+     * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     * -
      */
-    context: ISelectContext<T>;
+    left?: LayoutAraeOptions<WidthStyle>;
     /**
-     * 是否显示子节点
+     * 【右测】区域配置
+     * - 对应插槽名`right` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
      */
-    showChildren: boolean;
-};
-/**
- * 【选项菜单】节点 组件事件
- */
-type SelectNodeEvents<T> = {
+    right?: LayoutAraeOptions<WidthStyle>;
     /**
-     * 鼠标进入事件
-     * @param el 【选择项】节点dom元素
-     * @param item 【选择项】
-     * @param parent 父节点
+     * 【顶部】区域配置
+     * - 对应插槽名`top`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     * -
      */
-    enter: [el: HTMLDivElement, item: SelectItem<T>, parent?: SelectItem<T>];
+    top?: LayoutAraeOptions<HeightStyle>;
     /**
-     * 点击事件
-     * @param item 【选择项】
-     * @param parent 父节点
+     * 【底部】区域配置
+     * - 对应插槽名`bottom`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
      */
-    click: [item: SelectItem<T>, parent?: SelectItem<T>];
+    bottom?: LayoutAraeOptions<HeightStyle>;
 };
-
-/**
- * 基础事件实体
- *  1、把一些常用事件，封装为原子结构，方便复用
- *  2、不强制必须复用，根据自身情况
- */
 /**
- * 事件：点击
+ * 布局组件子区域 配置选项
  */
-type ClickEvents = {
+type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
     /**
-     * 单击事件
+     * 滚动视图配置
+     * - 视图属性：滚动条大小、显示时机
+     * - 滚动事件：滚动条显隐、滚动到顶部、底部、、、
+     * - 不传入则当前区域`overflow:hidden`溢出隐藏
      */
-    click: [];
+    scroll?: ScrollOptions & EventsType<ScrollEvents>;
 };
 /**
- * 事件：值改变
- * - 描述值的改变过程，新值是什么，改变前的旧值是什么
+ * 布局组件的子区域项目 描述
  */
-type ChangeEvents<T> = {
+type LayoutAreaItem = {
     /**
-     * 值改变；约束新旧值
-     * @param newValue 新值
-     * @param oldValue 旧值
+     * 是否可滚动
      */
-    change: [newValue: T, oldValue?: T];
-};
-/**
- * 事件：移动
- * - 可描述数据索引位置变化
- * - 可用于数组元素拖动排序，调整位置等逻辑
- */
-type MoveEvents = {
+    scrollable: boolean;
     /**
-     * 移动事件
-     * @param fromIndex 从哪个索引位置开始移动
-     * @param toIndex 移动到的索引位置
+     * 内容区域元素的类样式名
      */
-    move: [fromIndex: number, toIndex: number];
+    class: string[];
+    /**
+     * css样式
+     */
+    style: Record<string, string>;
 };
+
 /**
- * 事件：删除数据
- * - 描述要删除的具体数据
+ * 动画组件配置选项
+ * - 实现组件入/退场的动画效果
  */
-type DeleteEvents<T> = {
+type MotionOptions = {
     /**
-     * 删除事件
-     * @param value 要删除的数据
+     * 是否是多元素模式
+     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
+     * - 为false时，则使用 Transition 组件实现单元素动画控制
      */
-    delete: [value?: T];
+    multiple?: boolean;
+    /**
+     * 动画效果
+     * - 为Object时，显式指定 `enter`和`leave`样式，此时应使用`animation`实现动画样式
+     * - - 可访问`MOTION`使用内置动画效果
+     * - 为string时，为动画的根样式，实现动画效果时：
+     * - - 入场动画：`${effect}.enter-active` `${effect}.enter-from` `${effect}.enter-to`
+     * - - 退场动画：`${effect}.leave-active` `${effect}.leave-from` `${effect}.leave-to`
+     * - 为空时，使用`MOTION.fade`值；
+     */
+    effect?: MotionEffectOptions | string;
+    /**
+     * 动画持续时间，单位ms，默认200ms
+     * - `>0`时生效，否则禁用动画
+     */
+    duration?: number;
+    /**
+     * 动画模式
+     * - default（默认） 入场和退场动画同时执行
+     * - in-out 入场动画先执行，退场动画后执行
+     * - out-in 退场动画先执行，入场动画后执行
+     * - 在多个元素之间切换时生效，一个元素的显隐切换无效果
+     */
+    mode?: "in-out" | "out-in" | "default";
 };
 /**
- * 事件：关闭
+ * 动画效果配置选项
  */
-type CloseEvents = {
+type MotionEffectOptions = {
     /**
-     * 关闭事件
+     * 入场进入时的动画效果
+     * - 用于初始化入场动画；最终映射成 Transition 组件的 `enter-active-class` 属性
      */
-    close: [];
+    enter?: string;
+    /**
+     * 退场离开时的动画效果
+     * - 用于初始化退场动画；最终映射成 Transition 组件的 `leave-active-class` 属性
+     */
+    leave?: string;
 };
 
 /**
- * 数值控件的数据结构
- */
-
-/**
- * 数值组件的基础配置选项
+ * 折叠面板配置选项
+ * - title          折叠面板标题
+ * - disabled       禁用折叠效果，始终展开
  */
-type NumberBaseOptions = {
+type FoldOptions = DisabledOptions & TitleOptions & {
     /**
-     * 最小值
+     * 副标题
+     * - 跟随在title后
      */
-    minValue?: number;
+    subtitle?: string;
     /**
-     * 最大值
+     * 面板头部区域配置
+     * - 如指定特定的css式
      */
-    maxValue?: number;
+    header?: CSSClassOptions;
     /**
-     * 值超过阈值（最大值、最小值）时的处理模式
-     * - 默认值为 `keep`；可选取值范围：
-     * - - `keep` 保持原样值显示，不做任何处理
-     * - - `clamp` 截断超出阈值值，低于最小值时直接取最小值，超过最大值时，强制值为最大值
-     * - 值超过阈值时，会自动触发事件，事件名`NumberEvents`的`belowMin`和`exceedMax`
+     * 面板内容区域配置
+     * - 如指定特定的css样式
      */
-    clamp?: "keep" | "clamp";
+    body?: CSSClassOptions;
+};
+/**
+ * 折叠状态
+ * - expand ： 展开状态
+ * - fold   ： 折叠状态
+ */
+type FoldStatus = "expand" | "fold";
+/**
+ * 折叠面板组件插槽句柄
+ * - 将折叠面板状态和操作共享给插槽中自定义组件使用
+ */
+type FoldSlotHandle = {
     /**
-     * 精度，保留几位小数
-     * - 要求0、正整数,输入小数则强制整数
-     * - 负数、不传入则不处理
+     * 获取折叠面板状态
+     * @returns
      */
-    precision?: number;
+    getStatus(): FoldStatus;
     /**
-     * 对数值进行千分位格式处理
-     * - 默认值为 `disabled`；可选值范围：
-     * - `disabled` 禁用千分位功能
-     * - `inline`  内联千分位功能
-     * - `below`  下拉千分位功能
+     * 设置折叠面板状态
+     * @param status 新的状态
      */
-    thousands?: "disabled" | "inline" | "below";
+    setStatus(status: FoldStatus): void;
     /**
-     * 是否启用数值大写格式化处理
-     * - 为true时，转成中文大写值
-     * - 单位自动为“元”，不支持美元等
-     * - 如金额时，自动转为壹仟壹佰壹拾壹元叁角叁分
-     * - 小数点后面只处理两位（角分）；剩余不处理
+     * 切换面板状态
+     * @returns 新的状态
      */
-    upper?: boolean;
+    toggle(): FoldStatus;
+};
+/**
+ * 折叠面板事件
+ */
+type FoldEvents = {
     /**
-     * 格式化时的放大系数
-     * - 用于在格式化千分位、大写时，对实际值进行系数放大，value*formatMultiplier
-     * - 仅接收正整数，取值规则为10^n，默认1
-     * - 千分位格式化时，仅`thousands`为`below`时才进行放到系数处理
-     * - 使用示例例：金额是为万元单位时，这里的放大系数就为 “10000”
+     * 折叠状态发生改变时
+     * @param status 折叠状态
      */
-    formatMultiplier?: number;
-    /**
-     * 前缀字符串
-     * - 如金额时，可配置前缀 ￥
-     */
-    prefix?: string;
-    /**
-     * 后缀字符串
-     * - 如金额时，可配置后缀 元/美元、、
-     */
-    suffix?: string;
-    /**
-     * 数值控制器
-     * - 便捷加减调整数值的控制按钮
-     * - 默认值`disabled`；可选值范围：
-     * - - `disabled` 时禁用
-     * - - `default` 默认模式，左侧 — 右侧 +
-     * - - `right`   右侧模式，+ - 都在右侧
-     */
-    controls?: "disabled" | "default" | "right";
-    /**
-     * 数值步长值
-     * - `controls` 未禁用时生效
-     * - 每次+、- 的步长值
-     */
-    step?: number;
+    change: [status: FoldStatus];
 };
+
 /**
- * 数值组件的配置选项
- */
-type NumberOptions = PlaceholderOptions & ReadonlyOptions & NumberBaseOptions;
-/**
- * 接口：数值格式化器
+ * 弹性布局组件配置选项
  */
-interface INumberFormatter extends Required<Readonly<Pick<NumberBaseOptions, "minValue" | "maxValue" | "precision" | "thousands" | "upper">>> {
+type FlexOptions = {
     /**
-     * 格式化输入文本
-     * @param text 输入文本
-     * @param isEnd 是否是输入结束，true时，已经输入结束将进行数值精度处理
-     * @returns 数值格式化结果
+     * 主轴方向
+     * - css属性：flex-direction
+     * - 取值范围：
+     * - - row（默认值） 水平主轴，起点在左端
+     * - - row-reverse 水平主轴，起点在右端
+     * - - column 垂直主轴，起点在上沿
+     * - - column-reverse 垂直主轴，起点在下沿
      */
-    format(text: string, isEnd: boolean): NumberFormatResult;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
     /**
-     * 进行阈值检测，检测是否超过设定的最大值、最小值
-     * @param number 要检测的数值
-     * @returns 检测结果，`number` 新的值，`belowMin`是否低于最小值，`exceedMax`是否超过最大值
+     * 是否换行
+     * - css属性：flex-wrap
+     * - 取值范围：
+     * - - nowrap（默认值） 不换行，所有 flex 项都排在一行
+     * - - wrap 换行，第一行在上方
+     * - - wrap-reverse 换行，第一行在下方
      */
-    checkThreshold(number: any): {
-        number: number;
-        belowMin: boolean;
-        exceedMax: boolean;
-    };
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
     /**
-     * 对数值文本转大写
-     * @param result
-     * @returns 大写文本值
+     * 行与列之间的间隙（网格间距）
+     * - css属性：gap
+     * - row-gap、column-gap的缩写
+     * - 举例：gap: "10px 20px" 表示行间距为10px，列间距为20px；gap: "10px" 表示行间距和列间距都为10px
      */
-    buildUpper(result: NumberFormatResult): string;
+    gap?: string;
     /**
-     * 对数值文本进行千分位格式化
-     * @param result
-     * @returns 格式化后的文本值
+     * 主轴对齐方式
+     * - css属性：justify-content
+     * - 取值范围：
+     * - - start（默认值） 主轴起点对齐
+     * - - end 主轴终点对齐
+     * - - center 主轴居中对齐
+     * - - between 主轴两端对齐，项目之间间隔平均分布
+     * - - around 主轴每个项目两侧间隔平均分布
+     * - - evenly 主轴每个项目之间间隔平均分布
      */
-    buildThousands(result: NumberFormatResult): string;
+    main?: "start" | "end" | "center" | "between" | "around" | "evenly";
     /**
-     * 基于步长计算值
-     * @param number 要重新计算的数值
-     * @param isPlus true为+，false为-
-     * @returns 新的数值
+     * 交叉轴对齐方式
+     * - css属性：align-items
+     * - 取值范围：
+     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
+     * - - start 交叉轴起点对齐
+     * - - end 交叉轴终点对齐
+     * - - center 交叉轴居中对齐
+     * - - baseline 交叉轴第一行文字基线对齐
      */
-    calcByStep(number: number, isPlus: boolean): number;
-}
-/**
- * 数值格式化结果
- */
-type NumberFormatResult = {
+    cross?: "start" | "end" | "center" | "stretch" | "baseline";
     /**
-     * 输入是否是有效输入
-     * - `- 0 1 2 3 4 5 6 7 8 9  0 .`算是合法输入
+     * 多行时的交叉轴对齐方式
+     * - css属性：align-content
+     * - 取值范围：
+     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
+     * - - start 交叉轴起点对齐
+     * - - end 交叉轴终点对齐
+     * - - center 交叉轴居中对齐
+     * - - between 交叉轴两端对齐，行之间间隔平均分布
+     * - - around 交叉轴每行两侧间隔平均分布
+     * - - evenly 交叉轴每行之间间隔平均分布
      */
-    readonly valid: boolean;
+    content?: "start" | "end" | "center" | "stretch" | "between" | "around" | "evenly";
     /**
-     * 有效的数值
-     * - undefined时，输入无法转换成有效的数值
+     * 启用子项修复
+     * - 在`justify-content`启用`space-`相关属性时，子项之间会有间隔，当子项数量较少时，可能出现空间过大的问题，特别时多行的最后一样时
+     * - 启动后，会基于子项数量补全最后一行缺失的子项数量，来修复空间过大的问题
+     * - 推荐仅在所有子项主轴方向尺寸一样时，否则修复可能不准确
      */
-    readonly number: number | undefined;
+    repairItem?: boolean;
     /**
-     * 数值的显示文本
-     * - 无千分位等处理的数值显示文本
-     * - 若需要在行内显示 千分位 格式文本，需要单独处理
+     * flex容器的子项数量
+     * - 配合 `repairSpace` 构建修复空间的子项数量
+     * - 当 `repairSpace` 启用时，自动监听子项数量变化来动态调整修复空间的子项数量；不启用时忽略
      */
-    readonly text: string;
+    itemCount?: number;
     /**
-     * 格式化数值时发生的错误
-     * - 输入数值有效，但是格式化时发生错误了
+     * flex容器的子项标签名
+     * - 配合 `repairSpace` 构建修复空间的子项元素标签名
+     * - 默认值为`div`，即子项元素为`<div>`标签
+     * - 可配置为其他标签名，如`span`，则子项元素为`<span>`标签
      */
-    readonly error?: string;
+    itemTag?: string;
     /**
-     * 是否是负数
-     * - true 时说明以`-`开始；false时为正数
-     * - 若为true，但`integerPart`为undefined，则说明仅输入了`-`
+     * flex容器的子项类样式名
+     * - 配合 `repairSpace` 构建修复空间的子项元素类样式名
+     * - 推荐设置为一个固定值的类样式名，如`flex-item`，来方便用户通过该类样式名来设置子项元素的样式
+     * - 构建的子项，会自动追加一个 "repair-item”的类样式名，来方便用户通过该类样式名来设置修复空间子项元素的样式
      */
-    readonly isNegative?: boolean;
+    itemClass?: string;
+};
+
+/**
+ * 弹性容器组件 配置选项
+ */
+type ElasticOptions = ScrollOptions & {
     /**
-     * 是否是小数
-     * - true 时说明有小数点“.”；false 时为整数
-     * - 若为true，但`decimalPart`为undefined，则说明是以`.`结尾，还没输入具体的小数部分
+     * 滚动条弹簧效果
+     * - x 仅在x轴方向上启用弹簧效果
+     * - y 仅在y轴方向上启用弹簧效果
+     * - both ：同时启用x轴和y轴的弹簧效果
      */
-    readonly isDecimal?: boolean;
+    spring?: "x" | "y" | "both";
     /**
-     * 数值输入的整数部分
-     * - 取整数部分绝对值，如-1.2，仅为1
+     * 是否启用【下拉刷新】功能
+     * - `spring` 为 `y/both`时生效
+     * - 满足下拉刷新条件后，触发`refresh`事件，处理完成后调用resolve函数，通知完成刷新数据操作
      */
-    readonly integerPart?: string;
+    downRefresh?: boolean;
     /**
-     * 小数部分
+     * 是否启用【上拉加载】功能
+     * - `spring` 为 `y/both`时生效
+     * - 满足上拉加载条件后，触发`more`事件，处理完成后调用resolve函数，通知完成加载数据操作
      */
-    readonly decimalPart?: string;
+    upMore?: boolean;
+};
+/**
+ * 弹性容器组件 事件监听
+ */
+type ElasticEvents = ScrollEvents & {
     /**
-     * 进行系数放大后的整数部分
+     * 刷新数据
+     * - 配合 `downRefresh`实现下拉刷新功能
+     * @param resolve 处理完成后调用resolve函数，通知完成刷新数据操作
      */
-    readonly integerPartAfterMultiplier?: string;
+    refresh: [resolve: () => void];
     /**
-     * 进行系数放大后的小数部分
+     * 加载更多
+     * - 配合 `upMore`实现上拉加载功能
+     * @param resolve 处理完成后调用resolve函数，通知完成加载数据操作
      */
-    readonly decimalPartAfterMultiplier?: string;
+    more: [resolve: () => void];
 };
 /**
- * 数值组件的事件选项
+ * 弹性组件 对外暴露属性接口
  */
-type NumberEvents = ChangeEvents<number> & {
+type ElasticExpose = {
     /**
-     * 数值发生错误时
-     * - 若超过最大的精度范围
-     * - 其他未知异常等
-     * @param reason 错误原因
+     * 加载刷新数据
+     * - 触发下拉刷新数据
+     * @returns 异步任务对象，外部感知任务执行完成
      */
-    error: [reason: string];
+    loadRefresh(): Promise<void>;
     /**
-     * 小于最小值
-     * @param value 当前值
-     * @param minValue 最小值
+     * 加载更多数据
+     * - 触发上拉加载更多数据
+     * @returns 异步任务对象，外部感知任务执行完成
      */
-    belowMin: [value: number, minValue: number];
+    loadMore(): Promise<void>;
+};
+/**
+ * 弹性组件的弹簧状态信息
+ */
+type ElasticSpringStatus = {
+    x: number | undefined;
     /**
-     * 超过最大值
-     * @param value 当前值
-     * @param maxValue 最大值
+     * y轴方向的橡皮筋效果偏移量
      */
-    exceedMax: [value: number, maxValue: number];
+    y: number | undefined;
 };
 
 /**
- * 图标配置选项
- * - title          作为鼠标移入图标时的提示
+ * 选项菜单 基础配置选项
  */
-type IconOptions = TitleOptions & {
+type SelectBaseOptions<T> = {
     /**
-     * 是否为自定义图标
-     * - 为true时，外部通过插槽自己绘制图标
-     * - 为false时，使用`type`值绘制对应的内置图标
-     * - 默认false
+     * 【选择项】集合
      */
-    custom?: boolean;
+    items: SelectItem<T>[];
     /**
-     * 内置的图标类型
-     * - `custom`为false时生效
+     * 搜索功能配置
+     * - 不配置则不启用【搜索】功能
      */
-    type?: IconType;
+    search?: SearchOptions;
     /**
-     * 是否是按钮图标
-     * - true时，鼠标移入时 cursor:pointer;
+     * 是否【多选模式】
+     * - 为true时，多选，【选择项】后面出【选择】框；底部出【全选】和【清空已选】
+     * - items为多级时，不支持【多选模式】；传入会报错
      */
-    button?: boolean;
+    multiple?: boolean;
     /**
-     * 图标大小
-     * - 可指定对象，如 { width: 24, height: 24 }，则图标大小为 24 * 24
-     * - 可指定数字，如 24，则图标大小为 24 * 24
-     * - 默认 24
+     * 是否显示【路径】
+     * - 为true时，显示选项的父级文本路径，用“ / ”分割
+     * - 仅针对【单选模式】生效
      */
-    size?: number | {
-        width?: number;
-        height?: number;
-    };
+    showPath?: boolean;
     /**
-     * 图标颜色
+     * 是否显示【清空已选】按钮
+     * - true：则在弹窗的底部显示【清空已选】按钮，点击时清空所有已选选项
+     * - 若存在多级选项，仅在第一级弹窗中显示
      */
-    color?: string;
+    showClear?: boolean;
     /**
-     * 鼠标移入时的图标颜色
+     * 选择项 follow弹窗样式
+     * - 支持指定弹窗高度，如最大高度，不指定则默认尽可能展示全
      */
-    hoverColor?: string;
+    popupStyle?: HeightStyle;
+};
+/**
+ * 选项菜单 基础事件
+ */
+type SelectBaseEvents<T> = {
     /**
-     * 旋转角度
-     * - 默认0
-     * - 通过：transform: rotate(1.06); 实现
+     * 选中的【选择项】改变时
+     * - @param values 已选的【选择项】，未选中则为空数组：单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
      */
-    rotate?: number;
+    change: [values: SelectItem<T>[]];
+};
+/**
+ * 选项菜单组件的【选择项】
+ */
+type SelectItem<T> = TreeNode<T, TreeNodeExtend & {
     /**
-     * 图标透明度
-     * - 不传入，默认1
+    * 节点类型
+    * - group  分组选择项；可包含子节点
+    * - item   选择项；默认值；不可包含子节点，即使传入也会忽略
+    */
+    type?: "group" | "item";
+}>;
+/**
+ * 选项菜单组件 配置选项
+ * - value 已选的【选择项】;单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
+ */
+type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {
+    /** 父类<see cref="SelectBaseOptions"/>已有属性：
+     *      items                   【选择项】集合
+     *      search                  启用 【搜索】功能
+     *      searchPlaceholder       搜索框提示语
+     *      multiple                是否【多选模式】
+     *      showPath                显示选项路径
+     *      popupStyle              弹出的选项选择窗体样式
      */
-    opacity?: number;
     /**
-     * 图形伸展
-     * - svg.viewBox 属性
-     * - 为空则默认“0 0 1024 1024”
+     * 选项分隔符
+     * - 单选有多级时的分割路径；默认为 /
+     * - 多选时分割多个选项；默认为 、
      */
-    viewBox?: string;
+    separator?: string;
 };
 /**
- * 图标类型
- * - 状态类：
- * - - success      成功图标，对勾
- * - - error        错误
- * - - warn         警告图标
- * - 操作类：
- * - - close        关闭 用作数据删除，弹窗关闭
- * - - trash        垃圾桶图标，常用于【删除】操作
- * - - download     下载
- * - - print        打印
- * - - edit         编辑
- * - 指向类：
- * - - arrow        向右箭头
- * - - datepicker   日期选择器
- * - - timepicker   时间选择器
- * - 其他类：
- * - - plus         加号
- * - - subtract     减号
- * - - more         更多，默认垂直三个点
- * - - grip         紧握图标，垂直方向，一般用于拖动句柄
- */
-type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "more" | "grip";
-
-/**
- * 检查选项 数据结构
+ * 选项菜单 组件 事件
  */
-
+type SelectEvents<T> = SelectBaseEvents<T> & {};
 /**
- * 选择 组件配置选项
+ * 选项菜单 组件的Slot配置选项
  */
-type ChooseOptions<T> = ReadonlyOptions & {
-    /**
-     * 是否为多选模式
-     * - true 多选模式，可以选中items中多个选项
-     * - false 单选模式，只能选中items中的一个选项
-     */
-    multi?: boolean;
-    /**
-     * 选项类型
-     * - radio:     单选框样式
-     * - checkbox:  多选框样式
-     */
-    type: "radio" | "checkbox";
-    /**
-     * 显示模式
-     * - native     原生默认，浏览器自己渲染；不同浏览器效果不一致
-     * - beautiful  美化模式，不同浏览器下效果通义
-     */
-    mode?: "native" | "beautiful";
+type SelectSlotOptions = {
     /**
-     * 选项布局
-     * - 默认值：horizontal
-     * - 可选值：
-     * - - horizontal 水平布局；所有选项一行
-     * - - vertical   垂直布局；每个选项一行
+     * 清空已选【选择项】
+     * @param closeFollow 是否关闭【选择项】Follow弹窗
+     * @param stopPropagation 是否停止事件冒泡
      */
-    layout?: "horizontal" | "vertical";
+    clear(closeFollow: boolean, stopPropagation: boolean): void;
+};
+/**
+ * 【选项菜单】 组件上下文
+ */
+interface ISelectContext<T> extends ITreeBaseContext<T> {
     /**
-     * 待选项目
-     * text 可不传入
+     * 指定节点是否选中了
+     * @param multiple 是否是【多选模式】
+     * @param item 要判断的节点
+     * @returns true 选中，false 未选中
      */
-    items: ChooseItem<T>[];
+    selected(multiple: boolean, item: SelectItem<T>): boolean;
     /**
-     * 选项自定义样式
-     * - 可指定选项宽度、高度、外边距
+     * 获取已选【选择项】的展示文本
+     * @param multiple 是否是【多选模式】
+     * @param showPath 是否显示路径
+     * @returns 已选【选择项】的展示文本
      */
-    itemStyle?: WidthStyle & HeightStyle & MarginStyle;
-};
+    selectedText(multiple: boolean, showPath: boolean): string;
+}
 /**
- * 选择项
+ * 【选项菜单】 弹窗组件配置选项
  */
-type ChooseItem<T> = {
-    /**
-     * 选项文本
+type SelectPopupOptions<T> = SelectBaseOptions<T> & {
+    /** 父类<see cref="SelectBaseOptions"/>已有属性：
+     *      items                   选择项 集合
+     *      search                  启用 【搜索】功能
+     *      searchPlaceholder       搜索框提示语
+     *      multiple                是否【多选模式】
      */
-    text?: string;
     /**
-     * 选项值
+     * 树形上下文
      */
-    value: T;
+    context: ISelectContext<T>;
     /**
-     * 选项描述信息，一般作为解释使用
+     * 第几级 选项弹窗
+     * - 从1开始
      */
-    description?: string;
+    level: number;
 };
 /**
- * 选择 组件事件
+ * 【选项菜单】 弹窗组件事件
  */
-type ChooseEvents<T> = {
+type SelectPopupEvents<T> = {
     /**
-     * 值改变 事件
-     * - values 为当前选中值；单选时为单个值，多选时为值数组
+     * 清空选项
      */
-    change: [values: T | T[]];
+    clear: [];
+    /**
+     * 选项点击事件
+     * @param path 选中的【选择项】路径；父->子
+     */
+    click: [path: SelectItem<T>[]];
 };
-
 /**
- * 按钮配置选项
+ * 【选项菜单】 弹窗组件扩展
  */
-type ButtonOptions = TitleOptions & {
+type SelectPopupExtend = {
     /**
-     * 按钮尺寸
-     * - max    ： 120 X 40
-     * - middle ： 90 X 32
-     * - normal ： 54 X 28
-     * - small  ： 30 X 20
+     * 子选项弹窗的销毁定时器
+     * - 父级弹窗可根据需要销毁定时器，取消子选择弹窗销毁
+     * - 鼠标离开弹窗时，做延迟销毁；避免回到 此弹窗 的父【选择项】时，又重新打开此弹窗
      */
-    size: "max" | "middle" | "normal" | "small";
+    childDestroyTimer: ShallowRef<IScope>;
     /**
-     * 按钮类型
-     *  - primary: 主按钮：蓝色背景
-     *  - default: 默认按钮：白色背景
-     *  - link   ：链接式按钮：蓝色字体颜色，无边框
+     * 父级弹窗的pin状态
+     * - 可在子弹窗中设置为true，这样父级弹窗就不会自动关闭了
      */
-    type: "primary" | "default" | "link";
+    parentPinned: ShallowRef<boolean>;
 };
-
 /**
- * 可操作项组件 的配置选项
- * - disabled 为true时，不响应操作项触发
+ * 【选项菜单】节点 组件配置选项
  */
-type ActionOptions = DisabledOptions & {
+type SelectNodeOptions<T> = {
     /**
-     * 触发方式
-     *  - always ：始终显示一个触发图标，点击图标弹出操作项
-     *  - hover：鼠标移入显示一个触发图标，点击图标弹出操作项
-     *  - long-press：长摁直接弹出操作项
+     * 是否为【多选模式】
      */
-    trigger: "always" | "hover" | "long-press";
+    multiple: boolean;
     /**
-     * 显示模式
-     * - popup：弹出显示操作项
-     * - inline：内联显示操作项
+     * 要展示的节点
      */
+    item: SelectItem<T>;
     /**
-     * 可用操作项
+     * 树形上下文
      */
-    actions: ActionItem[];
+    context: ISelectContext<T>;
+    /**
+     * 是否显示子节点
+     */
+    showChildren: boolean;
 };
 /**
- * 操作项集合 组件渲染配置选项
+ * 【选项菜单】节点 组件事件
  */
-type ActionItemsOptions = {
+type SelectNodeEvents<T> = {
     /**
-     * 展示模式
-     * - horizontal 水平展示
-     * - vertical   垂直展示
+     * 鼠标进入事件
+     * @param el 【选择项】节点dom元素
+     * @param item 【选择项】
+     * @param parent 父节点
      */
-    mode: "horizontal" | "vertical";
+    enter: [el: HTMLDivElement, item: SelectItem<T>, parent?: SelectItem<T>];
     /**
-     * 要渲染的操作项
+     * 点击事件
+     * @param item 【选择项】
+     * @param parent 父节点
      */
-    actions: ActionItem[];
+    click: [item: SelectItem<T>, parent?: SelectItem<T>];
 };
+
 /**
- * 一个操作项的配置
- */
-type ActionItem = {
-    /**
-     * 操作项编码
-     * - 确保唯一
-     */
-    code: string;
-    /**
-     * 操作项名称
-     * - 确保唯一
-     */
-    name: string;
-    /**
-     * 操作项颜色
-     */
-    color?: string;
-    /**
-     * 操作项移入时颜色
-     */
-    hoverColor?: string;
+ * 基础事件实体
+ *  1、把一些常用事件，封装为原子结构，方便复用
+ *  2、不强制必须复用，根据自身情况
+ */
+/**
+ * 事件：点击
+ */
+type ClickEvents = {
     /**
-     * 操作项图标
+     * 单击事件
+     * @param evt 事件对象
      */
-    icon?: Pick<IconOptions, "type" | "size" | "title">;
+    click: [evt?: MouseEvent | TouchEvent | PointerEvent];
 };
 /**
- * 可操作向组件 插槽句柄
+ * 事件：值改变
+ * - 描述值的改变过程，新值是什么，改变前的旧值是什么
  */
-type ActionSlotHandle = {
-    /**
-     * 操作项是否激活显示
-     */
-    isActived(): boolean;
+type ChangeEvents<T> = {
     /**
-     * 触发操作项显示
+     * 值改变；约束新旧值
+     * @param newValue 新值
+     * @param oldValue 旧值
      */
-    trigger(): void;
+    change: [newValue: T, oldValue?: T];
 };
 /**
- * 可操作项组件 的事件
+ * 事件：移动
+ * - 可描述数据索引位置变化
+ * - 可用于数组元素拖动排序，调整位置等逻辑
  */
-type ActionEvents = {
+type MoveEvents = {
     /**
-     * 操作项激活时
-     * @param code 操作项的code
+     * 移动事件
+     * @param fromIndex 从哪个索引位置开始移动
+     * @param toIndex 移动到的索引位置
      */
-    trigger: [code: string];
+    move: [fromIndex: number, toIndex: number];
 };
-
 /**
- * 输入框配置选项
- * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
- * - 暂不提供 disabled 逻辑
+ * 事件：删除数据
+ * - 描述要删除的具体数据
  */
-type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
-    /**
-     * 输入框类型
-     * - text: 文本输入框
-     * - number: 数字输入框
-     * - password: 密码输入框
-     */
-    type?: "text" | "number" | "password";
-    /**
-     * 输入框是否必填
-     * - 必填，则验证不通过时，显示错误信息
-     * - 必填时，显示必填标记，红色 * 号
-     */
-    required?: boolean;
+type DeleteEvents<T> = {
     /**
-     * 标题区域样式
-     * - 对齐方式
-     * - 标题区域宽度
+     * 删除事件
+     * @param value 要删除的数据
      */
-    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
+    delete: [value?: T];
 };
 /**
- * 输入框事件
+ * 事件：关闭
  */
-type InputEvents = {
-    /**
-     * 输入框点击时
-     */
-    click: [];
+type CloseEvents = {
     /**
-     * 输入框内容发生改变时
-     * @param value 输入框内容
+     * 关闭事件
      */
-    change: [value: string];
+    close: [];
 };
 
 /**
- * 接口：响应式管理器
+ * 数值控件的数据结构
  */
-interface IReactiveManager {
-    /**
-     * 响应式【过渡】变量值
-     * - 通过设置 rv.value 的值来实现.value值过渡
-     * - 执行顺序 from、to
-     * - 开始时，设置 rv.value 值为 from；延迟time时间后，强制销毁scope
-     * - 销毁scope时，强制将 rv.value 值设置为 to 值
-     * @param rv 响应式变量对象
-     * @param effect 过渡效果配置，约束 from end 样式
-     * @param time 过渡持续时间，到时间后销毁作用域
-     * @returns 作用域对象，可销毁【值过渡】效果
-     */
-    transition<T>(rv: ReactiveVar<T>, effect: {
-        from: T;
-        to: T;
-    }, time: number): IScope;
+
+/**
+ * 数值组件的基础配置选项
+ */
+type NumberBaseOptions = {
     /**
-     * 响应式【加载】任务
-     * - 任务运行时，设置loading.value=true
-     * - 任务完成后，设置loading.value=false
-     * - 可通过delay值，延迟执行 loading.value=false 操作
-     * - 可在api请求等耗时操作任务过程中，实现响应式显隐Loading组件
-     * @param task 要运行的任务
-     * @param loading 正在加载的响应式变量
-     * @param delay 延迟时间，单位ms；不传则不延迟
-     * @returns 任务自身
+     * 最小值
      */
-    load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
+    minValue?: number;
     /**
-     * 监听器：监听单个值变化
-     * - 内部利用vue的watch逻辑实现
-     * - 自动进行生命周期管理，作用域销毁时自动清理watch监听
-     * - 仅实现简化版本watch监听；复杂的监听逻辑，自行使用watch方法
-     * @param source 监听源
-     * @param callback 回调方法：可接收新旧值变化
-     * @param deep 是否进行深度监听；默认false
-     * @returns 监听作用域，destroy可销毁监听
+     * 最大值
      */
-    watcher<T>(source: WatchSource<T>, callback: (newValue: T, oldValue: T) => void, deep?: boolean): IScope;
-}
-/**
- * 响应式变量
- */
-type ReactiveVar<T> = ShallowRef<T> | Ref<T>;
-
-/**
- * 开关组件 配置选项
- */
-type SwitchOptions = ReadonlyOptions & {
+    maxValue?: number;
     /**
-     * 类型，决定开启/关闭状态的渲染效果
-     * - switch     开关类型，默认效果
-     * - radio      单选框效果，圆角边框
-     * - checkbox   复选框效果，矩形边框
+     * 值超过阈值（最大值、最小值）时的处理模式
+     * - 默认值为 `keep`；可选取值范围：
+     * - - `keep` 保持原样值显示，不做任何处理
+     * - - `clamp` 截断超出阈值值，低于最小值时直接取最小值，超过最大值时，强制值为最大值
+     * - 值超过阈值时，会自动触发事件，事件名`NumberEvents`的`belowMin`和`exceedMax`
      */
-    type?: "switch" | "radio" | "checkbox";
-};
-/**
- * 开关 事件
- */
-type SwitchEvents = {
+    clamp?: "keep" | "clamp";
     /**
-     * 开关 状态变化时
-     * @param value 开启、还是关闭
+     * 精度，保留几位小数
+     * - 要求0、正整数,输入小数则强制整数
+     * - 负数、不传入则不处理
      */
-    change: [value: boolean];
-};
-
-/**
- * 多行文本框组件配置选项
- */
-type TextareaOptions = ReadonlyOptions & PlaceholderOptions & {
+    precision?: number;
     /**
-     * 是否自适应高度
-     * - 传入true时，根据文本框内容，自动调整高度
-     * - 若传入maxRows，则自动高度不会超过maxRows
+     * 对数值进行千分位格式处理
+     * - 默认值为 `disabled`；可选值范围：
+     * - `disabled` 禁用千分位功能
+     * - `inline`  内联千分位功能
+     * - `below`  下拉千分位功能
      */
-    autoHeight: boolean;
+    thousands?: "disabled" | "inline" | "below";
     /**
-     * 最小行数
-     * - 作为默认行数
-     * - 不传入则默认4
+     * 是否启用数值大写格式化处理
+     * - 为true时，转成中文大写值
+     * - 单位自动为“元”，不支持美元等
+     * - 如金额时，自动转为壹仟壹佰壹拾壹元叁角叁分
+     * - 小数点后面只处理两位（角分）；剩余不处理
      */
-    minRows?: number;
+    upper?: boolean;
     /**
-     * 最大行数
-     * - 不传入则默认10
-     * - `autoHeight`为true时生效；
+     * 格式化时的放大系数
+     * - 用于在格式化千分位、大写时，对实际值进行系数放大，value*formatMultiplier
+     * - 仅接收正整数，取值规则为10^n，默认1
+     * - 千分位格式化时，仅`thousands`为`below`时才进行放到系数处理
+     * - 使用示例例：金额是为万元单位时，这里的放大系数就为 “10000”
      */
-    maxRows?: number;
-};
-/**
- * 多行文本框组件事件
- */
-type TextareaEvents = {
+    formatMultiplier?: number;
     /**
-     * 获取焦点时
+     * 前缀字符串
+     * - 如金额时，可配置前缀 ￥
      */
-    focus: [];
+    prefix?: string;
     /**
-     * 输入时
-     * @param value 输入框内容
+     * 后缀字符串
+     * - 如金额时，可配置后缀 元/美元、、
      */
-    input: [value: string];
+    suffix?: string;
     /**
-     * 失焦时
-     * @param value 输入框内容
+     * 数值控制器
+     * - 便捷加减调整数值的控制按钮
+     * - 默认值`disabled`；可选值范围：
+     * - - `disabled` 时禁用
+     * - - `default` 默认模式，左侧 — 右侧 +
+     * - - `right`   右侧模式，+ - 都在右侧
      */
-    blur: [value: string];
+    controls?: "disabled" | "default" | "right";
     /**
-     * 输入框内容发生改变时
-     * @param value 输入框内容
+     * 数值步长值
+     * - `controls` 未禁用时生效
+     * - 每次+、- 的步长值
      */
-    change: [value: string];
+    step?: number;
 };
-
-/**
- * 使用【响应式管理器】
- * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
- * @returns 全新的【响应式管理器】+作用域
- */
-declare function useReactive(): IReactiveManager & IScope;
-
-/**
- * 树的基础组件信息
- *  1、组件基础上下文 默认实现
- */
-
 /**
- * 使用【树上下文】
- * @param nodes 树节点集合
- * @param activeNodeRef 当前激活的树节点引用；不传入，则无法实现 isActived 判断
- * @returns 上下文对象+作用域
- */
-declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[], activeNodeRef?: ShallowRef<TreeNode<T, TreeNodeExtend>>): ITreeBaseContext<T> & IScope;
-
-/**
- * Vue App助手类，做一些app实例的辅助性工作
- */
-
-/** 私有类型：App类型
- * - normal 普通app实例
- * - popup  弹窗app实例；包括 Dialog、Follow等所有弹窗
-*/
-type AppType = "normal" | "popup";
-/**
- * app实例创建完之后的回调通知
- * @param fn 回调通知
- * @returns 通知句柄，可销毁回调通知，一般在外部销毁时执行
- */
-declare function onAppCreated(fn: (app: App, type?: AppType) => void): IScope;
-/**
- * 触发app创建后事件
- * @param app 创建的app实例
- * @param type app创建类型；满足区分特定app实例使用
- * @returns app自身
- */
-declare function triggerAppCreated(app: App, type?: AppType): App;
-
-/**
- * 图标助手类
- */
-
-/**
- * 获取内置图标绘制路径
- * @param iconType 图标类型
- * @returns 图标路径
- */
-declare function getBuiltinIcon(iconType: IconType): string[];
-
-/**
- * 动态加载组件 组件配置选项
- */
-type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions<Props>, "props">;
-
-/**
- * 挂载指定的Vue组件
- * - 权限构建的vue app实例，挂载传入的组件
- * @param target 挂载的目标元素
- * @param options 挂载配置选项
- * @param onDestroyed  监听【调用方】的销毁时机，用于自动销毁挂载的实力
- * @returns 作用域对象，销毁挂载实例
- */
-declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
-
-/**
- * 运动组件的助手方法变量
+ * 数值组件的配置选项
  */
+type NumberOptions = PlaceholderOptions & ReadonlyOptions & NumberBaseOptions;
 /**
- * 运行效果常量
+ * 接口：数值格式化器
  */
-declare const MOTION: Readonly<{
-    /** 淡入淡出；进入时 `opacity:0~1`；退出时 `opacity:1~0`*/
-    fade: {
-        enter: string;
-        leave: string;
-    };
-    /** 缩放进入：进入时 `scale:0~1`；退出时 `scale:1~0`*/
-    scale: {
-        enter: string;
-        leave: string;
-    };
-    /** 旋转：进入时 `rotate:360deg~0`；退出时 `rotate:0~360deg`*/
-    rotate: {
-        enter: string;
-        leave: string;
-    };
-    /** 顶部进入退出：进入时`translateY:-100%~0`；退出时`translateY:0~-100%`*/
-    top: {
-        enter: string;
-        leave: string;
-    };
-    /** 顶部进入底部退出：进入时`translateY:-100%~0`；退出时`translateY:0~100%`*/
-    topBottom: {
-        enter: string;
-        leave: string;
-    };
-    /** 底部进入退出：进入时`translateY:100%~0`；退出时`translateY:0~100%`*/
-    bottom: {
-        enter: string;
-        leave: string;
-    };
-    /** 底部进入顶部退出：进入时`translateY:100%~0`；退出时`translateY:0~-100%`*/
-    bottomTop: {
-        enter: string;
-        leave: string;
-    };
-    /** 左侧进入退出：进入时`translateX:-100%~0`；退出时`translateX:0~-100%`*/
-    left: {
-        enter: string;
-        leave: string;
-    };
-    /** 左侧进入右侧退出：进入时`translateX:-100%~0`；退出时`translateX:0~100%`*/
-    leftRight: {
-        enter: string;
-        leave: string;
-    };
-    /** 右侧进入右侧退出：进入时`translateX:100%~0`；退出时`translateX:0~100%`*/
-    right: {
-        enter: string;
-        leave: string;
-    };
-    /** 右侧进入左侧退出：进入时`translateX:100%~0`；退出时`translateX:0~-100%`*/
-    rightLeft: {
-        enter: string;
-        leave: string;
+interface INumberFormatter extends Required<Readonly<Pick<NumberBaseOptions, "minValue" | "maxValue" | "precision" | "thousands" | "upper">>> {
+    /**
+     * 格式化输入文本
+     * @param text 输入文本
+     * @param isEnd 是否是输入结束，true时，已经输入结束将进行数值精度处理
+     * @returns 数值格式化结果
+     */
+    format(text: string, isEnd: boolean): NumberFormatResult;
+    /**
+     * 进行阈值检测，检测是否超过设定的最大值、最小值
+     * @param number 要检测的数值
+     * @returns 检测结果，`number` 新的值，`belowMin`是否低于最小值，`exceedMax`是否超过最大值
+     */
+    checkThreshold(number: any): {
+        number: number;
+        belowMin: boolean;
+        exceedMax: boolean;
     };
-}>;
-
-/**
- * 公共通用数据结构：
- *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
- */
-
+    /**
+     * 对数值文本转大写
+     * @param result
+     * @returns 大写文本值
+     */
+    buildUpper(result: NumberFormatResult): string;
+    /**
+     * 对数值文本进行千分位格式化
+     * @param result
+     * @returns 格式化后的文本值
+     */
+    buildThousands(result: NumberFormatResult): string;
+    /**
+     * 基于步长计算值
+     * @param number 要重新计算的数值
+     * @param isPlus true为+，false为-
+     * @returns 新的数值
+     */
+    calcByStep(number: number, isPlus: boolean): number;
+}
 /**
- * 弹窗配置选项
- * - 约束弹出组件信息
- * - 弹出组件时传递的参数信息
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+ * 数值格式化结果
  */
-type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
+type NumberFormatResult = {
     /**
-     * 弹窗动画名
-     * - 不传则默认“fade”
-     * - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
-     * - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
+     * 输入是否是有效输入
+     * - `- 0 1 2 3 4 5 6 7 8 9  0 .`算是合法输入
      */
-    transition?: string;
+    readonly valid: boolean;
     /**
-     * 动画持续时间
-     * - 配合 transition 使用；单位ms，默认500ms
-     * - 外部传入自定义动画时，传入动画持续时间，否则可能导致关闭时动画失效
+     * 有效的数值
+     * - undefined时，输入无法转换成有效的数值
      */
-    transitionDuration?: number;
+    readonly number: number | undefined;
     /**
-     * 自定义class
-     * - 绑定到内容组件根元素上
-     * - 可以直接在props中指定，无需特殊设置
-    class?: string | string[];
+     * 数值的显示文本
+     * - 无千分位等处理的数值显示文本
+     * - 若需要在行内显示 千分位 格式文本，需要单独处理
      */
+    readonly text: string;
     /**
-     * 自定义style
-     * - 绑定到内容组件根元素上
-     * - 可以直接在props中指定，无需特殊设置
-    style?: AllStyle;
+     * 格式化数值时发生的错误
+     * - 输入数值有效，但是格式化时发生错误了
      */
+    readonly error?: string;
     /**
-     * 弹窗的z-index值
-     * - 无特殊情况，建议不指定，内部会自动生成，确保弹窗正确性
+     * 是否是负数
+     * - true 时说明以`-`开始；false时为正数
+     * - 若为true，但`integerPart`为undefined，则说明仅输入了`-`
      */
-    zIndex?: number;
-};
-/**
- * 弹出组件句柄
- */
-type PopupHandle<T> = {
+    readonly isNegative?: boolean;
     /**
-     * 组件是否在【弹出窗口】中
-     * - popup  ：  普通弹出弹窗
-     * - dialog ：  模态对话弹窗
-     * - follow ：  跟随效果弹窗
+     * 是否是小数
+     * - true 时说明有小数点“.”；false 时为整数
+     * - 若为true，但`decimalPart`为undefined，则说明是以`.`结尾，还没输入具体的小数部分
      */
-    inPopup: Readonly<"popup" | "dialog" | "follow">;
+    readonly isDecimal?: boolean;
     /**
-     * 关闭弹窗
-     * @param data 关闭时传递数据
+     * 数值输入的整数部分
+     * - 取整数部分绝对值，如-1.2，仅为1
      */
-    closePopup(data?: T): void;
-};
-/**
- * 弹窗状态：响应式
- * - open       打开
- * - active     激活，针对Dialog弹窗生效
- * - unactive   非激活，针对Dialog弹窗生效
- * - closed     关闭
- */
-type PopupStatus = ShallowRef<"open" | "active" | "unactive" | "closed">;
-/**
- * 弹窗状态 配置选项
- */
-type PopupStatusOptions = {
+    readonly integerPart?: string;
     /**
-     * 弹窗状态：响应式
+     * 小数部分
      */
-    popupStatus: PopupStatus;
-};
-/**
- * 弹窗对象描述器
- * - 给弹窗容器使用，传递过去作为props使用
- */
-type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOptions & {
+    readonly decimalPart?: string;
     /**
-     * 弹窗Id
-     * - 自动分配，全局唯一
+     * 进行系数放大后的整数部分
      */
-    popupId: string;
+    readonly integerPartAfterMultiplier?: string;
     /**
-     * 弹窗配置选项
-     * - 由外部传递过来的业务数据配置信息
-     * - 约束具体弹窗的业务组件和业务组件所需props等数据
+     * 进行系数放大后的小数部分
      */
-    options: Options;
+    readonly decimalPartAfterMultiplier?: string;
+};
+/**
+ * 数值组件的事件选项
+ */
+type NumberEvents = ChangeEvents<number> & {
     /**
-     * 弹窗扩展配置选项
-     * - 由 popup、follow等方法内部组件：如关闭弹窗方法、钩子函数等
-     * - 配合业务组件使用的一些配置数据
+     * 数值发生错误时
+     * - 若超过最大的精度范围
+     * - 其他未知异常等
+     * @param reason 错误原因
      */
-    extOptions: ExtOptions;
+    error: [reason: string];
     /**
-     * 实际分配的zIndex值
+     * 小于最小值
+     * @param value 当前值
+     * @param minValue 最小值
      */
-    zIndex: number;
+    belowMin: [value: number, minValue: number];
     /**
-     * 弹窗动画名
-     * - 约束打开、关闭动画；基于 PopupOptions.transition 构建出来的
-     * - 具体使用方，将此值绑定的根元素上
+     * 超过最大值
+     * @param value 当前值
+     * @param maxValue 最大值
      */
-    popupTransition: ShallowRef<string>;
+    exceedMax: [value: number, maxValue: number];
 };
 
 /**
- * 模态弹窗数据结构
+ * 检查选项 数据结构
  */
 
 /**
- * 模态弹窗 配置选项
- * - 继承 ComponentOptions ，动态加载组件
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+ * 选择 组件配置选项
  */
-type DialogOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
+type ChooseOptions<T> = ReadonlyOptions & {
     /**
-     * 包裹器配置
-     * - 若传入配置，则启用弹窗包裹；弹窗打开时使用`Wrapper`包裹弹窗内容组件
+     * 是否为多选模式
+     * - true 多选模式，可以选中items中多个选项
+     * - false 单选模式，只能选中items中的一个选项
      */
-    wrapper?: Pick<WrapperOptions, "header" | "content" | "footer">;
+    multi?: boolean;
     /**
-     * 禁用【遮罩层】
-     * - 目前没实现，先忽略
-    maskDisabled?: boolean;
+     * 选项类型
+     * - radio:     单选框样式
+     * - checkbox:  多选框样式
      */
+    type: "radio" | "checkbox";
     /**
-     * 点击【遮罩层】时是否关闭弹窗
-     * - 针对无遮罩层的弹窗，则点击非【弹窗组件】区域时是否关闭
+     * 显示模式
+     * - native     原生默认，浏览器自己渲染；不同浏览器效果不一致
+     * - beautiful  美化模式，不同浏览器下效果通义
      */
-    closeOnMask?: boolean;
+    mode?: "native" | "beautiful";
     /**
-     * 按下【ESC】健时是否关闭弹窗
+     * 选项布局
+     * - 默认值：horizontal
+     * - 可选值：
+     * - - horizontal 水平布局；所有选项一行
+     * - - vertical   垂直布局；每个选项一行
      */
-    closeOnEscape?: boolean;
+    layout?: "horizontal" | "vertical";
     /**
-     * 模态弹窗的自定义class
-     * - 绑定到模态弹窗的根元素上
+     * 待选项目
+     * text 可不传入
      */
-    rootClass?: string | string[];
+    items: ChooseItem<T>[];
+    /**
+     * 选项自定义样式
+     * - 可指定选项宽度、高度、外边距
+     */
+    itemStyle?: WidthStyle & HeightStyle & MarginStyle;
 };
 /**
- * 弹窗组件句柄
- * - 用于在弹窗内容组件中进行模式判断和关闭
+ * 选择项
  */
-type DialogHandle<T> = PopupHandle<T> & {
+type ChooseItem<T> = {
     /**
-     * 注册监听【弹窗关闭】事件方法
-     * - 仅支持注册一次，多次注册以最后一次的为准
-     * @param fn 关闭时执行的钩子函数，支持异步；；调用后若返回false时将阻止弹窗关闭
+     * 选项文本
      */
-    onBeforeClose(fn: (data?: T) => false | undefined | Promise<false | undefined>): void;
+    text?: string;
+    /**
+     * 选项值
+     */
+    value: T;
+    /**
+     * 选项描述信息，一般作为解释使用
+     */
+    description?: string;
 };
 /**
- * 弹窗包裹器操作句柄
+ * 选择 组件事件
  */
-type DialogWrapperHandle<T> = {
+type ChooseEvents<T> = {
     /**
-     * 注册【构建数据】事件方法
-     * - 仅在Dialog为使用了wrapper模式时生效，用于在【确认】按钮点击时，构建实际内容组件中的数据
-     * - 仅支持注册一次，多次注册以最后一次的为准
-     * @param fn 取数据时执行的钩子函数，支持异步；若需要阻止弹窗关闭则`fn`方法直接报错即可
+     * 值改变 事件
+     * - values 为当前选中值；单选时为单个值，多选时为值数组
      */
-    onBuildData(fn: () => T | Promise<T>): void;
+    change: [values: T | T[]];
 };
 
 /**
- * 确认弹窗配置选项
- * - title          弹窗标题，默认“提示”
- * - message        确认提示信息；默认“请确认？”；支持html格式内容
+ * 按钮配置选项
  */
-type ConfirmOptions = TitleOptions & MessageOptions & ConfirmAreaOptions & {};
+type ButtonOptions = TitleOptions & {
+    /**
+     * 按钮尺寸
+     * - max    ： 120 X 40
+     * - middle ： 90 X 32
+     * - normal ： 54 X 28
+     * - small  ： 30 X 20
+     */
+    size: "max" | "middle" | "normal" | "small";
+    /**
+     * 按钮类型
+     *  - primary: 主按钮：蓝色背景
+     *  - default: 默认按钮：白色背景
+     *  - link   ：链接式按钮：蓝色字体颜色，无边框
+     */
+    type: "primary" | "default" | "link";
+};
 
 /**
- * Toast配置选项
+ * 可操作项组件 的配置选项
+ * - disabled 为true时，不响应操作项触发
  */
-type ToastOptions = {
+type ActionOptions = DisabledOptions & {
     /**
-     * 提示类型，基于类型展示图标
+     * 触发方式
+     *  - always ：始终显示一个触发图标，点击图标弹出操作项
+     *  - hover：鼠标移入显示一个触发图标，点击图标弹出操作项
+     *  - long-press：长摁直接弹出操作项
      */
-    type?: IconType;
+    trigger: "always" | "hover" | "long-press";
     /**
-     * 提示消息；支持html格式
+     * 显示模式
+     * - popup：弹出显示操作项
+     * - inline：内联显示操作项
      */
-    message: string;
     /**
-     * 提示显示时间
-     * - 单位毫秒，默认1500ms
+     * 可用操作项
      */
-    duration?: number;
+    actions: ActionItem[];
+} & Pick<FollowPositionOptions, "followX" | "followY" | "spaceX" | "spaceY">;
+/**
+ * 操作项集合 组件渲染配置选项
+ */
+type ActionItemsOptions = {
     /**
-     * 关闭按钮是否禁用
+     * 展示模式
+     * - horizontal 水平展示
+     * - vertical   垂直展示
      */
-    closeDisabled?: boolean;
+    mode: "horizontal" | "vertical";
+    /**
+     * 要渲染的操作项
+     */
+    actions: ActionItem[];
 };
-
-/**
- * 跟随效果 弹窗
- */
-
-/**
- * 跟随弹窗 配置选项
- * - 传入的组件，根据配置跟随 target 位置和大小；
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
- */
-type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
 /**
- * 跟随位置 配置选项
- * - 基于此计算出最终的跟随效果
+ * 一个操作项的配置
  */
-type FollowPositionOptions = {
+type ActionItem = {
     /**
-     * 启用【宽度】跟随
-     * - 为true则和 target 宽度保持一致
-     * - false时，宽度由 弹出组件 自己维护
-     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
+     * 操作项编码
+     * - 确保唯一
      */
-    followWidth?: boolean;
+    code: string;
     /**
-     * 启用【高度】跟随
-     * - 为true则和 target 高度保持一致
-     * - false时，高度由 弹出组件 自己维护
-     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
+     * 操作项名称
+     * - 确保唯一
      */
-    followHeight?: boolean;
+    name: string;
     /**
-     * x轴方向上的跟随策略
-     * - 支持传入一个或者多个，依次尝试选举最优位置（全宽度展示，否则取最大宽度位置）
-     * - 不传入则按照默认策略；["start","end","after","before","center","ratio"]
-     * - 可选策略值如下：
-     * - - start  ： 起点跟随，和 target 起始位置（left）一致
-     * - - end    ： 终点跟随，和 target 结束位置（right）一致
-     * - - center ： 中心跟随，和 target 中心位置一致
-     * - - before ： 之前跟随，组件在 target 左侧展示
-     * - - after  ： 之后跟随，组件在 target 右侧展示
-     * - - ratio  ： 比例跟随，按比例（target中心点/窗口宽度）锚定位置，动态计算left值。
+     * 操作项颜色
      */
-    followX?: FollowStrategy | FollowStrategy[];
+    color?: string;
     /**
-     * y轴方向上的跟随策略
-     * - 支持传入一个或者多个，依次尝试选举最优位置（全高度展示，否则取最大高度位置）
-     * - 不传入则按照默认策略；["after","before","start","end","center","ratio"]
-     * - 可选策略值如下：
-     * - - start  ： 起点跟随，和 target 起始位置（top）一致
-     * - - end    ： 终点跟随，和 target 结束位置（bottom）一致
-     * - - center ： 中心跟随，和 target 中心位置一致
-     * - - before ： 之前跟随，组件在 target 顶部展示
-     * - - after  ： 之后跟随，组件在 target 底部展示
-     * - - ratio  ： 比例跟随，按比例（target中心点/窗口高度）锚定位置，动态计算top值。
+     * 操作项移入时颜色
      */
-    followY?: FollowStrategy | FollowStrategy[];
+    hoverColor?: string;
     /**
-     * x轴方向上 target 之间的留白空间
-     * - 默认0； followX 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
-     * -
+     * 操作项图标
      */
-    spaceX?: number;
+    icon?: Pick<IconOptions, "type" | "size" | "title">;
+};
+/**
+ * 可操作向组件 插槽句柄
+ */
+type ActionSlotHandle = {
     /**
-     * y轴方向上 target 之间的留白空间
-     * - 默认0；followY 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
+     * 操作项是否激活显示
      */
-    spaceY?: number;
+    isActived(): boolean;
     /**
-     * 和 浏览器客户 端之间的留白空间
-     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
-     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
-     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
+     * 触发操作项显示
      */
-    spaceClient?: number;
+    trigger(): void;
+};
+/**
+ * 可操作项组件 的事件
+ */
+type ActionEvents = {
     /**
-     * 点击【遮罩层】时是否关闭弹窗
-     * - 则点击非【跟随组件】区域时是否关闭
+     * 操作项激活时
+     * @param code 操作项的code
      */
-    closeOnMask?: boolean;
+    trigger: [code: string];
+};
+
+/**
+ * 输入框配置选项
+ * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
+ * - 暂不提供 disabled 逻辑
+ */
+type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
     /**
-     * 按下【ESC】健时是否关闭弹窗
+     * 输入框类型
+     * - text: 文本输入框
+     * - number: 数字输入框
+     * - password: 密码输入框
      */
-    closeOnEscape?: boolean;
+    type?: "text" | "number" | "password";
     /**
-     * window窗口【resize】时是否关闭弹窗
+     * 输入框是否必填
+     * - 必填，则验证不通过时，显示错误信息
+     * - 必填时，显示必填标记，红色 * 号
      */
-    closeOnResize?: boolean;
+    required?: boolean;
     /**
-     * target改变时是否关闭弹窗
-     * - target尺寸、位置变化
-     * - target点击时
+     * 标题区域样式
+     * - 对齐方式
+     * - 标题区域宽度
      */
-    closeOnTarget?: boolean;
+    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
 };
 /**
- * 跟随策略
- * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
- */
-type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
-/**
- * 跟随弹窗 句柄
- * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
+ * 输入框事件
  */
-type FollowHandle<T> = PopupHandle<T> & {};
+type InputEvents = {
+    /**
+     * 输入框点击时
+     */
+    click: [];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
 /**
- * 跟随弹窗 扩展配置
+ * 接口：响应式管理器
  */
-type FollowExtend = PopupStatusOptions & {
+interface IReactiveManager {
     /**
-     * 跟随的目标元素
+     * 响应式【过渡】变量值
+     * - 通过设置 rv.value 的值来实现.value值过渡
+     * - 执行顺序 from、to
+     * - 开始时，设置 rv.value 值为 from；延迟time时间后，强制销毁scope
+     * - 销毁scope时，强制将 rv.value 值设置为 to 值
+     * @param rv 响应式变量对象
+     * @param effect 过渡效果配置，约束 from end 样式
+     * @param time 过渡持续时间，到时间后销毁作用域
+     * @returns 作用域对象，可销毁【值过渡】效果
      */
-    target: Element;
+    transition<T>(rv: ReactiveVar<T>, effect: {
+        from: T;
+        to: T;
+    }, time: number): IScope;
     /**
-     * x轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     * 响应式【加载】任务
+     * - 任务运行时，设置loading.value=true
+     * - 任务完成后，设置loading.value=false
+     * - 可通过delay值，延迟执行 loading.value=false 操作
+     * - 可在api请求等耗时操作任务过程中，实现响应式显隐Loading组件
+     * @param task 要运行的任务
+     * @param loading 正在加载的响应式变量
+     * @param delay 延迟时间，单位ms；不传则不延迟
+     * @returns 任务自身
      */
-    followX: ShallowRef<FollowStrategy>;
+    load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
     /**
-     * y轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     * 监听器：监听单个值变化
+     * - 内部利用vue的watch逻辑实现
+     * - 自动进行生命周期管理，作用域销毁时自动清理watch监听
+     * - 仅实现简化版本watch监听；复杂的监听逻辑，自行使用watch方法
+     * @param source 监听源
+     * @param callback 回调方法：可接收新旧值变化
+     * @param deep 是否进行深度监听；默认false
+     * @returns 监听作用域，destroy可销毁监听
      */
-    followY: ShallowRef<FollowStrategy>;
+    watcher<T>(source: WatchSource<T>, callback: (newValue: T, oldValue: T) => void, deep?: boolean): IScope;
+}
+/**
+ * 响应式变量
+ */
+type ReactiveVar<T> = ShallowRef<T> | Ref<T>;
+
+/**
+ * 开关组件 配置选项
+ */
+type SwitchOptions = ReadonlyOptions & {
     /**
-     * Follow弹窗是否【钉住】了
-     * - 为true时，closeOnMask、closeOnEscape失效
-     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
+     * 类型，决定开启/关闭状态的渲染效果
+     * - switch     开关类型，默认效果
+     * - radio      单选框效果，圆角边框
+     * - checkbox   复选框效果，矩形边框
      */
-    pinned: ShallowRef<boolean>;
+    type?: "switch" | "radio" | "checkbox";
 };
 /**
- * 跟随策略 配置选项
+ * 开关 事件
  */
-type FollowStrategyOptions = {
-    /**
-     * x轴的跟随策略
-     */
-    followX?: FollowStrategy;
+type SwitchEvents = {
     /**
-     * x轴的跟随策略
+     * 开关 状态变化时
+     * @param value 开启、还是关闭
      */
-    followY?: FollowStrategy;
+    change: [value: boolean];
 };
+
 /**
- * 跟随选举结果
+ * 多行文本框组件配置选项
  */
-type FollowElectResult = {
+type TextareaOptions = ReadonlyOptions & PlaceholderOptions & {
     /**
-     * 跟随策略
+     * 是否自适应高度
+     * - 传入true时，根据文本框内容，自动调整高度
+     * - 若传入maxRows，则自动高度不会超过maxRows
      */
-    strategy: FollowStrategy;
+    autoHeight: boolean;
     /**
-     * 开始位置：x/top
+     * 最小行数
+     * - 作为默认行数
+     * - 不传入则默认4
      */
-    start: number;
+    minRows?: number;
     /**
-     * 调整后的尺寸（width/height)
-     * - 为undefined表示无需调整尺寸
+     * 最大行数
+     * - 不传入则默认10
+     * - `autoHeight`为true时生效；
      */
-    size?: number;
+    maxRows?: number;
 };
-
 /**
- * 弹窗管理器
+ * 多行文本框组件事件
  */
-interface IPopupManager {
-    /**
-     * 弹出
-     * - 弹窗位置位置、大小、动画效果等由组件自己完成
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param options 弹窗配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
-     */
-    popup<T, Props = void, Model = void>(options: PopupOptions<Props, Model>): IAsyncScope<T>;
+type TextareaEvents = {
     /**
-     * 对话框
-     * - 支持指定模态和非模态对话框
-     * - 默认垂直水平居中展示
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param options 弹窗配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
+     * 获取焦点时
      */
-    dialog<T, Props = void, Model = void>(options: DialogOptions<Props, Model>): IAsyncScope<T>;
+    focus: [];
     /**
-     * 跟随弹窗
-     * - 跟随指定的target对象，可跟随位置、大小
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param target 跟随的目标元素
-     * @param options 跟随配置选项
-     * @returns 弹窗异步作用域，外部可手动关闭弹窗
+     * 输入时
+     * @param value 输入框内容
      */
-    follow<T, Props = void, Model = void>(target: HTMLElement, options: FollowOptions<Props, Model>): IAsyncScope<T>;
+    input: [value: string];
     /**
-     * 打开【确认】弹窗
-     * @param title  弹窗标题
-     * @param message 确认提示信息，支持html片段
-     * @param options 确认弹窗其他配置信息
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
+     * 失焦时
+     * @param value 输入框内容
      */
-    confirm(title: string, message: string, options?: Omit<ConfirmOptions, "title" | "message">): IAsyncScope<boolean>;
+    blur: [value: string];
     /**
-     * Toast 提示框
-     * @param type 提示类型：成功、失败、、、
-     * @param message 提示消息
-     * @param options 提示框配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
+     * 输入框内容发生改变时
+     * @param value 输入框内容
      */
-    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
-}
+    change: [value: string];
+};
 
 /**
- * 选择器 相关数据实体
+ * 使用【响应式管理器】
+ * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
+ * @returns 全新的【响应式管理器】+作用域
  */
+declare function useReactive(): IReactiveManager & IScope;
 
 /**
- * 接口：选择器管理器
+ * 树的基础组件信息
+ *  1、组件基础上下文 默认实现
  */
-interface IPickerManager {
-    /**
-    * 显示【日期】选择器
-    * @param target 哪个元素触发，基于此元素计算位置
-    * @param options 日期选择器配置选项
-    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
-    * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
-    */
-    showDate(target: HTMLElement, options?: DatePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
-    /**
-     * 显示【时间】选择控件
-     * @param target 哪个元素触发，基于此元素计算位置
-     * @param options 时间选择控件配置选项
-    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
-     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
-     */
-    showTime(target: HTMLElement, options?: TimePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
-}
+
 /**
- * 选择器弹窗配置选项
- * - 放开一些属性，方便用户做一些自定义
+ * 使用【树上下文】
+ * @param nodes 树节点集合
+ * @param activeNodeRef 当前激活的树节点引用；不传入，则无法实现 isActived 判断
+ * @returns 上下文对象+作用域
  */
-type PickerPopupOptions = FollowPositionOptions;
+declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[], activeNodeRef?: ShallowRef<TreeNode<T, TreeNodeExtend>>): ITreeBaseContext<T> & IScope;
+
 /**
- * 选择器扩展
+ * Vue App助手类，做一些app实例的辅助性工作
  */
-type PickerExtend = {
-    /**
-     * 弹窗管理器
-     * - 方便下级再弹窗，公用一个管理器，方便生命周期管理
-     */
-    popup: IPopupManager;
-    /**
-     * 选择器对象，方便内部在弹出选择
-     * - 如日期选择器中，在选择时间
-     */
-    picker: IPickerManager;
-};
+
+/** 私有类型：App类型
+ * - normal 普通app实例
+ * - popup  弹窗app实例；包括 Dialog、Follow等所有弹窗
+*/
+type AppType = "normal" | "popup";
+/**
+ * app实例创建完之后的回调通知
+ * @param fn 回调通知
+ * @returns 通知句柄，可销毁回调通知，一般在外部销毁时执行
+ */
+declare function onAppCreated(fn: (app: App, type?: AppType) => void): IScope;
+/**
+ * 触发app创建后事件
+ * @param app 创建的app实例
+ * @param type app创建类型；满足区分特定app实例使用
+ * @returns app自身
+ */
+declare function triggerAppCreated(app: App, type?: AppType): App;
 
 /**
- * 使用选择器
- * @returns 选择器实例+作用域对象
+ * 图标助手类
  */
-declare function usePicker(): IPickerManager & IScope;
 
 /**
- * 使用【弹窗管理器】
- * @returns 全新的【弹窗管理器】实例+作用域对象
+ * 获取内置图标绘制路径
+ * @param iconType 图标类型
+ * @returns 图标路径
  */
-declare function usePopup(): IPopupManager & IScope;
+declare function getBuiltinIcon(iconType: IconType): string[];
+
+/**
+ * 动态加载组件 组件配置选项
+ */
+type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions<Props>, "props">;
+
+/**
+ * 挂载指定的Vue组件
+ * - 权限构建的vue app实例，挂载传入的组件
+ * @param target 挂载的目标元素
+ * @param options 挂载配置选项
+ * @param onDestroyed  监听【调用方】的销毁时机，用于自动销毁挂载的实力
+ * @returns 作用域对象，销毁挂载实例
+ */
+declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
+
+/**
+ * 运动组件的助手方法变量
+ */
+/**
+ * 运行效果常量
+ */
+declare const MOTION: Readonly<{
+    /** 淡入淡出；进入时 `opacity:0~1`；退出时 `opacity:1~0`*/
+    fade: {
+        enter: string;
+        leave: string;
+    };
+    /** 缩放进入：进入时 `scale:0~1`；退出时 `scale:1~0`*/
+    scale: {
+        enter: string;
+        leave: string;
+    };
+    /** 旋转：进入时 `rotate:360deg~0`；退出时 `rotate:0~360deg`*/
+    rotate: {
+        enter: string;
+        leave: string;
+    };
+    /** 顶部进入退出：进入时`translateY:-100%~0`；退出时`translateY:0~-100%`*/
+    top: {
+        enter: string;
+        leave: string;
+    };
+    /** 顶部进入底部退出：进入时`translateY:-100%~0`；退出时`translateY:0~100%`*/
+    topBottom: {
+        enter: string;
+        leave: string;
+    };
+    /** 底部进入退出：进入时`translateY:100%~0`；退出时`translateY:0~100%`*/
+    bottom: {
+        enter: string;
+        leave: string;
+    };
+    /** 底部进入顶部退出：进入时`translateY:100%~0`；退出时`translateY:0~-100%`*/
+    bottomTop: {
+        enter: string;
+        leave: string;
+    };
+    /** 左侧进入退出：进入时`translateX:-100%~0`；退出时`translateX:0~-100%`*/
+    left: {
+        enter: string;
+        leave: string;
+    };
+    /** 左侧进入右侧退出：进入时`translateX:-100%~0`；退出时`translateX:0~100%`*/
+    leftRight: {
+        enter: string;
+        leave: string;
+    };
+    /** 右侧进入右侧退出：进入时`translateX:100%~0`；退出时`translateX:0~100%`*/
+    right: {
+        enter: string;
+        leave: string;
+    };
+    /** 右侧进入左侧退出：进入时`translateX:100%~0`；退出时`translateX:0~-100%`*/
+    rightLeft: {
+        enter: string;
+        leave: string;
+    };
+}>;
+
+/**
+ * 使用选择器
+ * @returns 选择器实例+作用域对象
+ */
+declare function usePicker(): IPickerManager & IScope;
 
 declare const components: {
     Action: {
@@ -2893,18 +2936,28 @@ declare const components: {
         };
     });
     Button: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<ButtonOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<ButtonOptions> & Readonly<{
+        onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -2994,18 +3047,28 @@ declare const components: {
         };
     });
     Icon: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<IconOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<IconOptions> & Readonly<{
+        onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -3017,8 +3080,8 @@ declare const components: {
     } & {
         modelValue?: string;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        change: (value: string) => any;
         click: () => any;
+        change: (value: string) => any;
         "update:modelValue": (value: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
         type?: "text" | "number" | "password";
@@ -3027,8 +3090,8 @@ declare const components: {
     } & {
         modelValue?: string;
     }> & Readonly<{
-        onChange?: (value: string) => any;
         onClick?: () => any;
+        onChange?: (value: string) => any;
         "onUpdate:modelValue"?: (value: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Number: vue.DefineComponent<PlaceholderOptions & ReadonlyOptions & NumberBaseOptions & {
@@ -3637,35 +3700,47 @@ declare const components: {
     DatePicker: vue.DefineComponent<ReadonlyOptions & {
         value?: string;
         format?: snail_core.DateFormat;
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
         minPickTime?: string;
         maxPickTime?: string;
-    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (newValue: string, oldValue?: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         value?: string;
         format?: snail_core.DateFormat;
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
         minPickTime?: string;
         maxPickTime?: string;
-    } & DatetimeDisabledOptions> & Readonly<{
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }> & Readonly<{
         onChange?: (newValue: string, oldValue?: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     TimePicker: vue.DefineComponent<ReadonlyOptions & {
         value?: string;
         format?: "HH:mm:ss" | "HH:mm";
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
-    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (newValue: string, oldValue?: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         value?: string;
         format?: "HH:mm:ss" | "HH:mm";
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
-    } & DatetimeDisabledOptions> & Readonly<{
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }> & Readonly<{
         onChange?: (newValue: string, oldValue?: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     DragVerify: vue.DefineComponent<DragVerifyOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {