snail.vue 1.0.20 → 1.0.22

package/dist/snail.vue.d.ts

@@ -1,23 +1,8 @@
+import { AlignStyle, SizeOptions } from 'snail.style';
 import * as vue from 'vue';
 import { Component, App, Ref, ShallowRef } from 'vue';
 import { IScope } from 'snail.core';
 
-/**
- * 无数据提醒的配置选项
- */
-type NoDataOptions = {
-    /**
-     * 提醒消息
-     * - 默认值：无数据
-     */
-    message?: string;
-    /**
-     * 无数据提醒图标Url地址
-     * - 不传入则使用默认的
-     */
-    imageUrl?: string;
-};
-
 /**
  * loading提示框的配置选项
  */
@@ -44,6 +29,22 @@ type LoadingOptions = {
     transition?: string;
 };
 
+/**
+ * 空状态配置选项
+ */
+type EmptyOptions = {
+    /**
+     * 提醒消息
+     * - 默认值：无数据
+     */
+    message?: string;
+    /**
+     * 提醒图标Url地址
+     * - 不传入则使用默认的
+     */
+    imageUrl?: string;
+};
+
 /**
  * 拖动验证配置选项
  */
@@ -75,6 +76,63 @@ type DragVerifyInfo = {
     distance: number;
 };
 
+/**
+ * 输入框配置选项
+ */
+type InputOptions = {
+    /**
+     * 输入框类型
+     * - text: 文本输入框
+     * - number: 数字输入框
+     * - password: 密码输入框
+     */
+    type?: "text" | "number" | "password";
+    /**
+     * 输入框标题
+     * - 不传入则不展示 标题区域
+     */
+    title?: string;
+    /**
+     * 输入框是否必填
+     * - 必填，则验证不通过时，显示错误信息
+     * - 必填时，显示必填标记，红色 * 号
+     */
+    required?: boolean;
+    /**
+     * 输入框提示语
+     */
+    placeholder?: string;
+    /**
+     * 是否为只读状态
+     */
+    readonly?: boolean;
+    /**
+     * 是否为禁用状态
+     * - 暂时不对外开放
+    disabled?: boolean;
+     */
+    /**
+     * 标题区域样式
+     * - 对齐方式
+     * - 标题区域宽度
+     */
+    titleStyle?: AlignStyle & SizeOptions;
+};
+/**
+ * 输入框事件
+ */
+type InputEvents = {
+    /**
+     * 输入框点击时
+     */
+    click: [];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
 /**
  * 滚动视图配置选项
  */
@@ -212,6 +270,42 @@ type TableColOptions = {
     paddingStyle?: string;
 };
 
+/**
+ * 折叠面板配置选项
+ */
+type FoldOptions = {
+    /**
+     * 折叠面板标题
+     */
+    title?: string;
+    /**
+     * 副标题
+     * - 跟随在title后
+     */
+    subtitle?: string;
+    /**
+     * 使用禁用【折叠】功能
+     * - true 则禁用折叠，始终展开内容区域
+     */
+    disable?: boolean;
+};
+/**
+ * 折叠状态
+ * - expand ： 展开状态
+ * - fold   ： 折叠状态
+ */
+type FoldStatus = "expand" | "fold";
+/**
+ * 折叠面板事件
+ */
+type FoldEvents = {
+    /**
+     * 折叠状态发生改变时
+     * @param status 折叠状态
+     */
+    change: [status: FoldStatus];
+};
+
 /**
  * 组件配置选项
  */
@@ -250,6 +344,26 @@ type ComponentMountOptions = ComponentOptions & {
     props?: Record<string, any>;
 };
 
+/**
+ * 开关 配置选项
+ */
+type SwitchOptions = {
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+};
+/**
+ * 开关 事件
+ */
+type SwitchEvents = {
+    /**
+     * 开关 状态变化时
+     * @param value 开启、还是关闭
+     */
+    change: [value: boolean];
+};
+
 /**
  * 图标配置选项
  * - 后续支持外部直接传入svg路径，这样实现更细粒度的控制
@@ -392,7 +506,7 @@ type ButtonOptions = {
     /**
      * 按钮尺寸
      * - max    ： 120 X 40
-     * - middle ： 80 X 32
+     * - middle ： 90 X 32
      * - normal ： 54 X 28
      * - small  ： 30 X 20
      */
@@ -497,21 +611,42 @@ declare function onResize(el: Element, fn: (size: Readonly<{
  */
 declare function onRerect(el: Element, fn: (rect: DOMRectReadOnly) => void): IScope;
 
+/**
+ * 动画相应时样式类型
+ */
+type AnimationRefStyle = Partial<CSSStyleDeclaration>;
+
 /**
  * 响应式助手类，封装一些响应式相关的工具方法
  */
 
 /**
- * 作用域ref
- * - 在scope创建时，为rv变量赋 sv 值；scope销毁时赋 dv 值
- * - 可和 snail.core 中的 waitInScope 方法联动实现：api请求开始时显示loading，api请求结束后隐藏loading
+ * 作用域ref，方法执行逻辑：
+ * -1、初始化作用域，设置rv值： rv.value = start
+ * -2、在延迟 dealy 销毁作用域，设置rv值：rv.value = end
+ * - 备注示例：可和 snail.core 中的 waitInScope 方法联动实现：api请求开始时显示loading，api请求结束后隐藏loading
  * @param rv 响应式变量对象
- * @param sv 起始值，scope创建时执行 rv.value = sv
- * @param dv 销毁值，scope销毁时执行 rv.value = dv
- * @param dealy 销毁时的延迟时间；单位 ms ；实现延迟设置 dv 值
+ * @param start 起始值，scope创建时执行 rv.value = start
+ * @param end 销毁值，scope销毁时执行 rv.value = end
+ * @param dealy 销毁时的延迟时间；单位 ms ；实现延迟设置 end 值
  * @returns 新创建的作用域对象
  */
-declare function scopeRef<T>(rv: Ref<T> | ShallowRef<T>, sv: T, dv: T, dealy?: number): IScope;
+declare function scopeRef<T>(rv: Ref<T> | ShallowRef<T>, start: T, end: T, dealy?: number): IScope;
+/**
+ * 动画ref，方法执行逻辑：
+ * - 1、初始动画，设置styleRef起始值：styleRef.value = start
+ * - 2、开始动画，设置styleRef目标值：styleRef.value = target
+ * - 3、结束动画，设置styleRef最终值：styleRef.value = end
+ * - 备注示例：外部自己控制动画效果，这里只操作样式值
+ * - 1、设置height动画效果（0-100，1s动画结束后清理height值）：animationRef(styleRef,1000,{height:0},{height:"100px",{}})
+ * @param styleRef 动画样式ref对象
+ * @param start 初始动画style样式
+ * @param target 目标动画style样式
+ * @param aTime 动画时间，单位ms，延迟 aTime后执行【结束动画】操作，不传入则忽略【结束动画】操作
+ * @param end 结束动画style样式；不传入则忽略【结束动画】操作
+ * @returns 作用域对象，destroy 方法直接执行【结束动画】操作
+ */
+declare function animationRef(styleRef: ShallowRef<AnimationRefStyle>, start: AnimationRefStyle, target: AnimationRefStyle, aTime?: number, end?: AnimationRefStyle): IScope;
 
 /**
  * 模态弹窗显示的组件配置选项
@@ -597,6 +732,12 @@ type Dialog = {
     handle: DialogHandle<any>;
 };
 
+/**
+ * 模态弹窗助手；提供模态弹窗相关功能
+ *      1、内部维护一个VueApp实例，专门用于进行模态弹窗操
+ *      2、模态弹窗展示效果，通过 @see ../componets/dialog-wrapper.vue 实现
+ */
+
 /**
  * 打开模态弹窗
  * @param options 弹窗组件配置选项
@@ -604,6 +745,17 @@ type Dialog = {
  * @returns 弹窗打开结果，可手动关闭弹窗
  */
 declare function openDialog<T>(options: DialogOptions, onDestroyed?: (fn: () => void) => void): DialogOpenResult<T>;
+/**
+ * 作用域弹窗：方法执行逻辑：
+ * - 1、打开弹窗前：若scopeRef有值，则强制执行 scopeRef.value.destroy() 做销毁
+ * - 2、打开弹窗 ：构建IScope赋值给 scopeRef.value ；外部可 scopeRef.value.destroy() 强制关闭弹窗
+ * - 3、等待弹窗关闭 ：得到弹窗返回值，置空scopeRef值，并返回弹窗返回值：scopeRef.value = undefined
+ * - 备注说明：封装重复性代码，简化外部开发逻辑；无实际业务意义
+ * @param options 弹窗配置选项
+ * @param scopeRef 作用域响应式对象
+ * @returns 弹窗关闭时传递的数据
+ */
+declare function scopeDialog<T>(options: DialogOptions, scopeRef: ShallowRef<IScope | undefined>): Promise<T>;
 
 /**
  * 确认弹窗配置选项
@@ -763,12 +915,21 @@ declare const components: {
         close: () => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
-            default?: (props: {
-                class: string;
-            }) => any;
+            default?: (props: {}) => any;
         };
     });
     Icon: vue.DefineComponent<IconOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+    Switch: vue.DefineComponent<SwitchOptions & {
+        modelValue?: boolean;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (value: boolean) => any;
+        "update:modelValue": (value: boolean) => any;
+    }, string, vue.PublicProps, Readonly<SwitchOptions & {
+        modelValue?: boolean;
+    }> & Readonly<{
+        onChange?: (value: boolean) => any;
+        "onUpdate:modelValue"?: (value: boolean) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Dynamic: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ComponentOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -787,6 +948,46 @@ declare const components: {
             [x: number]: (props: any) => any;
         };
     });
+    Fold: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FoldOptions & {
+            status?: FoldStatus;
+        }> & Readonly<{
+            onChange?: (status: FoldStatus) => any;
+            "onUpdate:status"?: (value: FoldStatus) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            change: (status: FoldStatus) => any;
+            "update:status": (value: FoldStatus) => any;
+        }, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<FoldOptions & {
+            status?: FoldStatus;
+        }> & Readonly<{
+            onChange?: (status: FoldStatus) => any;
+            "onUpdate:status"?: (value: FoldStatus) => any;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<FoldOptions & {
+        status?: FoldStatus;
+    }> & Readonly<{
+        onChange?: (status: FoldStatus) => any;
+        "onUpdate:status"?: (value: FoldStatus) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (status: FoldStatus) => any;
+        "update:status": (value: FoldStatus) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            header?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
+        };
+    });
     Scroll: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -859,41 +1060,54 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Input: vue.DefineComponent<InputOptions & {
+        modelValue?: string;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (value: string) => any;
+        click: () => any;
+        "update:modelValue": (value: string) => any;
+    }, string, vue.PublicProps, Readonly<InputOptions & {
+        modelValue?: string;
+    }> & Readonly<{
+        onChange?: (value: string) => any;
+        onClick?: () => any;
+        "onUpdate:modelValue"?: (value: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     DragVerify: vue.DefineComponent<DragVerifyOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
         success: () => any;
     }, string, vue.PublicProps, Readonly<DragVerifyOptions> & Readonly<{
         onSuccess?: () => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-    Loading: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+    Empty: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<EmptyOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<EmptyOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<EmptyOptions> & 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;
         };
     });
-    NoData: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<NoDataOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+    Loading: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<NoDataOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<NoDataOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<LoadingOptions> & 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;
         };
@@ -910,5 +1124,5 @@ declare const components: {
  */
 declare function mount(options: ComponentMountOptions, onDestroyed?: (fn: () => void) => void): IScope;
 
-export { components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeRef, toast, triggerAppCreated, useScopes };
-export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmHandle, ConfirmOptions, Dialog, DialogHandle, DialogOpenResult, DialogOptions, DragVerifyInfo, DragVerifyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IconOptions, IconPathOptions, IconType, LoadingOptions, NoDataOptions, ScrollEvents, ScrollOptions, ScrollTouchType, TableColOptions, TableOptions, TableRowOptions, TableStyleOptions, ToastHandle, ToastOptions };
+export { animationRef, components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeDialog, scopeRef, toast, triggerAppCreated, useScopes };
+export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmHandle, ConfirmOptions, Dialog, DialogHandle, DialogOpenResult, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IconOptions, IconPathOptions, IconType, InputEvents, InputOptions, LoadingOptions, ScrollEvents, ScrollOptions, ScrollTouchType, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TableStyleOptions, ToastHandle, ToastOptions };