vue-popup-plus-plugin-preset 1.3.4 → 1.5.0

package/dist/vue-popup-plus-plugin-preset.d.ts

@@ -1,129 +1,291 @@
 import { Component } from 'vue';
+import { ExtractComponentPropTypes } from 'vue-popup-plus';
+import { Placement } from 'vue-popup-plus';
 import { PopupPlugin } from 'vue-popup-plus';
+import { Version } from 'vue-popup-plus';
+
+export declare const album: PopupPlugin<GlobalOption>;
 
 declare type AlbumOption = {
     /**
      * 数据源
+     *
      * - 支持主流图片资源和视频资源
      */
     sources: Array<string>;
     /**
      * 默认选中的媒体索引
+     *
      * - 默认值为 `0`
      */
     defaultIndex?: number;
     /**
-     * 是否禁用当前索引和总索引
+     * 是否禁用计数器
+     *
      * - 默认值为 `false`
      */
-    countDisabled?: boolean;
+    disableCounter?: boolean;
     /**
      * 是否禁用媒体名称
+     *
      * - 默认值为 `false`
      */
-    nameDisabled?: boolean;
+    disableName?: boolean;
     /**
-     * 是否禁用纯模式
+     * 是否禁用纯净预览
+     *
      * - 默认值为 `false`
      */
-    pureDisabled?: boolean;
+    disablePure?: boolean;
     /**
      * 是否禁用下载功能
+     *
      * - 默认值为 `false`
      * - 注意：下载功能仅在资源地址支持跨域时生效
      */
-    downloadDisabled?: boolean;
+    disableDownload?: boolean;
     /**
      * 是否禁用缩放功能
+     *
      * - 默认值为 `false`
      */
-    scaleDisabled?: boolean;
+    disableScale?: boolean;
     /**
      * 是否禁用拖动功能
+     *
      * - 默认值为 `false`
      */
-    dragDisabled?: boolean;
+    disableDrag?: boolean;
+    /**
+     * 遮罩层是否模糊
+     *
+     * - 默认值：`true`
+     */
+    maskBlur?: boolean;
 };
 
+declare const alert_2: PopupPlugin<GlobalOption>;
+export { alert_2 as alert }
+
 declare type AlertOption = {
     /**
      * 提示框标题
+     *
      * - 默认值：`提示`
      */
     title?: string;
     /**
      * 标题栏是否显示关闭按钮
+     *
      * - 默认值：`true`
      */
     headerClose?: boolean;
     /**
      * 确认按钮文本
+     *
      * - 默认值：`确定`
      */
     confirmText?: string;
     /**
      * 是否可拖动
+     *
      * - 默认值：`false`
      */
     draggable?: boolean;
     /**
      * 是否可拖动超出窗口边界
+     *
      * - 默认值：`false`
      */
     dragOverflow?: boolean;
     /**
      * 遮罩层是否模糊
+     *
      * - 默认值：`true`
      */
     maskBlur?: boolean;
 };
 
+declare const confirm_2: PopupPlugin<GlobalOption>;
+export { confirm_2 as confirm }
+
 declare type ConfirmOption = {
     /**
      * 确认框标题
+     *
      * - 默认值：`确认`
      */
     title?: string;
     /**
      * 标题栏是否显示关闭按钮
+     *
      * - 默认值：`false`
      */
     headerClose?: boolean;
     /**
      * 确认按钮文本
+     *
      * - 默认值：`确定`
      */
     confirmText?: string;
     /**
      * 取消按钮文本
+     *
      * - 默认值：`取消`
      */
     cancelText?: string;
     /**
      * 是否可拖动
+     *
      * - 默认值：`false`
      */
     draggable?: boolean;
     /**
      * 是否可拖动超出窗口边界
+     *
      * - 默认值：`false`
      */
     dragOverflow?: boolean;
     /**
      * 遮罩层是否模糊
+     *
      * - 默认值：`true`
      */
     maskBlur?: boolean;
 };
 
-declare const _default: PopupPlugin;
-export default _default;
+export declare const dialog: PopupPlugin<GlobalOption>;
+
+declare type DialogOption<TComponent extends Component = Component> = {
+    /**
+     * 对话框标题
+     *
+     * - 默认值为 `对话`
+     */
+    title?: string;
+    /**
+     * 对话框内容组件
+     */
+    component: TComponent;
+    /**
+     * 对话框内容组件props
+     */
+    componentProps?: ExtractComponentPropTypes<TComponent>;
+    /**
+     * 对话框渲染完成时调用的回调函数
+     */
+    onMounted?: () => void;
+    /**
+     * 是否显示对话框标题栏
+     *
+     * - 默认值为 `true`
+     */
+    header?: boolean;
+    /**
+     * 标题栏是否显示关闭按钮
+     *
+     * - 默认值：`true`
+     */
+    headerClose?: boolean;
+    /**
+     * 对话框宽度
+     *
+     * - 默认值为 `auto`
+     * - 支持 `string` 或 `number` 类型
+     */
+    width?: string | number;
+    /**
+     * 对话框最大宽度
+     *
+     * - 默认值为 `100%`
+     * - 支持 `string` 或 `number` 类型
+     */
+    maxWidth?: string | number;
+    /**
+     * 对话框最小宽度
+     *
+     * - 默认值为 `auto`
+     * - 支持 `string` 或 `number` 类型
+     */
+    minWidth?: string | number;
+    /**
+     * 对话框高度
+     *
+     * - 默认值为 `auto`
+     * - 支持 `string` 或 `number` 类型
+     */
+    height?: string | number;
+    /**
+     * 对话框最大高度
+     *
+     * - 默认值为 `100%`
+     * - 支持 `string` 或 `number` 类型
+     */
+    maxHeight?: string | number;
+    /**
+     * 对话框最小高度
+     *
+     * - 默认值为 `auto`
+     * - 支持 `string` 或 `number` 类型
+     */
+    minHeight?: string | number;
+    /**
+     * 对话框位置
+     *
+     * - 默认值为 `center`
+     * @since 1.5.0
+     */
+    placement?: Placement;
+    /**
+     * 是否显示对话框遮罩层
+     *
+     * - 默认值为 `true`
+     */
+    mask?: boolean;
+    /**
+     * 是否点击遮罩层关闭对话框
+     *
+     * - 默认值为 `false`
+     */
+    maskClickClose?: boolean;
+    /**
+     * 是否可拖拽
+     *
+     * - 默认值为 `false`
+     */
+    draggable?: boolean;
+    /**
+     * 是否可拖拽溢出屏幕
+     *
+     * - 默认值为 `false`
+     */
+    dragOverflow?: boolean;
+    /**
+     * 遮罩层是否模糊
+     *
+     * - 默认值：`true`
+     */
+    maskBlur?: boolean;
+};
+
+declare type GlobalOption = {
+    /**
+     * 插件弹出层皮肤
+     * - 默认为 `modern` 现代皮肤
+     * - 可选值包括：
+     *   - `modern` 现代皮肤
+     *   - `classic` 经典皮肤
+     */
+    skin?: Skin;
+};
 
 export declare interface IAlbum {
     /**
      * 显示媒体相册
+     *
      * - 如果需要等待用户关闭媒体相册，需要通过 `await` 调用，等待执行结束后继续执行后续代码
      * - 使用示例：
+     *
      * ```ts
      * // 显示媒体相册，默认选中第二张媒体，即使用户不关闭媒体相册，也不会阻塞后续代码执行
      * popup.album({
@@ -131,7 +293,7 @@ export declare interface IAlbum {
      * 		'https://example.com/image1.jpg',
      * 		'https://example.com/video1.mp4',
      * 	],
-     * 	defaultIndex: 1
+     * 	defaultIndex: 1,
      * })
      *
      * // 只有用户关闭了媒体相册，才会继续执行后续代码
@@ -149,8 +311,11 @@ export declare interface IAlbum {
 export declare interface IAlert {
     /**
      * 显示提示框
-     * - 如果需要等待用户点击确认按钮后继续执行后续代码，需要通过 `await` 调用，等待执行结束后继续执行后续代码
+     *
+     * - 如果需要等待用户点击确认按钮后继续执行后续代码，需要通过 `await`
+     *   调用，等待执行结束后继续执行后续代码
      * - 使用示例：
+     *
      * ```ts
      * popup.alert('删除成功')
      * // 即使用户不点击确定按钮，也不会阻塞后续代码执行
@@ -165,9 +330,11 @@ export declare interface IAlert {
 export declare interface IConfirm {
     /**
      * 显示确认框
-     * - 如果需要获取点击的按钮是确定还是取消，需要通过 `await` 调用获得一个 `boolean` 类型的返回值，
-     *   确认按钮点击时返回 `true`，取消按钮点击时返回 `false`
+     *
+     * - 如果需要获取点击的按钮是确定还是取消，需要通过 `await` 调用获得一个 `boolean`
+     *   类型的返回值，确认按钮点击时返回 `true`，取消按钮点击时返回 `false`
      * - 使用示例：
+     *
      * ```ts
      * if (await popup.confirm('确定删除吗？')) {
      * 	// 确认删除
@@ -182,37 +349,74 @@ export declare interface IConfirm {
 export declare interface IDialog {
     /**
      * 显示对话框
-     * - 对话框内部组件可通过调用 `this.$emit('close', payload)` 关闭对话框，payload 为关闭时传递的参数
-     * - 如需获取对话框关闭时传递的参数，可在调用 `dialog` 方法时使用 `await` 关键字等待 Promise resolve 后获取
+     *
+     * - 对话框内部组件可通过调用 `dialog.close(payload)`
+     *   关闭对话框，payload 为关闭时传递的参数
+     * - 如需获取对话框关闭时传递的参数，可在调用 `dialog` 方法时使用 `await` 关键字等待
+     *   Promise resolve 后获取
      * - 对话框关闭时，无论是否传递了参数，Promise 都将 resolve，因此需要在调用时判断是否有返回参数
      */
-    <T extends any = any>(options: PopupDialogOption): Promise<T | void>;
+    <T extends any = any, TComponent extends Component = Component>(options: DialogOption<TComponent>): Promise<T | void>;
+    /**
+     * 关闭对话框
+     *
+     * - 将会关闭最后一个创建的对话框
+     * - 如果当前没有对话框正在显示，则不会有任何效果，调试模式下会抛出警告
+     * - 可传递任意类型的参数，该参数将会被传递给打开对话框时的 Promise resolve 函数
+     * @param payload 关闭时传递的参数
+     */
+    close<T extends any = any>(payload?: T): Promise<void>;
 }
 
 export declare interface ILoading {
     /**
      * 显示加载遮罩
-     * - 返回关闭加载遮罩的方法，调用后关闭加载遮罩
+     *
+     * - 全局只会显示一个加载遮罩，每次调用时会先进行判断是否有已存在的加载遮罩
+     * 如果有，则会先关闭已存在的加载遮罩，再显示新的加载遮罩
+     *
      * - 使用示例：
+     *
      * ```ts
-     * const stopLoading = popup.loading()
+     * // 显示加载遮罩
+     * popup.loading()
      * // 关闭加载遮罩
-     * stopLoading()
+     * popup.loading.close()
+     *
+     * // 如果需要等待关闭动画结束，可通过 await 调用
+     * await popup.loading.close()
      * ```
      */
-    (option?: LoadingOption): () => void;
+    (option?: LoadingOption): void;
+    /**
+     * 关闭加载遮罩
+     *
+     * - 使用示例：
+     *
+     * ```ts
+     * // 关闭加载遮罩
+     * popup.loading.close()
+     *
+     * // 如果需要等待关闭动画结束，可通过 await 调用
+     * await popup.loading.close()
+     * ```
+     */
+    close(): Promise<void>;
 }
 
 export declare interface IPrompt {
     /**
      * 显示提示输入
+     *
      * - 可以在提示用户的同时，获取用户输入的内容，支持输入框和文本域
      * - 第一个参数为提示文本，如果不需要渲染提示文本，传入 `false` 即可
-     * - 第二个参数为输入框默认值，第三个参数为选项对象，可以自定义输入框类型、标题、最大长度、占位符、确认按钮文本、取消按钮文本等，具体可以参考 {@link PromptOption}
-     * - 获取输入的内容，需要通过 `await` 调用，等待执行结束后返回用户输入的内容，类型为 `string` | `void`，如果用户点击了取消按钮或者直接关闭弹出层，则返回 `undefined`
+     * - 第二个参数为选项对象，可以自定义输入框默认值、类型、标题、最大长度、
+     *   占位符、确认按钮文本、取消按钮文本等，具体可以参考 {@link PromptOption}
+     * - 获取输入的内容，需要通过 `await` 调用，等待执行结束后返回用户输入的内容，类型为 `string`
+     *   | `void`，如果用户点击了取消按钮或者直接关闭弹出层，则返回 `undefined`
      * - 使用示例：
-     * ```ts
      *
+     * ```ts
      * const name = await popup.prompt('请输入您的姓名')
      * if (name === undefined) {
      * 	console.log('用户取消了输入')
@@ -221,16 +425,20 @@ export declare interface IPrompt {
      * }
      * ```
      */
-    (message: string | boolean, defaultValue?: string, options?: PromptOption): Promise<string | void>;
+    (message: string | boolean, options?: PromptOption): Promise<string | void>;
 }
 
 export declare interface IToast {
     /**
      * 显示消息
+     *
      * - 第一个参数为消息内容
-     * - 第二个参数为消息选项，可自定义消息显示时间，默认值为 2000 毫秒
-     * - 如果需要等待消息消失后继续执行后续代码，需要通过 `await` 调用，等待执行结束后继续执行后续代码
+     * - 第二个参数为消息选项，可自定义消息显示时间，默认值为 `2000` 毫秒
+     *   ，如果设置为 `0` ，则消息不会自动关闭
+     * - 如果需要等待消息消失后继续执行后续代码，需要通过 `await` 调用，
+     *   等待执行结束后继续执行后续代码
      * - 使用示例：
+     *
      * ```ts
      * popup.toast('这是一条消息')
      * // 不会阻塞后续代码执行
@@ -240,153 +448,135 @@ export declare interface IToast {
      * ```
      */
     (content: string, options?: ToastOption): Promise<void>;
-}
-
-declare type LoadingOption = {
-    iconSize?: number;
-};
-
-declare type PopupDialogOption = {
     /**
-     * 对话框标题
-     * - 默认值为 `对话`
+     * 显示成功消息
      */
-    title?: string;
+    success(content: string, options?: ToastOptionWithoutTheme): Promise<void>;
     /**
-     * 对话框内容组件
+     * 显示信息消息
      */
-    component: Component;
+    info(content: string, options?: ToastOptionWithoutTheme): Promise<void>;
     /**
-     * 对话框内容组件props
+     * 显示警告消息
      */
-    componentProps?: Record<string, any>;
+    warning(content: string, options?: ToastOptionWithoutTheme): Promise<void>;
     /**
-     * 对话框渲染完成时调用的回调函数
+     * 显示错误消息
      */
-    onMounted?: () => void;
-    /**
-     * 是否显示对话框标题栏
-     * - 默认值为 `true`
-     */
-    header?: boolean;
-    /**
-     * 标题栏是否显示关闭按钮
-     * - 默认值：`true`
-     */
-    headerClose?: boolean;
-    /**
-     * 对话框宽度
-     * - 默认值为 `auto`
-     * - 支持 `string` 或 `number` 类型
-     */
-    width?: string | number;
-    /**
-     * 对话框最大宽度
-     * - 默认值为 `100%`
-     * - 支持 `string` 或 `number` 类型
-     */
-    maxWidth?: string | number;
-    /**
-     * 对话框最小宽度
-     * - 默认值为 `auto`
-     * - 支持 `string` 或 `number` 类型
-     */
-    minWidth?: string | number;
+    danger(content: string, options?: ToastOptionWithoutTheme): Promise<void>;
+}
+
+export declare const loading: PopupPlugin<GlobalOption>;
+
+declare type LoadingOption = {
     /**
-     * 对话框高度
-     * - 默认值为 `auto`
-     * - 支持 `string` 或 `number` 类型
+     * 加载遮罩主题
+     *
+     * - 默认值：'primary'
+     * - 具体的可选主题请参考 {@link Theme }
      */
-    height?: string | number;
+    theme?: Theme;
     /**
-     * 对话框最大高度
-     * - 默认值为 `100%`
-     * - 支持 `string` 或 `number` 类型
+     * 加载遮罩标题文本
+     *
+     * - 默认值：''
+     * @since 1.3.3
      */
-    maxHeight?: string | number;
+    title?: string;
     /**
-     * 对话框最小高度
-     * - 默认值为 `auto`
-     * - 支持 `string` 或 `number` 类型
+     * 加载遮罩图标大小
+     *
+     * - 默认值：60
      */
-    minHeight?: string | number;
+    iconSize?: number;
     /**
-     * 是否显示对话框遮罩层
-     * - 默认值为 `true`
+     * 是否显示遮罩层
+     *
+     * - 默认值：`true`
+     * @since 1.5.0
      */
     mask?: boolean;
-    /**
-     * 是否点击遮罩层关闭对话框
-     * - 默认值为 `false`
-     */
-    maskClickClose?: boolean;
-    /**
-     * 是否可拖拽
-     * - 默认值为 `false`
-     */
-    draggable?: boolean;
-    /**
-     * 是否可拖拽溢出屏幕
-     * - 默认值为 `false`
-     */
-    dragOverflow?: boolean;
     /**
      * 遮罩层是否模糊
+     *
      * - 默认值：`true`
+     * @since 1.3.3
      */
     maskBlur?: boolean;
 };
 
+export declare const plugin: PopupPlugin<GlobalOption>;
+
+declare const prompt_2: PopupPlugin<GlobalOption>;
+export { prompt_2 as prompt }
+
 declare type PromptOption = {
+    /**
+     * 提示输入框默认值
+     *
+     * - 默认值：`''`
+     */
+    defaultValue?: string;
     /**
      * 提示输入框类型
+     *
      * - 支持的类型包括：
-     * 	- `input`：单行输入框
-     * 	- `textarea`：多行文本域
+     *
+     *   - `input`：单行输入框
+     *   - `textarea`：多行文本域
      */
     type?: PromptType;
     /**
      * 提示输入框标题
+     *
      * - 默认值：`提示输入`
      */
     title?: string;
     /**
      * 标题栏是否显示关闭按钮
+     *
      * - 默认值：`true`
      */
     headerClose?: boolean;
     /**
      * 提示输入框最大长度
+     *
      * - 默认值：`null`
      */
     maxLength?: number | null;
     /**
      * 提示输入框占位符
+     *
      * - 默认值：`请输入`
      */
     placeholder?: string;
     /**
      * 确认按钮文本
+     *
      * - 默认值：`确定`
      */
     confirmText?: string;
     /**
      * 取消按钮文本
+     *
      * - 默认值：`取消`
      */
     cancelText?: string;
     /**
      * 提示输入框是否可拖拽
+     *
      * - 默认值：`false`
      */
     draggable?: boolean;
     /**
      * 提示输入框是否可拖拽溢出屏幕
+     *
      * - 默认值：`false`
      */
     dragOverflow?: boolean;
     /**
      * 遮罩层是否模糊
+     *
      * - 默认值：`true`
      */
     maskBlur?: boolean;
@@ -394,22 +584,54 @@ declare type PromptOption = {
 
 declare type PromptType = 'input' | 'textarea';
 
+declare type Skin = 'classic' | 'modern';
+
+declare type Theme = 'primary' | 'info' | 'success' | 'warning' | 'danger';
+
+export declare const toast: PopupPlugin<GlobalOption>;
+
 declare type ToastOption = {
     /**
      * 消息主题
+     *
      * - 默认值： 'default'
-     * - 具体的可选主题请参考 {@link ToastTheme }
+     * - 具体的可选主题请参考 {@link Theme }
      */
-    theme?: ToastTheme;
+    theme?: Theme;
     /**
      * 消息显示时间，单位毫秒
+     *
      * - 默认值： 2000 毫秒
-     * @default 2000
      */
     duration?: number;
+    /**
+     * 消息位置
+     *
+     * - 默认值为 `center`
+     * @since 1.5.0
+     */
+    placement?: Placement;
+    /**
+     * 是否显示关闭按钮
+     *
+     * - 默认值： `false`
+     * - 当持续时间为 `0` 时，关闭按钮将会强制显示
+     * @since 1.5.0
+     */
+    showClose?: boolean;
+    /**
+     * 是否开启鼠标悬停持续显示
+     *
+     * - 默认值： `true`
+     * - 当持续时间为 `0` 时，该参数无效
+     * @since 1.5.0
+     */
+    hoverWait?: boolean;
 };
 
-declare type ToastTheme = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+declare type ToastOptionWithoutTheme = Omit<ToastOption, 'theme'>;
+
+export declare const version: Version;
 
 export { }
 
@@ -430,34 +652,34 @@ declare module 'vue-popup-plus' {
 
 declare module 'vue-popup-plus' {
     interface PopupCustomProperties {
-        prompt: IPrompt;
+        confirm: IConfirm;
     }
 }
 
 
 declare module 'vue-popup-plus' {
     interface PopupCustomProperties {
-        loading: ILoading;
+        dialog: IDialog;
     }
 }
 
 
 declare module 'vue-popup-plus' {
     interface PopupCustomProperties {
-        toast: IToast;
+        prompt: IPrompt;
     }
 }
 
 
 declare module 'vue-popup-plus' {
     interface PopupCustomProperties {
-        dialog: IDialog;
+        loading: ILoading;
     }
 }
 
 
 declare module 'vue-popup-plus' {
     interface PopupCustomProperties {
-        confirm: IConfirm;
+        toast: IToast;
     }
 }