snail.vue 2.0.9 → 2.0.11

package/README.md

@@ -54,7 +54,11 @@
 | [Tree](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#tKdSd)    | **树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索**                                                     |
 | [Wrapper](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#gita6) | **包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可**                     |
 
-## 3.3. **popup 弹窗组件**
+## 3.3. picker 选择器组件
+
+> 基于IPopupManager实现的各类选择器组件，如日期选择器、时间选择器、颜色选择器、、、
+
+## 3.4. **popup 弹窗组件**
 
 **基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法**
 
@@ -69,7 +73,7 @@
 | [toast](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#FWNH1)    | **消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息**                                   |
 | [confirm](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#wohc0)  | **确认弹窗；模拟实现原生 confirm 弹窗**                                                |
 
-## 3.4. **prompt 提示组件**
+## 3.5. **prompt 提示组件**
 
 **封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等**
 

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, IAsyncScope } from 'snail.core';
+import { IScope, RunResult, ITimeValueManager, IAsyncScope } from 'snail.core';
 
 /**
  * loading提示框的配置选项
@@ -257,6 +257,14 @@ type ScrollOptions = {
      * - true 支持滚动
      */
     scrollY?: boolean;
+    /**
+     * 滚动条尺寸
+     * - normal ：常规，10px
+     * - small ：小尺寸，宽度 6px
+     * - mini ：迷你尺寸，宽度 4px
+     * - none ：无，不显示滚动条，但仍然能够滚动
+     */
+    barSize?: "normal" | "small" | "mini" | "none";
 };
 /**
  * 滚动视图事件
@@ -641,6 +649,17 @@ type TreeNodeSlotOptions<Node> = {
  * Vue 动画容器组件配置选项
  */
 type TransitionOptions = {
+    /**
+     * 是分组动画，还是单个动画
+     * - true 则使用  TransitionGroup
+     * - false 则使用   Transition
+     */
+    group: boolean;
+    /**
+     * 动画持续时间
+     * - 单位ms，默认200ms
+     */
+    duration?: number;
     /**
      * 动画的自定义类样式名称
      * - 默认为 `snail-transition`；不会作为 Transition的 name 属性名
@@ -677,12 +696,6 @@ type TransitionOptions = {
      *  |   `right-left` | 右进左出     | 进入时 `translateX` 100% - 0     | 离开时 `translateX` 0 - -100%    |
      */
     effect?: TransitionEffectOptions | Array<TransitionEffectOptions>;
-    /**
-     * 是分组动画，还是单个动画
-     * - true 则使用  TransitionGroup
-     * - false 则使用   Transition
-     */
-    group: boolean;
 };
 type TransitionEffectOptions = "fade" | "scale" | "rotate" | "up" | "down" | "up-down" | "down-up" | "left" | "right" | "left-right" | "right-left";
 
@@ -880,51 +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];
-};
-
 /**
  * 组件配置选项
  */
@@ -961,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为监听函数参数
@@ -990,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";
+    /**
+     * 内容区域配置
+     * - 对应插槽名：default；主要内容显示区域，处于布局中的【中】区域
+     * - 配置主内容区域的滚动条配置
+     */
+    default?: 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];
+};
+
 /**
  * 选项菜单 基础配置选项
  */
@@ -1967,6 +2048,90 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
  */
 declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
 
+/**
+ * 时间选择控件配置项
+ */
+type TimePickerOptions = {
+    /**
+     * 已选值
+     * - 格式为 “时:分:秒"
+     */
+    value?: string;
+    /**
+     * 禁用【初始化】功能
+     * - 仅在`value`为空时才生效，若`value`不为空，则忽略此属性配置
+     * - 为true，不自动选中【现在】的时分秒
+     * - 为false时，自动选中【现在】的时分秒
+     * - 默认自动初始化
+     */
+    initialDisabled?: boolean;
+    /**
+     * 禁用【现在】功能
+     * - 为true时，不出【现在】功能
+     */
+    nowDisabled?: boolean;
+    /**
+     * 时间值管理器
+     * - 若传入此值，则 `format`、`min`、`max` 失效
+     */
+    manager?: ITimeValueManager;
+    /**
+     * 时间格式
+     */
+    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;
+};
+/**
+ * 日期时间选择 事件
+ */
+type DatetimePickerEvents = {
+    /**
+     * 清空
+     */
+    clear: [];
+    /**
+     * 确定选择
+     * - @param value 已选则的日期时间
+     */
+    confirm: [value: string];
+};
+
+/**
+ * 选择器 相关数据实体
+ */
+
+/**
+ * 接口：选择器管理器
+ */
+interface IPickerManager {
+    /**
+     * 显示【时间】选择控件
+     * @param target 哪个元素触发，基于此元素计算位置
+     * @param options 时间选择控件配置选项
+     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
+     */
+    showTime(target: HTMLElement, options?: TimePickerOptions): IAsyncScope<string>;
+}
+
+/**
+ * 使用选择器
+ * @returns 选择器实例+作用域对象
+ */
+declare function usePicker(): IPickerManager & IScope;
+
 /**
  * 公共通用数据结构：
  *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
@@ -2169,7 +2334,7 @@ type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
      */
     followWidth?: boolean;
     /**
-     * 启用【高度】更碎
+     * 启用【高度】跟随
      * - 为true则和 target 高度保持一致
      * - false时，高度由 弹出组件 自己维护
      * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
@@ -2237,6 +2402,7 @@ type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
     /**
      * target改变时是否关闭弹窗
      * - target尺寸、位置变化
+     * - target点击时
      */
     closeOnTarget?: boolean;
 };
@@ -2658,7 +2824,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: {};
@@ -2670,13 +2836,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, "default" | "left" | "right" | "bottom" | "top">>;
     });
     Scroll: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollOptions> & Readonly<{
@@ -3028,5 +3188,5 @@ 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, 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, TransitionEffectOptions, TransitionOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
+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 };