niuma-ui 2.0.3 → 2.0.4

package/dist/components/upload/src/RsUpload.impl.js

@@ -1,35 +1,68 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { downloadUploadFile, formatFileSize, mergeUploadFiles, removeUploadFileAt, resolveUploadFileIcon, validateUploadFiles } from "./upload-utils.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, withModifiers } from "vue";
+import { useRsFormContext, useRsFormField } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { collectDroppedFiles, createUploadObjectUrl, downloadUploadFile, droppedDataHasDirectory, formatFileSize, mergeUploadFiles, nextUploadPreviewUrls, pruneBrokenUploadPreview, removeUploadFileAt, resolveUploadCapture, resolveUploadFileIcon, revokeUploadObjectUrl, skipDuplicateUploadFiles, validateUploadFiles } from "./upload-utils.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, onUnmounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useModel, watch, withModifiers } from "vue";
 //#region src/components/upload/src/RsUpload.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-upload" };
+var _hoisted_1 = ["aria-disabled"];
 var _hoisted_2 = [
+	"id",
 	"accept",
 	"multiple",
-	"disabled"
+	"disabled",
+	"aria-label"
 ];
-var _hoisted_3 = {
+var _hoisted_3 = ["for"];
+var _hoisted_4 = {
 	class: "rs-upload__icon",
 	"aria-hidden": "true"
 };
-var _hoisted_4 = { class: "rs-upload__text" };
-var _hoisted_5 = { class: "rs-upload__label" };
-var _hoisted_6 = { class: "rs-upload__hint" };
-var _hoisted_7 = {
-	key: 1,
-	class: "rs-upload__list"
-};
-var _hoisted_8 = { class: "rs-upload__file-meta" };
-var _hoisted_9 = { class: "rs-upload__file-name" };
-var _hoisted_10 = { class: "rs-upload__file-size" };
+var _hoisted_5 = { class: "rs-upload__text" };
+var _hoisted_6 = { class: "rs-upload__label" };
+var _hoisted_7 = { class: "rs-upload__hint" };
+var _hoisted_8 = ["disabled", "aria-label"];
+var _hoisted_9 = ["id", "aria-label"];
+var _hoisted_10 = [
+	"aria-label",
+	"title",
+	"onClick"
+];
 var _hoisted_11 = [
+	"src",
+	"alt",
+	"onError"
+];
+var _hoisted_12 = {
+	key: 2,
+	class: "rs-upload__file-meta"
+};
+var _hoisted_13 = { class: "rs-upload__file-name" };
+var _hoisted_14 = { class: "rs-upload__file-size" };
+var _hoisted_15 = {
+	key: 3,
+	class: "rs-upload__file-name rs-upload__file-name--card"
+};
+var _hoisted_16 = { class: "rs-upload__file-actions" };
+var _hoisted_17 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-var _hoisted_12 = ["aria-label", "onClick"];
+var _hoisted_18 = ["aria-label", "onClick"];
+var _hoisted_19 = {
+	key: 0,
+	class: "rs-upload__file rs-upload__file--card rs-upload__file--add"
+};
+var _hoisted_20 = ["for"];
+var _hoisted_21 = {
+	class: "rs-upload__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_22 = { class: "rs-upload__label" };
 var RsUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsUpload",
 	__name: "RsUpload",
 	props: /*@__PURE__*/ mergeModels({
 		accept: {},
@@ -56,7 +89,36 @@ var RsUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		hideDropzoneWhenFull: {
 			type: Boolean,
 			default: false
-		}
+		},
+		size: {},
+		id: {},
+		name: {},
+		ariaLabel: {},
+		listType: { default: "text" },
+		variant: { default: "dropzone" },
+		directory: {
+			type: Boolean,
+			default: false
+		},
+		capture: { type: [Boolean, String] },
+		replace: {
+			type: Boolean,
+			default: false
+		},
+		paste: {
+			type: Boolean,
+			default: true
+		},
+		skipDuplicate: {
+			type: Boolean,
+			default: false
+		},
+		showPreview: {
+			type: Boolean,
+			default: false
+		},
+		beforeSelect: {},
+		beforeRemove: {}
 	}, {
 		"modelValue": { default: () => [] },
 		"modelModifiers": {}
@@ -64,30 +126,125 @@ var RsUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	emits: /*@__PURE__*/ mergeModels([
 		"reject",
 		"download",
-		"remove"
+		"remove",
+		"change",
+		"preview"
 	], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const props = __props;
 		const emit = __emit;
-		const { t } = useRsI18n();
-		const dragging = ref(false);
-		const dragDepth = ref(0);
+		const { t, locale } = useRsI18n();
+		const formContext = useRsFormContext();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const autoId = useId();
+		const listLabelId = useId();
+		const inputRef = shallowRef(null);
+		const triggerRef = shallowRef(null);
+		const dragging = shallowRef(false);
+		const dragDepth = shallowRef(0);
+		const previewUrls = shallowRef(/* @__PURE__ */ new Map());
+		const brokenPreview = shallowRef(/* @__PURE__ */ new Set());
+		let applySeq = 0;
+		let removeSeq = 0;
+		let dragResetBound = false;
+		const inputId = computed(() => props.id || autoId);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const allowMultiple = computed(() => props.multiple || props.directory);
 		const canAdd = computed(() => !props.maxCount || model.value.length < props.maxCount);
-		const isDropzoneDisabled = computed(() => props.disabled || !canAdd.value);
+		const isDropzoneDisabled = computed(() => resolvedDisabled.value || !canAdd.value);
 		const showDropzone = computed(() => !(props.hideDropzoneWhenFull && props.maxCount != null && model.value.length >= props.maxCount));
+		const isPictureCard = computed(() => props.listType === "picture-card");
+		const showPicturePreview = computed(() => props.showPreview || props.listType !== "text");
+		const showBlockDropzone = computed(() => showDropzone.value && props.variant === "dropzone" && !isPictureCard.value);
+		const showAddTile = computed(() => showDropzone.value && props.variant === "dropzone" && isPictureCard.value);
+		const showButton = computed(() => props.variant === "button");
 		const resolvedHint = computed(() => {
 			if (dragging.value && !isDropzoneDisabled.value) return t("upload.dropActive");
 			return props.hint ?? t("upload.browse");
 		});
+		const resolvedCapture = computed(() => resolveUploadCapture(props.capture));
+		const inputExtraAttrs = computed(() => {
+			const attrs = {};
+			if (props.directory) {
+				attrs.webkitdirectory = "";
+				attrs.directory = "";
+			}
+			if (resolvedCapture.value) attrs.capture = resolvedCapture.value;
+			return attrs;
+		});
+		const dropIconPx = computed(() => {
+			return {
+				ssm: 16,
+				sm: 18,
+				md: 22,
+				lg: 26
+			}[resolvedSize.value];
+		});
+		const fileIconPx = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const fileViews = computed(() => model.value.map((file, index) => {
+			const icon = resolveUploadFileIcon(file);
+			const previewUrl = previewUrls.value.get(file);
+			const broken = brokenPreview.value.has(file);
+			return {
+				file,
+				index,
+				key: `${file.name}-${file.size}-${file.lastModified}-${index}`,
+				icon,
+				image: Boolean(previewUrl) && !broken,
+				previewUrl,
+				sizeText: formatFileSize(file.size, locale.value)
+			};
+		}));
+		const rootClass = computed(() => [
+			"rs-upload",
+			`rs-upload--${resolvedSize.value}`,
+			`rs-upload--${props.variant}`,
+			`rs-upload--${props.listType}`,
+			{
+				"rs-upload--disabled": resolvedDisabled.value,
+				"rs-upload--full": !canAdd.value
+			}
+		]);
+		function setFieldValue(value) {
+			model.value = Array.isArray(value) ? value.filter((item) => item instanceof File) : [];
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue
+		}));
+		function commit(next) {
+			model.value = next;
+			emit("change", next);
+		}
 		function applyFiles(files) {
 			if (!files.length || isDropzoneDisabled.value) return;
-			const result = validateUploadFiles(files, {
+			let incoming = props.skipDuplicate ? skipDuplicateUploadFiles(model.value, files) : [...files];
+			if (!incoming.length) return;
+			const hook = props.beforeSelect;
+			if (!hook) {
+				commitIncoming(incoming);
+				return;
+			}
+			const seq = applySeq += 1;
+			Promise.resolve(hook(incoming)).then((next) => {
+				if (seq !== applySeq) return;
+				if (next === false) return;
+				commitIncoming(Array.isArray(next) ? next : incoming);
+			});
+		}
+		function commitIncoming(incoming) {
+			if (!incoming.length || isDropzoneDisabled.value) return;
+			const current = props.replace ? [] : model.value;
+			const result = validateUploadFiles(incoming, {
 				accept: props.accept,
 				maxSize: props.maxSize,
-				maxCount: props.maxCount ? props.maxCount - model.value.length : void 0
+				maxCount: props.maxCount ? props.maxCount - current.length : void 0
 			});
-			model.value = mergeUploadFiles(model.value, result.accepted, props.maxCount);
+			commit(mergeUploadFiles(current, result.accepted, props.maxCount));
 			if (result.rejected.length) emit("reject", result.rejected);
 		}
 		function onFilesChange(event) {
@@ -95,11 +252,29 @@ var RsUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			applyFiles(Array.from(input.files ?? []));
 			input.value = "";
 		}
+		function resetDrag() {
+			dragDepth.value = 0;
+			dragging.value = false;
+			unbindDragReset();
+		}
+		function bindDragReset() {
+			if (typeof window === "undefined" || dragResetBound) return;
+			window.addEventListener("dragend", resetDrag);
+			window.addEventListener("blur", resetDrag);
+			dragResetBound = true;
+		}
+		function unbindDragReset() {
+			if (typeof window === "undefined" || !dragResetBound) return;
+			window.removeEventListener("dragend", resetDrag);
+			window.removeEventListener("blur", resetDrag);
+			dragResetBound = false;
+		}
 		function onDragEnter(event) {
 			event.preventDefault();
 			if (isDropzoneDisabled.value) return;
 			dragDepth.value += 1;
 			dragging.value = true;
+			bindDragReset();
 		}
 		function onDragOver(event) {
 			event.preventDefault();
@@ -108,89 +283,228 @@ var RsUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		function onDragLeave(event) {
 			event.preventDefault();
 			dragDepth.value = Math.max(0, dragDepth.value - 1);
-			if (dragDepth.value === 0) dragging.value = false;
+			if (dragDepth.value === 0) resetDrag();
 		}
 		function onDrop(event) {
 			event.preventDefault();
-			dragDepth.value = 0;
-			dragging.value = false;
+			resetDrag();
 			if (isDropzoneDisabled.value) return;
-			applyFiles(Array.from(event.dataTransfer?.files ?? []));
+			const data = event.dataTransfer;
+			if (droppedDataHasDirectory(data)) {
+				collectDroppedFiles(data).then(applyFiles);
+				return;
+			}
+			applyFiles(Array.from(data?.files ?? []));
+		}
+		function onPaste(event) {
+			if (!props.paste || isDropzoneDisabled.value) return;
+			const files = Array.from(event.clipboardData?.files ?? []);
+			if (!files.length) return;
+			event.preventDefault();
+			applyFiles(files);
+		}
+		function commitRemove(file, index) {
+			commit(removeUploadFileAt(model.value, index));
+			emit("remove", file, index);
 		}
 		function removeFile(index) {
 			const file = model.value[index];
-			if (!file) return;
-			model.value = removeUploadFileAt(model.value, index);
-			emit("remove", file, index);
+			if (!file || resolvedDisabled.value) return;
+			const hook = props.beforeRemove;
+			if (!hook) {
+				commitRemove(file, index);
+				return;
+			}
+			const seq = removeSeq += 1;
+			Promise.resolve(hook(file, index)).then((ok) => {
+				if (seq !== removeSeq) return;
+				if (ok === false) return;
+				const nextIndex = model.value.indexOf(file);
+				if (nextIndex < 0) return;
+				commitRemove(file, nextIndex);
+			});
 		}
 		function onDownload(file, index) {
 			emit("download", file, index);
 			downloadUploadFile(file);
 		}
-		function fileIcon(file) {
-			return resolveUploadFileIcon(file);
+		function onPreview(file, index) {
+			emit("preview", file, index);
+		}
+		function markBroken(file) {
+			if (brokenPreview.value.has(file)) return;
+			const next = new Set(brokenPreview.value);
+			next.add(file);
+			brokenPreview.value = next;
+		}
+		function open() {
+			if (isDropzoneDisabled.value) return;
+			inputRef.value?.click();
+		}
+		function focus() {
+			if (props.variant === "button") {
+				triggerRef.value?.focus();
+				return;
+			}
+			inputRef.value?.focus();
+		}
+		function blur() {
+			triggerRef.value?.blur();
+			inputRef.value?.blur();
+		}
+		function clear() {
+			if (!model.value.length) return;
+			commit([]);
+		}
+		function syncPreviewUrls(files) {
+			const { next, revoked } = nextUploadPreviewUrls(previewUrls.value, files, showPicturePreview.value, createUploadObjectUrl);
+			for (const url of revoked) revokeUploadObjectUrl(url);
+			previewUrls.value = next;
+			brokenPreview.value = pruneBrokenUploadPreview(brokenPreview.value, files);
 		}
+		watch([model, showPicturePreview], () => {
+			syncPreviewUrls(model.value);
+		}, { immediate: true });
+		onUnmounted(() => {
+			applySeq += 1;
+			removeSeq += 1;
+			unbindDragReset();
+			for (const url of previewUrls.value.values()) revokeUploadObjectUrl(url);
+			previewUrls.value = /* @__PURE__ */ new Map();
+			brokenPreview.value = /* @__PURE__ */ new Set();
+		});
+		__expose({
+			open,
+			focus,
+			blur,
+			clear
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [showDropzone.value ? (openBlock(), createElementBlock("label", {
-				key: 0,
-				class: normalizeClass(["rs-upload__dropzone", {
-					"rs-upload__dropzone--disabled": isDropzoneDisabled.value,
-					"rs-upload__dropzone--dragging": dragging.value && !isDropzoneDisabled.value
-				}]),
-				onDragenter: onDragEnter,
-				onDragover: onDragOver,
-				onDragleave: onDragLeave,
-				onDrop
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(rootClass.value),
+				"aria-disabled": resolvedDisabled.value ? "true" : void 0,
+				onPaste
 			}, [
-				createElementVNode("input", {
+				createElementVNode("input", mergeProps({
+					id: inputId.value,
+					ref_key: "inputRef",
+					ref: inputRef,
 					class: "rs-upload__input",
 					type: "file",
 					accept: __props.accept,
-					multiple: __props.multiple,
+					multiple: allowMultiple.value,
+					disabled: isDropzoneDisabled.value,
+					"aria-label": __props.ariaLabel || __props.label || unref(t)("upload.label")
+				}, inputExtraAttrs.value, { onChange: onFilesChange }), null, 16, _hoisted_2),
+				showBlockDropzone.value ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: normalizeClass(["rs-upload__dropzone", {
+						"rs-upload__dropzone--disabled": isDropzoneDisabled.value,
+						"rs-upload__dropzone--dragging": dragging.value && !isDropzoneDisabled.value
+					}]),
+					for: inputId.value,
+					onDragenter: onDragEnter,
+					onDragover: onDragOver,
+					onDragleave: onDragLeave,
+					onDrop
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [
+					createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RsIcon_default, {
+						name: "cloud-upload",
+						size: dropIconPx.value
+					}, null, 8, ["size"])], true)]),
+					createElementVNode("span", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.label ?? unref(t)("upload.label")), 1), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(resolvedHint.value), 1)], true)])]),
+					renderSlot(_ctx.$slots, "extra", {}, void 0, true)
+				], true)], 42, _hoisted_3)) : createCommentVNode("", true),
+				showButton.value ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					ref_key: "triggerRef",
+					ref: triggerRef,
+					type: "button",
+					class: "rs-upload__trigger",
 					disabled: isDropzoneDisabled.value,
-					onChange: onFilesChange
-				}, null, 40, _hoisted_2),
-				createElementVNode("span", _hoisted_3, [createVNode(RsIcon_default, {
-					name: "cloud-upload",
-					size: 22
-				})]),
-				createElementVNode("span", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(__props.label ?? unref(t)("upload.label")), 1), createElementVNode("span", _hoisted_6, toDisplayString(resolvedHint.value), 1)])
-			], 34)) : createCommentVNode("", true), __props.showFileList && model.value.length ? (openBlock(), createElementBlock("ul", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(model.value, (file, index) => {
-				return openBlock(), createElementBlock("li", {
-					key: `${file.name}-${file.size}-${index}`,
-					class: "rs-upload__file"
-				}, [
-					createElementVNode("span", {
-						class: normalizeClass(["rs-upload__file-icon", `rs-upload__file-icon--${fileIcon(file)}`]),
-						"aria-hidden": "true"
-					}, [createVNode(RsIcon_default, {
-						name: fileIcon(file),
-						size: 16
-					}, null, 8, ["name"])], 2),
-					createElementVNode("span", _hoisted_8, [createElementVNode("span", _hoisted_9, toDisplayString(file.name), 1), createElementVNode("span", _hoisted_10, toDisplayString(unref(formatFileSize)(file.size)), 1)]),
-					__props.showDownload ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						type: "button",
-						class: "rs-upload__file-action",
-						"aria-label": unref(t)("upload.download"),
-						title: unref(t)("upload.download"),
-						onClick: withModifiers(($event) => onDownload(file, index), ["stop"])
-					}, [createVNode(RsIcon_default, {
-						name: "download",
-						size: 14
-					})], 8, _hoisted_11)) : createCommentVNode("", true),
-					!__props.disabled ? (openBlock(), createElementBlock("button", {
-						key: 1,
-						type: "button",
-						class: "rs-upload__file-remove",
-						"aria-label": unref(t)("common.remove"),
-						onClick: withModifiers(($event) => removeFile(index), ["stop"])
-					}, [createVNode(RsIcon_default, {
-						name: "x",
-						size: 14
-					})], 8, _hoisted_12)) : createCommentVNode("", true)
-				]);
-			}), 128))])) : createCommentVNode("", true)]);
+					"aria-label": __props.ariaLabel || __props.label || unref(t)("upload.button"),
+					onClick: open,
+					onDragenter: onDragEnter,
+					onDragover: onDragOver,
+					onDragleave: onDragLeave,
+					onDrop
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(RsIcon_default, {
+					name: "upload",
+					size: fileIconPx.value
+				}, null, 8, ["size"]), createElementVNode("span", null, toDisplayString(__props.label ?? unref(t)("upload.button")), 1)], true)], 40, _hoisted_8)) : createCommentVNode("", true),
+				__props.showFileList && (fileViews.value.length || showAddTile.value) ? (openBlock(), createElementBlock("ul", {
+					key: 2,
+					id: unref(listLabelId),
+					class: "rs-upload__list",
+					"aria-label": unref(t)("upload.fileList")
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(fileViews.value, (view) => {
+					return openBlock(), createElementBlock("li", {
+						key: view.key,
+						class: normalizeClass(["rs-upload__file", { "rs-upload__file--card": isPictureCard.value }])
+					}, [renderSlot(_ctx.$slots, "file", {
+						file: view.file,
+						index: view.index
+					}, () => [
+						showPicturePreview.value && view.image ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "rs-upload__thumb",
+							"aria-label": unref(t)("upload.preview"),
+							title: unref(t)("upload.preview"),
+							onClick: withModifiers(($event) => onPreview(view.file, view.index), ["stop"])
+						}, [createElementVNode("img", {
+							class: "rs-upload__thumb-img",
+							src: view.previewUrl,
+							alt: view.file.name,
+							onError: ($event) => markBroken(view.file)
+						}, null, 40, _hoisted_11)], 8, _hoisted_10)) : (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: normalizeClass(["rs-upload__file-icon", `rs-upload__file-icon--${view.icon}`]),
+							"aria-hidden": "true"
+						}, [renderSlot(_ctx.$slots, "file-icon", {
+							file: view.file,
+							index: view.index
+						}, () => [createVNode(RsIcon_default, {
+							name: view.icon,
+							size: fileIconPx.value
+						}, null, 8, ["name", "size"])], true)], 2)),
+						!isPictureCard.value ? (openBlock(), createElementBlock("span", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(view.file.name), 1), createElementVNode("span", _hoisted_14, toDisplayString(view.sizeText), 1)])) : (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(view.file.name), 1)),
+						createElementVNode("span", _hoisted_16, [__props.showDownload ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "rs-upload__file-action",
+							"aria-label": unref(t)("upload.download"),
+							title: unref(t)("upload.download"),
+							onClick: withModifiers(($event) => onDownload(view.file, view.index), ["stop"])
+						}, [createVNode(RsIcon_default, {
+							name: "download",
+							size: fileIconPx.value
+						}, null, 8, ["size"])], 8, _hoisted_17)) : createCommentVNode("", true), !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							class: "rs-upload__file-remove",
+							"aria-label": unref(t)("common.remove"),
+							onClick: withModifiers(($event) => removeFile(view.index), ["stop"])
+						}, [createVNode(RsIcon_default, {
+							name: "x",
+							size: fileIconPx.value
+						}, null, 8, ["size"])], 8, _hoisted_18)) : createCommentVNode("", true)])
+					], true)], 2);
+				}), 128)), showAddTile.value ? (openBlock(), createElementBlock("li", _hoisted_19, [createElementVNode("label", {
+					class: normalizeClass(["rs-upload__dropzone rs-upload__dropzone--tile", {
+						"rs-upload__dropzone--disabled": isDropzoneDisabled.value,
+						"rs-upload__dropzone--dragging": dragging.value && !isDropzoneDisabled.value
+					}]),
+					for: inputId.value,
+					onDragenter: onDragEnter,
+					onDragover: onDragOver,
+					onDragleave: onDragLeave,
+					onDrop
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_21, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RsIcon_default, {
+					name: "plus",
+					size: dropIconPx.value
+				}, null, 8, ["size"])], true)]), createElementVNode("span", _hoisted_22, toDisplayString(__props.label ?? unref(t)("upload.add")), 1)], true)], 42, _hoisted_20)])) : createCommentVNode("", true)], 8, _hoisted_9)) : createCommentVNode("", true)
+			], 42, _hoisted_1);
 		};
 	}
 });

package/dist/components/upload/src/RsUpload.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsUpload_vue_vue_type_script_setup_true_lang_default from "./RsUpload.impl.js";
 
 //#region src/components/upload/src/RsUpload.vue
-var RsUpload_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsUpload_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9d8ef208"]]);
+var RsUpload_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsUpload_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8c6abb48"]]);
 //#endregion
 export { RsUpload_default as default };

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

@@ -7,7 +7,12 @@ export interface RsUploadValidationError {
     file: File;
     reason: 'accept' | 'maxSize' | 'maxCount';
 }
-export declare function formatFileSize(size: number): string;
+export type RsUploadListType = 'text' | 'picture' | 'picture-card';
+export type RsUploadVariant = 'dropzone' | 'button';
+export type RsUploadCapture = boolean | 'user' | 'environment';
+export type RsUploadBeforeSelect = (files: File[]) => boolean | File[] | Promise<boolean | File[]>;
+export type RsUploadBeforeRemove = (file: File, index: number) => boolean | Promise<boolean>;
+export declare function formatFileSize(size: number, locale?: string): string;
 export declare function isFileAccepted(file: File, accept?: string): boolean;
 export declare function validateUploadFiles(files: readonly File[], rules?: RsUploadValidationRules): {
     accepted: File[];
@@ -15,7 +20,21 @@ export declare function validateUploadFiles(files: readonly File[], rules?: RsUp
 };
 export declare function mergeUploadFiles(current: readonly File[], next: readonly File[], maxCount?: number): File[];
 export declare function removeUploadFileAt(files: readonly File[], index: number): File[];
-/** 触发浏览器下载指定 File / Blob */
+export declare function isSameUploadFile(left: Pick<File, 'name' | 'size' | 'lastModified' | 'type'>, right: Pick<File, 'name' | 'size' | 'lastModified' | 'type'>): boolean;
+export declare function skipDuplicateUploadFiles(current: readonly File[], incoming: readonly File[]): File[];
+export declare function resolveUploadCapture(capture?: RsUploadCapture): 'user' | 'environment' | undefined;
+export declare function isImageUploadFile(file: Pick<File, 'name' | 'type'>): boolean;
+export declare function droppedDataHasDirectory(data: DataTransfer | null | undefined): boolean;
+/** 读取拖入的 File。文件夹走 webkitGetAsEntry；否则回退 dataTransfer.files。 */
+export declare function collectDroppedFiles(data: DataTransfer | null | undefined): Promise<File[]>;
+export declare function nextUploadPreviewUrls(current: ReadonlyMap<File, string>, files: readonly File[], enabled: boolean, createUrl: (file: Blob) => string): {
+    next: Map<File, string>;
+    revoked: string[];
+};
+export declare function pruneBrokenUploadPreview(broken: ReadonlySet<File>, files: readonly File[]): Set<File>;
+export declare function createUploadObjectUrl(file: Blob): string;
+export declare function revokeUploadObjectUrl(url: string | undefined | null): void;
+/** 触发浏览器下载指定 File / Blob。无 document 时空操作。延迟 revoke，避免下载被中断。 */
 export declare function downloadUploadFile(file: File | Blob, filename?: string): void;
 /** 将文本等内容还原为可回显的 File（编辑态回填） */
 export declare function createUploadFileFromContent(name: string, content: BlobPart, type?: string): File;