snail.vue 2.0.12 → 2.0.15

package/dist/snail.vue.d.ts

@@ -1,8 +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 { BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
-import { IScope, RunResult, DateFormat, DateValue, TimeValue, IAsyncScope } from 'snail.core';
 
 /**
  * loading提示框的配置选项
@@ -177,6 +178,141 @@ type DragVerifyInfo = {
     distance: number;
 };
 
+/**
+ * 日期时间的功能禁用配置选项
+ */
+type DatetimeDisabledOptions = {
+    /**
+     * 禁用【工具条】
+     * - 为true则不显示【确定】、【现在】等按钮的工具条区域
+     */
+    toolbarDisabled?: boolean;
+    /**
+     * 禁用【现在】按钮
+     * - 为true时不显示【现在】按钮
+     */
+    nowDisabled?: boolean;
+    /**
+     * 禁用【清空】按钮
+     * - 为true时不显示【清空】按钮
+     */
+    clearDisabled?: boolean;
+};
+/**
+ * 日期选择器 配置选项
+ */
+type DatePickerOptions = {
+    /**
+     * 已选日期值
+     * -格式为 "年-月-日 时:分:秒"
+     */
+    value?: string;
+    /**
+     * 日期格式
+     * - 默认 “yyyy-MM-dd"
+     */
+    format?: DateFormat;
+    /**
+     * 日期最小值
+     * - 选择年月日时，早于此值的年月日不可选
+     * - 确定时，组合时间选取值，晚于此值的日期+时间选择值无效
+     */
+    min?: string;
+    /**
+     * 日期最大值
+     * - 选择年月日时，晚于此值的年月日不可选
+     * - 组合时间选取值，晚于此值的日期+时间选择值无效
+     */
+    max?: string;
+    /**
+     * 最小选择时间
+     * - 早于此值的时间不可选
+     * - 不参与日期最小值验证，仅在选择时间时框定起始时间
+     */
+    minPickTime?: string;
+    /**
+     * 最大选择时间
+     * - 不参与日期最大值验证，仅在选择时间时框定结束时间
+     */
+    maxPickTime?: string;
+} & DatetimeDisabledOptions;
+/**
+ * 时间选择控件配置项
+ */
+type TimePickerOptions = {
+    /**
+     * 已选值
+     * - 格式为 “时:分:秒"
+     */
+    value?: string;
+    /**
+     * 时间格式
+     */
+    format?: "HH:mm:ss" | "HH:mm";
+    /**
+     * 最小时间
+     * - 传入值格式为 "时:分:秒"
+     * - 如 "08:30:00"，则08:30:00为最小时间，之前的时间不可选择
+     * - 如 "08" ，则 08:00:00为最小时间，之前的时间不可选择
+     */
+    min?: string;
+    /**
+     * 最大时间
+     * - 传入值格式为 "时:分:秒"
+     * - 如 "08:30:00"，则08:30:00为最大时间，之后的时间不可选择
+     * - 如 "08" ，则 08:00:00为最大时间，之后时间不可选择
+     */
+    max?: string;
+} & DatetimeDisabledOptions;
+/**
+ * 日期时间选择 事件
+ */
+type DatetimePickerEvents = {
+    /**
+     * 清空
+     */
+    clear: [];
+    /**
+     * 确定选择
+     * - @param value 已选则的日期时间
+     */
+    confirm: [value: string];
+};
+/**
+ * 日期选择器 一个年项
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type DatePickerYearItem = Required<Pick<DateValue, "year"> & DisabledOptions>;
+/**
+ * 日期选择器 一个月项
+ * - 当前月，以及所属的年份
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type DatePickerMonthItem = Required<Pick<DateValue, "month" | "year"> & DisabledOptions & {
+    text: string;
+}>;
+/**
+ * 日期选择器的一个天项
+ * - 当前天，以及所属的月份和年份
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type DatePickerDayItem = Required<Pick<DateValue, "day" | "month" | "year"> & DisabledOptions>;
+/**
+ * 时间选择器 一个小时项
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type TimePickerHourItem = Required<Pick<TimeValue, "hour"> & DisabledOptions>;
+/**
+ * 时间选择器 一个分钟项
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type TimePickerMinuteItem = Required<Pick<TimeValue, "minute" | "hour"> & DisabledOptions>;
+/**
+ * 时间选择器 一个秒项
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
+ */
+type TimePickerSecondItem = Required<TimeValue & DisabledOptions>;
+
 /**
  * 头部配置选项
  * - title          将作为头部标题，无则不展示标题区域
@@ -645,60 +781,6 @@ type TreeNodeSlotOptions<Node> = {
     toggle(): void;
 };
 
-/**
- * Vue 动画容器组件配置选项
- */
-type TransitionOptions = {
-    /**
-     * 是分组动画，还是单个动画
-     * - true 则使用  TransitionGroup
-     * - false 则使用   Transition
-     */
-    group: boolean;
-    /**
-     * 动画持续时间
-     * - 单位ms，默认200ms
-     */
-    duration?: number;
-    /**
-     * 动画的自定义类样式名称
-     * - 默认为 `snail-transition`；不会作为 Transition的 name 属性名
-     * - 动画生效时组成的`class`规则为：`customClass`+动画状态；类似`snail-transition enter-from`
-     * - 动画状态可选值：
-     *  |-------------------|----------------------|
-     *  |   --              |--                    |
-     *  |   enter-active    | 进入动画的生效状态    |
-     *  |   enter-from      | 进入动画的起始状态    |
-     *  |   enter-to        | 进入动画的结束状态    |
-     *  |   leave-active    | 离开动画的生效状态    |
-     *  |   leave-from      | 离开动画的起始状态    |
-     *  |   leave-to        | 离开动画的结束状态    |
-     *
-     */
-    customClass?: string;
-    /**
-     * 动画效果
-     * - 配合 `customClass` 使用，用于标记动画的具体实现
-     * - 作为默认动画效果，组装出来的动画效果类似 `snail-transition fade enter-from`
-     * - 效果可选值；默认值 fade
-     *  |----------------|-------------|----------------------------------|---------------------------------|
-     *  |   --           |--           |--                                |--                               |
-     *  |   `fade`       | 淡入淡出     | 进入时 `opacity` 0-1             | 离开时 `opacity` 1 - 0           |
-     *  |   `scale`      | 缩放动画     | 进入时 `scale` 0-1               | 离开时 `scale` 0 - 1             |
-     *  |   `rotate`     | 旋转动画     | 进入时 `rotate` 360deg - 0       | 离开时 `rotate` 0 - 360deg       |
-     *  |   `up`         | 上进上出     | 进入时 `translateY` 100% - 0     | 离开时 `translateY` 0 - -100%    |
-     *  |   `down`       | 下进下出     | 进入时 `translateY` -100% - 0    | 离开时 `translateY` 0 - 100%     |
-     *  |   `up-down`    | 上进下出     | 进入时 `translateY` 100% - 0     | 离开时 `translateY` 0 - 100%     |
-     *  |   `down-up`    | 下进上出     | 进入时 `translateY` -100% - 0    | 离开时 `translateY` 0 - -100%    |
-     *  |   `left`       | 左进左出     | 进入时 `translateX` -100% - 0    | 离开时 `translateX` 0 - -100%    |
-     *  |   `right`      | 右进右出     | 进入时 `translateX` 100% - 0     | 离开时 `translateX` 0 - 100%     |
-     *  |   `left-right` | 左进右出     | 进入时 `translateX` -100% - 0    | 离开时 `translateX` 0 - 100%     |
-     *  |   `right-left` | 右进左出     | 进入时 `translateX` 100% - 0     | 离开时 `translateX` 0 - -100%    |
-     */
-    effect?: TransitionEffectOptions | Array<TransitionEffectOptions>;
-};
-type TransitionEffectOptions = "fade" | "scale" | "rotate" | "up" | "down" | "up-down" | "down-up" | "left" | "right" | "left-right" | "right-left";
-
 /**
  * Table配置选项
  */
@@ -1042,6 +1124,57 @@ type LayoutAreaItem = {
     style: Record<string, string>;
 };
 
+/**
+ * 动画组件配置选项
+ * - 实现组件入/退场的动画效果
+ */
+type MotionOptions = {
+    /**
+     * 是否是多元素模式
+     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
+     * - 为false时，则使用 Transition 组件实现单元素动画控制
+     */
+    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 MotionEffectOptions = {
+    /**
+     * 入场进入时的动画效果
+     * - 用于初始化入场动画；最终映射成 Transition 组件的 `enter-active-class` 属性
+     */
+    enter?: string;
+    /**
+     * 退场离开时的动画效果
+     * - 用于初始化退场动画；最终映射成 Transition 组件的 `leave-active-class` 属性
+     */
+    leave?: string;
+};
+
 /**
  * 折叠面板配置选项
  * - title          折叠面板标题
@@ -1547,6 +1680,12 @@ type IconOptions = TitleOptions & {
      * 图标类型
      */
     type: IconType;
+    /**
+     * 图形伸展
+     * - svg.viewBox 属性
+     * - 为空则默认“0 0 1024 1024”
+     */
+    viewBox?: string;
     /**
      * 图标颜色
      */
@@ -1600,137 +1739,14 @@ type IconOptions = TitleOptions & {
  * - 指向类：
  * - - arrow        向右箭头
  * - - datepicker   日期选择器
+ * - - timepicker   时间选择器
  * - 其他类：
  * - - plus         加号
  * - - subtract     减号
  * - - grip         紧握图标，垂直方向，一般用于拖动句柄
  * - - custom       自定义图标：此时IconOptions.draw属性传入绘制路径
  */
-type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "arrow" | "datepicker" | "plus" | "subtract" | "grip" | "custom";
-
-/**
- * 日期组件相关数据模型
- */
-/**
- * 日期选择组件 配置选项
- * - 参照 zane-calendar 组件的配置选项
- * @see https://github.com/wangweianger/zane-data-time-calendar/blob/master/README.md#%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E
- */
-type DatepickerOptions = {
-    /**
-     * 日期选择类型
-     * - 默认值：day
-     * - 可选值：
-     * - - day            年月日选择
-     * - - year           年选择
-     * - - month          年月选择
-     * - - time           时分秒选择
-     */
-    type?: "day" | "year" | "month" | "time";
-    /**
-     * 是否为范围选择
-     * - true 则选择 开始时间 - 结束时间
-     */
-    range?: boolean;
-    /**
-     * 日期时间格式化
-     * - 默认值：yyyy-MM-dd
-     * - 可选值 通用格式化字符串；如  yyyy-MM-dd HH:mm:ss  yyyy年MM月dd日 HH时mm分ss秒 、、、
-     */
-    format?: string;
-    /**
-     * 开始日期
-     * - 单选择可选项
-     * - 作为初始选中日期，不传入则默认当前
-     */
-    begin?: string;
-    /**
-     * 结束日期
-     * - range 为true时 选择器可选项
-     * - 作为初始选中日期，不传入则默认当前
-     */
-    end?: string;
-    /**
-     * 可选取时间最小范围
-     * - 默认值：1900-10-01
-     */
-    min?: string;
-    /**
-     * 可选取时间最大范围
-     * - 默认值：2099-12-31
-     */
-    max?: string;
-    /**
-     * 弹窗z-index值
-     * - 默认：10000
-     */
-    zIndex?: number;
-    /**
-     * 是否禁用【选择时间】
-     * - 为true时，不出【选择时间】按钮
-     */
-    timeDisabled?: boolean;
-    /**
-     * 是否禁用【选择秒】
-     * - 为true时，选择时间时不支持选择秒单位
-     */
-    secondDisabled?: boolean;
-    /**
-     * 是否禁止【清空】按钮
-     * - 为true时，不显示【清空【按钮
-     */
-    cleanDisabled?: boolean;
-    /**
-     * 是否禁用【现在】按钮
-     * - 为true时，不显示【现在】按钮
-     * - 在 type 为 doublexxx 时始终禁止
-     * - 同时指定min和max时，时始终禁止
-     */
-    nowDisabled?: boolean;
-    /**
-     * 是否禁止【确定】按钮
-     * - 为true时，不显示【确定】按钮
-     */
-    submitDisabled?: boolean;
-    /**
-     * 插件宽度配置
-     * - 默认值：280
-     * - 220 <= X <= 500
-     */
-    width?: number;
-    /**
-     * 插件高度配置
-     * - 默认值：300
-     * - 240 <= X <= 350
-     */
-    height?: number;
-    /**
-     * 插件与输入框的高度
-     * - 默认值：4
-     */
-    behindTop?: number;
-};
-/**
- * 日期选择器 组件事件
- */
-type DatePickerEvents = {
-    /**
-     * 日期选择器 选择值改变
-     * @param begin 选择的起始日期；undefined表示无值，如清空时
-     * @param end 选择的结束日期；在range范围选择时才有值；undefined表示无值，如清空时
-     */
-    change: [begin: string | undefined, end: string | undefined];
-    /**
-     * 日期选择器得到焦点
-     * - 鼠标进入选择器
-     */
-    "picker-focus": [];
-    /**
-     * 日期选择器失去焦点
-     * - 鼠标离开选择器
-     */
-    "picker-blur": [];
-};
+type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "grip" | "custom";
 
 /**
  * 检查选项 数据结构
@@ -2049,139 +2065,68 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
 declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
 
 /**
- * 日期时间的功能禁用配置选项
+ * 运动组件的助手方法变量
  */
-type DatetimeDisabledOptions = {
-    /**
-     * 禁用【工具条】
-     * - 为true则不显示【确定】、【现在】等按钮的工具条区域
-     */
-    toolbarDisabled?: boolean;
-    /**
-     * 禁用【现在】按钮
-     * - 为true时不显示【现在】按钮
-     */
-    nowDisabled?: boolean;
-    /**
-     * 禁用【清空】按钮
-     * - 为true时不显示【清空】按钮
-     */
-    clearDisabled?: boolean;
-};
 /**
- * 日期选择器 配置选项
+ * 运行效果常量
  */
-type DatePickerOptions = {
-    /**
-     * 已选日期值
-     * -格式为 "年-月-日 时:分:秒"
-     */
-    value?: string;
-    /**
-     * 日期格式
-     * - 默认 “yyyy-MM-dd"
-     */
-    format?: DateFormat;
-    /**
-     * 日期最小值
-     * - 选择年月日时，早于此值的年月日不可选
-     * - 确定时，组合时间选取值，晚于此值的日期+时间选择值无效
-     */
-    min?: string;
-    /**
-     * 日期最大值
-     * - 选择年月日时，晚于此值的年月日不可选
-     * - 组合时间选取值，晚于此值的日期+时间选择值无效
-     */
-    max?: string;
-    /**
-     * 最小选择时间
-     * - 早于此值的时间不可选
-     * - 不参与日期最小值验证，仅在选择时间时框定起始时间
-     */
-    minPickTime?: string;
-    /**
-     * 最大选择时间
-     * - 不参与日期最大值验证，仅在选择时间时框定结束时间
-     */
-    maxPickTime?: string;
-} & DatetimeDisabledOptions;
-/**
- * 时间选择控件配置项
- */
-type TimePickerOptions = {
-    /**
-     * 已选值
-     * - 格式为 “时:分:秒"
-     */
-    value?: string;
-    /**
-     * 时间格式
-     */
-    format?: "HH:mm:ss" | "HH:mm";
-    /**
-     * 最小时间
-     * - 传入值格式为 "时:分:秒"
-     * - 如 "08:30:00"，则08:30:00为最小时间，之前的时间不可选择
-     * - 如 "08" ，则 08:00:00为最小时间，之前的时间不可选择
-     */
-    min?: string;
-    /**
-     * 最大时间
-     * - 传入值格式为 "时:分:秒"
-     * - 如 "08:30:00"，则08:30:00为最大时间，之后的时间不可选择
-     * - 如 "08" ，则 08:00:00为最大时间，之后时间不可选择
-     */
-    max?: string;
-} & DatetimeDisabledOptions;
-/**
- * 日期时间选择 事件
- */
-type DatetimePickerEvents = {
-    /**
-     * 清空
-     */
-    clear: [];
-    /**
-     * 确定选择
-     * - @param value 已选则的日期时间
-     */
-    confirm: [value: string];
-};
-/**
- * 日期选择器 一个年项
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type DatePickerYearItem = Required<Pick<DateValue, "year"> & DisabledOptions>;
-/**
- * 日期选择器 一个月项
- * - 当前月，以及所属的年份
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type DatePickerMonthItem = Required<Pick<DateValue, "month" | "year"> & DisabledOptions & {
-    text: 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;
+    };
 }>;
-/**
- * 日期选择器的一个天项
- * - 当前天，以及所属的月份和年份
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type DatePickerDayItem = Required<Pick<DateValue, "day" | "month" | "year"> & DisabledOptions>;
-/**
- * 时间选择器 一个小时项
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type TimePickerHourItem = Required<Pick<TimeValue, "hour"> & DisabledOptions>;
-/**
- * 时间选择器 一个分钟项
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type TimePickerMinuteItem = Required<Pick<TimeValue, "minute" | "hour"> & DisabledOptions>;
-/**
- * 时间选择器 一个秒项
- * - disabled 标记当前选项是否禁用，基于min和max校验出来的
- */
-type TimePickerSecondItem = Required<TimeValue & DisabledOptions>;
 
 /**
  * 公共通用数据结构：
@@ -2376,7 +2321,12 @@ type ToastOptions = {
  * - 传入的组件，根据配置跟随 target 位置和大小；
  * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
+type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
+/**
+ * 跟随位置 配置选项
+ * - 基于此计算出最终的跟随效果
+ */
+type FollowPositionOptions = {
     /**
      * 启用【宽度】跟随
      * - 为true则和 target 宽度保持一致
@@ -2584,22 +2534,24 @@ interface IPickerManager {
     * 显示【日期】选择器
     * @param target 哪个元素触发，基于此元素计算位置
     * @param options 日期选择器配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
     * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
     */
-    showDate(target: HTMLElement, options?: DatePickerOptions & FollowOptions): IAsyncScope<string>;
+    showDate(target: HTMLElement, options?: DatePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
     /**
      * 显示【时间】选择控件
      * @param target 哪个元素触发，基于此元素计算位置
      * @param options 时间选择控件配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
      * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
      */
-    showTime(target: HTMLElement, options?: TimePickerOptions & FollowOptions): IAsyncScope<string>;
+    showTime(target: HTMLElement, options?: TimePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
 }
 /**
  * 选择器弹窗配置选项
  * - 放开一些属性，方便用户做一些自定义
  */
-type PickerPopupOptions = Pick<FollowOptions, "followX" | "followY" | "spaceX" | "spaceY" | "spaceClient">;
+type PickerPopupOptions = FollowPositionOptions;
 /**
  * 选择器扩展
  */
@@ -2671,17 +2623,6 @@ declare const components: {
         onChange?: (values: any) => any;
         "onUpdate:modelValue"?: (value: any) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-    DatePicker: vue.DefineComponent<DatepickerOptions, {
-        showPicker: (delay: number) => void;
-    }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        change: (begin: string, end: string) => any;
-        "picker-focus": () => any;
-        "picker-blur": () => any;
-    }, string, vue.PublicProps, Readonly<DatepickerOptions> & Readonly<{
-        onChange?: (begin: string, end: string) => any;
-        "onPicker-focus"?: () => any;
-        "onPicker-blur"?: () => any;
-    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Footer: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FooterOptions> & Readonly<{
             onCancel?: () => any;
@@ -2924,6 +2865,23 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Motion: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<MotionOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<MotionOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<MotionOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
     Layout: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<LayoutOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -2937,14 +2895,14 @@ declare const components: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & vue.ComponentOptionsBase<Readonly<LayoutOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
-        $slots: SlotsType<Pick<LayoutOptions, "left" | "right" | "main" | "bottom" | "top">>;
+        $slots: SlotsType<Pick<LayoutOptions, "left" | "right" | "main" | "top" | "bottom">>;
     });
     Scroll: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollOptions> & Readonly<{
             onLeft?: () => any;
             onRight?: () => any;
-            onBottom?: () => any;
             onTop?: () => any;
+            onBottom?: () => any;
             onXbar?: (show: boolean) => any;
             onYbar?: (show: boolean) => any;
         }>, {
@@ -2953,8 +2911,8 @@ declare const components: {
         }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             left: () => any;
             right: () => any;
-            bottom: () => any;
             top: () => any;
+            bottom: () => any;
             xbar: (show: boolean) => any;
             ybar: (show: boolean) => any;
         }, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
@@ -2967,8 +2925,8 @@ declare const components: {
         }, Readonly<ScrollOptions> & Readonly<{
             onLeft?: () => any;
             onRight?: () => any;
-            onBottom?: () => any;
             onTop?: () => any;
+            onBottom?: () => any;
             onXbar?: (show: boolean) => any;
             onYbar?: (show: boolean) => any;
         }>, {
@@ -2981,8 +2939,8 @@ declare const components: {
     } & vue.ComponentOptionsBase<Readonly<ScrollOptions> & Readonly<{
         onLeft?: () => any;
         onRight?: () => any;
-        onBottom?: () => any;
         onTop?: () => any;
+        onBottom?: () => any;
         onXbar?: (show: boolean) => any;
         onYbar?: (show: boolean) => any;
     }>, {
@@ -2991,8 +2949,8 @@ declare const components: {
     }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         left: () => any;
         right: () => any;
-        bottom: () => any;
         top: () => any;
+        bottom: () => any;
         xbar: (show: boolean) => any;
         ybar: (show: boolean) => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
@@ -3013,16 +2971,16 @@ declare const components: {
             disabled?: boolean;
             sortDisabled?: boolean;
         }> & Readonly<{
-            onEnd?: (evt: SortEvent) => any;
             onAdd?: (evt: SortEvent) => any;
             onStart?: (evt: SortEvent) => any;
+            onEnd?: (evt: SortEvent) => any;
             onMove?: (evt: SortEvent, originalEvent: SortEvent) => any;
             onRemove?: (evt: SortEvent) => any;
             onUpdate?: (oldIndex: number, newIndex: number) => any;
         }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-            end: (evt: SortEvent) => any;
             add: (evt: SortEvent) => any;
             start: (evt: SortEvent) => any;
+            end: (evt: SortEvent) => any;
             move: (evt: SortEvent, originalEvent: SortEvent) => any;
             remove: (evt: SortEvent) => any;
             update: (oldIndex: number, newIndex: number) => any;
@@ -3045,9 +3003,9 @@ declare const components: {
             disabled?: boolean;
             sortDisabled?: boolean;
         }> & Readonly<{
-            onEnd?: (evt: SortEvent) => any;
             onAdd?: (evt: SortEvent) => any;
             onStart?: (evt: SortEvent) => any;
+            onEnd?: (evt: SortEvent) => any;
             onMove?: (evt: SortEvent, originalEvent: SortEvent) => any;
             onRemove?: (evt: SortEvent) => any;
             onUpdate?: (oldIndex: number, newIndex: number) => any;
@@ -3067,16 +3025,16 @@ declare const components: {
         disabled?: boolean;
         sortDisabled?: boolean;
     }> & Readonly<{
-        onEnd?: (evt: SortEvent) => any;
         onAdd?: (evt: SortEvent) => any;
         onStart?: (evt: SortEvent) => any;
+        onEnd?: (evt: SortEvent) => any;
         onMove?: (evt: SortEvent, originalEvent: SortEvent) => any;
         onRemove?: (evt: SortEvent) => any;
         onUpdate?: (oldIndex: number, newIndex: number) => any;
     }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        end: (evt: SortEvent) => any;
         add: (evt: SortEvent) => any;
         start: (evt: SortEvent) => any;
+        end: (evt: SortEvent) => any;
         move: (evt: SortEvent, originalEvent: SortEvent) => any;
         remove: (evt: SortEvent) => any;
         update: (oldIndex: number, newIndex: number) => any;
@@ -3140,23 +3098,6 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
-    Transitions: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TransitionOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<TransitionOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<TransitionOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
-        $slots: {
-            default?: (props: {}) => any;
-        };
-    });
     Tree: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
             nodes: TreeNodeModel<any>[];
@@ -3248,6 +3189,40 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    DatePicker: vue.DefineComponent<ReadonlyOptions & {
+        value?: string;
+        format?: snail_core.DateFormat;
+        min?: string;
+        max?: string;
+        minPickTime?: string;
+        maxPickTime?: string;
+    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (newValue: string, oldValue?: string) => any;
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
+        value?: string;
+        format?: snail_core.DateFormat;
+        min?: string;
+        max?: string;
+        minPickTime?: string;
+        maxPickTime?: string;
+    } & DatetimeDisabledOptions> & Readonly<{
+        onChange?: (newValue: string, oldValue?: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+    TimePicker: vue.DefineComponent<ReadonlyOptions & {
+        value?: string;
+        format?: "HH:mm:ss" | "HH:mm";
+        min?: string;
+        max?: string;
+    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (newValue: string, oldValue?: string) => any;
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
+        value?: string;
+        format?: "HH:mm:ss" | "HH:mm";
+        min?: string;
+        max?: string;
+    } & DatetimeDisabledOptions> & Readonly<{
+        onChange?: (newValue: string, oldValue?: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     DragVerify: vue.DefineComponent<DragVerifyOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
         success: () => any;
     }, string, vue.PublicProps, Readonly<DragVerifyOptions> & Readonly<{
@@ -3289,5 +3264,5 @@ declare const components: {
     });
 };
 
-export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
-export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerEvents, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatepickerOptions, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmitterType, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollStatus, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TransitionEffectOptions, TransitionOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
+export { MOTION, components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
+export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmitterType, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowPositionOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MotionEffectOptions, MotionOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollStatus, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };