vft 0.0.524 → 0.0.525

package/es/components/upload/upload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,301 @@
+import { useFormDisabled } from "../form/hooks/use-form-common-props.js";
+import { Message as VftMessage } from "../message/index.js";
+import { ajaxUpload } from "./ajax.js";
+import { uploadContextKey } from "./constants.js";
+import upload_content_default from "./upload-content.js";
+import upload_list_default from "./upload-list.js";
+import { useHandlers } from "./use-handlers.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, openBlock, provide, renderSlot, shallowRef, toRef, unref, useSlots, withCtx } from "vue";
+var upload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	...defineComponent({ name: "vft-upload" }),
+	props: {
+		action: {
+			type: String,
+			required: false,
+			default: "#"
+		},
+		headers: {
+			type: null,
+			required: false
+		},
+		method: {
+			type: String,
+			required: false,
+			default: "post"
+		},
+		data: {
+			type: Object,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false,
+			default: "file"
+		},
+		drag: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		withCredentials: {
+			type: Boolean,
+			required: false
+		},
+		showFileList: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		accept: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "select"
+		},
+		fileList: {
+			type: Array,
+			required: false,
+			default: []
+		},
+		autoUpload: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		listType: {
+			type: String,
+			required: false,
+			default: "text"
+		},
+		httpRequest: {
+			type: Function,
+			required: false,
+			default: ajaxUpload
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		limit: {
+			type: Number,
+			required: false
+		},
+		replaceOnLimit: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		maxSize: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		sizeExceedMessage: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		sizeWidth: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		sizeHeight: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		onSizeInvalid: {
+			type: Function,
+			required: false
+		},
+		onTypeInvalid: {
+			type: Function,
+			required: false
+		},
+		beforeUpload: {
+			type: Function,
+			required: false
+		},
+		beforeRemove: {
+			type: Function,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		onPreview: {
+			type: Function,
+			required: false
+		},
+		onSuccess: {
+			type: Function,
+			required: false
+		},
+		onProgress: {
+			type: Function,
+			required: false
+		},
+		onError: {
+			type: Function,
+			required: false
+		},
+		onExceed: {
+			type: Function,
+			required: false,
+			default: () => {}
+		},
+		onSizeExceed: {
+			type: Function,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const slots = useSlots();
+		const disabled = useFormDisabled();
+		const finalSizeExceedMessage = computed(() => props.sizeExceedMessage || "文件大小超出限制");
+		const uploadRef = shallowRef();
+		const { abort, submit, clearFiles, uploadFiles, handleStart, handleError, handleRemove, handleSuccess, handleProgress } = useHandlers(props, uploadRef);
+		const isPictureCard = computed(() => props.listType === "picture-card");
+		const uploadInstance = {
+			abort,
+			submit,
+			clearFiles,
+			uploadFiles,
+			uploadRef
+		};
+		const uploadContentProps = computed(() => ({
+			...props,
+			sizeExceedMessage: finalSizeExceedMessage.value,
+			fileList: uploadFiles.value,
+			onStart: handleStart,
+			onProgress: handleProgress,
+			onSuccess: handleSuccess,
+			onError: handleError,
+			onRemove: handleRemove,
+			onChange: (uploadFile, uploadFiles) => {
+				props.onChange?.(uploadFile, uploadFiles, uploadInstance);
+			},
+			onSizeExceed: (file, maxSize) => {
+				if (props.onSizeExceed) props.onSizeExceed?.(file, maxSize);
+				else {
+					const defaultMessage = "默认文件大小超出提示:";
+					console.warn(defaultMessage);
+					VftMessage.warning(defaultMessage);
+				}
+			},
+			onSizeInvalid: (file, width, height, expectedWidth, expectedHeight) => {
+				if (props.onSizeInvalid) props.onSizeInvalid(file, width, height, expectedWidth, expectedHeight);
+				else {
+					const defaultMessage = "默认尺寸校验提示:";
+					console.warn(defaultMessage);
+					VftMessage.warning(defaultMessage);
+				}
+			},
+			onTypeInvalid: (file, acceptedTypes) => {
+				if (props.onTypeInvalid) props.onTypeInvalid(file, acceptedTypes);
+				else {
+					const defaultMessage = "默认文件类型校验提示:";
+					console.warn(defaultMessage);
+					VftMessage.warning(defaultMessage);
+				}
+			}
+		}));
+		onBeforeUnmount(() => {
+			uploadFiles.value.forEach(({ url }) => {
+				if (url?.startsWith("blob:")) URL.revokeObjectURL(url);
+			});
+		});
+		provide(uploadContextKey, { accept: toRef(props, "accept") });
+		__expose({
+			abort,
+			submit,
+			clearFiles,
+			handleStart,
+			handleRemove,
+			fileList: uploadFiles
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["vft-upload-wrapper", [{ "disabled": unref(disabled) }]]) }, [
+				isPictureCard.value && __props.showFileList ? (openBlock(), createBlock(upload_list_default, {
+					key: 0,
+					disabled: unref(disabled),
+					"list-type": __props.listType,
+					files: unref(uploadFiles),
+					"handle-preview": __props.onPreview,
+					onRemove: unref(handleRemove)
+				}, createSlots({
+					append: withCtx(() => [createVNode(upload_content_default, mergeProps({
+						ref_key: "uploadRef",
+						ref: uploadRef
+					}, uploadContentProps.value), {
+						default: withCtx(() => [unref(slots).trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true), !unref(slots).trigger && unref(slots).default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)]),
+						_: 3
+					}, 16)]),
+					_: 2
+				}, [_ctx.$slots.file ? {
+					name: "default",
+					fn: withCtx(({ file, index }) => [renderSlot(_ctx.$slots, "file", {
+						file,
+						index
+					})]),
+					key: "0"
+				} : void 0]), 1032, [
+					"disabled",
+					"list-type",
+					"files",
+					"handle-preview",
+					"onRemove"
+				])) : createCommentVNode("v-if", true),
+				!isPictureCard.value || isPictureCard.value && !__props.showFileList ? (openBlock(), createBlock(upload_content_default, mergeProps({
+					key: 1,
+					ref_key: "uploadRef",
+					ref: uploadRef
+				}, uploadContentProps.value), {
+					default: withCtx(() => [unref(slots).trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true), !unref(slots).trigger && unref(slots).default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)]),
+					_: 3
+				}, 16)) : createCommentVNode("v-if", true),
+				_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "tip"),
+				!isPictureCard.value && __props.showFileList ? (openBlock(), createBlock(upload_list_default, {
+					key: 3,
+					disabled: unref(disabled),
+					"list-type": __props.listType,
+					files: unref(uploadFiles),
+					"handle-preview": __props.onPreview,
+					onRemove: unref(handleRemove)
+				}, createSlots({ _: 2 }, [_ctx.$slots.file ? {
+					name: "default",
+					fn: withCtx(({ file, index }) => [renderSlot(_ctx.$slots, "file", {
+						file,
+						index
+					})]),
+					key: "0"
+				} : void 0]), 1032, [
+					"disabled",
+					"list-type",
+					"files",
+					"handle-preview",
+					"onRemove"
+				])) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { upload_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/upload/use-handlers.js

@@ -1,110 +1,133 @@
-import { useVModel as O } from "@vueuse/core";
-import "@vft/utils";
-import { throwError as U, debugWarn as F } from "../../utils/error.js";
-import "../config-provider/hooks/use-global-config.js";
-import { watch as f } from "vue";
-import { isNil as j } from "lodash-es";
-import "../form/index.js";
-import { genFileId as m } from "./constants.js";
-const h = "VftUpload", b = (u) => {
-  u.url?.startsWith("blob:") && URL.revokeObjectURL(u.url);
-}, I = (u, c) => {
-  const r = O(
-    u,
-    "fileList",
-    void 0,
-    { passive: !0 }
-  ), i = (e) => r.value.find((t) => t.uid === e.uid), s = {
-    abort: l,
-    submit: v,
-    clearFiles: d,
-    uploadFiles: r,
-    uploadRef: c
-  };
-  function l(e) {
-    c.value?.abort(e);
-  }
-  function d(e = ["ready", "uploading", "success", "fail"]) {
-    r.value = r.value.filter(
-      (t) => !e.includes(t.status)
-    );
-  }
-  const g = (e, t) => {
-    const a = i(t);
-    a && (console.error(e), a.status = "fail", r.value.splice(r.value.indexOf(a), 1), u.onError?.(e, a, r.value), u.onChange?.(a, r.value, s));
-  }, L = (e, t) => {
-    const a = i(t);
-    a && (u.onProgress?.(e, a, r.value), a.status = "uploading", a.percentage = Math.round(e.percent));
-  }, R = (e, t) => {
-    const a = i(t);
-    a && (a.status = "success", a.response = e, u.onSuccess?.(e, a, r.value), u.onChange?.(a, r.value, s));
-  }, y = (e) => {
-    j(e.uid) && (e.uid = m());
-    const t = {
-      name: e.name,
-      percentage: 0,
-      status: "ready",
-      size: e.size,
-      raw: e,
-      uid: e.uid
-    };
-    if (u.listType === "picture-card" || u.listType === "picture")
-      try {
-        t.url = URL.createObjectURL(e);
-      } catch (a) {
-        F(h, a.message), u.onError?.(a, t, r.value);
-      }
-    u.limit === 1 && u.replaceOnLimit && r.value.length > 0 && (r.value.forEach((a) => {
-      b(a);
-    }), r.value = []), r.value = [...r.value, t], u.onChange?.(t, r.value, s);
-  }, E = async (e) => {
-    const t = e instanceof File ? i(e) : e;
-    t || U(h, "file to be removed not found");
-    const a = (n) => {
-      l(n);
-      const o = r.value;
-      o.splice(o.indexOf(n), 1), u.onRemove?.(n, o), b(n);
-    };
-    u.beforeRemove ? await u.beforeRemove(t, r.value) !== !1 && a(t) : a(t);
-  };
-  function v() {
-    r.value.filter(({ status: e }) => e === "ready").forEach(({ raw: e }) => e && c.value?.upload(e));
-  }
-  return f(
-    () => u.listType,
-    (e) => {
-      e !== "picture-card" && e !== "picture" || (r.value = r.value.map((t) => {
-        const { raw: a, url: n } = t;
-        if (!n && a)
-          try {
-            t.url = URL.createObjectURL(a);
-          } catch (o) {
-            u.onError?.(o, t, r.value);
-          }
-        return t;
-      }));
-    }
-  ), f(
-    r,
-    (e) => {
-      if (e)
-        for (const t of e)
-          t.uid ||= m(), t.status ||= "success";
-    },
-    { immediate: !0, deep: !0 }
-  ), {
-    /** @description two-way binding ref from props `fileList` */
-    uploadFiles: r,
-    abort: l,
-    clearFiles: d,
-    handleError: g,
-    handleProgress: L,
-    handleStart: y,
-    handleSuccess: R,
-    handleRemove: E,
-    submit: v
-  };
+import { debugWarn, throwError } from "../../utils/error.js";
+import { genFileId } from "./constants.js";
+import { useVModel } from "@vueuse/core";
+import { isNil } from "lodash-es";
+import { watch } from "vue";
+//#region ../../packages/components/upload/use-handlers.ts
+const SCOPE = "VftUpload";
+const revokeObjectURL = (file) => {
+	if (file.url?.startsWith("blob:")) URL.revokeObjectURL(file.url);
 };
-export {
-  I as useHandlers
+const useHandlers = (props, uploadRef) => {
+	const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
+	const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
+	const uploadInstance = {
+		abort,
+		submit,
+		clearFiles,
+		uploadFiles,
+		uploadRef
+	};
+	function abort(file) {
+		uploadRef.value?.abort(file);
+	}
+	function clearFiles(states = [
+		"ready",
+		"uploading",
+		"success",
+		"fail"
+	]) {
+		uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
+	}
+	const handleError = (err, rawFile) => {
+		const file = getFile(rawFile);
+		if (!file) return;
+		console.error(err);
+		file.status = "fail";
+		uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
+		props.onError?.(err, file, uploadFiles.value);
+		props.onChange?.(file, uploadFiles.value, uploadInstance);
+	};
+	const handleProgress = (evt, rawFile) => {
+		const file = getFile(rawFile);
+		if (!file) return;
+		props.onProgress?.(evt, file, uploadFiles.value);
+		file.status = "uploading";
+		file.percentage = Math.round(evt.percent);
+	};
+	const handleSuccess = (response, rawFile) => {
+		const file = getFile(rawFile);
+		if (!file) return;
+		file.status = "success";
+		file.response = response;
+		props.onSuccess?.(response, file, uploadFiles.value);
+		props.onChange?.(file, uploadFiles.value, uploadInstance);
+	};
+	const handleStart = (file) => {
+		if (isNil(file.uid)) file.uid = genFileId();
+		const uploadFile = {
+			name: file.name,
+			percentage: 0,
+			status: "ready",
+			size: file.size,
+			raw: file,
+			uid: file.uid
+		};
+		if (props.listType === "picture-card" || props.listType === "picture") try {
+			uploadFile.url = URL.createObjectURL(file);
+		} catch (err) {
+			debugWarn(SCOPE, err.message);
+			props.onError?.(err, uploadFile, uploadFiles.value);
+		}
+		if (props.limit === 1 && props.replaceOnLimit && uploadFiles.value.length > 0) {
+			uploadFiles.value.forEach((existingFile) => {
+				revokeObjectURL(existingFile);
+			});
+			uploadFiles.value = [];
+		}
+		uploadFiles.value = [...uploadFiles.value, uploadFile];
+		props.onChange?.(uploadFile, uploadFiles.value, uploadInstance);
+	};
+	const handleRemove = async (file) => {
+		const uploadFile = file instanceof File ? getFile(file) : file;
+		if (!uploadFile) throwError(SCOPE, "file to be removed not found");
+		const doRemove = (file) => {
+			abort(file);
+			const fileList = uploadFiles.value;
+			fileList.splice(fileList.indexOf(file), 1);
+			props.onRemove?.(file, fileList);
+			revokeObjectURL(file);
+		};
+		if (props.beforeRemove) {
+			if (await props.beforeRemove(uploadFile, uploadFiles.value) !== false) doRemove(uploadFile);
+		} else doRemove(uploadFile);
+	};
+	function submit() {
+		uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => raw && uploadRef.value?.upload(raw));
+	}
+	watch(() => props.listType, (val) => {
+		if (val !== "picture-card" && val !== "picture") return;
+		uploadFiles.value = uploadFiles.value.map((file) => {
+			const { raw, url } = file;
+			if (!url && raw) try {
+				file.url = URL.createObjectURL(raw);
+			} catch (err) {
+				props.onError?.(err, file, uploadFiles.value);
+			}
+			return file;
+		});
+	});
+	watch(uploadFiles, (files) => {
+		if (files) for (const file of files) {
+			file.uid ||= genFileId();
+			file.status ||= "success";
+		}
+	}, {
+		immediate: true,
+		deep: true
+	});
+	return {
+		/** @description two-way binding ref from props `fileList` */
+		uploadFiles,
+		abort,
+		clearFiles,
+		handleError,
+		handleProgress,
+		handleStart,
+		handleSuccess,
+		handleRemove,
+		submit
+	};
 };
+//#endregion
+export { useHandlers };

package/es/components/upload/utils.js

@@ -1,53 +1,95 @@
-function n(i) {
-  return new Promise((o, a) => {
-    const e = i.type.startsWith("image/"), r = i.type.startsWith("video/");
-    if (!e && !r) {
-      a(new Error("vft.upload.typeNotSupported"));
-      return;
-    }
-    if (e) {
-      const t = new Image();
-      t.onload = () => {
-        o({ width: t.naturalWidth, height: t.naturalHeight });
-      }, t.onerror = () => {
-        a(new Error("vft.upload.imageLoadFailed"));
-      }, t.src = URL.createObjectURL(i);
-    } else if (r) {
-      const t = document.createElement("video");
-      t.onloadedmetadata = () => {
-        o({ width: t.videoWidth, height: t.videoHeight }), URL.revokeObjectURL(t.src);
-      }, t.onerror = () => {
-        a(new Error("vft.upload.videoLoadFailed")), URL.revokeObjectURL(t.src);
-      }, t.src = URL.createObjectURL(i);
-    }
-  });
+//#region ../../packages/components/upload/utils.ts
+/**
+* 获取图片或视频的尺寸信息
+* @param file 文件对象
+* @returns Promise<{width: number, height: number}>
+*/
+function getFileDimensions(file) {
+	return new Promise((resolve, reject) => {
+		const isImage = file.type.startsWith("image/");
+		const isVideo = file.type.startsWith("video/");
+		if (!isImage && !isVideo) {
+			reject(/* @__PURE__ */ new Error("vft.upload.typeNotSupported"));
+			return;
+		}
+		if (isImage) {
+			const img = new Image();
+			img.onload = () => {
+				resolve({
+					width: img.naturalWidth,
+					height: img.naturalHeight
+				});
+			};
+			img.onerror = () => {
+				reject(/* @__PURE__ */ new Error("vft.upload.imageLoadFailed"));
+			};
+			img.src = URL.createObjectURL(file);
+		} else if (isVideo) {
+			const video = document.createElement("video");
+			video.onloadedmetadata = () => {
+				resolve({
+					width: video.videoWidth,
+					height: video.videoHeight
+				});
+				URL.revokeObjectURL(video.src);
+			};
+			video.onerror = () => {
+				reject(/* @__PURE__ */ new Error("vft.upload.videoLoadFailed"));
+				URL.revokeObjectURL(video.src);
+			};
+			video.src = URL.createObjectURL(file);
+		}
+	});
 }
-async function s(i, o, a) {
-  try {
-    const { width: e, height: r } = await n(i);
-    return { isValid: e === o && r === a, width: e, height: r };
-  } catch (e) {
-    return console.error("Size validation failed:", e), { isValid: !1, width: 0, height: 0 };
-  }
+/**
+* 校验文件尺寸是否符合要求
+* @param file 文件对象
+* @param expectedWidth 期望宽度
+* @param expectedHeight 期望高度
+* @returns Promise<boolean>
+*/
+async function validateFileSize(file, expectedWidth, expectedHeight) {
+	try {
+		const { width, height } = await getFileDimensions(file);
+		return {
+			isValid: width === expectedWidth && height === expectedHeight,
+			width,
+			height
+		};
+	} catch (error) {
+		console.error("Size validation failed:", error);
+		return {
+			isValid: false,
+			width: 0,
+			height: 0
+		};
+	}
 }
-function d(i) {
-  return i.type.startsWith("image/") || i.type.startsWith("video/");
+/**
+* 检查文件是否为图片或视频类型
+* @param file 文件对象
+* @returns boolean
+*/
+function isImageOrVideo(file) {
+	return file.type.startsWith("image/") || file.type.startsWith("video/");
 }
-function c(i, o) {
-  return o ? o.split(",").map((e) => e.trim()).some((e) => {
-    if (e.startsWith(".")) {
-      const r = e.toLowerCase();
-      return i.name.toLowerCase().endsWith(r);
-    } else if (e.includes("/*")) {
-      const r = e.replace("/*", "");
-      return i.type.startsWith(r + "/");
-    } else
-      return i.type === e;
-  }) : !0;
+/**
+* 验证文件类型是否符合accept属性要求
+* @param file 文件对象
+* @param accept accept属性值，如 "image/*,.pdf,.doc"
+* @returns boolean
+*/
+function validateFileType(file, accept) {
+	if (!accept) return true;
+	return accept.split(",").map((type) => type.trim()).some((type) => {
+		if (type.startsWith(".")) {
+			const extension = type.toLowerCase();
+			return file.name.toLowerCase().endsWith(extension);
+		} else if (type.includes("/*")) {
+			const mimePrefix = type.replace("/*", "");
+			return file.type.startsWith(mimePrefix + "/");
+		} else return file.type === type;
+	});
 }
-export {
-  n as getFileDimensions,
-  d as isImageOrVideo,
-  s as validateFileSize,
-  c as validateFileType
-};
+//#endregion
+export { getFileDimensions, isImageOrVideo, validateFileSize, validateFileType };