snail.vue 2.0.11 → 2.0.13

package/dist/snail.vue.d.ts

@@ -2,7 +2,7 @@ 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, ITimeValueManager, IAsyncScope } from 'snail.core';
+import { IScope, RunResult, DateFormat, DateValue, TimeValue, IAsyncScope } from 'snail.core';
 
 /**
  * loading提示框的配置选项
@@ -658,6 +658,7 @@ type TransitionOptions = {
     /**
      * 动画持续时间
      * - 单位ms，默认200ms
+     * - 为0则禁用动画
      */
     duration?: number;
     /**
@@ -980,11 +981,11 @@ type LayoutOptions = {
      */
     mode?: "horizontal" | "vertical";
     /**
-     * 内容区域配置
-     * - 对应插槽名：default；主要内容显示区域，处于布局中的【中】区域
+     * 主内容区域配置
+     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
      * - 配置主内容区域的滚动条配置
      */
-    default?: Pick<LayoutAraeOptions<void>, "scroll">;
+    main?: Pick<LayoutAraeOptions<void>, "scroll">;
     /**
      * 【左侧】区域配置
      * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
@@ -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;
     /**
      * 图标颜色
      */
@@ -2049,32 +2135,136 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
 declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
 
 /**
- * 时间选择控件配置项
+ * 运动组件的助手方法变量
  */
-type TimePickerOptions = {
+/**
+ * 运行效果常量
+ */
+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;
+    };
+}>;
+
+/**
+ * 日期时间的功能禁用配置选项
+ */
+type DatetimeDisabledOptions = {
     /**
-     * 已选值
-     * - 格式为 “时:分:秒"
+     * 禁用【工具条】
+     * - 为true则不显示【确定】、【现在】等按钮的工具条区域
+     */
+    toolbarDisabled?: boolean;
+    /**
+     * 禁用【现在】按钮
+     * - 为true时不显示【现在】按钮
+     */
+    nowDisabled?: boolean;
+    /**
+     * 禁用【清空】按钮
+     * - 为true时不显示【清空】按钮
+     */
+    clearDisabled?: boolean;
+};
+/**
+ * 日期选择器 配置选项
+ */
+type DatePickerOptions = {
+    /**
+     * 已选日期值
+     * -格式为 "年-月-日 时:分:秒"
      */
     value?: string;
     /**
-     * 禁用【初始化】功能
-     * - 仅在`value`为空时才生效，若`value`不为空，则忽略此属性配置
-     * - 为true，不自动选中【现在】的时分秒
-     * - 为false时，自动选中【现在】的时分秒
-     * - 默认自动初始化
+     * 日期格式
+     * - 默认 “yyyy-MM-dd"
      */
-    initialDisabled?: boolean;
+    format?: DateFormat;
     /**
-     * 禁用【现在】功能
-     * - 为true时，不出【现在】功能
+     * 日期最小值
+     * - 选择年月日时，早于此值的年月日不可选
+     * - 确定时，组合时间选取值，晚于此值的日期+时间选择值无效
      */
-    nowDisabled?: boolean;
+    min?: string;
     /**
-     * 时间值管理器
-     * - 若传入此值，则 `format`、`min`、`max` 失效
+     * 日期最大值
+     * - 选择年月日时，晚于此值的年月日不可选
+     * - 组合时间选取值，晚于此值的日期+时间选择值无效
      */
-    manager?: ITimeValueManager;
+    max?: string;
+    /**
+     * 最小选择时间
+     * - 早于此值的时间不可选
+     * - 不参与日期最小值验证，仅在选择时间时框定起始时间
+     */
+    minPickTime?: string;
+    /**
+     * 最大选择时间
+     * - 不参与日期最大值验证，仅在选择时间时框定结束时间
+     */
+    maxPickTime?: string;
+} & DatetimeDisabledOptions;
+/**
+ * 时间选择控件配置项
+ */
+type TimePickerOptions = {
+    /**
+     * 已选值
+     * - 格式为 “时:分:秒"
+     */
+    value?: string;
     /**
      * 时间格式
      */
@@ -2093,7 +2283,7 @@ type TimePickerOptions = {
      * - 如 "08" ，则 08:00:00为最大时间，之后时间不可选择
      */
     max?: string;
-};
+} & DatetimeDisabledOptions;
 /**
  * 日期时间选择 事件
  */
@@ -2108,29 +2298,40 @@ type DatetimePickerEvents = {
      */
     confirm: [value: string];
 };
-
 /**
- * 选择器 相关数据实体
+ * 日期选择器 一个年项
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
  */
-
+type DatePickerYearItem = Required<Pick<DateValue, "year"> & DisabledOptions>;
 /**
- * 接口：选择器管理器
+ * 日期选择器 一个月项
+ * - 当前月，以及所属的年份
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
  */
-interface IPickerManager {
-    /**
-     * 显示【时间】选择控件
-     * @param target 哪个元素触发，基于此元素计算位置
-     * @param options 时间选择控件配置选项
-     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
-     */
-    showTime(target: HTMLElement, options?: TimePickerOptions): IAsyncScope<string>;
-}
-
+type DatePickerMonthItem = Required<Pick<DateValue, "month" | "year"> & DisabledOptions & {
+    text: string;
+}>;
 /**
- * 使用选择器
- * @returns 选择器实例+作用域对象
+ * 日期选择器的一个天项
+ * - 当前天，以及所属的月份和年份
+ * - disabled 标记当前选项是否禁用，基于min和max校验出来的
  */
-declare function usePicker(): IPickerManager & IScope;
+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>;
 
 /**
  * 公共通用数据结构：
@@ -2521,6 +2722,56 @@ interface IPopupManager {
     toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
 }
 
+/**
+ * 选择器 相关数据实体
+ */
+
+/**
+ * 接口：选择器管理器
+ */
+interface IPickerManager {
+    /**
+    * 显示【日期】选择器
+    * @param target 哪个元素触发，基于此元素计算位置
+    * @param options 日期选择器配置选项
+    * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
+    */
+    showDate(target: HTMLElement, options?: DatePickerOptions & FollowOptions): IAsyncScope<string>;
+    /**
+     * 显示【时间】选择控件
+     * @param target 哪个元素触发，基于此元素计算位置
+     * @param options 时间选择控件配置选项
+     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
+     */
+    showTime(target: HTMLElement, options?: TimePickerOptions & FollowOptions): IAsyncScope<string>;
+}
+/**
+ * 选择器弹窗配置选项
+ * - 放开一些属性，方便用户做一些自定义
+ */
+type PickerPopupOptions = Pick<FollowOptions, "followX" | "followY" | "spaceX" | "spaceY" | "spaceClient">;
+/**
+ * 选择器扩展
+ */
+type PickerExtend = {
+    /**
+     * 弹窗管理器
+     * - 方便下级再弹窗，公用一个管理器，方便生命周期管理
+     */
+    popup: IPopupManager;
+    /**
+     * 选择器对象，方便内部在弹出选择
+     * - 如日期选择器中，在选择时间
+     */
+    picker: IPickerManager;
+};
+
+/**
+ * 使用选择器
+ * @returns 选择器实例+作用域对象
+ */
+declare function usePicker(): IPickerManager & IScope;
+
 /**
  * 使用【弹窗管理器】
  * @returns 全新的【弹窗管理器】实例+作用域对象
@@ -2777,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;
@@ -2823,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: {};
@@ -2836,7 +3121,7 @@ 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, "default" | "left" | "right" | "bottom" | "top">>;
+        $slots: SlotsType<Pick<LayoutOptions, "left" | "right" | "main" | "bottom" | "top">>;
     });
     Scroll: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollOptions> & Readonly<{
@@ -3188,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, DatePickerEvents, DatepickerOptions, 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, 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, TimePickerOptions, 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 };