snail.vue 2.0.27 → 2.0.28

package/dist/snail.vue.d.ts

@@ -1881,6 +1881,18 @@ type IconOptions = TitleOptions & {
      * - 不传入，默认1
      */
     opacity?: number;
+    /**
+     * 图标边样式
+     */
+    border?: string;
+    /**
+     * 图标圆角样式
+     */
+    radius?: string;
+    /**
+     * 图标背景样式
+     */
+    background?: string;
     /**
      * 图形伸展
      * - svg.viewBox 属性
@@ -1900,6 +1912,7 @@ type IconOptions = TitleOptions & {
  * - - download     下载
  * - - print        打印
  * - - edit         编辑
+ * - - pause        暂停，两道竖线
  * - 指向类：
  * - - arrow        向右箭头
  * - - datepicker   日期选择器
@@ -1910,7 +1923,7 @@ type IconOptions = TitleOptions & {
  * - - more         更多，默认垂直三个点
  * - - grip         紧握图标，垂直方向，一般用于拖动句柄
  */
-type IconType = "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" | "pause" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "more" | "grip";
 
 /**
  * 检查选项 数据结构
@@ -2007,220 +2020,493 @@ type ButtonOptions = TitleOptions & {
 };
 
 /**
- * 可操作项组件 的配置选项
- * - disabled 为true时，不响应操作项触发
- */
-type ActionOptions = DisabledOptions & {
-    /**
-     * 触发方式
-     *  - always ：始终显示一个触发图标，点击图标弹出操作项
-     *  - hover：鼠标移入显示一个触发图标，点击图标弹出操作项
-     *  - long-press：长摁直接弹出操作项
-     */
-    trigger: "always" | "hover" | "long-press";
-    /**
-     * 显示模式
-     * - popup：弹出显示操作项
-     * - inline：内联显示操作项
-     */
-    /**
-     * 可用操作项
-     */
-    actions: ActionItem[];
-};
-/**
- * 操作项集合 组件渲染配置选项
+ * 公共通用数据结构：
+ *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
  */
-type ActionItemsOptions = {
-    /**
-     * 展示模式
-     * - horizontal 水平展示
-     * - vertical   垂直展示
-     */
-    mode: "horizontal" | "vertical";
-    /**
-     * 要渲染的操作项
-     */
-    actions: ActionItem[];
-};
+
 /**
- * 一个操作项的配置
+ * 弹窗配置选项
+ * - 约束弹出组件信息
+ * - 弹出组件时传递的参数信息
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type ActionItem = {
+type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
     /**
-     * 操作项编码
-     * - 确保唯一
+     * 弹窗动画名
+     * - 不传则默认“fade”
+     * - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
+     * - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
      */
-    code: string;
+    transition?: string;
     /**
-     * 操作项名称
-     * - 确保唯一
+     * 动画持续时间
+     * - 配合 transition 使用；单位ms，默认500ms
+     * - 外部传入自定义动画时，传入动画持续时间，否则可能导致关闭时动画失效
      */
-    name: string;
+    transitionDuration?: number;
     /**
-     * 操作项颜色
+     * 自定义class
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    class?: string | string[];
      */
-    color?: string;
     /**
-     * 操作项移入时颜色
+     * 自定义style
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    style?: AllStyle;
      */
-    hoverColor?: string;
     /**
-     * 操作项图标
+     * 弹窗的z-index值
+     * - 无特殊情况，建议不指定，内部会自动生成，确保弹窗正确性
      */
-    icon?: Pick<IconOptions, "type" | "size" | "title">;
+    zIndex?: number;
 };
 /**
- * 可操作向组件 插槽句柄
+ * 弹出组件句柄
  */
-type ActionSlotHandle = {
+type PopupHandle<T> = {
     /**
-     * 操作项是否激活显示
+     * 组件是否在【弹出窗口】中
+     * - popup  ：  普通弹出弹窗
+     * - dialog ：  模态对话弹窗
+     * - follow ：  跟随效果弹窗
      */
-    isActived(): boolean;
+    inPopup: Readonly<"popup" | "dialog" | "follow">;
     /**
-     * 触发操作项显示
+     * 关闭弹窗
+     * @param data 关闭时传递数据
      */
-    trigger(): void;
+    closePopup(data?: T): void;
 };
 /**
- * 可操作项组件 的事件
+ * 弹窗状态：响应式
+ * - open       打开
+ * - active     激活，针对Dialog弹窗生效
+ * - unactive   非激活，针对Dialog弹窗生效
+ * - closed     关闭
  */
-type ActionEvents = {
-    /**
-     * 操作项激活时
-     * @param code 操作项的code
-     */
-    trigger: [code: string];
-};
-
+type PopupStatus = ShallowRef<"open" | "active" | "unactive" | "closed">;
 /**
- * 输入框配置选项
- * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
- * - 暂不提供 disabled 逻辑
+ * 弹窗状态 配置选项
  */
-type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
-    /**
-     * 输入框类型
-     * - text: 文本输入框
-     * - number: 数字输入框
-     * - password: 密码输入框
-     */
-    type?: "text" | "number" | "password";
-    /**
-     * 输入框是否必填
-     * - 必填，则验证不通过时，显示错误信息
-     * - 必填时，显示必填标记，红色 * 号
-     */
-    required?: boolean;
+type PopupStatusOptions = {
     /**
-     * 标题区域样式
-     * - 对齐方式
-     * - 标题区域宽度
+     * 弹窗状态：响应式
      */
-    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
+    popupStatus: PopupStatus;
 };
 /**
- * 输入框事件
+ * 弹窗对象描述器
+ * - 给弹窗容器使用，传递过去作为props使用
  */
-type InputEvents = {
+type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOptions & {
     /**
-     * 输入框点击时
+     * 弹窗Id
+     * - 自动分配，全局唯一
      */
-    click: [];
+    popupId: string;
     /**
-     * 输入框内容发生改变时
-     * @param value 输入框内容
+     * 弹窗配置选项
+     * - 由外部传递过来的业务数据配置信息
+     * - 约束具体弹窗的业务组件和业务组件所需props等数据
      */
-    change: [value: string];
-};
-
-/**
- * 接口：响应式管理器
- */
-interface IReactiveManager {
+    options: Options;
     /**
-     * 响应式【过渡】变量值
-     * - 通过设置 rv.value 的值来实现.value值过渡
-     * - 执行顺序 from、to
-     * - 开始时，设置 rv.value 值为 from；延迟time时间后，强制销毁scope
-     * - 销毁scope时，强制将 rv.value 值设置为 to 值
-     * @param rv 响应式变量对象
-     * @param effect 过渡效果配置，约束 from end 样式
-     * @param time 过渡持续时间，到时间后销毁作用域
-     * @returns 作用域对象，可销毁【值过渡】效果
+     * 弹窗扩展配置选项
+     * - 由 popup、follow等方法内部组件：如关闭弹窗方法、钩子函数等
+     * - 配合业务组件使用的一些配置数据
      */
-    transition<T>(rv: ReactiveVar<T>, effect: {
-        from: T;
-        to: T;
-    }, time: number): IScope;
+    extOptions: ExtOptions;
     /**
-     * 响应式【加载】任务
-     * - 任务运行时，设置loading.value=true
-     * - 任务完成后，设置loading.value=false
-     * - 可通过delay值，延迟执行 loading.value=false 操作
-     * - 可在api请求等耗时操作任务过程中，实现响应式显隐Loading组件
-     * @param task 要运行的任务
-     * @param loading 正在加载的响应式变量
-     * @param delay 延迟时间，单位ms；不传则不延迟
-     * @returns 任务自身
+     * 实际分配的zIndex值
      */
-    load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
+    zIndex: number;
     /**
-     * 监听器：监听单个值变化
-     * - 内部利用vue的watch逻辑实现
-     * - 自动进行生命周期管理，作用域销毁时自动清理watch监听
-     * - 仅实现简化版本watch监听；复杂的监听逻辑，自行使用watch方法
-     * @param source 监听源
-     * @param callback 回调方法：可接收新旧值变化
-     * @param deep 是否进行深度监听；默认false
-     * @returns 监听作用域，destroy可销毁监听
+     * 弹窗动画名
+     * - 约束打开、关闭动画；基于 PopupOptions.transition 构建出来的
+     * - 具体使用方，将此值绑定的根元素上
      */
-    watcher<T>(source: WatchSource<T>, callback: (newValue: T, oldValue: T) => void, deep?: boolean): IScope;
-}
+    popupTransition: ShallowRef<string>;
+};
+
 /**
- * 响应式变量
+ * 跟随效果 弹窗
  */
-type ReactiveVar<T> = ShallowRef<T> | Ref<T>;
 
 /**
- * 开关组件 配置选项
+ * 跟随弹窗 配置选项
+ * - 传入的组件，根据配置跟随 target 位置和大小；
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type SwitchOptions = ReadonlyOptions & {
-    /**
-     * 类型，决定开启/关闭状态的渲染效果
-     * - switch     开关类型，默认效果
-     * - radio      单选框效果，圆角边框
-     * - checkbox   复选框效果，矩形边框
-     */
-    type?: "switch" | "radio" | "checkbox";
-};
+type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
 /**
- * 开关 事件
+ * 跟随位置 配置选项
+ * - 基于此计算出最终的跟随效果
  */
-type SwitchEvents = {
+type FollowPositionOptions = {
     /**
-     * 开关 状态变化时
-     * @param value 开启、还是关闭
+     * 启用【宽度】跟随
+     * - 为true则和 target 宽度保持一致
+     * - false时，宽度由 弹出组件 自己维护
+     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
      */
-    change: [value: boolean];
-};
-
-/**
- * 多行文本框组件配置选项
- */
-type TextareaOptions = ReadonlyOptions & PlaceholderOptions & {
+    followWidth?: boolean;
     /**
-     * 是否自适应高度
-     * - 传入true时，根据文本框内容，自动调整高度
-     * - 若传入maxRows，则自动高度不会超过maxRows
+     * 启用【高度】跟随
+     * - 为true则和 target 高度保持一致
+     * - false时，高度由 弹出组件 自己维护
+     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
      */
-    autoHeight: boolean;
+    followHeight?: boolean;
     /**
-     * 最小行数
-     * - 作为默认行数
-     * - 不传入则默认4
-     */
+     * 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[];
+    /**
+     * 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[];
+    /**
+     * x轴方向上 target 之间的留白空间
+     * - 默认0； followX 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
+     * -
+     */
+    spaceX?: number;
+    /**
+     * y轴方向上 target 之间的留白空间
+     * - 默认0；followY 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
+     */
+    spaceY?: number;
+    /**
+     * 和 浏览器客户 端之间的留白空间
+     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
+     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
+     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
+     */
+    spaceClient?: number;
+    /**
+     * 点击【遮罩层】时是否关闭弹窗
+     * - 则点击非【跟随组件】区域时是否关闭
+     */
+    closeOnMask?: boolean;
+    /**
+     * 按下【ESC】健时是否关闭弹窗
+     */
+    closeOnEscape?: boolean;
+    /**
+     * window窗口【resize】时是否关闭弹窗
+     */
+    closeOnResize?: boolean;
+    /**
+     * target改变时是否关闭弹窗
+     * - target尺寸、位置变化
+     * - target点击时
+     */
+    closeOnTarget?: boolean;
+};
+/**
+ * 跟随策略
+ * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
+ */
+type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
+/**
+ * 跟随弹窗 句柄
+ * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
+ */
+type FollowHandle<T> = PopupHandle<T> & {};
+/**
+ * 跟随弹窗 扩展配置
+ */
+type FollowExtend = PopupStatusOptions & {
+    /**
+     * 跟随的目标元素
+     */
+    target: Element;
+    /**
+     * x轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     */
+    followX: ShallowRef<FollowStrategy>;
+    /**
+     * y轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     */
+    followY: ShallowRef<FollowStrategy>;
+    /**
+     * Follow弹窗是否【钉住】了
+     * - 为true时，closeOnMask、closeOnEscape失效
+     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
+     */
+    pinned: ShallowRef<boolean>;
+};
+/**
+ * 跟随策略 配置选项
+ */
+type FollowStrategyOptions = {
+    /**
+     * x轴的跟随策略
+     */
+    followX?: FollowStrategy;
+    /**
+     * x轴的跟随策略
+     */
+    followY?: FollowStrategy;
+};
+/**
+ * 跟随选举结果
+ */
+type FollowElectResult = {
+    /**
+     * 跟随策略
+     */
+    strategy: FollowStrategy;
+    /**
+     * 开始位置：x/top
+     */
+    start: number;
+    /**
+     * 调整后的尺寸（width/height)
+     * - 为undefined表示无需调整尺寸
+     */
+    size?: number;
+};
+
+/**
+ * 可操作项组件 的配置选项
+ * - disabled 为true时，不响应操作项触发
+ */
+type ActionOptions = DisabledOptions & {
+    /**
+     * 触发方式
+     *  - always ：始终显示一个触发图标，点击图标弹出操作项
+     *  - hover：鼠标移入显示一个触发图标，点击图标弹出操作项
+     *  - long-press：长摁直接弹出操作项
+     */
+    trigger: "always" | "hover" | "long-press";
+    /**
+     * 显示模式
+     * - popup：弹出显示操作项
+     * - inline：内联显示操作项
+     */
+    /**
+     * 可用操作项
+     */
+    actions: ActionItem[];
+} & Pick<FollowPositionOptions, "followX" | "followY" | "spaceX" | "spaceY">;
+/**
+ * 操作项集合 组件渲染配置选项
+ */
+type ActionItemsOptions = {
+    /**
+     * 展示模式
+     * - horizontal 水平展示
+     * - vertical   垂直展示
+     */
+    mode: "horizontal" | "vertical";
+    /**
+     * 要渲染的操作项
+     */
+    actions: ActionItem[];
+};
+/**
+ * 一个操作项的配置
+ */
+type ActionItem = {
+    /**
+     * 操作项编码
+     * - 确保唯一
+     */
+    code: string;
+    /**
+     * 操作项名称
+     * - 确保唯一
+     */
+    name: string;
+    /**
+     * 操作项颜色
+     */
+    color?: string;
+    /**
+     * 操作项移入时颜色
+     */
+    hoverColor?: string;
+    /**
+     * 操作项图标
+     */
+    icon?: Pick<IconOptions, "type" | "size" | "title">;
+};
+/**
+ * 可操作向组件 插槽句柄
+ */
+type ActionSlotHandle = {
+    /**
+     * 操作项是否激活显示
+     */
+    isActived(): boolean;
+    /**
+     * 触发操作项显示
+     */
+    trigger(): void;
+};
+/**
+ * 可操作项组件 的事件
+ */
+type ActionEvents = {
+    /**
+     * 操作项激活时
+     * @param code 操作项的code
+     */
+    trigger: [code: string];
+};
+
+/**
+ * 输入框配置选项
+ * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
+ * - 暂不提供 disabled 逻辑
+ */
+type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
+    /**
+     * 输入框类型
+     * - text: 文本输入框
+     * - number: 数字输入框
+     * - password: 密码输入框
+     */
+    type?: "text" | "number" | "password";
+    /**
+     * 输入框是否必填
+     * - 必填，则验证不通过时，显示错误信息
+     * - 必填时，显示必填标记，红色 * 号
+     */
+    required?: boolean;
+    /**
+     * 标题区域样式
+     * - 对齐方式
+     * - 标题区域宽度
+     */
+    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
+};
+/**
+ * 输入框事件
+ */
+type InputEvents = {
+    /**
+     * 输入框点击时
+     */
+    click: [];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
+/**
+ * 接口：响应式管理器
+ */
+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;
+    /**
+     * 响应式【加载】任务
+     * - 任务运行时，设置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>>;
+    /**
+     * 监听器：监听单个值变化
+     * - 内部利用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 & {
+    /**
+     * 类型，决定开启/关闭状态的渲染效果
+     * - switch     开关类型，默认效果
+     * - radio      单选框效果，圆角边框
+     * - checkbox   复选框效果，矩形边框
+     */
+    type?: "switch" | "radio" | "checkbox";
+};
+/**
+ * 开关 事件
+ */
+type SwitchEvents = {
+    /**
+     * 开关 状态变化时
+     * @param value 开启、还是关闭
+     */
+    change: [value: boolean];
+};
+
+/**
+ * 多行文本框组件配置选项
+ */
+type TextareaOptions = ReadonlyOptions & PlaceholderOptions & {
+    /**
+     * 是否自适应高度
+     * - 传入true时，根据文本框内容，自动调整高度
+     * - 若传入maxRows，则自动高度不会超过maxRows
+     */
+    autoHeight: boolean;
+    /**
+     * 最小行数
+     * - 作为默认行数
+     * - 不传入则默认4
+     */
     minRows?: number;
     /**
      * 最大行数
@@ -2321,182 +2607,71 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
  * @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;
-    };
-}>;
-
-/**
- * 公共通用数据结构：
- *  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;
-};
+declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
+
 /**
- * 弹窗对象描述器
- * - 给弹窗容器使用，传递过去作为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>;
-};
+/**
+ * 运行效果常量
+ */
+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;
+    };
+}>;
 
 /**
  * 模态弹窗数据结构
@@ -2588,168 +2763,6 @@ type ToastOptions = {
     closeDisabled?: boolean;
 };
 
-/**
- * 跟随效果 弹窗
- */
-
-/**
- * 跟随弹窗 配置选项
- * - 传入的组件，根据配置跟随 target 位置和大小；
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
- */
-type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
-/**
- * 跟随位置 配置选项
- * - 基于此计算出最终的跟随效果
- */
-type FollowPositionOptions = {
-    /**
-     * 启用【宽度】跟随
-     * - 为true则和 target 宽度保持一致
-     * - false时，宽度由 弹出组件 自己维护
-     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
-     */
-    followWidth?: boolean;
-    /**
-     * 启用【高度】跟随
-     * - 为true则和 target 高度保持一致
-     * - false时，高度由 弹出组件 自己维护
-     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
-     */
-    followHeight?: boolean;
-    /**
-     * 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[];
-    /**
-     * 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[];
-    /**
-     * x轴方向上 target 之间的留白空间
-     * - 默认0； followX 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
-     * -
-     */
-    spaceX?: number;
-    /**
-     * y轴方向上 target 之间的留白空间
-     * - 默认0；followY 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
-     */
-    spaceY?: number;
-    /**
-     * 和 浏览器客户 端之间的留白空间
-     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
-     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
-     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
-     */
-    spaceClient?: number;
-    /**
-     * 点击【遮罩层】时是否关闭弹窗
-     * - 则点击非【跟随组件】区域时是否关闭
-     */
-    closeOnMask?: boolean;
-    /**
-     * 按下【ESC】健时是否关闭弹窗
-     */
-    closeOnEscape?: boolean;
-    /**
-     * window窗口【resize】时是否关闭弹窗
-     */
-    closeOnResize?: boolean;
-    /**
-     * target改变时是否关闭弹窗
-     * - target尺寸、位置变化
-     * - target点击时
-     */
-    closeOnTarget?: boolean;
-};
-/**
- * 跟随策略
- * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
- */
-type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
-/**
- * 跟随弹窗 句柄
- * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
- */
-type FollowHandle<T> = PopupHandle<T> & {};
-/**
- * 跟随弹窗 扩展配置
- */
-type FollowExtend = PopupStatusOptions & {
-    /**
-     * 跟随的目标元素
-     */
-    target: Element;
-    /**
-     * x轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
-     */
-    followX: ShallowRef<FollowStrategy>;
-    /**
-     * y轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
-     */
-    followY: ShallowRef<FollowStrategy>;
-    /**
-     * Follow弹窗是否【钉住】了
-     * - 为true时，closeOnMask、closeOnEscape失效
-     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
-     */
-    pinned: ShallowRef<boolean>;
-};
-/**
- * 跟随策略 配置选项
- */
-type FollowStrategyOptions = {
-    /**
-     * x轴的跟随策略
-     */
-    followX?: FollowStrategy;
-    /**
-     * x轴的跟随策略
-     */
-    followY?: FollowStrategy;
-};
-/**
- * 跟随选举结果
- */
-type FollowElectResult = {
-    /**
-     * 跟随策略
-     */
-    strategy: FollowStrategy;
-    /**
-     * 开始位置：x/top
-     */
-    start: number;
-    /**
-     * 调整后的尺寸（width/height)
-     * - 为undefined表示无需调整尺寸
-     */
-    size?: number;
-};
-
 /**
  * 弹窗管理器
  */