antdv-next 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/upload/UploadList/ListItem.mjs

@@ -0,0 +1,255 @@
+import { useComponentBaseConfig } from "../../config-provider/context.mjs";
+import { getAttrStyleAndClass } from "../../_util/hooks/useMergeSemantic.mjs";
+import "../../_util/hooks/index.mjs";
+import tooltip_default from "../../tooltip/index.mjs";
+import progress_default from "../../progress/index.mjs";
+import { Transition, computed, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { DeleteOutlined, DownloadOutlined, EyeOutlined } from "@antdv-next/icons";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+
+//#region src/upload/UploadList/ListItem.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ListItem = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const mergedStatus = shallowRef(props.file.status);
+	watch(() => props.file.status, (status) => {
+		if (status !== "removed") mergedStatus.value = status;
+	});
+	const showProgress = shallowRef(false);
+	let progressTimer = null;
+	onMounted(() => {
+		progressTimer = setTimeout(() => {
+			showProgress.value = true;
+		}, 300);
+	});
+	onBeforeUnmount(() => {
+		if (progressTimer) {
+			clearTimeout(progressTimer);
+			progressTimer = null;
+		}
+	});
+	const { rootPrefixCls } = useComponentBaseConfig("upload");
+	const listType = computed(() => props.listType ?? "text");
+	return () => {
+		const { prefixCls, file, items, classes, styles, locale, isImgUrl, showPreviewIcon, showRemoveIcon, showDownloadIcon, previewIcon: customPreviewIcon, removeIcon: customRemoveIcon, downloadIcon: customDownloadIcon, extra: customExtra, iconRender, actionIconRender, itemRender, onPreview, onDownload, onClose, progress: progressProps } = props;
+		const iconNode = iconRender(file);
+		let icon = createVNode("div", { "class": `${prefixCls}-icon` }, [iconNode]);
+		if (listType.value.startsWith("picture")) if (mergedStatus.value === "uploading" || !file.thumbUrl && !file.url) {
+			const uploadingClassName = clsx(`${prefixCls}-list-item-thumbnail`, { [`${prefixCls}-list-item-file`]: mergedStatus.value !== "uploading" });
+			icon = createVNode("div", { "class": uploadingClassName }, [iconNode]);
+		} else {
+			const isImage = isImgUrl?.(file);
+			const thumbnail = isImage ? createVNode("img", {
+				"src": file.thumbUrl || file.url,
+				"alt": file.name,
+				"class": `${prefixCls}-list-item-image`,
+				"crossorigin": file.crossorigin
+			}, null) : iconNode;
+			const aClassName = clsx(`${prefixCls}-list-item-thumbnail`, { [`${prefixCls}-list-item-file`]: isImgUrl && !isImage });
+			icon = createVNode("a", {
+				"class": aClassName,
+				"onClick": (e) => onPreview(file, e),
+				"href": file.url || file.thumbUrl,
+				"target": "_blank",
+				"rel": "noopener noreferrer"
+			}, [thumbnail]);
+		}
+		const listItemClassName = clsx(`${prefixCls}-list-item`, `${prefixCls}-list-item-${mergedStatus.value}`, classes?.item);
+		let linkProps = file.linkProps;
+		if (typeof linkProps === "string") try {
+			linkProps = JSON.parse(linkProps);
+		} catch {
+			linkProps = {};
+		}
+		const removeIcon = (typeof showRemoveIcon === "function" ? showRemoveIcon(file) : showRemoveIcon) ? actionIconRender((typeof customRemoveIcon === "function" ? customRemoveIcon(file) : customRemoveIcon) || createVNode(DeleteOutlined, null, null), () => onClose(file), prefixCls, locale.removeFile, true) : null;
+		const downloadIcon = (typeof showDownloadIcon === "function" ? showDownloadIcon(file) : showDownloadIcon) && mergedStatus.value === "done" ? actionIconRender((typeof customDownloadIcon === "function" ? customDownloadIcon(file) : customDownloadIcon) || createVNode(DownloadOutlined, null, null), () => onDownload(file), prefixCls, locale.downloadFile) : null;
+		const downloadOrDelete = listType.value !== "picture-card" && listType.value !== "picture-circle" && createVNode("span", {
+			"key": "download-delete",
+			"class": clsx(`${prefixCls}-list-item-actions`, { picture: listType.value === "picture" })
+		}, [downloadIcon, removeIcon]);
+		const extraContent = typeof customExtra === "function" ? customExtra(file) : customExtra;
+		const extra = extraContent && createVNode("span", { "class": `${prefixCls}-list-item-extra` }, [extraContent]);
+		const listItemNameClass = clsx(`${prefixCls}-list-item-name`);
+		const fileName = file.url ? createVNode("a", mergeProps({
+			"key": "view",
+			"target": "_blank",
+			"rel": "noopener noreferrer",
+			"class": listItemNameClass,
+			"title": file.name
+		}, linkProps, {
+			"href": file.url,
+			"onClick": (e) => onPreview(file, e)
+		}), [file.name, extra]) : createVNode("span", {
+			"key": "view",
+			"class": listItemNameClass,
+			"onClick": (e) => onPreview(file, e),
+			"title": file.name
+		}, [file.name, extra]);
+		const previewIcon = (typeof showPreviewIcon === "function" ? showPreviewIcon(file) : showPreviewIcon) && (file.url || file.thumbUrl) ? createVNode("a", {
+			"href": file.url || file.thumbUrl,
+			"target": "_blank",
+			"rel": "noopener noreferrer",
+			"onClick": (e) => onPreview(file, e),
+			"title": locale.previewFile
+		}, [typeof customPreviewIcon === "function" ? customPreviewIcon(file) : customPreviewIcon || createVNode(EyeOutlined, null, null)]) : null;
+		const pictureCardActions = (listType.value === "picture-card" || listType.value === "picture-circle") && mergedStatus.value !== "uploading" && createVNode("span", { "class": `${prefixCls}-list-item-actions` }, [
+			previewIcon,
+			mergedStatus.value === "done" && downloadIcon,
+			removeIcon
+		]);
+		const dom = createVNode("div", {
+			"class": listItemClassName,
+			"style": styles?.item
+		}, [
+			icon,
+			fileName,
+			downloadOrDelete,
+			pictureCardActions,
+			showProgress.value && createVNode(Transition, mergeProps(getTransitionProps(`${rootPrefixCls.value}-fade`), { "appear": true }), { default: () => [mergedStatus.value === "uploading" ? createVNode("div", { "class": `${prefixCls}-list-item-progress` }, ["percent" in file ? createVNode(progress_default, mergeProps({
+				"type": "line",
+				"percent": file.percent,
+				"aria-label": file["aria-label"],
+				"aria-labelledby": file["aria-labelledby"]
+			}, progressProps), null) : null]) : null] })
+		]);
+		const message = typeof file.response === "string" ? file.response : file.error?.statusText || file.error?.message || locale.uploadError;
+		const item = mergedStatus.value === "error" ? createVNode(tooltip_default, {
+			"title": message,
+			"getPopupContainer": (node) => node.parentNode
+		}, _isSlot(dom) ? dom : { default: () => [dom] }) : dom;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		return createVNode("div", mergeProps(restAttrs, {
+			"class": clsx(`${prefixCls}-list-item-container`, className),
+			"style": style
+		}), [itemRender ? itemRender(item, file, items, {
+			download: () => onDownload(file),
+			preview: () => onPreview(file),
+			remove: () => onClose(file)
+		}) : item]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		classes: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		file: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		listType: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		isImgUrl: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		showRemoveIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		showDownloadIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		showPreviewIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		downloadIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		previewIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		extra: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		iconRender: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		actionIconRender: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		itemRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onPreview: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onClose: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onDownload: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		progress: {
+			type: Object,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "UploadListItem",
+	inheritAttrs: false
+});
+var ListItem_default = ListItem;
+
+//#endregion
+export { ListItem_default as default };

package/dist/upload/UploadList/index.mjs

@@ -0,0 +1,289 @@
+import { resolveStyleOrClass } from "../../_util/hooks/useMergeSemantic.mjs";
+import "../../_util/hooks/index.mjs";
+import button_default from "../../button/index.mjs";
+import { isImageUrl, previewImage } from "../utils.mjs";
+import ListItem_default from "./ListItem.mjs";
+import { TransitionGroup, cloneVNode, computed, createVNode, defineComponent, getCurrentInstance, isVNode, mergeDefaults, mergeProps, onMounted, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { FileTwoTone, LoadingOutlined, PaperClipOutlined, PictureTwoTone } from "@antdv-next/icons";
+import { getTransitionGroupProps } from "@v-c/util/dist/utils/transition";
+
+//#region src/upload/UploadList/index.tsx
+const APPEND_ACTION_KEY = "__upload_append_action__";
+const UploadList = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const forceUpdate = shallowRef(0);
+	const motionAppear = shallowRef(false);
+	const instance = getCurrentInstance();
+	const hasPreviewListener = computed(() => !!instance?.vnode.props?.onPreview);
+	onMounted(() => {
+		motionAppear.value = true;
+	});
+	const listType = computed(() => props.listType ?? "text");
+	const isPictureCardOrCircle = computed(() => ["picture-card", "picture-circle"].includes(listType.value));
+	const isPictureType = computed(() => listType.value.startsWith("picture"));
+	const prefixCls = computed(() => props.prefixCls ?? "ant-upload");
+	const mergedPreviewFile = computed(() => props.previewFile ?? previewImage);
+	const mergedIsImageUrl = computed(() => props.isImageUrl ?? isImageUrl);
+	const resolvedClasses = computed(() => {
+		if (!props.classes) return {};
+		return resolveStyleOrClass(props.classes, { props });
+	});
+	const resolvedStyles = computed(() => {
+		if (!props.styles) return {};
+		return resolveStyleOrClass(props.styles, { props });
+	});
+	watch([
+		isPictureType,
+		() => props.items,
+		mergedPreviewFile
+	], () => {
+		if (!isPictureType.value) return;
+		(props.items || []).forEach((file) => {
+			if (!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== void 0) return;
+			file.thumbUrl = "";
+			mergedPreviewFile.value?.(file.originFileObj).then((previewDataUrl) => {
+				file.thumbUrl = previewDataUrl || "";
+				forceUpdate.value += 1;
+			});
+		});
+	}, { immediate: true });
+	const onInternalPreview = (file, e) => {
+		if (!hasPreviewListener.value) return;
+		e?.preventDefault?.();
+		emit("preview", file);
+	};
+	const onInternalDownload = (file) => {
+		emit("download", file);
+	};
+	const onInternalClose = (file) => {
+		props.onRemove?.(file);
+	};
+	const internalIconRender = (file) => {
+		if (slots.iconRender) return slots.iconRender({
+			file,
+			listType: listType.value
+		});
+		if (props.iconRender) return props.iconRender(file, listType.value);
+		const isLoading = file.status === "uploading";
+		if (listType.value.startsWith("picture")) {
+			const loadingIcon = listType.value === "picture" ? createVNode(LoadingOutlined, null, null) : props.locale?.uploading;
+			const fileIcon = mergedIsImageUrl.value?.(file) ? createVNode(PictureTwoTone, null, null) : createVNode(FileTwoTone, null, null);
+			return isLoading ? loadingIcon : fileIcon;
+		}
+		return isLoading ? createVNode(LoadingOutlined, null, null) : createVNode(PaperClipOutlined, null, null);
+	};
+	const actionIconRender = (customIcon, callback, actionPrefixCls, title, acceptUploadDisabled) => {
+		const mergedDisabled = acceptUploadDisabled ? props.disabled : false;
+		const handleClick = (e) => {
+			callback();
+			if (customIcon?.props?.onClick) customIcon.props.onClick(e);
+		};
+		if (isVNode(customIcon)) return createVNode(button_default, mergeProps({
+			"type": "text",
+			"size": "small"
+		}, { title }, {
+			"class": `${actionPrefixCls}-list-item-action`,
+			"disabled": mergedDisabled,
+			"onClick": handleClick,
+			"icon": cloneVNode(customIcon, { onClick: void 0 })
+		}), null);
+		return createVNode(button_default, mergeProps({
+			"type": "text",
+			"size": "small"
+		}, { title }, {
+			"class": `${actionPrefixCls}-list-item-action`,
+			"disabled": mergedDisabled,
+			"onClick": handleClick
+		}), { default: () => [createVNode("span", null, [customIcon])] });
+	};
+	return () => {
+		const items = props.items ?? [];
+		const listClassNames = clsx(`${prefixCls.value}-list`, `${prefixCls.value}-list-${listType.value}`, resolvedClasses.value?.list);
+		const transitionGroupProps = {
+			...getTransitionGroupProps(`${prefixCls.value}-${isPictureCardOrCircle.value ? "animate-inline" : "animate"}`),
+			appear: motionAppear.value
+		};
+		let appendAction = null;
+		if (props.appendAction && props.appendActionVisible) appendAction = isVNode(props.appendAction) ? cloneVNode(props.appendAction, { key: APPEND_ACTION_KEY }) : props.appendAction;
+		const itemRender = slots.itemRender ? (originNode, file, fileList, actions) => slots.itemRender?.({
+			originNode,
+			file,
+			fileList,
+			actions
+		}) : props.itemRender;
+		const removeIcon = slots.removeIcon ? (file) => slots.removeIcon?.({ file }) : props.removeIcon;
+		const downloadIcon = slots.downloadIcon ? (file) => slots.downloadIcon?.({ file }) : props.downloadIcon;
+		const previewIcon = slots.previewIcon ? (file) => slots.previewIcon?.({ file }) : props.previewIcon;
+		return createVNode(TransitionGroup, mergeProps(transitionGroupProps, { "tag": "div" }, {
+			class: listClassNames,
+			style: resolvedStyles.value?.list
+		}), { default: () => [items.map((file) => createVNode(ListItem_default, {
+			"key": file.uid,
+			"locale": props.locale,
+			"prefixCls": prefixCls.value,
+			"classes": resolvedClasses.value,
+			"styles": resolvedStyles.value,
+			"file": file,
+			"items": items,
+			"progress": props.progress,
+			"listType": listType.value,
+			"isImgUrl": mergedIsImageUrl.value,
+			"showPreviewIcon": props.showPreviewIcon,
+			"showRemoveIcon": props.showRemoveIcon,
+			"showDownloadIcon": props.showDownloadIcon,
+			"removeIcon": removeIcon,
+			"previewIcon": previewIcon,
+			"downloadIcon": downloadIcon,
+			"extra": props.extra,
+			"iconRender": internalIconRender,
+			"actionIconRender": actionIconRender,
+			"itemRender": itemRender,
+			"onPreview": onInternalPreview,
+			"onDownload": onInternalDownload,
+			"onClose": onInternalClose
+		}, null)), appendAction] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		classes: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		listType: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		progress: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showRemoveIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		showDownloadIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		showPreviewIcon: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		downloadIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		previewIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		extra: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		previewFile: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		iconRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		isImageUrl: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		appendAction: {
+			required: false,
+			default: void 0
+		},
+		appendActionVisible: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		itemRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onRemove: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onPreview: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onDownload: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	}, {
+		listType: "text",
+		items: [],
+		locale: {},
+		showPreviewIcon: true,
+		showRemoveIcon: true,
+		showDownloadIcon: false,
+		progress: {
+			size: [-1, 2],
+			showInfo: false
+		},
+		appendActionVisible: true
+	}),
+	name: "UploadList"
+});
+var UploadList_default = UploadList;
+
+//#endregion
+export { UploadList_default as default };

package/dist/upload/index.d.mts

@@ -0,0 +1,20 @@
+import { EmptyEmit } from "../_util/type.mjs";
+import { UploadChangeParam, UploadEmits, UploadFile, UploadProps, UploadSlots } from "./interface.mjs";
+import { Dragger, DraggerProps } from "./Dragger.mjs";
+import { InternalUpload } from "./Upload.mjs";
+import * as vue125 from "vue";
+import { App } from "vue";
+
+//#region src/upload/index.d.ts
+declare const Upload: typeof InternalUpload & {
+  install: (app: App) => void;
+  Dragger: typeof Dragger;
+  LIST_IGNORE: string;
+};
+declare const UploadDragger: vue125.DefineSetupFnComponent<DraggerProps<any>, EmptyEmit, vue125.SlotsType<UploadSlots<any>>, UploadProps<any> & {
+  height?: number;
+} & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue125.PublicProps>;
+//#endregion
+export { Upload, UploadDragger };

package/dist/upload/index.mjs

@@ -0,0 +1,17 @@
+import Upload_default, { LIST_IGNORE } from "./Upload.mjs";
+import Dragger_default from "./Dragger.mjs";
+
+//#region src/upload/index.tsx
+const Upload = Upload_default;
+Upload.Dragger = Dragger_default;
+Upload.LIST_IGNORE = LIST_IGNORE;
+Upload.install = (app) => {
+	app.component(Upload_default.name, Upload);
+	app.component(Dragger_default.name, Dragger_default);
+	return app;
+};
+const UploadDragger = Dragger_default;
+var upload_default = Upload;
+
+//#endregion
+export { UploadDragger, upload_default as default };