snail.vue 2.0.10 → 2.0.12

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提示框的配置选项
@@ -265,18 +265,6 @@ type ScrollOptions = {
      * - none ：无，不显示滚动条，但仍然能够滚动
      */
     barSize?: "normal" | "small" | "mini" | "none";
-    /**
-     * 滚动条模式
-     * - auto（默认值）：自动，内容溢出时自动显示滚动条
-     * - hover：鼠标进入时才显示滚动条
-     */
-    barMode?: "auto" | "hover";
-    /**
-     * 滚动条防抖处理
-     * - 垂直滚动条在【有-无】之间变化时，会导致内容width变化，从而产生抖动
-     * - 为true时，会给滚动条方向一个处理padding值，从而实现防抖效果
-     */
-    debounce?: boolean;
 };
 /**
  * 滚动视图事件
@@ -905,54 +893,6 @@ type SortEvent = {
     newIndex: number | undefined;
 };
 
-/**
- * 布局组件 数据结构
- */
-
-/**
- * 布局组件配置选项
- */
-type LayoutOptions = {
-    /**
-     * 布局模式：水平，还是垂直
-     */
-    mode: "horizontal" | "vertical";
-    /**
-     * 滚动相关配置
-     * - 中部区域的配置
-     */
-    scroll?: ScrollOptions;
-};
-
-/**
- * 折叠面板配置选项
- * - title          折叠面板标题
- * - disabled       禁用折叠效果，始终展开
- */
-type FoldOptions = DisabledOptions & TitleOptions & {
-    /**
-     * 副标题
-     * - 跟随在title后
-     */
-    subtitle?: string;
-};
-/**
- * 折叠状态
- * - expand ： 展开状态
- * - fold   ： 折叠状态
- */
-type FoldStatus = "expand" | "fold";
-/**
- * 折叠面板事件
- */
-type FoldEvents = {
-    /**
-     * 折叠状态发生改变时
-     * @param status 折叠状态
-     */
-    change: [status: FoldStatus];
-};
-
 /**
  * 组件配置选项
  */
@@ -989,6 +929,12 @@ type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
 type EmitterType<Events extends Record<string, any[]>> = {
     <K extends keyof Events>(event: K, ...payload: Events[K]): any;
 };
+/**
+ * 提取【组件插槽】类型
+ */
+type SlotsType<Slots extends Record<string, any>> = {
+    [key in keyof Slots]: (props: Slots[key]) => any;
+};
 /**
  * 提取【组件事件】类型
  * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
@@ -1018,6 +964,113 @@ type ComponentBindOptions<Props = void, Model = void> = {
     model?: Model extends (void | never | null | undefined) ? undefined : (ShallowRef<Model> | Ref<Model>);
 };
 
+/**
+ * 布局组件 数据结构
+ */
+
+/**
+ * 布局组件 配置选项
+ */
+type LayoutOptions = {
+    /**
+     * 布局模式
+     * - horizontal 水平布局：左中右
+     * - vertical 垂直布局：上中下
+     * - 默认为 `horizontal`
+     */
+    mode?: "horizontal" | "vertical";
+    /**
+     * 主内容区域配置
+     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
+     * - 配置主内容区域的滚动条配置
+     */
+    main?: Pick<LayoutAraeOptions<void>, "scroll">;
+    /**
+     * 【左侧】区域配置
+     * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     * -
+     */
+    left?: LayoutAraeOptions<WidthStyle>;
+    /**
+     * 【右测】区域配置
+     * - 对应插槽名`right` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     */
+    right?: LayoutAraeOptions<WidthStyle>;
+    /**
+     * 【顶部】区域配置
+     * - 对应插槽名`top`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     * -
+     */
+    top?: LayoutAraeOptions<HeightStyle>;
+    /**
+     * 【底部】区域配置
+     * - 对应插槽名`bottom`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     */
+    bottom?: LayoutAraeOptions<HeightStyle>;
+};
+/**
+ * 布局组件子区域 配置选项
+ */
+type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & {
+    /**
+     * 滚动视图配置
+     * - 视图属性：滚动条大小、显示时机
+     * - 滚动事件：滚动条显隐、滚动到顶部、底部、、、
+     * - 不传入则当前区域`overflow:hidden`溢出隐藏
+     */
+    scroll?: ScrollOptions & EventsType<ScrollEvents>;
+};
+/**
+ * 布局组件的子区域项目 描述
+ */
+type LayoutAreaItem = {
+    /**
+     * 是否可滚动
+     */
+    scrollable: boolean;
+    /**
+     * 内容区域元素的类样式名
+     */
+    class: string;
+    /**
+     * css样式
+     */
+    style: Record<string, string>;
+};
+
+/**
+ * 折叠面板配置选项
+ * - title          折叠面板标题
+ * - disabled       禁用折叠效果，始终展开
+ */
+type FoldOptions = DisabledOptions & TitleOptions & {
+    /**
+     * 副标题
+     * - 跟随在title后
+     */
+    subtitle?: string;
+};
+/**
+ * 折叠状态
+ * - expand ： 展开状态
+ * - fold   ： 折叠状态
+ */
+type FoldStatus = "expand" | "fold";
+/**
+ * 折叠面板事件
+ */
+type FoldEvents = {
+    /**
+     * 折叠状态发生改变时
+     * @param status 折叠状态
+     */
+    change: [status: FoldStatus];
+};
+
 /**
  * 选项菜单 基础配置选项
  */
@@ -1996,32 +2049,72 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
 declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
 
 /**
- * 时间选择控件配置项
+ * 日期时间的功能禁用配置选项
  */
-type TimePickerOptions = {
+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;
+    /**
+     * 日期最大值
+     * - 选择年月日时，晚于此值的年月日不可选
+     * - 组合时间选取值，晚于此值的日期+时间选择值无效
+     */
+    max?: string;
     /**
-     * 时间值管理器
-     * - 若传入此值，则 `format`、`min`、`max` 失效
+     * 最小选择时间
+     * - 早于此值的时间不可选
+     * - 不参与日期最小值验证，仅在选择时间时框定起始时间
+     */
+    minPickTime?: string;
+    /**
+     * 最大选择时间
+     * - 不参与日期最大值验证，仅在选择时间时框定结束时间
+     */
+    maxPickTime?: string;
+} & DatetimeDisabledOptions;
+/**
+ * 时间选择控件配置项
+ */
+type TimePickerOptions = {
+    /**
+     * 已选值
+     * - 格式为 “时:分:秒"
      */
-    manager?: ITimeValueManager;
+    value?: string;
     /**
      * 时间格式
      */
@@ -2040,7 +2133,7 @@ type TimePickerOptions = {
      * - 如 "08" ，则 08:00:00为最大时间，之后时间不可选择
      */
     max?: string;
-};
+} & DatetimeDisabledOptions;
 /**
  * 日期时间选择 事件
  */
@@ -2055,29 +2148,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>;
 
 /**
  * 公共通用数据结构：
@@ -2468,6 +2572,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 全新的【弹窗管理器】实例+作用域对象
@@ -2771,7 +2925,7 @@ declare const components: {
         };
     });
     Layout: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<LayoutOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<LayoutOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
@@ -2783,13 +2937,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: {
-            start?: (props: {}) => any;
-        } & {
-            default?: (props: {}) => any;
-        } & {
-            end?: (props: {}) => any;
-        };
+        $slots: SlotsType<Pick<LayoutOptions, "left" | "right" | "main" | "bottom" | "top">>;
     });
     Scroll: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollOptions> & Readonly<{
@@ -3142,4 +3290,4 @@ 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, 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, TimePickerOptions, TitleOptions, ToastOptions, TransitionEffectOptions, TransitionOptions, 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, 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 };