vue-popup-plus-plugin-preset 1.1.0

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

@@ -0,0 +1,407 @@
+import { Component } from 'vue';
+import { PopupPlugin } from 'vue-popup-plus';
+
+declare type AlbumOption = {
+    /**
+     * 数据源
+     * - 支持主流图片资源和视频资源
+     */
+    sources: Array<string>;
+    /**
+     * 默认选中的媒体索引
+     * - 默认值为 `0`
+     */
+    defaultIndex?: number;
+    /**
+     * 是否禁用当前索引和总索引
+     * - 默认值为 `false`
+     */
+    countDisabled?: boolean;
+    /**
+     * 是否禁用媒体名称
+     * - 默认值为 `false`
+     */
+    nameDisabled?: boolean;
+    /**
+     * 是否禁用纯模式
+     * - 默认值为 `false`
+     */
+    pureDisabled?: boolean;
+    /**
+     * 是否禁用下载功能
+     * - 默认值为 `false`
+     * - 注意：下载功能仅在资源地址支持跨域时生效
+     */
+    downloadDisabled?: boolean;
+    /**
+     * 是否禁用缩放功能
+     * - 默认值为 `false`
+     */
+    scaleDisabled?: boolean;
+    /**
+     * 是否禁用拖动功能
+     * - 默认值为 `false`
+     */
+    dragDisabled?: boolean;
+};
+
+declare type AlertOption = {
+    /**
+     * 提示框标题
+     * - 默认值：`提示`
+     */
+    title?: string;
+    /**
+     * 确认按钮文本
+     * - 默认值：`确定`
+     */
+    confirmText?: string;
+    /**
+     * 是否可拖动
+     * - 默认值：`false`
+     */
+    draggable?: boolean;
+    /**
+     * 是否可拖动超出窗口边界
+     * - 默认值：`false`
+     */
+    dragOverflow?: boolean;
+};
+
+declare type ConfirmOption = {
+    /**
+     * 确认框标题
+     * - 默认值：`确认`
+     */
+    title?: string;
+    /**
+     * 确认按钮文本
+     * - 默认值：`确定`
+     */
+    confirmText?: string;
+    /**
+     * 取消按钮文本
+     * - 默认值：`取消`
+     */
+    cancelText?: string;
+    /**
+     * 是否可拖动
+     * - 默认值：`false`
+     */
+    draggable?: boolean;
+    /**
+     * 是否可拖动超出窗口边界
+     * - 默认值：`false`
+     */
+    dragOverflow?: boolean;
+};
+
+declare const _default: PopupPlugin;
+export default _default;
+
+export declare interface IAlbum {
+    /**
+     * 显示媒体相册
+     * - 如果需要等待用户关闭媒体相册，需要通过 `await` 调用，等待执行结束后继续执行后续代码
+     * - 使用示例：
+     * ```ts
+     * // 显示媒体相册，默认选中第二张媒体，即使用户不关闭媒体相册，也不会阻塞后续代码执行
+     * popup.album({
+     * 	sources: [
+     * 		'https://example.com/image1.jpg',
+     * 		'https://example.com/video1.mp4',
+     * 	],
+     * 	defaultIndex: 1
+     * })
+     *
+     * // 只有用户关闭了媒体相册，才会继续执行后续代码
+     * await popup.album({
+     * 	sources: [
+     * 		'https://example.com/image1.jpg',
+     * 		'https://example.com/image1.jpg',
+     * 	],
+     * })
+     * ```
+     */
+    (options: AlbumOption): Promise<void>;
+}
+
+export declare interface IAlert {
+    /**
+     * 显示提示框
+     * - 如果需要等待用户点击确认按钮后继续执行后续代码，需要通过 `await` 调用，等待执行结束后继续执行后续代码
+     * - 使用示例：
+     * ```ts
+     * popup.alert('删除成功')
+     * // 即使用户不点击确定按钮，也不会阻塞后续代码执行
+     *
+     * await popup.alert('删除成功')
+     * // 只有用户点击了确认按钮，才会继续执行后续代码
+     * ```
+     */
+    (content: string, options?: AlertOption): Promise<void>;
+}
+
+export declare interface IConfirm {
+    /**
+     * 显示确认框
+     * - 如果需要获取点击的按钮是确定还是取消，需要通过 `await` 调用获得一个 `boolean` 类型的返回值，
+     *   确认按钮点击时返回 `true`，取消按钮点击时返回 `false`
+     * - 使用示例：
+     * ```ts
+     * if (await popup.confirm('确定删除吗？')) {
+     * 	// 确认删除
+     * } else {
+     * 	// 取消删除
+     * }
+     * ```
+     */
+    (content: string, options?: ConfirmOption): Promise<boolean>;
+}
+
+export declare interface IDialog {
+    /**
+     * 显示对话框
+     * - 对话框内部组件可通过调用 `this.$emit('close', payload)` 关闭对话框，payload 为关闭时传递的参数
+     * - 如需获取对话框关闭时传递的参数，可在调用 `dialog` 方法时使用 `await` 关键字等待 Promise resolve 后获取
+     * - 对话框关闭时，无论是否传递了参数，Promise 都将 resolve，因此需要在调用时判断是否有返回参数
+     */
+    <T extends any = any>(options: PopupDialogOption): Promise<T | undefined>;
+}
+
+export declare interface ILoading {
+    /**
+     * 显示加载遮罩
+     * - 返回关闭加载遮罩的方法，调用后关闭加载遮罩
+     * - 使用示例：
+     * ```ts
+     * const stopLoading = popup.loading()
+     * // 关闭加载遮罩
+     * stopLoading()
+     * ```
+     */
+    (option?: LoadingOption): () => void;
+}
+
+export declare interface IPrompt {
+    /**
+     * 显示提示输入
+     * - 可以在提示用户的同时，获取用户输入的内容，支持输入框和文本域
+     * - 第一个参数为提示文本，如果不需要渲染提示文本，传入 `false` 即可
+     * - 第二个参数为输入框默认值，第三个参数为选项对象，可以自定义输入框类型、标题、最大长度、占位符、确认按钮文本、取消按钮文本等，具体可以参考 {@link PromptOption}
+     * - 获取输入的内容，需要通过 `await` 调用，等待执行结束后返回用户输入的内容，类型为 `string` | `null`，如果用户点击了取消按钮，则返回 `null`
+     * - 使用示例：
+     * ```ts
+     *
+     * const name = await popup.prompt('请输入您的姓名')
+     * ```
+     */
+    (message: string | boolean, defaultValue?: string, options?: PromptOption): Promise<string>;
+}
+
+export declare interface IToast {
+    /**
+     * 显示消息
+     * - 第一个参数为消息内容
+     * - 第二个参数为消息选项，可自定义消息显示时间，默认值为 2000 毫秒
+     * - 如果需要等待消息消失后继续执行后续代码，需要通过 `await` 调用，等待执行结束后继续执行后续代码
+     * - 使用示例：
+     * ```ts
+     * popup.toast('这是一条消息')
+     * // 不会阻塞后续代码执行
+     *
+     * await popup.toast('这是一条消息')
+     * // 只有消息消失后，才会继续执行后续代码
+     * ```
+     */
+    (content: string, options?: ToastOption): Promise<void>;
+}
+
+declare type LoadingOption = {
+    iconSize?: number;
+};
+
+declare type PopupDialogOption = {
+    /**
+     * 对话框标题
+     * - 默认值为 `''`
+     */
+    title?: string;
+    /**
+     * 对话框内容组件
+     */
+    component: Component;
+    /**
+     * 对话框内容组件props
+     */
+    props?: Record<string, any>;
+    /**
+     * 是否显示对话框标题栏
+     * - 默认值为 `true`
+     */
+    header?: boolean;
+    /**
+     * 是否显示对话框标题栏关闭按钮
+     * - 默认值为 `true`
+     */
+    headerCloseButton?: 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;
+    /**
+     * 是否显示对话框遮罩层
+     * - 默认值为 `true`
+     */
+    mask?: boolean;
+    /**
+     * 是否点击遮罩层关闭对话框
+     * - 默认值为 `false`
+     */
+    maskClickCloseEnabled?: boolean;
+    /**
+     * 是否可拖拽
+     * - 默认值为 `false`
+     */
+    draggable?: boolean;
+    /**
+     * 是否可拖拽溢出屏幕
+     * - 默认值为 `false`
+     */
+    dragOverflow?: boolean;
+    /**
+     * 对话框渲染完成时调用的回调函数
+     */
+    onMounted?: () => void;
+};
+
+declare type PromptOption = {
+    /**
+     * 提示输入框类型
+     * - 支持的类型包括：
+     * 	- `input`：单行输入框
+     * 	- `textarea`：多行文本域
+     */
+    type?: PromptType;
+    /**
+     * 提示输入框标题
+     * - 默认值：`提示输入`
+     */
+    title?: string;
+    /**
+     * 提示输入框最大长度
+     * - 默认值：`null`
+     */
+    maxLength?: number | null;
+    /**
+     * 提示输入框占位符
+     * - 默认值：`请输入`
+     */
+    placeholder?: string;
+    /**
+     * 确认按钮文本
+     * - 默认值：`确定`
+     */
+    confirmText?: string;
+    /**
+     * 取消按钮文本
+     * - 默认值：`取消`
+     */
+    cancelText?: string;
+    /**
+     * 提示输入框是否可拖拽
+     * - 默认值：`false`
+     */
+    draggable?: boolean;
+    /**
+     * 提示输入框是否可拖拽溢出屏幕
+     * - 默认值：`false`
+     */
+    dragOverflow?: boolean;
+};
+
+declare type PromptType = 'input' | 'textarea';
+
+declare type ToastOption = {
+    /**
+     * 消息显示时间，单位毫秒
+     * @default 2000
+     */
+    duration?: number;
+};
+
+export { }
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        alert: IAlert;
+    }
+}
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        confirm: IConfirm;
+    }
+}
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        prompt: IPrompt;
+    }
+}
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        loading: ILoading;
+    }
+}
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        toast: IToast;
+    }
+}
+
+
+declare module 'vue-popup-plus' {
+    interface PopupCustomProperties {
+        dialog: IDialog;
+    }
+}