snail.vue 2.0.9 → 2.0.10

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,26 @@ type ScrollOptions = {
      * - true 支持滚动
      */
     scrollY?: boolean;
+    /**
+     * 滚动条尺寸
+     * - normal ：常规，10px
+     * - small ：小尺寸，宽度 6px
+     * - mini ：迷你尺寸，宽度 4px
+     * - none ：无，不显示滚动条，但仍然能够滚动
+     */
+    barSize?: "normal" | "small" | "mini" | "none";
+    /**
+     * 滚动条模式
+     * - auto（默认值）：自动，内容溢出时自动显示滚动条
+     * - hover：鼠标进入时才显示滚动条
+     */
+    barMode?: "auto" | "hover";
+    /**
+     * 滚动条防抖处理
+     * - 垂直滚动条在【有-无】之间变化时，会导致内容width变化，从而产生抖动
+     * - 为true时，会给滚动条方向一个处理padding值，从而实现防抖效果
+     */
+    debounce?: boolean;
 };
 /**
  * 滚动视图事件
@@ -641,6 +661,17 @@ type TreeNodeSlotOptions<Node> = {
  * Vue 动画容器组件配置选项
  */
 type TransitionOptions = {
+    /**
+     * 是分组动画，还是单个动画
+     * - true 则使用  TransitionGroup
+     * - false 则使用   Transition
+     */
+    group: boolean;
+    /**
+     * 动画持续时间
+     * - 单位ms，默认200ms
+     */
+    duration?: number;
     /**
      * 动画的自定义类样式名称
      * - 默认为 `snail-transition`；不会作为 Transition的 name 属性名
@@ -677,12 +708,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";
 
@@ -884,6 +909,9 @@ type SortEvent = {
  * 布局组件 数据结构
  */
 
+/**
+ * 布局组件配置选项
+ */
 type LayoutOptions = {
     /**
      * 布局模式：水平，还是垂直
@@ -1967,6 +1995,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 +2281,7 @@ type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
      */
     followWidth?: boolean;
     /**
-     * 启用【高度】更碎
+     * 启用【高度】跟随
      * - 为true则和 target 高度保持一致
      * - false时，高度由 弹出组件 自己维护
      * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
@@ -2237,6 +2349,7 @@ type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
     /**
      * target改变时是否关闭弹窗
      * - target尺寸、位置变化
+     * - target点击时
      */
     closeOnTarget?: boolean;
 };
@@ -3028,5 +3141,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, 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 };