@ecolovo/uniapp-components 2.0.4 → 2.0.5

package/components/upload/types.d.ts

@@ -0,0 +1,29 @@
+export interface CommonProps {
+    /** 绑定值，文件列表 */
+    modelValue?: string[] | UniApp.UploadMediaFile[];
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 最大上传文件数 */
+    max?: number;
+    /** 最大上传文件大小 */
+    maxSize?: number;
+    /** 自动上传文件 */
+    autoUpload?: boolean;
+    /** 上传文件方法
+     *
+     * 函数签名:
+     *
+     * @param file 待上传文件
+     */
+    uploadHandler?: (file: UniApp.UploadMediaFile) => Promise<UniApp.UploadResponse>;
+}
+export type ConfigurableMediaUploadProps = {
+    /** 最大上传文件数 */
+    max?: number;
+    /** 最大上传文件大小 */
+    maxSize?: number;
+    /** 自动上传文件 */
+    autoUpload?: boolean;
+};
+export declare let mediaUploadProps: ConfigurableMediaUploadProps;
+export declare const setDefaultMediaUploadProps: (props?: ConfigurableMediaUploadProps) => void;

package/components/upload/types.js

@@ -0,0 +1,4 @@
+export let mediaUploadProps = {};
+export const setDefaultMediaUploadProps = (props = {}) => {
+    mediaUploadProps = props;
+};

package/components/upload/types.ts

@@ -0,0 +1,38 @@
+export interface CommonProps {
+	/** 绑定值，文件列表 */
+	modelValue?: string[] | UniApp.UploadMediaFile[];
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 最大上传文件数 */
+	max?: number;
+	/** 最大上传文件大小 */
+	maxSize?: number;
+	/** 自动上传文件 */
+	autoUpload?: boolean;
+	/** 上传文件方法
+	 *
+	 * 函数签名:
+	 *
+	 * @param file 待上传文件
+	 */
+	uploadHandler?: (
+		file: UniApp.UploadMediaFile
+	) => Promise<UniApp.UploadResponse>;
+}
+
+export type ConfigurableMediaUploadProps = {
+	/** 最大上传文件数 */
+	max?: number;
+	/** 最大上传文件大小 */
+	maxSize?: number;
+	/** 自动上传文件 */
+	autoUpload?: boolean;
+};
+
+export let mediaUploadProps: ConfigurableMediaUploadProps = {};
+
+export const setDefaultMediaUploadProps = (
+	props: ConfigurableMediaUploadProps = {}
+) => {
+	mediaUploadProps = props;
+};

package/composable/component-name.d.ts

@@ -1,2 +1,10 @@
+/**
+ * 给组件添加基本类名
+ *
+ * 如组件名称为 foo-bar ，则返回 ['PreFooBar', 'pre-foo-bar']，
+ * 其中 pre 为组件自定义前缀
+ *
+ * @param componentName 组件名称
+ */
 declare const useClassNames: (componentName: string) => [string, string];
 export default useClassNames;

package/composable/component-name.js

@@ -1,9 +1,16 @@
 import { kebabCase, pascalCase } from 'case-anything';
 import { componentPrefix } from '../configs';
+/**
+ * 给组件添加基本类名
+ *
+ * 如组件名称为 foo-bar ，则返回 ['PreFooBar', 'pre-foo-bar']，
+ * 其中 pre 为组件自定义前缀
+ *
+ * @param componentName 组件名称
+ */
 const useClassNames = (componentName) => {
-	const pascalCaseClass =
-		pascalCase(componentPrefix) + pascalCase(componentName);
-	const kebabCaseClass = kebabCase(pascalCaseClass);
-	return [pascalCaseClass, kebabCaseClass];
+    const pascalCaseClass = pascalCase(componentPrefix) + pascalCase(componentName);
+    const kebabCaseClass = kebabCase(pascalCaseClass);
+    return [pascalCaseClass, kebabCaseClass];
 };
 export default useClassNames;

package/composable/component-name.ts

@@ -1,6 +1,14 @@
 import { kebabCase, pascalCase } from 'case-anything';
 import { componentPrefix } from '../configs';
 
+/**
+ * 给组件添加基本类名
+ *
+ * 如组件名称为 foo-bar ，则返回 ['PreFooBar', 'pre-foo-bar']，
+ * 其中 pre 为组件自定义前缀
+ *
+ * @param componentName 组件名称
+ */
 const useClassNames = (componentName: string): [string, string] => {
 	const pascalCaseClass =
 		pascalCase(componentPrefix) + pascalCase(componentName);

package/composable/dialog.d.ts

@@ -0,0 +1,40 @@
+import { type Ref } from 'vue';
+/**
+ * 可等待的弹窗
+ */
+declare const useAwaitableDialog: (isShow: Ref<boolean | undefined>) => {
+    /**
+     * 显示弹出框
+     *
+     * @returns 返回一个 Promise 对象，可用于异步操作
+     */
+    show: <T = void>() => Promise<T | undefined>;
+    /**
+     * 确认操作
+     *
+     * @param value Promise 成功的值
+     */
+    onConfirm: (value?: any) => void;
+    /**
+     * 取消操作
+     *
+     * @param err Promise 失败的错误值
+     */
+    onCancel: (err?: any) => void;
+};
+/**
+ * 弹窗
+ */
+declare const useDialog: () => {
+    /** 弹窗组件实例引用 */
+    dialogRef: Ref<any>;
+    /**
+     * 显示弹出框
+     */
+    show: <T = void>() => Promise<T | undefined>;
+    /**
+     * 关闭弹出框
+     */
+    close: () => any;
+};
+export { useAwaitableDialog, useDialog };

package/composable/dialog.js

@@ -0,0 +1,96 @@
+import { ref } from 'vue';
+/**
+ * 可等待的弹窗
+ */
+const useAwaitableDialog = (isShow) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let resolvePromise;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let rejectPromise;
+    /**
+     * 显示弹出框
+     *
+     * @returns 返回一个 Promise 对象，可用于异步操作
+     */
+    const show = () => {
+        isShow.value = true;
+        const { promise, resolve, reject } = Promise.withResolvers();
+        [resolvePromise, rejectPromise] = [resolve, reject];
+        return promise;
+    };
+    /**
+     * 确认操作
+     *
+     * @param value Promise 成功的值
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onConfirm = (value) => {
+        resolvePromise?.(value);
+    };
+    /**
+     * 取消操作
+     *
+     * @param err Promise 失败的错误值
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onCancel = (err) => {
+        rejectPromise?.(err);
+    };
+    return {
+        /**
+         * 显示弹出框
+         *
+         * @returns 返回一个 Promise 对象，可用于异步操作
+         */
+        show,
+        /**
+         * 确认操作
+         *
+         * @param value Promise 成功的值
+         */
+        onConfirm,
+        /**
+         * 取消操作
+         *
+         * @param err Promise 失败的错误值
+         */
+        onCancel,
+    };
+};
+/**
+ * 弹窗
+ */
+const useDialog = () => {
+    const dialogRef = ref();
+    /**
+     * 显示弹出框
+     */
+    const show = () => {
+        if (!dialogRef.value?.show) {
+            throw new Error('dialogRef 为空或该组件没有导出 show 方法');
+        }
+        return (dialogRef.value?.show)();
+    };
+    /**
+     * 关闭弹出框
+     */
+    const close = () => {
+        if (!dialogRef.value?.close) {
+            throw new Error('dialogRef 为空或该组件没有导出 close 方法');
+        }
+        return dialogRef.value?.close();
+    };
+    return {
+        /** 弹窗组件实例引用 */
+        dialogRef,
+        /**
+         * 显示弹出框
+         */
+        show,
+        /**
+         * 关闭弹出框
+         */
+        close,
+    };
+};
+export { useAwaitableDialog, useDialog };

package/composable/dialog.ts

@@ -0,0 +1,113 @@
+import { ref, type Ref } from 'vue';
+import { Dialog } from '../components';
+
+/**
+ * 可等待的弹窗
+ */
+const useAwaitableDialog = (isShow: Ref<boolean | undefined>) => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let resolvePromise: PromiseWithResolvers<any>['resolve'] | undefined;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let rejectPromise: PromiseWithResolvers<any>['reject'] | undefined;
+
+	/**
+	 * 显示弹出框
+	 *
+	 * @returns 返回一个 Promise 对象，可用于异步操作
+	 */
+	const show = <T = void>() => {
+		isShow.value = true;
+
+		const { promise, resolve, reject } = Promise.withResolvers<
+			T | undefined
+		>();
+		[resolvePromise, rejectPromise] = [resolve, reject];
+
+		return promise;
+	};
+
+	/**
+	 * 确认操作
+	 *
+	 * @param value Promise 成功的值
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const onConfirm = (value?: any) => {
+		resolvePromise?.(value);
+	};
+
+	/**
+	 * 取消操作
+	 *
+	 * @param err Promise 失败的错误值
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const onCancel = (err?: any) => {
+		rejectPromise?.(err);
+	};
+
+	return {
+		/**
+		 * 显示弹出框
+		 *
+		 * @returns 返回一个 Promise 对象，可用于异步操作
+		 */
+		show,
+		/**
+		 * 确认操作
+		 *
+		 * @param value Promise 成功的值
+		 */
+		onConfirm,
+		/**
+		 * 取消操作
+		 *
+		 * @param err Promise 失败的错误值
+		 */
+		onCancel,
+	};
+};
+
+/**
+ * 弹窗
+ */
+const useDialog = () => {
+	const dialogRef = ref<InstanceType<typeof Dialog>>();
+
+	/**
+	 * 显示弹出框
+	 */
+	const show = <T = void>() => {
+		if (!dialogRef.value?.show) {
+			throw new Error('dialogRef 为空或该组件没有导出 show 方法');
+		}
+
+		return (dialogRef.value?.show as () => Promise<T | undefined>)();
+	};
+
+	/**
+	 * 关闭弹出框
+	 */
+	const close = () => {
+		if (!dialogRef.value?.close) {
+			throw new Error('dialogRef 为空或该组件没有导出 close 方法');
+		}
+
+		return dialogRef.value?.close();
+	};
+
+	return {
+		/** 弹窗组件实例引用 */
+		dialogRef,
+		/**
+		 * 显示弹出框
+		 */
+		show,
+		/**
+		 * 关闭弹出框
+		 */
+		close,
+	};
+};
+
+export { useAwaitableDialog, useDialog };

package/composable/index.d.ts

@@ -0,0 +1,5 @@
+export * from './component-name';
+export * from './dialog';
+export * from './message-box';
+export * from './model';
+export * from './page';

package/composable/index.js

@@ -0,0 +1,5 @@
+export * from './component-name';
+export * from './dialog';
+export * from './message-box';
+export * from './model';
+export * from './page';

package/composable/index.ts

@@ -0,0 +1,5 @@
+export * from './component-name';
+export * from './dialog';
+export * from './message-box';
+export * from './model';
+export * from './page';

package/composable/message-box.d.ts

@@ -2,34 +2,51 @@ import type { Ref } from 'vue';
 import type { default as MessageBox } from '../components/message-box/message-box.vue';
 import type { default as Page } from '../components/page/page.vue';
 import type { MessageBoxOptions } from '../components/message-box/message-box';
-type MessageBoxShowCustomFunc = (
-	options: Omit<MessageBoxOptions, 'modelValue'>
-) => Promise<void>;
-type MessageBoxShowConfirmFunc = (
-	options: Pick<
-		MessageBoxOptions,
-		'modal' | 'title' | 'content' | 'confirm' | 'cancel'
-	>
-) => Promise<void>;
-type MessageBoxShowMessageBoxFunc = (
-	options: Pick<MessageBoxOptions, 'modal' | 'title' | 'content' | 'confirm'>
-) => Promise<void>;
-export declare const useMessageBox: (
-	ref: Ref<InstanceType<typeof MessageBox> | undefined>
-) => {
-	show: MessageBoxShowCustomFunc;
-	showConfirm: MessageBoxShowConfirmFunc;
-	showMessageBox: MessageBoxShowMessageBoxFunc;
+type MessageBoxShowCustomFunc = (options: MessageBoxOptions) => Promise<void>;
+type MessageBoxShowConfirmFunc = (options: string | Pick<MessageBoxOptions & {
+    content: string;
+    confirm?: string;
+    cancel?: string;
+}, 'modal' | 'title' | 'content' | 'confirm' | 'cancel'>) => Promise<void>;
+type MessageBoxShowMessageBoxFunc = (options: string | Pick<MessageBoxOptions & {
+    content: string;
+    confirm?: string;
+    cancel?: string;
+}, 'modal' | 'title' | 'content' | 'confirm' | 'cancel'>) => Promise<void>;
+type UseMessageBoxReturn = {
+    /**
+     * 显示消息框，选项自定义
+     *
+     * @param options 消息框选项
+     */
+    show: MessageBoxShowCustomFunc;
+    /**
+     * 显示确认框，仅部分选项自定义
+     *
+     * @param options 确认框选项
+     */
+    showConfirm: MessageBoxShowConfirmFunc;
+    /**
+     * 显示消息框，仅部分选项自定义
+     *
+     * @param options 消息框选项
+     */
+    showMessageBox: MessageBoxShowMessageBoxFunc;
 };
-export declare function usePageMessageBox(isInPage: true): {
-	pageRef: Ref<InstanceType<typeof Page>>;
-	show: MessageBoxShowCustomFunc;
-	showConfirm: MessageBoxShowConfirmFunc;
-	showMessageBox: MessageBoxShowMessageBoxFunc;
+declare const useMessageBoxComponent: (messageBoxRef?: Ref<InstanceType<typeof MessageBox> | undefined>) => {
+    messageBoxRef: Ref<any>;
+    show: MessageBoxShowCustomFunc;
+    showConfirm: MessageBoxShowConfirmFunc;
+    showMessageBox: MessageBoxShowMessageBoxFunc;
 };
-export declare function usePageMessageBox(isInPage?: false): {
-	show: MessageBoxShowCustomFunc;
-	showConfirm: MessageBoxShowConfirmFunc;
-	showMessageBox: MessageBoxShowMessageBoxFunc;
+/**
+ * 页面公用消息框，仅单一个实例，使用时需注意
+ *
+ * @param isInPage 是否在 Page 中使用，当为 `true` 时，须将返回的 `pageRef` 绑定到 `Page` 组件上
+ */
+declare function useMessageBox(isInPage: true): UseMessageBoxReturn & {
+    /** page 组件实例 */
+    pageRef: Ref<InstanceType<typeof Page>>;
 };
-export {};
+declare function useMessageBox(isInPage?: false): UseMessageBoxReturn;
+export { useMessageBox, useMessageBoxComponent };

package/composable/message-box.js

@@ -1,56 +1,71 @@
 import { inject, ref } from 'vue';
-export const useMessageBox = (ref) => {
-	const show = async (options) => {
-		await ref.value?.show(options);
-	};
-	const showConfirm = async (options) => {
-		await ref.value?.show({
-			...options,
-			modal: true,
-			title: '提示',
-			showClose: false,
-			cancel: '取消',
-			confirm: '确认',
-		});
-	};
-	const showMessageBox = async (options) => {
-		await ref.value?.show({
-			...options,
-			modal: false,
-			title: '提示',
-			showClose: false,
-			cancel: false,
-			confirm: '我知道了',
-		});
-	};
-	return {
-		show,
-		showConfirm,
-		showMessageBox,
-	};
+const useMessageBoxComponent = (messageBoxRef) => {
+    const _messageBoxRef = ref(messageBoxRef);
+    const show = async (options) => {
+        await _messageBoxRef.value?.show(options);
+    };
+    const showConfirm = (options) => {
+        if (typeof options === 'string') {
+            options = { content: options };
+        }
+        const { title = '提示', content, modal = true, confirm = '确认', cancel = '取消', } = options;
+        return show({
+            title,
+            content,
+            modal,
+            confirm,
+            cancel,
+            showClose: false,
+        });
+    };
+    const showMessageBox = (options) => {
+        if (typeof options === 'string') {
+            options = { content: options };
+        }
+        const { title = '提示', content, modal = false, confirm: _confirm, cancel: _cancel, } = options;
+        // 仅显示一个按钮，要么是确认按钮，要么是取消按钮
+        const isCancel = _confirm === undefined && _cancel !== undefined;
+        const confirm = isCancel ? false : _confirm || '我知道了';
+        const cancel = !isCancel ? false : _cancel || '我知道了';
+        return show({
+            title,
+            content,
+            modal,
+            confirm,
+            cancel,
+            showClose: false,
+        });
+    };
+    return {
+        messageBoxRef: _messageBoxRef,
+        show,
+        showConfirm,
+        showMessageBox,
+    };
 };
-export function usePageMessageBox(isInPage = false) {
-	if (!isInPage) {
-		const pageMessageBoxRef = inject('ecolovo/page/messageBoxRef');
-		if (!pageMessageBoxRef) {
-			throw new Error('该组件必须在 Page 中使用');
-		}
-		return useMessageBox(pageMessageBoxRef);
-	}
-	const pageRef = ref();
-	const show = async (options) => {
-		await pageRef.value?.show(options);
-	};
-	const showConfirm = async (options) => {
-		await pageRef.value?.showConfirm(options);
-	};
-	const showMessageBox = async (options) => {
-		await pageRef.value?.showMessageBox(options);
-	};
-	return {
-		pageRef,
-		show,
-		showConfirm,
-		showMessageBox,
-	};
+function useMessageBox(isInPage = false) {
+    if (!isInPage) {
+        const pageMessageBoxRef = inject('ecolovo/page/messageBoxRef');
+        if (!pageMessageBoxRef) {
+            throw new Error('该组件必须在 Page 中使用');
+        }
+        return useMessageBoxComponent(pageMessageBoxRef);
+    }
+    const pageRef = ref();
+    const show = async (options) => {
+        await pageRef.value?.show(options);
+    };
+    const showConfirm = async (options) => {
+        await pageRef.value?.showConfirm(options);
+    };
+    const showMessageBox = async (options) => {
+        await pageRef.value?.showMessageBox(options);
+    };
+    return {
+        pageRef,
+        show,
+        showConfirm,
+        showMessageBox,
+    };
 }
+export { useMessageBox, useMessageBoxComponent };