snail.vue 2.0.12 → 2.0.13

package/dist/snail.vue.d.ts

@@ -658,6 +658,7 @@ type TransitionOptions = {
     /**
      * 动画持续时间
      * - 单位ms，默认200ms
+     * - 为0则禁用动画
      */
     duration?: number;
     /**
@@ -1042,6 +1043,51 @@ type LayoutAreaItem = {
     style: Record<string, string>;
 };
 
+/**
+ * 动画效果配置选项
+ */
+type MotionEffectOptions = {
+    /**
+     * 入场进入时的动画效果
+     * - 配合 `motion` 组合成 `${montion} ${enter}` 作为进入时的动画类样式
+     * - 最终映射成 Transition 组件的 `enter-active-class` 属性
+     * - 默认 `fade-in`；若内置动画效果无法满足需求，则使用string数组组合自定义class样式
+     */
+    enter?: string;
+    /**
+     * 退场离开时的动画效果
+     * - 配合 `motion` 组合成 `${montion} ${leave}` 作为离开时的动画类样式
+     * - 最终映射成 Transition 组件的 `leave-active-class` 属性
+     * - 默认 `fade-out`；若内置动画效果无法满足需求，则使用string数组组合自定义class样式
+     */
+    leave?: string;
+};
+/**
+ * 动画组件配置选项
+ * - 实现组件出/退场的动画效果
+ */
+type MotionOptions = MotionEffectOptions & {
+    /**
+     * 是否是多元素模式
+     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
+     * - 为false时，则使用 Transition 组件实现单元素动画控制
+     */
+    multiple?: boolean;
+    /**
+     * 动画持续时间，单位ms，默认200ms
+     * - 为0则禁用动画
+     */
+    duration?: number;
+    /**
+     * 动画模式
+     * - default（默认） 入场和退场动画同时执行
+     * - in-out 入场动画先执行，退场动画后执行
+     * - out-in 退场动画先执行，入场动画后执行
+     * - 在多个元素之间切换时生效，一个元素的显隐切换无效果
+     */
+    mode?: "in-out" | "out-in" | "default";
+};
+
 /**
  * 折叠面板配置选项
  * - title          折叠面板标题
@@ -1071,6 +1117,40 @@ type FoldEvents = {
     change: [status: FoldStatus];
 };
 
+/**
+ * 元素组件 配置选项
+ */
+type ElementOptions = {
+    /**
+     * 元素的tag标签，对应HTML元素名
+     * - 如 div、span等
+     * - 默认 div
+     */
+    tag?: string;
+    /**
+     * 是否显示
+     * - true  显示
+     * - false 隐藏，通过`showMode`确定隐藏时的控制模式
+     */
+    show: boolean;
+    /**
+     * 显隐的控制模式
+     * - vIf 指令控制显隐，元素被移除
+     * - vShow 指令控制显隐，元素style增加`display:none`
+     * - 默认值 "vIf"
+     */
+    showMode?: "vIf" | "vShow";
+    /**
+     * 元素显隐切换时的动画配置
+     */
+    transition?: Pick<TransitionOptions, "customClass" | "duration" | "effect">;
+    /**
+     * 子元素相关配置
+     * - 如配置子元素显隐切换时的动画配置
+     */
+    children?: TransitionOptions;
+};
+
 /**
  * 选项菜单 基础配置选项
  */
@@ -1547,6 +1627,12 @@ type IconOptions = TitleOptions & {
      * 图标类型
      */
     type: IconType;
+    /**
+     * 图形伸展
+     * - svg.viewBox 属性
+     * - 为空则默认“0 0 1024 1024”
+     */
+    viewBox?: string;
     /**
      * 图标颜色
      */
@@ -2048,6 +2134,70 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
  */
 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;
+    };
+}>;
+
 /**
  * 日期时间的功能禁用配置选项
  */
@@ -2878,6 +3028,23 @@ declare const components: {
             [x: number]: (props: any) => any;
         };
     });
+    Element: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ElementOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<ElementOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<ElementOptions> & 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;
+        };
+    });
     Fold: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & TitleOptions & {
             subtitle?: string;
@@ -2924,6 +3091,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: {};
@@ -3289,5 +3473,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, DatePickerEvents, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatepickerOptions, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, ElementOptions, 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, 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, TransitionEffectOptions, TransitionOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };