@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/input/Upload.js

@@ -0,0 +1,598 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { IconButton } from "../base/IconButton.js";
+import { Link } from "../base/Link.js";
+import { GridList } from "../layout/Grid.js";
+import { useFormat } from "../config/lang/format.js";
+import { Progress } from "../feedback/Progress.js";
+import { Image, ImageGroup } from "../display/Image.js";
+import { useSortable } from "../utils/dom/sortable.js";
+import { useFieldControl } from "../form/Field.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { useHttp } from "../utils/request/http.js";
+import { errorCodeText } from "../utils/request/error-message.js";
+import { FileDrop, matchesAccept } from "./FileDrop.js";
+import { Fragment, createVNode, isVNode, mergeProps, onBeforeUnmount, shallowRef, watch } from "vue";
+import { _component, bindable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { CircleAlert, CircleCheck, File, GripVertical, ImagePlus, RotateCw, X } from "@lucide/icons";
+//#region src/input/Upload.tsx
+/**
+* 上传（div）：FileDrop 选文件，下面列出文件、上传进度、失败重试与移除。只负责界面与状态，怎样上传由 upload 决定：
+*
+*   <Upload
+*     _value={files}
+*     multiple
+*     accept="image/*"
+*     maxSize={5_000_000}
+*     upload={(file, { onProgress, signal }) => api.upload(file, { onProgress, signal })}
+*   />
+*   <Upload _value={files} action="/files" />   用应用配置的请求客户端（http）上传
+*
+* - value 是 UploadFile 的数组（文件、状态、进度、错误、upload 的结果），父级写 _value={list}；
+* - 给了 upload 或 action 时选到文件就开始上传，否则停在 selected（等提交时一起上传）；移除正在上传的文件会中止（signal）；
+* - action：经 createUi / Provider 的 http 把文件 POST 过去（multipart，字段名 fieldName），与其他请求共用 baseURL、令牌与拆包；
+*   fetch 拿不到上传的字节进度，进度条是不确定的，要进度时写 upload（XMLHttpRequest 的 upload.onprogress）；
+* - 超过 maxSize、不在 accept 里的文件也列出来，带错误、不上传；单选（不写 multiple）时新文件替换旧的；
+* - 已有文件（之前上传过、从后端读回来的）用 existingUploadFile 放进 value：状态是 done，没有 File，
+*   给了 url 时文件名链到它（预览、下载），可以移除；
+*
+*   let files = _state([existingUploadFile({ name: '验证报告.pdf', url: '/files/123' })]);
+* - 在 Field 里时关联标签与错误；写了 name 时有一个隐藏的 file input 带着全部文件，原生提交（FormData）也拿得到。
+*
+* - 图片墙（listType="picture"）：方形缩略图（选的文件用本地地址显示，不等上传），点开看大图（整面墙是一个 ImageGroup，
+*   大图里左右切换）；上传中盖一层进度，失败标红；选文件的区域是墙上最后一格。sortable 时拖动把手（或聚焦后用键盘）调整顺序，
+*   pasteable 时焦点在组件里按 Ctrl + V 把剪贴板里的图片加进来（截图、从别处复制的图）。
+*
+* 部件：Root（div）、Drop（FileDrop）、List（ul）、Item（li）、Icon（文件图标）、Body（文件名与下一行）、Name、Meta（大小或错误）、
+* Progress、Retry（重试按钮）、Remove（移除按钮）。
+*/
+/** 列表里的一个文件 */
+/** 上传一个文件：报告进度、响应中止；成功时 resolve（值记在 response 上），失败时 reject */
+/** 列表的样子 */
+/** 未声明的属性落到外层 div 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Upload 的样式：root、list、item、icon、body、name、meta、error、progress */
+var uploadStyles = css.create({
+	root: {
+		display: "grid",
+		gap: "_sm"
+	},
+	item: {
+		cursor: "default",
+		gap: "_sm",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md"
+	},
+	icon: {
+		flexShrink: 0,
+		color: "_textMuted"
+	},
+	body: {
+		display: "grid",
+		gap: "_xs",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	name: {
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	meta: {
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	error: { color: "_dangerText" },
+	done: { color: "_successText" },
+	progress: { width: "_full" },
+	wall: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "_sm"
+	},
+	wallList: { display: "contents" },
+	card: {
+		position: "relative",
+		boxSizing: "border-box",
+		flexShrink: 0,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		overflow: "hidden",
+		backgroundColor: "_fill"
+	},
+	cardError: { borderColor: "_danger" },
+	addCard: {
+		padding: "_xs",
+		gap: "_xs",
+		textAlign: "center",
+		fontSize: "_sm"
+	},
+	overlay: {
+		position: "absolute",
+		insetInline: 0,
+		bottom: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		padding: "_xs",
+		backgroundColor: "rgb(0 0 0 / 0.55)",
+		color: "white",
+		fontSize: "_xs"
+	},
+	placeholder: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_xs",
+		width: "_full",
+		height: "_full",
+		padding: "_xs",
+		boxSizing: "border-box",
+		color: "_textMuted",
+		fontSize: "_xs",
+		textAlign: "center",
+		overflowWrap: "anywhere"
+	},
+	actions: {
+		position: "absolute",
+		top: "_xs",
+		insetInlineEnd: "_xs",
+		display: "flex",
+		gap: "2px"
+	},
+	action: { backgroundColor: {
+		default: "rgb(255 255 255 / 0.85)",
+		":hover": "white"
+	} },
+	handle: {
+		display: "grid",
+		placeItems: "center",
+		width: "1.75em",
+		height: "1.75em",
+		borderRadius: "_sm",
+		color: "_text",
+		backgroundColor: "rgb(255 255 255 / 0.85)",
+		cursor: {
+			default: "grab",
+			":active": "grabbing"
+		},
+		touchAction: "none"
+	}
+});
+/** Upload 的动态样式：缩略图的边长 */
+var uploadDynamicStyles = css.create({ square: (size) => ({
+	width: `${size}px`,
+	height: `${size}px`
+}) });
+var nextId = 0;
+/** 已有文件（之前上传过、从后端读回来的）：放进 Upload 的 value，状态是 done */
+function existingUploadFile(file) {
+	return {
+		...file,
+		id: file.id ?? `upload-${++nextId}`,
+		status: "done",
+		response: file.url
+	};
+}
+/** 上传：选文件、列出文件与进度、失败重试、移除 */
+var Upload$1 = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const upload = readonlyProp(_props, "upload");
+	const action = readonlyProp(_props, "action");
+	const fieldName = readonlyProp(_props, "fieldName", "file");
+	const accept = readonlyProp(_props, "accept");
+	const multiple = readonlyProp(_props, "multiple", false);
+	const maxSize = readonlyProp(_props, "maxSize");
+	const maxFiles = readonlyProp(_props, "maxFiles");
+	const name = readonlyProp(_props, "name");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const invalid = readonlyProp(_props, "invalid");
+	const required = readonlyProp(_props, "required");
+	const description = readonlyProp(_props, "description");
+	const listType = readonlyProp(_props, "listType", "text");
+	const thumbnailSize = readonlyProp(_props, "thumbnailSize", 104);
+	const sortable = readonlyProp(_props, "sortable", false);
+	const pasteable = readonlyProp(_props, "pasteable", false);
+	const propsDrop = readonlyProp(_props, "propsDrop");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsName = readonlyProp(_props, "propsName");
+	const propsMeta = readonlyProp(_props, "propsMeta");
+	const propsProgress = readonlyProp(_props, "propsProgress");
+	const propsRetry = readonlyProp(_props, "propsRetry");
+	const propsRemove = readonlyProp(_props, "propsRemove");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const control = useFieldControl(() => ({
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}), { delegate: true });
+	const http = useHttp();
+	/** 实际用的上传函数：upload 优先，其次按 action 用请求客户端发 */
+	const uploader = () => upload.value ?? (action.value ? (file, { signal }) => {
+		const body = new FormData();
+		body.append(fieldName.value, file);
+		return http.request({
+			method: "POST",
+			url: action.value,
+			body,
+			signal
+		});
+	} : void 0);
+	let hidden = shallowRef(null);
+	const controllers = /* @__PURE__ */ new Map();
+	onBeforeUnmount(() => controllers.forEach((controller) => controller.abort()));
+	const patch = (id, changes) => value.value = value.value.map((item) => item.id === id ? {
+		...item,
+		...changes
+	} : item);
+	async function start(item) {
+		const send = uploader();
+		if (!send || !item.file) return;
+		controllers.get(item.id)?.abort();
+		const controller = new AbortController();
+		controllers.set(item.id, controller);
+		patch(item.id, {
+			status: "uploading",
+			progress: void 0,
+			error: void 0
+		});
+		try {
+			const response = await send(item.file, {
+				onProgress: (fraction) => {
+					if (!controller.signal.aborted) patch(item.id, { progress: fraction });
+				},
+				signal: controller.signal
+			});
+			if (!controller.signal.aborted) patch(item.id, {
+				status: "done",
+				progress: 1,
+				response
+			});
+		} catch (error) {
+			if (controller.signal.aborted) return;
+			const message = errorCodeText(error, lang) ?? (error instanceof Error && error.message ? error.message : lang.uploadFailed);
+			patch(item.id, {
+				status: "error",
+				error: message
+			});
+		} finally {
+			if (controllers.get(item.id) === controller) controllers.delete(item.id);
+		}
+	}
+	function remove(id) {
+		controllers.get(id)?.abort();
+		controllers.delete(id);
+		value.value = value.value.filter((item) => item.id !== id);
+	}
+	function add(files, rejectedType = false) {
+		const entries = files.map((file) => {
+			const base = {
+				id: `upload-${++nextId}`,
+				name: file.name,
+				size: file.size,
+				file
+			};
+			if (rejectedType) return {
+				...base,
+				status: "error",
+				error: lang.fileTypeRejected,
+				rejected: true
+			};
+			if (maxSize.value != null && file.size > maxSize.value) {
+				const error = lang.fileTooLarge(format.fileSize(maxSize.value));
+				return {
+					...base,
+					status: "error",
+					error,
+					rejected: true
+				};
+			}
+			return {
+				...base,
+				status: "selected"
+			};
+		});
+		if (!multiple.value) value.value.forEach((item) => controllers.get(item.id)?.abort());
+		const kept = multiple.value ? value.value : [];
+		const room = maxFiles.value == null ? entries.length : Math.max(0, maxFiles.value - kept.length);
+		const added = (multiple.value ? entries : entries.slice(-1)).slice(0, room);
+		value.value = [...kept, ...added];
+		added.filter((item) => item.status === "selected").forEach((item) => void start(item));
+	}
+	const previews = /* @__PURE__ */ new Map();
+	const previewOf = (item) => {
+		if (item.url) return item.url;
+		if (!item.file || !item.file.type.startsWith("image/")) return void 0;
+		let url = previews.get(item.id);
+		if (!url) previews.set(item.id, url = URL.createObjectURL(item.file));
+		return url;
+	};
+	watch(() => value.value, (list) => {
+		const kept = new Set(list.map((item) => item.id));
+		for (const [id, url] of previews) if (!kept.has(id)) {
+			URL.revokeObjectURL(url);
+			previews.delete(id);
+		}
+	});
+	onBeforeUnmount(() => previews.forEach((url) => URL.revokeObjectURL(url)));
+	let wall = shallowRef(null);
+	const sortableWall = useSortable({
+		items: () => value.value,
+		getKey: (item) => item.id,
+		getLabel: (item) => item.name,
+		onChange: (next) => value.value = next,
+		container: () => wall.value,
+		orientation: () => "horizontal",
+		disabled: () => !sortable.value || control().readonly || control().disabled
+	});
+	/** 粘贴：剪贴板里的文件（截图是 image/png）按 accept 分开，不符合的照常列出、带错误 */
+	function onPaste(event) {
+		const state = control();
+		if (!pasteable.value || state.disabled || state.readonly) return;
+		const files = [...event.clipboardData?.files ?? []];
+		if (files.length === 0) return;
+		event.preventDefault();
+		const accepted = files.filter((file) => matchesAccept(file, accept.value));
+		const rejected = files.filter((file) => !matchesAccept(file, accept.value));
+		if (accepted.length) add(accepted);
+		if (rejected.length) add(rejected, true);
+	}
+	effect(() => {
+		if (!hidden.value || typeof DataTransfer === "undefined") return;
+		const transfer = new DataTransfer();
+		for (const item of value.value) if (item.file && !item.rejected) transfer.items.add(item.file);
+		hidden.value.files = transfer.files;
+	});
+	function renderItem(item) {
+		const state = control();
+		const own = typeof propsItem.value === "function" ? propsItem.value(item) : propsItem.value;
+		const fileName = item.name;
+		const failed = item.status === "error";
+		return createVNode("li", mergeProps({ "key": item.id }, mergeAttrs({ sx: [itemStyles.row, uploadStyles.item] }, own), { "data-state": item.status }), [
+			createVNode(Icon, mergePartProps({
+				icon: failed ? CircleAlert : item.status === "done" ? CircleCheck : File,
+				sx: [
+					uploadStyles.icon,
+					failed && uploadStyles.error,
+					item.status === "done" && uploadStyles.done
+				]
+			}, propsIcon.value), null),
+			createVNode("div", mergeAttrs({ sx: uploadStyles.body }, propsBody.value), [createVNode("span", mergeAttrs({ sx: uploadStyles.name }, propsName.value), [item.url ? createVNode(Link, {
+				"href": item.url,
+				"target": "_blank"
+			}, _isSlot(fileName) ? fileName : { default: () => [fileName] }) : fileName]), item.status === "uploading" ? createVNode(Progress, mergePartProps({
+				size: "xs",
+				sx: uploadStyles.progress
+			}, propsProgress.value, {
+				value: item.progress == null ? null : Math.round(item.progress * 100),
+				"aria-label": fileName
+			}), null) : createVNode("span", mergeAttrs({ sx: [uploadStyles.meta, failed && uploadStyles.error] }, propsMeta.value), [failed ? item.error : item.size != null && format.fileSize(item.size), item.status === "done" && createVNode(VisuallyHidden, null, {
+				default: () => [" ", lang.uploadDone],
+				$stable: true
+			})])]),
+			failed && uploader() && !item.rejected && !state.readonly && createVNode(IconButton, mergePartProps({
+				icon: RotateCw,
+				variant: "ghost",
+				size: "sm",
+				"aria-label": lang.uploadRetry(fileName)
+			}, propsRetry.value, { onClick: () => void start(item) }), null),
+			!state.readonly && createVNode(IconButton, mergePartProps({
+				icon: X,
+				variant: "ghost",
+				size: "sm",
+				"aria-label": lang.uploadRemove(fileName)
+			}, propsRemove.value, {
+				disabled: state.disabled,
+				onClick: () => remove(item.id)
+			}), null)
+		]);
+	}
+	/** 图片墙的一格：缩略图（点开看大图）、上传进度或错误、把手、重试与移除 */
+	function renderCard(item) {
+		const state = control();
+		const failed = item.status === "error";
+		const src = previewOf(item);
+		return createVNode("div", mergeProps({ "key": item.id }, mergeAttrs({ sx: [
+			uploadStyles.card,
+			uploadDynamicStyles.square(thumbnailSize.value),
+			failed && uploadStyles.cardError
+		] }, sortableWall.itemProps(item.id), { role: "listitem" }), { "data-state": item.status }), [
+			src && !item.rejected ? createVNode(Image, {
+				"src": src,
+				"alt": item.name,
+				"width": thumbnailSize.value - 2,
+				"height": thumbnailSize.value - 2,
+				"radius": "none",
+				"preview": {
+					caption: item.name,
+					download: item.name
+				}
+			}, null) : createVNode("div", css.attrs(uploadStyles.placeholder), [createVNode(Icon, {
+				"icon": failed ? CircleAlert : File,
+				"sx": failed && uploadStyles.error
+			}, null), item.name]),
+			item.status === "uploading" && createVNode("div", css.attrs(uploadStyles.overlay), [createVNode(Progress, mergePartProps({ size: "xs" }, propsProgress.value, {
+				value: item.progress == null ? null : Math.round(item.progress * 100),
+				"aria-label": item.name
+			}), null)]),
+			failed && src && !item.rejected && createVNode("div", mergeProps(css.attrs(uploadStyles.overlay), { "title": item.error }), [item.error]),
+			item.status === "done" && createVNode(VisuallyHidden, null, {
+				default: () => [lang.uploadDone],
+				$stable: true
+			}),
+			!state.readonly && createVNode("div", css.attrs(uploadStyles.actions), [
+				sortable.value && createVNode(ButtonBase, mergeProps({
+					"sx": uploadStyles.handle,
+					"ripple": false,
+					"disabled": state.disabled,
+					"aria-label": lang.sortableHandle(item.name)
+				}, sortableWall.handleProps(item.id)), {
+					default: () => [createVNode(Icon, { "icon": GripVertical }, null)],
+					$stable: true
+				}),
+				failed && uploader() && !item.rejected && createVNode(IconButton, mergePartProps({
+					icon: RotateCw,
+					variant: "ghost",
+					size: "xs",
+					sx: uploadStyles.action,
+					"aria-label": lang.uploadRetry(item.name)
+				}, propsRetry.value, { onClick: () => void start(item) }), null),
+				createVNode(IconButton, mergePartProps({
+					icon: X,
+					variant: "ghost",
+					size: "xs",
+					sx: uploadStyles.action,
+					"aria-label": lang.uploadRemove(item.name)
+				}, propsRemove.value, {
+					disabled: state.disabled,
+					onClick: () => remove(item.id)
+				}), null)
+			])
+		]);
+	}
+	/** 选文件的区域：列表模式在上方，图片墙模式是最后一格 */
+	function renderDrop(picture) {
+		const state = control();
+		const full = maxFiles.value != null && multiple.value && value.value.length >= maxFiles.value;
+		if (state.readonly || picture && full) return null;
+		const hint = pasteable.value ? lang.uploadPasteHint : void 0;
+		const props = mergePartProps({
+			accept: accept.value,
+			multiple: multiple.value,
+			disabled: state.disabled,
+			invalid: state.invalid,
+			required: state.required && value.value.length === 0,
+			description: picture ? void 0 : hint ? [
+				description.value,
+				description.value != null && " · ",
+				hint
+			] : description.value,
+			propsRoot: picture ? { sx: [uploadStyles.addCard, uploadDynamicStyles.square(thumbnailSize.value)] } : void 0
+		}, propsDrop.value, {
+			onFiles: (files) => add(files),
+			onReject: (files) => add(files, true)
+		});
+		if (!picture) return createVNode(FileDrop, props, null);
+		return createVNode(FileDrop, props, {
+			default: () => [createVNode(Icon, { "icon": ImagePlus }, null), lang.uploadAddImage],
+			$stable: true
+		});
+	}
+	return () => {
+		const state = control();
+		if (listType.value === "picture") return createVNode("div", mergeAttrs({ sx: uploadStyles.root }, rest, { onPaste }), [
+			createVNode(ImageGroup, {
+				"sx": uploadStyles.wall,
+				"key": "__site0"
+			}, {
+				default: () => [createVNode("div", mergeProps({
+					"ref": wall,
+					"role": "list",
+					"aria-live": "polite"
+				}, css.attrs(uploadStyles.wallList)), [value.value.map(renderCard)]), renderDrop(true)],
+				$stable: true
+			}),
+			pasteable.value && !state.readonly && createVNode("span", css.attrs(uploadStyles.meta), [[
+				description.value,
+				description.value != null && " · ",
+				lang.uploadPasteHint
+			]]),
+			sortable.value && createVNode(Fragment, null, [createVNode(VisuallyHidden, {
+				"id": sortableWall.instructionsId,
+				"key": "__site1"
+			}, {
+				default: () => [lang.sortableInstructions],
+				$stable: true
+			}), createVNode(VisuallyHidden, {
+				"aria-live": "assertive",
+				"key": "__site2"
+			}, {
+				default: () => [sortableWall.announcement],
+				$stable: true
+			})]),
+			name.value != null && createVNode("input", {
+				"ref": hidden,
+				"type": "file",
+				"name": name.value,
+				"multiple": true,
+				"hidden": true,
+				"tabindex": -1,
+				"aria-hidden": "true"
+			}, null)
+		]);
+		return createVNode("div", mergeAttrs({ sx: uploadStyles.root }, rest, { onPaste }), [
+			renderDrop(false),
+			name.value != null && createVNode("input", {
+				"ref": hidden,
+				"type": "file",
+				"name": name.value,
+				"multiple": true,
+				"hidden": true,
+				"tabindex": -1,
+				"aria-hidden": "true"
+			}, null),
+			value.value.length > 0 && createVNode(GridList, mergeProps(mergePartProps({ gap: "xs" }, propsList.value), {
+				"aria-live": "polite",
+				"key": "__site3"
+			}), {
+				default: () => [value.value.map(renderItem)],
+				$stable: true
+			})
+		]);
+	};
+}, {
+	name: "Upload",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"upload",
+		"action",
+		"fieldName",
+		"accept",
+		"multiple",
+		"maxSize",
+		"maxFiles",
+		"name",
+		"disabled",
+		"readonly",
+		"invalid",
+		"required",
+		"description",
+		"listType",
+		"thumbnailSize",
+		"sortable",
+		"pasteable",
+		"propsDrop",
+		"propsList",
+		"propsItem",
+		"propsIcon",
+		"propsBody",
+		"propsName",
+		"propsMeta",
+		"propsProgress",
+		"propsRetry",
+		"propsRemove"
+	]
+});
+//#endregion
+export { Upload$1 as Upload, existingUploadFile, uploadDynamicStyles, uploadStyles };
+
+//# sourceMappingURL=Upload.js.map