snail.vue 2.0.5 → 2.0.7

package/dist/snail.vue.d.ts

@@ -637,6 +637,55 @@ type TreeNodeSlotOptions<Node> = {
     toggle(): void;
 };
 
+/**
+ * Vue 动画容器组件配置选项
+ */
+type TransitionOptions = {
+    /**
+     * 动画的自定义类样式名称
+     * - 默认为 `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?: TransitionEffect | Array<TransitionEffect>;
+    /**
+     * 是分组动画，还是单个动画
+     * - true 则使用  TransitionGroup
+     * - false 则使用   Transition
+     */
+    group: boolean;
+};
+type TransitionEffect = "fade" | "scale" | "rotate" | "up" | "down" | "up-down" | "down-up" | "left" | "right" | "left-right" | "right-left";
+
 /**
  * Table配置选项
  */
@@ -668,6 +717,169 @@ type TableRowOptions = HeightStyle & {};
  */
 type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
 
+/**
+ * 排序组件 配置选项
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
+ */
+type SortOptions<T> = {
+    /**
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
+     */
+    changer: T;
+    /**
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
+     */
+    draggable: string;
+    /**
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
+     */
+    handle?: string;
+    /**
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
+     */
+    dragClass?: string;
+    /**
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
+     */
+    ghostClass?: string;
+    /**
+     * 过滤器，不需要进行拖动的元素
+     * - 传入类样式选择器；如 .sort-handle
+     * - 实现特定子元素不触发拖动排序功能
+     */
+    filter?: string;
+    /**
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     * - 为
+     */
+    group?: string | SortGroupOptions;
+    /**
+     * 动画时间
+     * - 单位ms；默认150ms
+     */
+    animation?: number;
+    /**
+     * 禁用排序效果
+     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
+     */
+    disabled?: boolean;
+    /**
+     * 在当前容器内是否禁用拖拽排序
+     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
+     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
+     */
+    sortDisabled?: boolean;
+};
+/**
+ * 排序组件的Group属性配置选项
+ */
+type SortGroupOptions = {
+    /**
+     * 排序组名称；
+     * - 不传入时自动生成
+     */
+    name: string;
+    /**
+     * 定义从这个列表容器移动出去的设置
+     * - true:列表容器内的列表单元可以被移出；
+     * - false：列表容器内的列表单元不可以被移出；
+     * - "clone"：列表单元移出，移动的为该元素的副本；
+     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
+     */
+    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 SortGroupHook = (item: HTMLElement, to: HTMLElement, from: HTMLElement) => void;
+/**
+ * 排序组件 事件
+ */
+type SortEvents = {
+    /**
+     * 开始拖拽
+     */
+    start: [evt: SortEvent];
+    /**
+     * 移动中
+     */
+    move: [evt: SortEvent, originalEvent: SortEvent];
+    /**
+     * 移动到新容器时
+     */
+    add: [evt: SortEvent];
+    /**
+     * 从当前容器移除时
+     */
+    remove: [evt: SortEvent];
+    /**
+     * 结束拖拽
+     */
+    end: [evt: SortEvent];
+    /**
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
+     */
+    update: [oldIndex: number, newIndex: number];
+};
+/**
+ * 排序事件对象
+ */
+type SortEvent = {
+    /**
+     * 目标容器
+     */
+    to: HTMLElement;
+    /**
+     * 来源容器
+     */
+    from: HTMLElement;
+    /**
+     * 被移动的元素
+     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
+     */
+    item: HTMLElement;
+    /**
+     * 副本的元素
+     * - 在`group.pull`配置为 clone 时
+     */
+    clone: HTMLElement;
+    /**
+     * 容器中的原序号
+     */
+    oldIndex: number | undefined;
+    /**
+     * 容器中的新序号
+     */
+    newIndex: number | undefined;
+};
+
 /**
  * 布局组件 数据结构
  */
@@ -735,6 +947,20 @@ type ComponentOptions = {
      */
     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;
+};
 /**
  * 提取【组件事件】类型
  * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
@@ -743,12 +969,6 @@ type ComponentOptions = {
 type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
     [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
 }) : never;
-/**
- * 提取组件的props类型
- * - 有效的 Props 类型：extends Record<string, any>
- * - 有效类型则返回 Props 自身；否则无效，为undefined
- */
-type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
 /**
  * 组件绑定 配置选项
  * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
@@ -972,6 +1192,271 @@ type SelectNodeEvents<T> = {
     click: [item: SelectItem<T>, parent?: SelectItem<T>];
 };
 
+/**
+ * 基础事件实体
+ *  1、把一些常用事件，封装为原子结构，方便复用
+ *  2、不强制必须复用，根据自身情况
+ */
+/**
+ * 事件：点击
+ */
+type ClickEvents = {
+    /**
+     * 单击事件
+     */
+    click: [];
+};
+/**
+ * 事件：值改变
+ * - 描述值的改变过程，新值是什么，改变前的旧值是什么
+ */
+type ChangeEvents<T> = {
+    /**
+     * 值改变；约束新旧值
+     * @param newValue 新值
+     * @param oldValue 旧值
+     */
+    change: [newValue: T, oldValue?: T];
+};
+/**
+ * 事件：移动
+ * - 可描述数据索引位置变化
+ * - 可用于数组元素拖动排序，调整位置等逻辑
+ */
+type MoveEvents = {
+    /**
+     * 移动事件
+     * @param fromIndex 从哪个索引位置开始移动
+     * @param toIndex 移动到的索引位置
+     */
+    move: [fromIndex: number, toIndex: number];
+};
+/**
+ * 事件：删除数据
+ * - 描述要删除的具体数据
+ */
+type DeleteEvents<T> = {
+    /**
+     * 删除事件
+     * @param value 要删除的数据
+     */
+    delete: [value?: T];
+};
+/**
+ * 事件：关闭
+ */
+type CloseEvents = {
+    /**
+     * 关闭事件
+     */
+    close: [];
+};
+
+/**
+ * 数值控件的数据结构
+ */
+
+/**
+ * 数值组件的基础配置选项
+ */
+type NumberBaseOptions = {
+    /**
+     * 最小值
+     */
+    minValue?: number;
+    /**
+     * 最大值
+     */
+    maxValue?: number;
+    /**
+     * 值超过阈值（最大值、最小值）时的处理模式
+     * - 默认值为 `keep`；可选取值范围：
+     * - - `keep` 保持原样值显示，不做任何处理
+     * - - `clamp` 截断超出阈值值，低于最小值时直接取最小值，超过最大值时，强制值为最大值
+     * - 值超过阈值时，会自动触发事件，事件名`NumberEvents`的`belowMin`和`exceedMax`
+     */
+    clamp?: "keep" | "clamp";
+    /**
+     * 精度，保留几位小数
+     * - 要求0、正整数,输入小数则强制整数
+     * - 负数、不传入则不处理
+     */
+    precision?: number;
+    /**
+     * 对数值进行千分位格式处理
+     * - 默认值为 `disabled`；可选值范围：
+     * - `disabled` 禁用千分位功能
+     * - `inline`  内联千分位功能
+     * - `below`  下拉千分位功能
+     */
+    thousands?: "disabled" | "inline" | "below";
+    /**
+     * 是否启用数值大写格式化处理
+     * - 为true时，转成中文大写值
+     * - 单位自动为“元”，不支持美元等
+     * - 如金额时，自动转为壹仟壹佰壹拾壹元叁角叁分
+     * - 小数点后面只处理两位（角分）；剩余不处理
+     */
+    upper?: boolean;
+    /**
+     * 格式化时的放大系数
+     * - 用于在格式化千分位、大写时，对实际值进行系数放大，value*formatMultiplier
+     * - 仅接收正整数，取值规则为10^n，默认1
+     * - 千分位格式化时，仅`thousands`为`below`时才进行放到系数处理
+     * - 使用示例例：金额是为万元单位时，这里的放大系数就为 “10000”
+     */
+    formatMultiplier?: number;
+    /**
+     * 前缀字符串
+     * - 如金额时，可配置前缀 ￥
+     */
+    prefix?: string;
+    /**
+     * 后缀字符串
+     * - 如金额时，可配置后缀 元/美元、、
+     */
+    suffix?: string;
+    /**
+     * 数值控制器
+     * - 便捷加减调整数值的控制按钮
+     * - 默认值`disabled`；可选值范围：
+     * - - `disabled` 时禁用
+     * - - `default` 默认模式，左侧 — 右侧 +
+     * - - `right`   右侧模式，+ - 都在右侧
+     */
+    controls?: "disabled" | "default" | "right";
+    /**
+     * 数值步长值
+     * - `controls` 未禁用时生效
+     * - 每次+、- 的步长值
+     */
+    step?: number;
+};
+/**
+ * 数值组件的配置选项
+ */
+type NumberOptions = PlaceholderOptions & ReadonlyOptions & NumberBaseOptions;
+/**
+ * 接口：数值格式化器
+ */
+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;
+    };
+    /**
+     * 对数值文本转大写
+     * @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;
+}
+/**
+ * 数值格式化结果
+ */
+type NumberFormatResult = {
+    /**
+     * 输入是否是有效输入
+     * - `- 0 1 2 3 4 5 6 7 8 9  0 .`算是合法输入
+     */
+    readonly valid: boolean;
+    /**
+     * 有效的数值
+     * - undefined时，输入无法转换成有效的数值
+     */
+    readonly number: number | undefined;
+    /**
+     * 数值的显示文本
+     * - 无千分位等处理的数值显示文本
+     * - 若需要在行内显示 千分位 格式文本，需要单独处理
+     */
+    readonly text: string;
+    /**
+     * 格式化数值时发生的错误
+     * - 输入数值有效，但是格式化时发生错误了
+     */
+    readonly error?: string;
+    /**
+     * 是否是负数
+     * - true 时说明以`-`开始；false时为正数
+     * - 若为true，但`integerPart`为undefined，则说明仅输入了`-`
+     */
+    readonly isNegative?: boolean;
+    /**
+     * 是否是小数
+     * - true 时说明有小数点“.”；false 时为整数
+     * - 若为true，但`decimalPart`为undefined，则说明是以`.`结尾，还没输入具体的小数部分
+     */
+    readonly isDecimal?: boolean;
+    /**
+     * 数值输入的整数部分
+     * - 取整数部分绝对值，如-1.2，仅为1
+     */
+    readonly integerPart?: string;
+    /**
+     * 小数部分
+     */
+    readonly decimalPart?: string;
+    /**
+     * 进行系数放大后的整数部分
+     */
+    readonly integerPartAfterMultiplier?: string;
+    /**
+     * 进行系数放大后的小数部分
+     */
+    readonly decimalPartAfterMultiplier?: string;
+};
+/**
+ * 数值组件的事件选项
+ */
+type NumberEvents = ChangeEvents<number> & {
+    /**
+     * 数值发生错误时
+     * - 若超过最大的精度范围
+     * - 其他未知异常等
+     * @param reason 错误原因
+     */
+    error: [reason: string];
+    /**
+     * 小于最小值
+     * @param value 当前值
+     * @param minValue 最小值
+     */
+    belowMin: [value: number, minValue: number];
+    /**
+     * 超过最大值
+     * @param value 当前值
+     * @param maxValue 最大值
+     */
+    exceedMax: [value: number, maxValue: number];
+};
+
 /**
  * 图标配置选项
  * - title          作为鼠标移入图标时的提示
@@ -1260,66 +1745,6 @@ type ButtonOptions = TitleOptions & {
     type: "primary" | "default" | "link";
 };
 
-/**
- * 基础事件实体
- *  1、把一些常用事件，封装为原子结构，方便复用
- *  2、不强制必须复用，根据自身情况
- */
-/**
- * 事件：点击
- */
-type ClickEvents = {
-    /**
-     * 单击事件
-     */
-    click: [];
-};
-/**
- * 事件：值改变
- * - 描述值的改变过程，新值是什么，改变前的旧值是什么
- */
-type ChangeEvents<T> = {
-    /**
-     * 值改变；约束新旧值
-     * @param newValue 新值
-     * @param oldValue 旧值
-     */
-    change: [newValue: T, oldValue?: T];
-};
-/**
- * 事件：移动
- * - 可描述数据索引位置变化
- * - 可用于数组元素拖动排序，调整位置等逻辑
- */
-type MoveEvents = {
-    /**
-     * 移动事件
-     * @param fromIndex 从哪个索引位置开始移动
-     * @param toIndex 移动到的索引位置
-     */
-    move: [fromIndex: number, toIndex: number];
-};
-/**
- * 事件：删除数据
- * - 描述要删除的具体数据
- */
-type DeleteEvents<T> = {
-    /**
-     * 删除事件
-     * @param value 要删除的数据
-     */
-    delete: [value?: T];
-};
-/**
- * 事件：关闭
- */
-type CloseEvents = {
-    /**
-     * 关闭事件
-     */
-    close: [];
-};
-
 /**
  * 输入框配置选项
  * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
@@ -1424,6 +1849,61 @@ type SwitchEvents = {
     change: [value: boolean];
 };
 
+/**
+ * 多行文本框组件配置选项
+ */
+type TextareaOptions = ReadonlyOptions & PlaceholderOptions & {
+    /**
+     * 是否自适应高度
+     * - 传入true时，根据文本框内容，自动调整高度
+     * - 若传入maxRows，则自动高度不会超过maxRows
+     */
+    autoHeight: boolean;
+    /**
+     * 最小行数
+     * - 作为默认行数
+     * - 不传入则默认4
+     */
+    minRows?: number;
+    /**
+     * 最大行数
+     * - 不传入则默认10
+     * - `autoHeight`为true时生效；
+     */
+    maxRows?: number;
+};
+/**
+ * 多行文本框组件事件
+ */
+type TextareaEvents = {
+    /**
+     * 获取焦点时
+     */
+    focus: [];
+    /**
+     * 输入时
+     * @param value 输入框内容
+     */
+    input: [value: string];
+    /**
+     * 失焦时
+     * @param value 输入框内容
+     */
+    blur: [value: string];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
+/**
+ * 使用【响应式管理器】
+ * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
+ * @returns 全新的【响应式管理器】+作用域
+ */
+declare function useReactive(): IReactiveManager & IScope;
+
 /**
  * 树的基础组件信息
  *  1、组件基础上下文 默认实现
@@ -1437,13 +1917,6 @@ type SwitchEvents = {
  */
 declare function useTreeContext<T>(nodes: TreeNode<T, TreeNodeExtend>[], activeNodeRef?: ShallowRef<TreeNode<T, TreeNodeExtend>>): ITreeBaseContext<T> & IScope;
 
-/**
- * 使用【响应式管理器】
- * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值
- * @returns 全新的【响应式管理器】+作用域
- */
-declare function useReactive(): IReactiveManager & IScope;
-
 /**
  * Vue App助手类，做一些app实例的辅助性工作
  */
@@ -1479,73 +1952,6 @@ declare function triggerAppCreated(app: App, type?: AppType): App;
  */
 declare function getSvgDraw(iconType: IconType, draw: string[] | string): string[];
 
-/**
- * 排序组件 配置选项
- * - disabled       禁用排序效果，不能再拖拽元素排序
- * - 整理部分SortableJs中的配置，不分逻辑不开放
- */
-type SortOptions<T> = DisabledOptions & {
-    /**
-     * 变化器
-     * - 在此元素值发生变化时，重新刷新排序面板
-     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
-     */
-    changer: T;
-    /**
-     * 拖动哪个元素
-     * - 传入类样式选择器；如 .table-row
-     */
-    draggable: string;
-    /**
-     * 哪个元素启动拖拽
-     * - 传入类样式选择器；如 .sort-handle
-     * - 不传入则默认 draggable
-     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
-     */
-    handle?: string;
-    /**
-     * 拖动的元素上增加的类样式
-     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
-     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
-     * - 默认：snail-sort-drag
-     */
-    dragClass?: string;
-    /**
-     * 幽灵元素类样式名称
-     * - 拖动时在面板上占位的元素
-     * - 默认：snail-sort-ghost
-     */
-    ghostClass?: string;
-    /**
-     * 过滤器，不需要进行拖动的元素
-     * - 传入类样式选择器；如 .sort-handle
-     * - 实现特定子元素不触发拖动排序功能
-     */
-    filter?: string;
-    /**
-     * 排序组
-     * - 组相同时，可跨组拖拽排序
-     * - 不传入，则内部生成guid
-     */
-    group?: string;
-    /**
-     * 动画时间
-     * - 单位ms；默认150ms
-     */
-    animation?: number;
-};
-/**
- * 排序组件 事件
- */
-type SortEvents = {
-    /**
-     * 元素排序顺序变化
-     * @param oldIndex 旧位置索引值
-     * @param newIndex 新顺序索引值
-     */
-    update: [oldIndex: number, newIndex: number];
-};
-
 /**
  * 动态加载组件 组件配置选项
  */
@@ -1734,6 +2140,15 @@ type ToastOptions = {
      * 提示消息；支持html格式
      */
     message: string;
+    /**
+     * 提示显示时间
+     * - 单位毫秒，默认1500ms
+     */
+    duration?: number;
+    /**
+     * 关闭按钮是否禁用
+     */
+    closeDisabled?: boolean;
 };
 
 /**
@@ -2060,6 +2475,44 @@ declare const components: {
         };
     });
     Icon: vue.DefineComponent<IconOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+    Input: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
+        type?: "text" | "number" | "password";
+        required?: boolean;
+        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
+    } & {
+        modelValue?: string;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (value: string) => any;
+        click: () => any;
+        "update:modelValue": (value: string) => any;
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
+        type?: "text" | "number" | "password";
+        required?: boolean;
+        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
+    } & {
+        modelValue?: string;
+    }> & Readonly<{
+        onChange?: (value: string) => any;
+        onClick?: () => any;
+        "onUpdate:modelValue"?: (value: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+    Number: vue.DefineComponent<PlaceholderOptions & ReadonlyOptions & NumberBaseOptions & {
+        modelValue?: number;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        error: (reason: string) => any;
+        change: (newValue: number, oldValue?: number) => any;
+        "update:modelValue": (value: number) => any;
+        belowMin: (value: number, minValue: number) => any;
+        exceedMax: (value: number, maxValue: number) => any;
+    }, string, vue.PublicProps, Readonly<PlaceholderOptions & ReadonlyOptions & NumberBaseOptions & {
+        modelValue?: number;
+    }> & Readonly<{
+        onError?: (reason: string) => any;
+        onChange?: (newValue: number, oldValue?: number) => any;
+        "onUpdate:modelValue"?: (value: number) => any;
+        onBelowMin?: (value: number, minValue: number) => any;
+        onExceedMax?: (value: number, maxValue: number) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Search: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & {
         autoComplete?: boolean;
     } & {
@@ -2115,6 +2568,31 @@ declare const components: {
         onChange?: (value: boolean) => any;
         "onUpdate:modelValue"?: (value: boolean) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+    Textarea: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & {
+        autoHeight: boolean;
+        minRows?: number;
+        maxRows?: number;
+    } & {
+        modelValue?: string;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        blur: (value: string) => any;
+        change: (value: string) => any;
+        focus: () => any;
+        input: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & {
+        autoHeight: boolean;
+        minRows?: number;
+        maxRows?: number;
+    } & {
+        modelValue?: string;
+    }> & Readonly<{
+        onBlur?: (value: string) => any;
+        onChange?: (value: string) => any;
+        onFocus?: () => any;
+        onInput?: (value: string) => any;
+        "onUpdate:modelValue"?: (value: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
     Dynamic: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ComponentOptions & Pick<ComponentBindOptions<Record<string, any>>, "props">> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -2262,18 +2740,30 @@ declare const components: {
         };
     });
     Sort: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
             changer: any;
             draggable: string;
             handle?: string;
             dragClass?: string;
             ghostClass?: string;
             filter?: string;
-            group?: string;
+            group?: string | SortGroupOptions;
             animation?: number;
+            disabled?: boolean;
+            sortDisabled?: boolean;
         }> & Readonly<{
+            onEnd?: (evt: SortEvent) => any;
+            onAdd?: (evt: SortEvent) => any;
+            onStart?: (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;
+            move: (evt: SortEvent, originalEvent: SortEvent) => any;
+            remove: (evt: SortEvent) => any;
             update: (oldIndex: number, newIndex: number) => any;
         }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -2282,33 +2772,52 @@ declare const components: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<DisabledOptions & {
+        }, Readonly<{
             changer: any;
             draggable: string;
             handle?: string;
             dragClass?: string;
             ghostClass?: string;
             filter?: string;
-            group?: string;
+            group?: string | SortGroupOptions;
             animation?: number;
+            disabled?: boolean;
+            sortDisabled?: boolean;
         }> & Readonly<{
+            onEnd?: (evt: SortEvent) => any;
+            onAdd?: (evt: SortEvent) => any;
+            onStart?: (evt: SortEvent) => any;
+            onMove?: (evt: SortEvent, originalEvent: SortEvent) => any;
+            onRemove?: (evt: SortEvent) => any;
             onUpdate?: (oldIndex: number, newIndex: number) => any;
         }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<DisabledOptions & {
+    } & vue.ComponentOptionsBase<Readonly<{
         changer: any;
         draggable: string;
         handle?: string;
         dragClass?: string;
         ghostClass?: string;
         filter?: string;
-        group?: string;
+        group?: string | SortGroupOptions;
         animation?: number;
+        disabled?: boolean;
+        sortDisabled?: boolean;
     }> & Readonly<{
+        onEnd?: (evt: SortEvent) => any;
+        onAdd?: (evt: SortEvent) => any;
+        onStart?: (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;
+        move: (evt: SortEvent, originalEvent: SortEvent) => any;
+        remove: (evt: SortEvent) => any;
         update: (oldIndex: number, newIndex: number) => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
@@ -2370,6 +2879,23 @@ 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>[];
@@ -2461,27 +2987,6 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
-    Input: vue.DefineComponent<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
-        type?: "text" | "number" | "password";
-        required?: boolean;
-        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
-    } & {
-        modelValue?: string;
-    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        change: (value: string) => any;
-        click: () => any;
-        "update:modelValue": (value: string) => any;
-    }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
-        type?: "text" | "number" | "password";
-        required?: boolean;
-        titleStyle?: snail_view.BaseStyle & snail_view.WidthStyle & snail_view.FlexBoxStyle;
-    } & {
-        modelValue?: string;
-    }> & Readonly<{
-        onChange?: (value: string) => any;
-        onClick?: () => any;
-        "onUpdate:modelValue"?: (value: string) => any;
-    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     DragVerify: vue.DefineComponent<DragVerifyOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
         success: () => any;
     }, string, vue.PublicProps, Readonly<DragVerifyOptions> & Readonly<{
@@ -2524,4 +3029,4 @@ declare const components: {
 };
 
 export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };
-export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, 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, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
+export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmitterType, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, 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, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TitleOptions, ToastOptions, TransitionEffect, TransitionOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };