fast-element-plus 1.0.21 → 2.0.1

package/dist/components/upload/src/upload.mjs

@@ -0,0 +1,134 @@
+import { useExpose } from "../../../utils/vue/expose.mjs";
+import { definePropType, useProps } from "../../../utils/vue/props.mjs";
+import { useRender } from "../../../utils/vue/render.mjs";
+import { makeSlots } from "../../../utils/vue/slots.mjs";
+import { useUpload } from "./useUpload.mjs";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, ref, resolveDirective, withDirectives } from "vue";
+import { UploadFilled } from "@element-plus/icons-vue";
+import { ElIcon, ElUpload, uploadProps } from "element-plus";
+import { isArray, isNull, isString } from "lodash-unified";
+//#region src/components/upload/src/upload.tsx
+/** FaUpload 的运行时 Props 定义。 */
+const faUploadProps = {
+	...uploadProps,
+	/** @description whether to activate drag and drop mode */
+	drag: {
+		type: Boolean,
+		default: true
+	},
+	/** @description maximum number of uploads allowed */
+	limit: {
+		type: Number,
+		default: 1
+	},
+	/** @description v-model绑定值 */
+	modelValue: definePropType([String, Array]),
+	/** @description 大小限制，单位kb */
+	maxSize: {
+		type: definePropType([String, Number]),
+		default: 5120
+	},
+	/** @description 图片上传接口，优先级最高 */
+	uploadApi: { type: definePropType(Function) },
+	/** @description 图片上传地址 */
+	uploadUrl: String
+};
+/** FaUpload 的运行时 Emits 定义。 */
+const faUploadEmits = {
+	/** @description v-model 回调 */
+	"update:modelValue": (value) => isString(value) || isArray(value) || isNull(value),
+	/** @description v-model:fileList 回调 */
+	"update:fileList": (value) => isArray(value),
+	/** @description 改变 */
+	change: (value) => isString(value) || isArray(value) || isNull(value)
+};
+var upload_default = defineComponent({
+	name: "FaUpload",
+	props: faUploadProps,
+	emits: faUploadEmits,
+	slots: makeSlots(),
+	setup(props, { slots, emit, expose }) {
+		const { fileList, loading, formContext, maxSizeMB, handleHttpRequest, handleOnSuccess, handleOnError, handleOnRemove, handleOnExceed, handleOnUpload } = useUpload("FaUpload", "文件", props, emit, {
+			get maxSize() {
+				return props.maxSize;
+			},
+			get uploadApi() {
+				return props.uploadApi;
+			},
+			get uploadUrl() {
+				return props.uploadUrl || (props.action === uploadProps.action.default ? void 0 : props.action);
+			}
+		});
+		const disabled = computed(() => {
+			return props.disabled === true || formContext?.disabled === true;
+		});
+		const uploadRef = ref();
+		const httpRequest = computed(() => props.httpRequest === uploadProps.httpRequest.default ? handleHttpRequest : props.httpRequest);
+		const handleOnChange = (uploadFile, uploadFiles) => {
+			if (uploadFile.status !== "ready") return;
+			if (!handleOnUpload(uploadFile)) fileList.value = fileList.value.filter((item) => item.uid !== uploadFile.uid);
+			else props.onChange?.(uploadFile, uploadFiles);
+		};
+		const handleBeforeUpload = (rawFile) => {
+			if (!fileList.value.some((item) => item.uid === rawFile.uid) || !handleOnUpload(rawFile)) return false;
+			return props.beforeUpload?.(rawFile) ?? true;
+		};
+		const elUploadProps = useProps(props, uploadProps, [
+			"fileList",
+			"disabled",
+			"httpRequest",
+			"beforeUpload",
+			"onExceed",
+			"onSuccess",
+			"onError",
+			"onRemove",
+			"onChange"
+		]);
+		useRender(() => withDirectives(createVNode(ElUpload, mergeProps(elUploadProps.value, {
+			"ref": uploadRef,
+			"class": ["fa-upload", { "fa-upload__default": !slots.default }],
+			"fileList": fileList.value,
+			"onUpdate:fileList": ($event) => fileList.value = $event,
+			"disabled": disabled.value,
+			"httpRequest": httpRequest.value,
+			"beforeUpload": handleBeforeUpload,
+			"onExceed": handleOnExceed,
+			"onSuccess": handleOnSuccess,
+			"onError": handleOnError,
+			"onRemove": handleOnRemove,
+			"onChange": handleOnChange
+		}), {
+			default: () => slots.default ? slots.default() : createVNode(Fragment, null, [createVNode(ElIcon, { "class": "el-icon--upload" }, { default: () => [createVNode(UploadFilled, null, null)] }), createVNode("div", { "class": "el-upload__text" }, [createTextVNode("Drop file here or "), createVNode("em", null, [createTextVNode("click to upload")])])]),
+			...slots.trigger && { trigger: () => slots.trigger?.() ?? [] },
+			tip: () => slots.tip ? slots.tip() : createVNode(Fragment, null, [createVNode("div", { "class": "el-upload__tip" }, [
+				createTextVNode("files with a size less than "),
+				maxSizeMB.value.toString(),
+				createTextVNode("MB")
+			]), !props.showFileList && fileList.value.length > 0 && createVNode("div", { "class": "el-upload__tip" }, [fileList.value.map((item, index) => createVNode(Fragment, null, [item.name, fileList.value.length <= index && createVNode("br", null, null)]))])]),
+			...slots.file && { file: ({ file, index }) => slots.file?.({
+				file,
+				index
+			}) ?? [] }
+		}), [[resolveDirective("loading"), loading.value]]));
+		return useExpose(expose, {
+			/** @description 取消上传请求 */
+			abort: computed(() => uploadRef.value?.abort),
+			/** @description 手动上传文件列表 */
+			submit: computed(() => uploadRef.value?.submit),
+			/** @description 清空已上传的文件列表（该方法不支持在 before-upload 中调用） */
+			clearFiles: computed(() => uploadRef.value?.clearFiles),
+			/** @description 手动选择文件 */
+			handleStart: computed(() => uploadRef.value?.handleStart),
+			/** @description 手动移除文件。file 和 rawFile 已被合并。 */
+			handleRemove: computed(() => uploadRef.value?.handleRemove),
+			/** @description 加载状态 */
+			loading,
+			/** @description 文件集合 */
+			fileList
+		});
+	}
+});
+//#endregion
+export { upload_default as default, faUploadEmits, faUploadProps };
+
+//# sourceMappingURL=upload.mjs.map

package/dist/components/upload/src/upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.mjs","names":["update:modelValue","update:fileList"],"sources":["../../../../src/components/upload/src/upload.tsx"],"sourcesContent":["import { Fragment, computed, defineComponent, ref } from \"vue\";\nimport { UploadFilled } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElUpload, uploadProps } from \"element-plus\";\nimport { isArray, isNull, isString } from \"lodash-unified\";\nimport { definePropType, makeSlots, useExpose, useProps, useRender } from \"../../../utils\";\nimport { useUpload } from \"./useUpload\";\nimport type { UploadFile, UploadInstance, UploadProps, UploadUserFile } from \"element-plus\";\nimport type { VNode } from \"vue\";\n\n/** FaUpload 的运行时 Props 定义。 */\nexport const faUploadProps = {\n\t...uploadProps,\n\t/** @description whether to activate drag and drop mode */\n\tdrag: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description maximum number of uploads allowed */\n\tlimit: {\n\t\ttype: Number,\n\t\tdefault: 1,\n\t},\n\t/** @description v-model绑定值 */\n\tmodelValue: definePropType<string | string[] | null>([String, Array]),\n\t/** @description 大小限制，单位kb */\n\tmaxSize: {\n\t\ttype: definePropType<string | number>([String, Number]),\n\t\tdefault: 5120,\n\t},\n\t/** @description 图片上传接口，优先级最高 */\n\tuploadApi: {\n\t\ttype: definePropType<(formData: FormData) => Promise<string>>(Function),\n\t},\n\t/** @description 图片上传地址 */\n\tuploadUrl: String,\n};\n\n/** FaUpload 的运行时 Emits 定义。 */\nexport const faUploadEmits = {\n\t/** @description v-model 回调 */\n\t\"update:modelValue\": (value: string | string[] | null): boolean => isString(value) || isArray(value) || isNull(value),\n\t/** @description v-model:fileList 回调 */\n\t\"update:fileList\": (value: UploadUserFile[]): boolean => isArray(value),\n\t/** @description 改变 */\n\tchange: (value: string | string[] | null): boolean => isString(value) || isArray(value) || isNull(value),\n};\n\n/** FaUpload 的插槽参数。 */\nexport interface FaUploadSlots extends Record<string, unknown> {\n\t/** @description 默认内容插槽 */\n\tdefault: never;\n\t/** @description 触发文件选择框的内容 */\n\ttrigger: never;\n\t/** @description 提示说明文字 */\n\ttip: never;\n\t/** @description 缩略图模板的内容 */\n\tfile: { file: UploadFile; index: number };\n}\n\nexport default defineComponent({\n\tname: \"FaUpload\",\n\tprops: faUploadProps,\n\temits: faUploadEmits,\n\tslots: makeSlots<FaUploadSlots>(),\n\tsetup(props, { slots, emit, expose }) {\n\t\tconst {\n\t\t\tfileList,\n\t\t\tloading,\n\t\t\tformContext,\n\t\t\tmaxSizeMB,\n\t\t\thandleHttpRequest,\n\t\t\thandleOnSuccess,\n\t\t\thandleOnError,\n\t\t\thandleOnRemove,\n\t\t\thandleOnExceed,\n\t\t\thandleOnUpload,\n\t\t} = useUpload(\"FaUpload\", \"文件\", props, emit, {\n\t\t\tget maxSize() {\n\t\t\t\treturn props.maxSize;\n\t\t\t},\n\t\t\tget uploadApi() {\n\t\t\t\treturn props.uploadApi;\n\t\t\t},\n\t\t\tget uploadUrl() {\n\t\t\t\treturn props.uploadUrl || (props.action === uploadProps.action.default ? undefined : props.action);\n\t\t\t},\n\t\t});\n\n\t\tconst disabled = computed(() => {\n\t\t\treturn props.disabled === true || formContext?.disabled === true;\n\t\t});\n\n\t\tconst uploadRef = ref<UploadInstance>();\n\t\tconst httpRequest = computed(() => (props.httpRequest === uploadProps.httpRequest.default ? handleHttpRequest : props.httpRequest));\n\n\t\tconst handleOnChange: UploadProps[\"onChange\"] = (uploadFile, uploadFiles) => {\n\t\t\tif (uploadFile.status !== \"ready\") return;\n\n\t\t\tif (!handleOnUpload(uploadFile)) {\n\t\t\t\tfileList.value = fileList.value.filter((item) => item.uid !== uploadFile.uid);\n\t\t\t} else {\n\t\t\t\tprops.onChange?.(uploadFile, uploadFiles);\n\t\t\t}\n\t\t};\n\n\t\tconst handleBeforeUpload: UploadProps[\"beforeUpload\"] = (rawFile) => {\n\t\t\t// onChange 已完成首次校验；被移除的非法文件不能在自动上传流程中继续提交。\n\t\t\tif (!fileList.value.some((item) => item.uid === rawFile.uid) || !handleOnUpload(rawFile)) return false;\n\t\t\treturn props.beforeUpload?.(rawFile) ?? true;\n\t\t};\n\n\t\tconst elUploadProps = useProps(props, uploadProps, [\n\t\t\t\"fileList\",\n\t\t\t\"disabled\",\n\t\t\t\"httpRequest\",\n\t\t\t\"beforeUpload\",\n\t\t\t\"onExceed\",\n\t\t\t\"onSuccess\",\n\t\t\t\"onError\",\n\t\t\t\"onRemove\",\n\t\t\t\"onChange\",\n\t\t]);\n\n\t\tuseRender(() => (\n\t\t\t<ElUpload\n\t\t\t\t{...elUploadProps.value}\n\t\t\t\tref={uploadRef}\n\t\t\t\tclass={[\"fa-upload\", { \"fa-upload__default\": !slots.default }]}\n\t\t\t\tvLoading={loading.value}\n\t\t\t\tvModel:fileList={fileList.value}\n\t\t\t\tdisabled={disabled.value}\n\t\t\t\thttpRequest={httpRequest.value}\n\t\t\t\tbeforeUpload={handleBeforeUpload}\n\t\t\t\tonExceed={handleOnExceed}\n\t\t\t\tonSuccess={handleOnSuccess}\n\t\t\t\tonError={handleOnError}\n\t\t\t\tonRemove={handleOnRemove}\n\t\t\t\tonChange={handleOnChange}\n\t\t\t>\n\t\t\t\t{{\n\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\tslots.default ? (\n\t\t\t\t\t\t\tslots.default()\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<ElIcon class=\"el-icon--upload\">\n\t\t\t\t\t\t\t\t\t<UploadFilled />\n\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t<div class=\"el-upload__text\">\n\t\t\t\t\t\t\t\t\tDrop file here or <em>click to upload</em>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t),\n\t\t\t\t\t...(slots.trigger && { trigger: (): VNode | VNode[] => slots.trigger?.() ?? [] }),\n\t\t\t\t\ttip: () =>\n\t\t\t\t\t\tslots.tip ? (\n\t\t\t\t\t\t\tslots.tip()\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class=\"el-upload__tip\">files with a size less than {maxSizeMB.value.toString()}MB</div>\n\t\t\t\t\t\t\t\t{!props.showFileList && fileList.value.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div class=\"el-upload__tip\">\n\t\t\t\t\t\t\t\t\t\t{fileList.value.map((item, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t\t\t{item.name}\n\t\t\t\t\t\t\t\t\t\t\t\t{fileList.value.length <= index && <br />}\n\t\t\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t),\n\t\t\t\t\t...(slots.file && {\n\t\t\t\t\t\tfile: ({ file, index }: { file: UploadFile; index: number }): VNode | VNode[] => slots.file?.({ file, index }) ?? [],\n\t\t\t\t\t}),\n\t\t\t\t}}\n\t\t\t</ElUpload>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 取消上传请求 */\n\t\t\tabort: computed(() => uploadRef.value?.abort),\n\t\t\t/** @description 手动上传文件列表 */\n\t\t\tsubmit: computed(() => uploadRef.value?.submit),\n\t\t\t/** @description 清空已上传的文件列表（该方法不支持在 before-upload 中调用） */\n\t\t\tclearFiles: computed(() => uploadRef.value?.clearFiles),\n\t\t\t/** @description 手动选择文件 */\n\t\t\thandleStart: computed(() => uploadRef.value?.handleStart),\n\t\t\t/** @description 手动移除文件。file 和 rawFile 已被合并。 */\n\t\t\thandleRemove: computed(() => uploadRef.value?.handleRemove),\n\t\t\t/** @description 加载状态 */\n\t\t\tloading,\n\t\t\t/** @description 文件集合 */\n\t\t\tfileList,\n\t\t});\n\t},\n});\n"],"mappings":"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"}

package/dist/components/upload/src/useUpload.d.ts

@@ -0,0 +1,35 @@
+import { Decimal } from "decimal.js";
+import type { FormContext, FormItemContext, UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
+import type { ComputedRef, Ref, WritableComputedRef } from "vue";
+interface UploadComposable {
+    fileList: WritableComputedRef<UploadUserFile[]>;
+    loading: Ref<boolean>;
+    formContext: FormContext | undefined;
+    formItemContext: FormItemContext | undefined;
+    maxSizeMB: ComputedRef<Decimal>;
+    handleValue: () => void;
+    handleHttpRequest: (options: UploadRequestOptions) => Promise<void>;
+    handleOnSuccess: (fileUrl: string, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
+    handleOnError: (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
+    handleOnRemove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
+    handleOnExceed: (files: File[], uploadFiles: UploadUserFile[]) => void;
+    handleOnUpload: (file: UploadFile | UploadRawFile) => boolean;
+}
+/**
+ * 创建上传组件共享的文件状态和操作方法。
+ *
+ * @param componentName - 组件名称。
+ * @param fileTypeName - 文件类型名称。
+ * @param props - 上传组件的 Props。
+ * @param emit - 上传组件的事件触发器。
+ * @param options - 文件大小和类型校验配置。
+ * @returns 文件列表、加载状态和上传操作方法。
+ */
+export declare const useUpload: <T extends string | string[]>(componentName: string, fileTypeName: string, props: Partial<UploadProps> & {
+    modelValue?: T | null;
+}, emit: ((event: "update:fileList", value: UploadUserFile[]) => void) & ((event: "update:modelValue", value: T | null) => void) & ((event: "change", value: T | null) => void), data?: {
+    maxSize?: string | number;
+    uploadApi?: (formData: FormData) => Promise<string>;
+    uploadUrl?: string;
+}) => UploadComposable;
+export {};

package/dist/components/upload/src/useUpload.mjs

@@ -0,0 +1,168 @@
+import { uploadUtil } from "../utils/upload.mjs";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { ElMessage, ElNotification, formContextKey, formItemContextKey, genFileId, uploadProps } from "element-plus";
+import { isArray, isNumber, isString } from "lodash-unified";
+import { useVModel } from "@vueuse/core";
+import { Decimal } from "decimal.js";
+//#region src/components/upload/src/useUpload.ts
+/**
+* 创建上传组件共享的文件状态和操作方法。
+*
+* @param componentName - 组件名称。
+* @param fileTypeName - 文件类型名称。
+* @param props - 上传组件的 Props。
+* @param emit - 上传组件的事件触发器。
+* @param options - 文件大小和类型校验配置。
+* @returns 文件列表、加载状态和上传操作方法。
+*/
+const useUpload = (componentName, fileTypeName, props, emit, data) => {
+	const fileListModel = useVModel(props, "fileList", emit, { passive: true });
+	const fileList = computed({
+		get: () => fileListModel.value ?? [],
+		set: (value) => {
+			fileListModel.value = value;
+		}
+	});
+	const loading = ref(false);
+	let activeUploadCount = 0;
+	const formContext = inject(formContextKey, void 0);
+	const formItemContext = inject(formItemContextKey, void 0);
+	const mbNum = new Decimal(1024);
+	const maxSizeKB = computed(() => new Decimal(isNumber(data?.maxSize) ? data.maxSize : Number(data?.maxSize)));
+	const maxSizeMB = computed(() => maxSizeKB.value.div(mbNum));
+	onMounted(() => {
+		if (!props.disabled && props.autoUpload && !data?.uploadApi && !data?.uploadUrl && props.httpRequest === uploadProps.httpRequest.default) console.warn(`[Fast:${componentName}]`, "uploadApi 和 uploadUrl 至少需要提供一个。");
+	});
+	const handleValue = (files = fileList.value) => {
+		if (files.length > 0) {
+			if (isString(props.modelValue)) {
+				const fileUrl = files[0]?.url;
+				if (!fileUrl) return;
+				emit("update:modelValue", fileUrl);
+				emit("change", fileUrl);
+			} else if (props.multiple) {
+				const value = files.flatMap((item) => item.url ? [item.url] : []);
+				emit("update:modelValue", value);
+				emit("change", value);
+			} else {
+				const fileUrl = files[0]?.url;
+				if (!fileUrl) return;
+				emit("update:modelValue", fileUrl);
+				emit("change", fileUrl);
+			}
+		} else {
+			emit("update:modelValue", null);
+			emit("change", null);
+		}
+	};
+	const handleHttpRequest = async (options) => {
+		const propsData = options.data;
+		if (!data?.uploadApi && !data?.uploadUrl) {
+			const error = /* @__PURE__ */ new Error(`上传${fileTypeName}接口 uploadApi 或地址 uploadUrl 不能为空。`);
+			ElMessage.error(`上传${fileTypeName}Api或地址不能为空`);
+			console.error(`[Fast:${componentName}]`, error.message);
+			return Promise.reject(error);
+		}
+		activeUploadCount++;
+		loading.value = true;
+		try {
+			let fileUrl;
+			if (data?.uploadApi) fileUrl = await uploadUtil.uploadFileByApi(data.uploadApi, options.file, options.filename, propsData);
+			else {
+				const headers = options.headers instanceof Headers ? options.headers : new Headers(Object.entries(options.headers).flatMap(([key, value]) => value === null || value === void 0 ? [] : [[key, String(value)]]));
+				fileUrl = await uploadUtil.uploadFile(data?.uploadUrl ?? options.action, options.file, options.filename, propsData, {
+					headers,
+					method: options.method,
+					withCredentials: options.withCredentials
+				});
+			}
+			options.onSuccess(fileUrl);
+		} finally {
+			activeUploadCount = Math.max(activeUploadCount - 1, 0);
+			loading.value = activeUploadCount > 0;
+		}
+	};
+	const handleOnSuccess = (fileUrl, uploadFile, uploadFiles) => {
+		if (!fileUrl) return;
+		if (!props.multiple && uploadFiles.length > 1) uploadFiles.shift();
+		uploadFile.url = fileUrl;
+		handleValue();
+		if (formItemContext?.prop) formContext?.validateField([formItemContext.prop]);
+		ElMessage.success("上传成功");
+		props.onSuccess?.(fileUrl, uploadFile, uploadFiles);
+	};
+	const handleOnError = (error, uploadFile, uploadFiles) => {
+		ElNotification({
+			message: `【${uploadFile.name}】${fileTypeName}上传失败，请您重新上传`,
+			type: "error"
+		});
+		props.onError?.(error, uploadFile, uploadFiles);
+	};
+	const handleOnRemove = (uploadFile, uploadFiles) => {
+		fileList.value = uploadFiles;
+		handleValue(uploadFiles);
+		props.onRemove?.(uploadFile, uploadFiles);
+	};
+	const handleOnExceed = (files, uploadFiles) => {
+		ElMessage.warning(`最多只能上传 ${props.limit} 个${fileTypeName}，请移除后再进行上传`);
+		props.onExceed?.(files, uploadFiles);
+	};
+	const handleOnUpload = (file) => {
+		if (new Decimal(file.size ?? 0).div(mbNum).greaterThan(maxSizeKB.value)) {
+			console.warn(`[Fast:${componentName}]`, `【${file.name}】${fileTypeName}上传大小不能超过 ${maxSizeMB.value.toString()}MB。`);
+			ElMessage.warning(`【${file.name}】${fileTypeName}上传大小不能超过 ${maxSizeMB.value.toString()}MB`);
+			return false;
+		}
+		const rawFile = "type" in file ? file : file.raw;
+		if (!rawFile) return false;
+		if (!uploadUtil.matchesAccept(rawFile, props.accept)) {
+			const uploadFileNames = uploadUtil.detectFileType(props.accept ?? "");
+			console.warn(`[Fast:${componentName}]`, `只允许上传【${uploadFileNames}】格式的${fileTypeName}。`);
+			ElMessage.warning(`只允许上传【${uploadFileNames}】格式的${fileTypeName}`);
+			return false;
+		}
+		return true;
+	};
+	/**
+	* 监听 v-model 绑定数据
+	*/
+	watch(() => props.modelValue, (newValue) => {
+		if (newValue) {
+			if (isArray(newValue)) fileList.value = newValue.map((m) => {
+				return {
+					name: "",
+					status: "success",
+					uid: fileList.value.find((f) => f.url === m)?.uid ?? genFileId(),
+					url: m
+				};
+			});
+			else {
+				const find = fileList.value.find((f) => f.url === newValue);
+				fileList.value = [{
+					name: "",
+					status: "success",
+					uid: find?.uid ?? genFileId(),
+					url: newValue
+				}];
+			}
+		} else fileList.value = [];
+	}, { immediate: true });
+	return {
+		fileList,
+		loading,
+		formContext,
+		formItemContext,
+		maxSizeMB,
+		handleValue,
+		handleHttpRequest,
+		handleOnSuccess,
+		handleOnError,
+		handleOnRemove,
+		handleOnExceed,
+		handleOnUpload
+	};
+};
+//#endregion
+export { useUpload };
+
+//# sourceMappingURL=useUpload.mjs.map

package/dist/components/upload/src/useUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpload.mjs","names":[],"sources":["../../../../src/components/upload/src/useUpload.ts"],"sourcesContent":["import { useVModel } from \"@vueuse/core\";\nimport { computed, inject, onMounted, ref, watch } from \"vue\";\nimport { ElMessage, ElNotification, formContextKey, formItemContextKey, genFileId, uploadProps } from \"element-plus\";\nimport { isArray, isNumber, isString } from \"lodash-unified\";\nimport { Decimal } from \"decimal.js\";\nimport { uploadUtil } from \"../utils/upload\";\nimport type {\n\tFormContext,\n\tFormItemContext,\n\tUploadFile,\n\tUploadFiles,\n\tUploadProps,\n\tUploadRawFile,\n\tUploadRequestOptions,\n\tUploadUserFile,\n} from \"element-plus\";\nimport type { ComputedRef, Ref, WritableComputedRef } from \"vue\";\n\ninterface UploadComposable {\n\tfileList: WritableComputedRef<UploadUserFile[]>;\n\tloading: Ref<boolean>;\n\tformContext: FormContext | undefined;\n\tformItemContext: FormItemContext | undefined;\n\tmaxSizeMB: ComputedRef<Decimal>;\n\thandleValue: () => void;\n\thandleHttpRequest: (options: UploadRequestOptions) => Promise<void>;\n\thandleOnSuccess: (fileUrl: string, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;\n\thandleOnError: (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;\n\thandleOnRemove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;\n\thandleOnExceed: (files: File[], uploadFiles: UploadUserFile[]) => void;\n\thandleOnUpload: (file: UploadFile | UploadRawFile) => boolean;\n}\n\n/**\n * 创建上传组件共享的文件状态和操作方法。\n *\n * @param componentName - 组件名称。\n * @param fileTypeName - 文件类型名称。\n * @param props - 上传组件的 Props。\n * @param emit - 上传组件的事件触发器。\n * @param options - 文件大小和类型校验配置。\n * @returns 文件列表、加载状态和上传操作方法。\n */\nexport const useUpload = <T extends string | string[]>(\n\tcomponentName: string,\n\tfileTypeName: string,\n\tprops: Partial<UploadProps> & {\n\t\tmodelValue?: T | null;\n\t},\n\temit: ((event: \"update:fileList\", value: UploadUserFile[]) => void) &\n\t\t((event: \"update:modelValue\", value: T | null) => void) &\n\t\t((event: \"change\", value: T | null) => void),\n\tdata?: {\n\t\tmaxSize?: string | number;\n\t\tuploadApi?: (formData: FormData) => Promise<string>;\n\t\tuploadUrl?: string;\n\t}\n): UploadComposable => {\n\tconst fileListModel = useVModel(props, \"fileList\", emit, { passive: true });\n\tconst fileList = computed<UploadUserFile[]>({\n\t\tget: () => fileListModel.value ?? [],\n\t\tset: (value) => {\n\t\t\tfileListModel.value = value;\n\t\t},\n\t});\n\n\tconst loading = ref(false);\n\tlet activeUploadCount = 0;\n\n\t// 获取 el-form 组件上下文\n\tconst formContext = inject(formContextKey, undefined);\n\t// 获取 el-form-item 组件上下文\n\tconst formItemContext = inject(formItemContextKey, undefined);\n\n\tconst mbNum = new Decimal(1024);\n\tconst maxSizeKB = computed(() => new Decimal(isNumber(data?.maxSize) ? data.maxSize : Number(data?.maxSize)));\n\tconst maxSizeMB = computed(() => maxSizeKB.value.div(mbNum));\n\n\tonMounted(() => {\n\t\tif (!props.disabled && props.autoUpload && !data?.uploadApi && !data?.uploadUrl && props.httpRequest === uploadProps.httpRequest.default) {\n\t\t\tconsole.warn(`[Fast:${componentName}]`, \"uploadApi 和 uploadUrl 至少需要提供一个。\");\n\t\t}\n\t});\n\n\tconst handleValue = (files: UploadUserFile[] = fileList.value): void => {\n\t\tif (files.length > 0) {\n\t\t\tif (isString(props.modelValue)) {\n\t\t\t\tconst fileUrl = files[0]?.url;\n\t\t\t\tif (!fileUrl) return;\n\t\t\t\temit(\"update:modelValue\", fileUrl as T);\n\t\t\t\temit(\"change\", fileUrl as T);\n\t\t\t} else {\n\t\t\t\tif (props.multiple) {\n\t\t\t\t\tconst value = files.flatMap((item) => (item.url ? [item.url] : []));\n\t\t\t\t\temit(\"update:modelValue\", value as T);\n\t\t\t\t\temit(\"change\", value as T);\n\t\t\t\t} else {\n\t\t\t\t\tconst fileUrl = files[0]?.url;\n\t\t\t\t\tif (!fileUrl) return;\n\t\t\t\t\temit(\"update:modelValue\", fileUrl as T);\n\t\t\t\t\temit(\"change\", fileUrl as T);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\temit(\"update:modelValue\", null);\n\t\t\temit(\"change\", null);\n\t\t}\n\t};\n\n\tconst handleHttpRequest = async (options: UploadRequestOptions): Promise<void> => {\n\t\tconst propsData = options.data;\n\t\tif (!data?.uploadApi && !data?.uploadUrl) {\n\t\t\tconst error = new Error(`上传${fileTypeName}接口 uploadApi 或地址 uploadUrl 不能为空。`);\n\t\t\tElMessage.error(`上传${fileTypeName}Api或地址不能为空`);\n\t\t\tconsole.error(`[Fast:${componentName}]`, error.message);\n\t\t\treturn Promise.reject(error);\n\t\t}\n\t\tactiveUploadCount++;\n\t\tloading.value = true;\n\t\ttry {\n\t\t\tlet fileUrl: string;\n\t\t\tif (data?.uploadApi) {\n\t\t\t\tfileUrl = await uploadUtil.uploadFileByApi(data.uploadApi, options.file, options.filename, propsData);\n\t\t\t} else {\n\t\t\t\tconst headers =\n\t\t\t\t\toptions.headers instanceof Headers\n\t\t\t\t\t\t? options.headers\n\t\t\t\t\t\t: new Headers(\n\t\t\t\t\t\t\t\tObject.entries(options.headers).flatMap(([key, value]) =>\n\t\t\t\t\t\t\t\t\tvalue === null || value === undefined ? [] : [[key, String(value)] as [string, string]]\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\tfileUrl = await uploadUtil.uploadFile(data?.uploadUrl ?? options.action, options.file, options.filename, propsData, {\n\t\t\t\t\theaders,\n\t\t\t\t\tmethod: options.method,\n\t\t\t\t\twithCredentials: options.withCredentials,\n\t\t\t\t});\n\t\t\t}\n\t\t\toptions.onSuccess(fileUrl);\n\t\t} finally {\n\t\t\tactiveUploadCount = Math.max(activeUploadCount - 1, 0);\n\t\t\tloading.value = activeUploadCount > 0;\n\t\t}\n\t};\n\n\tconst handleOnSuccess = (fileUrl: string, uploadFile: UploadFile, uploadFiles: UploadFiles): void => {\n\t\tif (!fileUrl) return;\n\t\tif (!props.multiple && uploadFiles.length > 1) {\n\t\t\tuploadFiles.shift();\n\t\t}\n\t\tuploadFile.url = fileUrl;\n\t\thandleValue();\n\t\t// 调用 el-form 内部的校验方法（可自动校验）\n\t\tif (formItemContext?.prop) void formContext?.validateField([formItemContext.prop]);\n\t\tElMessage.success(\"上传成功\");\n\t\tprops.onSuccess?.(fileUrl, uploadFile, uploadFiles);\n\t};\n\n\tconst handleOnError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles): void => {\n\t\tElNotification({\n\t\t\tmessage: `【${uploadFile.name}】${fileTypeName}上传失败，请您重新上传`,\n\t\t\ttype: \"error\",\n\t\t});\n\t\tprops.onError?.(error, uploadFile, uploadFiles);\n\t};\n\n\tconst handleOnRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles): void => {\n\t\tfileList.value = uploadFiles;\n\t\thandleValue(uploadFiles);\n\t\tprops.onRemove?.(uploadFile, uploadFiles);\n\t};\n\n\tconst handleOnExceed = (files: File[], uploadFiles: UploadUserFile[]): void => {\n\t\tElMessage.warning(`最多只能上传 ${props.limit} 个${fileTypeName}，请移除后再进行上传`);\n\t\tprops.onExceed?.(files, uploadFiles);\n\t};\n\n\tconst handleOnUpload = (file: UploadFile | UploadRawFile): boolean => {\n\t\tconst fileSizeKB = new Decimal(file.size ?? 0).div(mbNum);\n\n\t\tif (fileSizeKB.greaterThan(maxSizeKB.value)) {\n\t\t\tconsole.warn(`[Fast:${componentName}]`, `【${file.name}】${fileTypeName}上传大小不能超过 ${maxSizeMB.value.toString()}MB。`);\n\t\t\tElMessage.warning(`【${file.name}】${fileTypeName}上传大小不能超过 ${maxSizeMB.value.toString()}MB`);\n\t\t\treturn false;\n\t\t}\n\n\t\tconst rawFile = \"type\" in file ? file : file.raw;\n\t\tif (!rawFile) return false;\n\t\tif (!uploadUtil.matchesAccept(rawFile, props.accept)) {\n\t\t\tconst uploadFileNames = uploadUtil.detectFileType(props.accept ?? \"\");\n\t\t\tconsole.warn(`[Fast:${componentName}]`, `只允许上传【${uploadFileNames}】格式的${fileTypeName}。`);\n\t\t\tElMessage.warning(`只允许上传【${uploadFileNames}】格式的${fileTypeName}`);\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t};\n\n\t/**\n\t * 监听 v-model 绑定数据\n\t */\n\twatch(\n\t\t() => props.modelValue,\n\t\t(newValue) => {\n\t\t\tif (newValue) {\n\t\t\t\tif (isArray(newValue)) {\n\t\t\t\t\tfileList.value = newValue.map((m) => {\n\t\t\t\t\t\tconst find = fileList.value.find((f) => f.url === m);\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tname: \"\",\n\t\t\t\t\t\t\tstatus: \"success\",\n\t\t\t\t\t\t\tuid: find?.uid ?? genFileId(),\n\t\t\t\t\t\t\turl: m,\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tconst find = fileList.value.find((f) => f.url === newValue);\n\t\t\t\t\tfileList.value = [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"\",\n\t\t\t\t\t\t\tstatus: \"success\",\n\t\t\t\t\t\t\tuid: find?.uid ?? genFileId(),\n\t\t\t\t\t\t\turl: newValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfileList.value = [];\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\timmediate: true,\n\t\t}\n\t);\n\n\treturn {\n\t\tfileList,\n\t\tloading,\n\t\tformContext,\n\t\tformItemContext,\n\t\tmaxSizeMB,\n\t\thandleValue,\n\t\thandleHttpRequest,\n\t\thandleOnSuccess,\n\t\thandleOnError,\n\t\thandleOnRemove,\n\t\thandleOnExceed,\n\t\thandleOnUpload,\n\t};\n};\n"],"mappings":"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"}

package/dist/components/upload/utils/upload.d.ts

@@ -0,0 +1,34 @@
+type UploadData = Record<string, string | Blob | [string | Blob, string] | string[]>;
+interface UploadRequestConfig {
+    method?: string;
+    headers?: HeadersInit;
+    withCredentials?: boolean;
+}
+/**
+ * 上传工具类
+ */
+export declare const uploadUtil: {
+    /**
+     * 识别文件类型
+     */
+    detectFileType(accept: string): string;
+    /** 判断文件是否符合 HTML accept 规则。 */
+    matchesAccept(file: File, accept?: string): boolean;
+    /**
+     * 文件上传
+     * @param url 地址
+     * @param file 文件
+     * @param fileName 文件名称
+     * @param params 参数
+     */
+    uploadFile(url: string, file: File, fileName: string, params?: UploadData, request?: UploadRequestConfig): Promise<string>;
+    /**
+     * 文件上传
+     * @param url 地址
+     * @param file 文件
+     * @param fileName 文件名称
+     * @param params 参数
+     */
+    uploadFileByApi(api: (formData: FormData) => Promise<string>, file: File, fileName: string, params?: UploadData): Promise<string>;
+};
+export {};

package/dist/components/upload/utils/upload.mjs

@@ -0,0 +1,108 @@
+import { FaMimeType } from "../../../constants/mime.mjs";
+import { ElMessage } from "element-plus";
+//#region src/components/upload/utils/upload.ts
+/** 将 Element Plus 上传附加数据写入 FormData。 */
+const appendUploadData = (formData, params) => {
+	for (const [key, value] of Object.entries(params)) if (Array.isArray(value)) {
+		if (value.length === 2 && value[0] instanceof Blob && typeof value[1] === "string") formData.append(key, value[0], value[1]);
+		else value.forEach((item) => formData.append(key, item));
+	} else formData.append(key, value);
+};
+const FaMimeTypeNames = {};
+for (const [kName, vAccept] of Object.entries(FaMimeType)) vAccept.split(",").forEach((tItem) => {
+	FaMimeTypeNames[tItem.trim()] = kName;
+});
+/**
+* 上传工具类
+*/
+const uploadUtil = {
+	/**
+	* 识别文件类型
+	*/
+	detectFileType(accept) {
+		const detectTypes = /* @__PURE__ */ new Set();
+		accept.split(",").forEach((mimeType) => {
+			const normalizedMimeType = mimeType.trim();
+			if (normalizedMimeType) detectTypes.add(FaMimeTypeNames[normalizedMimeType] ?? normalizedMimeType);
+		});
+		return Array.from(detectTypes).join(",");
+	},
+	/** 判断文件是否符合 HTML accept 规则。 */
+	matchesAccept(file, accept) {
+		if (!accept?.trim()) return true;
+		const fileName = file.name.toLowerCase();
+		const fileType = file.type.toLowerCase();
+		return accept.split(",").some((item) => {
+			const rule = item.trim().toLowerCase();
+			if (!rule) return false;
+			if (rule.startsWith(".")) return fileName.endsWith(rule);
+			if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1));
+			return fileType === rule;
+		});
+	},
+	/**
+	* 文件上传
+	* @param url 地址
+	* @param file 文件
+	* @param fileName 文件名称
+	* @param params 参数
+	*/
+	async uploadFile(url, file, fileName, params, request) {
+		if (!url) {
+			console.error("[Fast:uploadUtil]", "文件上传地址为空。");
+			ElMessage.error("文件上传地址为空！");
+			return Promise.reject(/* @__PURE__ */ new Error("文件上传地址为空！"));
+		}
+		const formData = new FormData();
+		formData.append("file", file);
+		formData.append("fileName", fileName);
+		if (params) appendUploadData(formData, params);
+		try {
+			const response = await fetch(url, {
+				headers: request?.headers,
+				method: request?.method ?? "POST",
+				credentials: request?.withCredentials ? "include" : "same-origin",
+				body: formData
+			});
+			if (!response.ok) {
+				console.error("[Fast:uploadUtil]", `文件上传失败，HTTP 状态码：${response.status.toString()}。`);
+				ElMessage.error("文件上传失败！");
+				throw new Error("文件上传失败！");
+			}
+			return await response.text();
+		} catch (error) {
+			console.error("[Fast:uploadUtil]", "文件上传失败。", error);
+			ElMessage.error("文件上传失败！");
+			throw error instanceof Error ? error : /* @__PURE__ */ new Error("文件上传失败！");
+		}
+	},
+	/**
+	* 文件上传
+	* @param url 地址
+	* @param file 文件
+	* @param fileName 文件名称
+	* @param params 参数
+	*/
+	async uploadFileByApi(api, file, fileName, params) {
+		if (!api) {
+			console.error("[Fast:uploadUtil]", "文件上传接口为空。");
+			ElMessage.error("文件上传接口为空！");
+			throw new Error("文件上传接口为空！");
+		}
+		const formData = new FormData();
+		formData.append("file", file);
+		formData.append("fileName", fileName);
+		if (params) appendUploadData(formData, params);
+		try {
+			return await api(formData);
+		} catch (error) {
+			console.error("[Fast:uploadUtil]", "文件上传失败。", error);
+			ElMessage.error("文件上传失败！");
+			throw error instanceof Error ? error : /* @__PURE__ */ new Error("文件上传失败！");
+		}
+	}
+};
+//#endregion
+export { uploadUtil };
+
+//# sourceMappingURL=upload.mjs.map

package/dist/components/upload/utils/upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.mjs","names":[],"sources":["../../../../src/components/upload/utils/upload.ts"],"sourcesContent":["import { ElMessage } from \"element-plus\";\nimport { FaMimeType } from \"../../../constants\";\ntype UploadData = Record<string, string | Blob | [string | Blob, string] | string[]>;\n\ninterface UploadRequestConfig {\n\tmethod?: string;\n\theaders?: HeadersInit;\n\twithCredentials?: boolean;\n}\n\n/** 将 Element Plus 上传附加数据写入 FormData。 */\nconst appendUploadData = (formData: FormData, params: UploadData): void => {\n\tfor (const [key, value] of Object.entries(params)) {\n\t\tif (Array.isArray(value)) {\n\t\t\tif (value.length === 2 && value[0] instanceof Blob && typeof value[1] === \"string\") {\n\t\t\t\tformData.append(key, value[0], value[1]);\n\t\t\t} else {\n\t\t\t\tvalue.forEach((item) => formData.append(key, item));\n\t\t\t}\n\t\t} else {\n\t\t\tformData.append(key, value);\n\t\t}\n\t}\n};\n\nconst FaMimeTypeNames: Record<string, keyof typeof FaMimeType> = {};\n\nfor (const [kName, vAccept] of Object.entries(FaMimeType)) {\n\tvAccept.split(\",\").forEach((tItem) => {\n\t\tFaMimeTypeNames[tItem.trim()] = kName as keyof typeof FaMimeType;\n\t});\n}\n\n/**\n * 上传工具类\n */\nexport const uploadUtil = {\n\t/**\n\t * 识别文件类型\n\t */\n\tdetectFileType(accept: string): string {\n\t\tconst detectTypes = new Set<string>();\n\t\taccept.split(\",\").forEach((mimeType) => {\n\t\t\tconst normalizedMimeType = mimeType.trim();\n\t\t\tif (normalizedMimeType) detectTypes.add(FaMimeTypeNames[normalizedMimeType] ?? normalizedMimeType);\n\t\t});\n\t\treturn Array.from(detectTypes).join(\",\");\n\t},\n\t/** 判断文件是否符合 HTML accept 规则。 */\n\tmatchesAccept(file: File, accept?: string): boolean {\n\t\tif (!accept?.trim()) return true;\n\t\tconst fileName = file.name.toLowerCase();\n\t\tconst fileType = file.type.toLowerCase();\n\t\treturn accept.split(\",\").some((item) => {\n\t\t\tconst rule = item.trim().toLowerCase();\n\t\t\tif (!rule) return false;\n\t\t\tif (rule.startsWith(\".\")) return fileName.endsWith(rule);\n\t\t\tif (rule.endsWith(\"/*\")) return fileType.startsWith(rule.slice(0, -1));\n\t\t\treturn fileType === rule;\n\t\t});\n\t},\n\t/**\n\t * 文件上传\n\t * @param url 地址\n\t * @param file 文件\n\t * @param fileName 文件名称\n\t * @param params 参数\n\t */\n\tasync uploadFile(url: string, file: File, fileName: string, params?: UploadData, request?: UploadRequestConfig): Promise<string> {\n\t\tif (!url) {\n\t\t\tconsole.error(\"[Fast:uploadUtil]\", \"文件上传地址为空。\");\n\t\t\tElMessage.error(\"文件上传地址为空！\");\n\t\t\treturn Promise.reject(new Error(\"文件上传地址为空！\"));\n\t\t}\n\t\tconst formData = new FormData();\n\t\tformData.append(\"file\", file);\n\t\tformData.append(\"fileName\", fileName);\n\t\tif (params) appendUploadData(formData, params);\n\t\ttry {\n\t\t\tconst response = await fetch(url, {\n\t\t\t\theaders: request?.headers,\n\t\t\t\tmethod: request?.method ?? \"POST\",\n\t\t\t\tcredentials: request?.withCredentials ? \"include\" : \"same-origin\",\n\t\t\t\tbody: formData,\n\t\t\t});\n\t\t\tif (!response.ok) {\n\t\t\t\tconsole.error(\"[Fast:uploadUtil]\", `文件上传失败，HTTP 状态码：${response.status.toString()}。`);\n\t\t\t\tElMessage.error(\"文件上传失败！\");\n\t\t\t\tthrow new Error(\"文件上传失败！\");\n\t\t\t}\n\t\t\treturn await response.text();\n\t\t} catch (error) {\n\t\t\tconsole.error(\"[Fast:uploadUtil]\", \"文件上传失败。\", error);\n\t\t\tElMessage.error(\"文件上传失败！\");\n\t\t\tthrow error instanceof Error ? error : new Error(\"文件上传失败！\");\n\t\t}\n\t},\n\t/**\n\t * 文件上传\n\t * @param url 地址\n\t * @param file 文件\n\t * @param fileName 文件名称\n\t * @param params 参数\n\t */\n\tasync uploadFileByApi(api: (formData: FormData) => Promise<string>, file: File, fileName: string, params?: UploadData): Promise<string> {\n\t\tif (!api) {\n\t\t\tconsole.error(\"[Fast:uploadUtil]\", \"文件上传接口为空。\");\n\t\t\tElMessage.error(\"文件上传接口为空！\");\n\t\t\tthrow new Error(\"文件上传接口为空！\");\n\t\t}\n\t\tconst formData = new FormData();\n\t\tformData.append(\"file\", file);\n\t\tformData.append(\"fileName\", fileName);\n\t\tif (params) appendUploadData(formData, params);\n\t\ttry {\n\t\t\treturn await api(formData);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"[Fast:uploadUtil]\", \"文件上传失败。\", error);\n\t\t\tElMessage.error(\"文件上传失败！\");\n\t\t\tthrow error instanceof Error ? error : new Error(\"文件上传失败！\");\n\t\t}\n\t},\n};\n"],"mappings":"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"}

package/dist/components/uploadImage/index.d.ts

@@ -0,0 +1,14 @@
+import UploadImage, { faUploadImageEmits, faUploadImageProps } from "./src/uploadImage";
+import type { TSXWithInstall } from "../../utils";
+import type { ExtractPropTypes } from "vue";
+/** 支持预览、校验和状态同步的单图片上传组件。 */
+export declare const FaUploadImage: TSXWithInstall<typeof UploadImage>;
+export default FaUploadImage;
+export { faUploadImageProps, faUploadImageEmits };
+export type { FaUploadImageSlots } from "./src/uploadImage";
+/** FaUploadImage 暴露的组件实例类型。 */
+export type FaUploadImageInstance = InstanceType<typeof UploadImage>;
+/** FaUploadImage 的完整 Props 类型。 */
+export type FaUploadImageProps = ExtractPropTypes<typeof faUploadImageProps>;
+/** FaUploadImage 的 Emits 类型。 */
+export type FaUploadImageEmits = typeof faUploadImageEmits;

package/dist/components/uploadImage/index.mjs

@@ -0,0 +1,9 @@
+import { withInstall } from "../../utils/vue/install.mjs";
+import uploadImage_default, { faUploadImageEmits, faUploadImageProps } from "./src/uploadImage.mjs";
+//#region src/components/uploadImage/index.ts
+/** 支持预览、校验和状态同步的单图片上传组件。 */
+const FaUploadImage = withInstall(uploadImage_default);
+//#endregion
+export { FaUploadImage, FaUploadImage as default, faUploadImageEmits, faUploadImageProps };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/uploadImage/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["UploadImage"],"sources":["../../../src/components/uploadImage/index.ts"],"sourcesContent":["import { withInstall } from \"../../utils\";\nimport UploadImage, { faUploadImageEmits, faUploadImageProps } from \"./src/uploadImage\";\nimport type { TSXWithInstall } from \"../../utils\";\nimport type { ExtractPropTypes } from \"vue\";\n\n/** 支持预览、校验和状态同步的单图片上传组件。 */\nexport const FaUploadImage: TSXWithInstall<typeof UploadImage> = withInstall(UploadImage);\nexport default FaUploadImage;\n\nexport { faUploadImageProps, faUploadImageEmits };\nexport type { FaUploadImageSlots } from \"./src/uploadImage\";\n\n/** FaUploadImage 暴露的组件实例类型。 */\nexport type FaUploadImageInstance = InstanceType<typeof UploadImage>;\n\n/** FaUploadImage 的完整 Props 类型。 */\nexport type FaUploadImageProps = ExtractPropTypes<typeof faUploadImageProps>;\n\n/** FaUploadImage 的 Emits 类型。 */\nexport type FaUploadImageEmits = typeof faUploadImageEmits;\n"],"mappings":";;;;AAMA,MAAa,gBAAoD,YAAYA,mBAAW"}