sard 1.0.0 → 1.0.2

package/components/upload/common.d.ts

@@ -0,0 +1,73 @@
+import { type DefaultProps } from '../config';
+export type UploadStatus = 'pending' | 'uploading' | 'failed' | 'done';
+export interface UploadFileItem {
+    file?: File;
+    url?: string;
+    isImage?: boolean;
+    isVideo?: boolean;
+    status?: UploadStatus;
+    name?: string;
+    message?: string;
+    [key: PropertyKey]: any;
+}
+export interface UploadSelectOptions {
+    capture?: 'environment' | 'user';
+}
+export interface UploadProps {
+    mediaType?: 'image' | 'video' | ('image' | 'video')[];
+    multiple?: boolean;
+    capture?: 'environment' | 'user';
+    modelValue?: UploadFileItem[];
+    maxCount?: number;
+    maxSize?: number | ((file: File) => boolean);
+    overSize?: (fileItem: UploadFileItem[]) => void;
+    disabled?: boolean;
+    readonly?: boolean;
+    beforeChoose?: (fileList: UploadFileItem[], next: (allowed: boolean | UploadSelectOptions) => void) => void;
+    beforeRead?: (file: File) => boolean | Promise<File>;
+    afterRead?: (fileItem: UploadFileItem) => void;
+    removable?: boolean;
+    beforeRemove?: (index: number, fileItem: UploadFileItem) => boolean | Promise<void>;
+    validateEvent?: boolean;
+}
+export declare const defaultUploadProps: DefaultProps<UploadProps>;
+export interface UploadSlots {
+    default?(props: {
+        list: UploadFileItem[];
+        onSelect: () => void;
+        onRemove: (index: number, item: UploadFileItem) => void;
+        onImageClick: (index: number) => void;
+    }): any;
+    select?(props: Record<string, never>): any;
+}
+export interface UploadEmits {
+    (e: 'update:modelValue', value: UploadFileItem[]): void;
+    (e: 'change', value: UploadFileItem[]): void;
+    (e: 'remove', index: number, item: UploadFileItem): void;
+    (e: 'item-click', item: UploadFileItem, index: number): void;
+}
+export interface UploadExpose {
+    select: () => void;
+}
+export interface ChainNode {
+    (data: any, next: (...args: any[]) => void): void;
+}
+export interface UploadPreviewProps {
+    file?: File;
+    url?: string;
+    isImage?: boolean;
+    isVideo?: boolean;
+    status?: UploadStatus;
+    name?: string;
+    message?: string;
+    removable?: boolean;
+    index: number;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const defaultUploadPreviewProps: DefaultProps<UploadPreviewProps>;
+export interface UploadPreviewEmits {
+    (e: 'image-click'): void;
+    (e: 'remove'): void;
+    (e: 'click'): void;
+}

package/components/upload/common.js

@@ -0,0 +1,11 @@
+//#region packages/sard/components/upload/common.ts
+const defaultUploadProps = {
+	mediaType: "image",
+	maxCount: Number.MAX_SAFE_INTEGER,
+	maxSize: Number.MAX_SAFE_INTEGER,
+	removable: true,
+	validateEvent: true
+};
+const defaultUploadPreviewProps = { status: "pending" };
+//#endregion
+export { defaultUploadPreviewProps, defaultUploadProps };

package/components/upload/index.css

@@ -0,0 +1 @@
+:root{--s-upload-preview-width:88px;--s-upload-preview-height:88px;--s-upload-preview-gap:var(--s-size-xs);--s-upload-preview-border-radius:var(--s-border-radius);--s-upload-preview-bg:var(--s-fill-color-secondary);--s-upload-preview-video-bg:var(--s-black);--s-upload-file-color:var(--s-text-color-primary);--s-upload-file-icon-font-size:var(--s-size-lg);--s-upload-file-name-margin-top:var(--s-size-2xs);--s-upload-file-name-padding-x:var(--s-size-2xs);--s-upload-file-name-font-size:var(--s-font-size-sm);--s-upload-status-color:var(--s-white);--s-upload-status-bg:var(--s-overlay-illegible);--s-upload-status-icon-font-size:var(--s-size-lg);--s-upload-status-message-margin-top:var(--s-size-2xs);--s-upload-status-message-padding-x:var(--s-size-2xs);--s-upload-status-message-font-size:var(--s-font-size-sm);--s-upload-close-top:2px;--s-upload-close-right:2px;--s-upload-close-size:var(--s-size-lg);--s-upload-close-font-size:var(--s-font-size-sm);--s-upload-close-color:var(--s-white);--s-upload-close-bg:var(--s-overlay-illegible);--s-upload-select-width:88px;--s-upload-select-height:88px;--s-upload-select-font-size:var(--s-size-xl);--s-upload-select-color:var(--s-text-color-secondary);--s-upload-select-radius:var(--s-border-radius);--s-upload-select-bg:var(--s-fill-color-secondary);--s-upload-select-bg-active:var(--s-bg-color-active-dark);--s-upload-video-play-bg:var(--s-overlay-legible);--s-upload-video-play-color:rgba(var(--s-white-rgb), 0.8);--s-upload-loading-size:var(--s-size-lg)}.s-upload__wrapper{display:flex;flex-wrap:wrap;gap:var(--s-upload-preview-gap)}.s-upload__select{display:flex;align-items:center;justify-content:center;width:var(--s-upload-select-width);height:var(--s-upload-select-height);color:var(--s-upload-select-color);border-radius:var(--s-upload-select-radius);background:var(--s-upload-select-bg);cursor:pointer}.s-upload__select-icon{font-size:var(--s-upload-select-font-size);line-height:var(--s-line-height-none)}.s-upload:not(.is-disabled,.is-readonly) .s-upload__select:active{background:var(--s-upload-select-bg-active)}.s-upload:is(.is-disabled) .s-upload__select{color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-upload:is(.is-readonly) .s-upload__select{cursor:unset}.s-upload__preview{position:relative;display:flex;align-items:center;justify-content:center;width:var(--s-upload-preview-width);height:var(--s-upload-preview-height);overflow:hidden;border-radius:var(--s-upload-preview-border-radius);background:var(--s-upload-preview-bg)}.s-upload__preview--is-video{background:var(--s-upload-preview-video-bg)}.s-upload__image{width:100%;height:100%}.s-upload__video-wrapper{width:100%;height:100%;border-radius:inherit}.s-upload__video{width:100%;height:100%;border-radius:inherit}.s-upload__video-play{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;font-size:40px;color:var(--s-upload-video-play-color);background:var(--s-upload-video-play-bg);cursor:pointer}.s-upload__video-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:40px;height:40px}.s-upload__file{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--s-upload-file-color)}.s-upload__file-icon{font-size:var(--s-upload-file-icon-font-size)}.s-upload__file-name{max-width:100%;padding:0 var(--s-upload-file-name-padding-x);margin-top:var(--s-upload-file-name-margin-top);font-size:var(--s-upload-file-name-font-size)}.s-upload__status{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--s-upload-status-color);background:var(--s-upload-status-bg)}.s-upload__status-icon{font-size:var(--s-upload-status-icon-font-size)}.s-upload__status-message{max-width:100%;padding:0 var(--s-upload-status-message-padding-x);margin-top:var(--s-upload-status-message-margin-top);font-size:var(--s-upload-status-message-font-size);text-align:center}.s-upload__remove{position:absolute;top:0;inset-inline-end:0;z-index:2;padding-inline-end:var(--s-upload-close-right);padding-top:var(--s-upload-close-top)}.s-upload__close{display:flex;align-items:center;justify-content:center;width:var(--s-upload-close-size);height:var(--s-upload-close-size);border-radius:var(--s-border-radius-full);font-size:var(--s-upload-close-font-size);color:var(--s-upload-close-color);background:var(--s-upload-close-bg);cursor:pointer}

package/components/upload/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Upload from './upload.vue';
+import _UploadPreview from './upload-preview.vue';
+export declare const Upload: EnhancedComponent<typeof _Upload>;
+export declare const UploadPreview: EnhancedComponent<typeof _UploadPreview>;
+export default Upload;
+export type { UploadStatus, UploadFileItem, UploadProps, UploadSlots, UploadEmits, UploadPreviewProps, UploadPreviewEmits, } from './common';

package/components/upload/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import upload_preview_default from "./upload-preview.js";
+import upload_default from "./upload.js";
+//#region packages/sard/components/upload/index.ts
+const Upload = enhanceComponent(upload_default);
+const UploadPreview = enhanceComponent(upload_preview_default);
+//#endregion
+export { Upload, Upload as default, UploadPreview };

package/components/upload/upload-preview.d.ts

@@ -0,0 +1,24 @@
+import { type UploadPreviewProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<UploadPreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+    remove: () => any;
+    "image-click": () => any;
+}, string, import("vue").PublicProps, Readonly<UploadPreviewProps> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    "onImage-click"?: (() => any) | undefined;
+}>, {
+    file: File;
+    readonly: boolean;
+    name: string;
+    message: string;
+    disabled: boolean;
+    index: number;
+    url: string;
+    status: import("./common").UploadStatus;
+    isImage: boolean;
+    isVideo: boolean;
+    removable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/upload/upload-preview.js

@@ -0,0 +1,153 @@
+import { createBem } from "../../utils/bem.js";
+import { isImageFile, isImageUrl, isVideoFile, isVideoUrl } from "../../utils/file.js";
+import loading_default from "../loading/loading.js";
+import { defaultUploadPreviewProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, toDisplayString, unref, useTemplateRef, withModifiers } from "vue";
+import { Close, File, Play, XCircle } from "@sard/icons";
+//#region packages/sard/components/upload/upload-preview.vue
+const _hoisted_1 = ["src"];
+const _hoisted_2 = ["src", "controls"];
+var upload_preview_default = /*@__PURE__*/ defineComponent({
+	__name: "upload-preview",
+	props: /*@__PURE__*/ mergeDefaults({
+		file: {
+			type: null,
+			required: false
+		},
+		url: {
+			type: String,
+			required: false
+		},
+		isImage: {
+			type: Boolean,
+			required: false
+		},
+		isVideo: {
+			type: Boolean,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		message: {
+			type: String,
+			required: false
+		},
+		removable: {
+			type: Boolean,
+			required: false
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultUploadPreviewProps),
+	emits: [
+		"image-click",
+		"remove",
+		"click"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("upload");
+		const isImage = computed(() => {
+			return props.isImage || (props.file ? isImageFile(props.file) : props.url ? isImageUrl(props.url) : false);
+		});
+		const isVideo = computed(() => {
+			return props.isVideo || (props.file ? isVideoFile(props.file) : props.url ? isVideoUrl(props.url) : false);
+		});
+		const mediaUrl = computed(() => {
+			if (props.url) return props.url;
+			if (props.file) return URL.createObjectURL(props.file);
+			return "";
+		});
+		const onImageClick = () => {
+			emit("image-click");
+		};
+		const controlsVisible = ref(false);
+		const videoRef = useTemplateRef("video");
+		const onFullscreenchange = () => {
+			const video = videoRef.value;
+			if (video) if (document.fullscreenElement === video) {
+				video.play();
+				controlsVisible.value = true;
+			} else {
+				video.pause();
+				controlsVisible.value = false;
+			}
+		};
+		const previewVideo = () => {
+			videoRef.value?.requestFullscreen();
+		};
+		const onPlayClick = () => {
+			previewVideo();
+		};
+		const onRemove = () => {
+			if (!props.removable || props.disabled || props.readonly) return;
+			emit("remove");
+		};
+		const onClick = () => {
+			emit("click");
+		};
+		const uploadPreviewClass = computed(() => {
+			return [bem.e("preview"), bem.em("preview", "is-video", isVideo.value)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(uploadPreviewClass.value),
+				onClick
+			}, [
+				isImage.value ? (openBlock(), createElementBlock("img", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("image")),
+					mode: "aspectFill",
+					src: mediaUrl.value,
+					onClick: onImageClick
+				}, null, 10, _hoisted_1)) : isVideo.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("video-wrapper"))
+				}, [createElementVNode("video", {
+					ref: "video",
+					class: normalizeClass(unref(bem).e("video")),
+					src: mediaUrl.value,
+					controls: controlsVisible.value,
+					onFullscreenchange
+				}, null, 42, _hoisted_2), createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("video-play")),
+					onClick: onPlayClick
+				}, [createVNode(unref(Play))], 2)], 2)) : (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(bem).e("file"))
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("file-icon")) }, [createVNode(unref(File))], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("file-name")) }, toDisplayString(__props.name), 3)], 2)),
+				__props.status === "uploading" || __props.status === "failed" ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(unref(bem).e("status"))
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("status-icon")) }, [__props.status === "uploading" ? (openBlock(), createBlock(loading_default, { key: 0 })) : __props.status === "failed" ? (openBlock(), createBlock(unref(XCircle), { key: 1 })) : createCommentVNode("v-if", true)], 2), __props.message ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("status-message"))
+				}, toDisplayString(__props.message), 3)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+				__props.removable && !__props.disabled && !__props.readonly && __props.status !== "uploading" ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: normalizeClass(unref(bem).e("remove")),
+					onClick: withModifiers(onRemove, ["stop"])
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("close")) }, [createVNode(unref(Close))], 2)], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { upload_preview_default as default };

package/components/upload/upload.d.ts

@@ -0,0 +1,37 @@
+import { type UploadProps, type UploadSlots, type UploadExpose, type UploadFileItem, type UploadSelectOptions } from './common';
+type __VLS_Slots = UploadSlots;
+declare const __VLS_base: import("vue").DefineComponent<UploadProps, UploadExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: UploadFileItem[]) => any;
+    "update:modelValue": (value: UploadFileItem[]) => any;
+    remove: (index: number, item: UploadFileItem) => any;
+    "item-click": (item: UploadFileItem, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<UploadProps> & Readonly<{
+    onChange?: ((value: UploadFileItem[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: UploadFileItem[]) => any) | undefined;
+    onRemove?: ((index: number, item: UploadFileItem) => any) | undefined;
+    "onItem-click"?: ((item: UploadFileItem, index: number) => any) | undefined;
+}>, {
+    multiple: boolean;
+    capture: "environment" | "user";
+    readonly: boolean;
+    disabled: boolean;
+    modelValue: UploadFileItem[];
+    validateEvent: boolean;
+    mediaType: "image" | "video" | ("image" | "video")[];
+    maxCount: number;
+    maxSize: number | ((file: File) => boolean);
+    overSize: (fileItem: UploadFileItem[]) => void;
+    beforeChoose: (fileList: UploadFileItem[], next: (allowed: boolean | UploadSelectOptions) => void) => void;
+    beforeRead: (file: File) => boolean | Promise<File>;
+    afterRead: (fileItem: UploadFileItem) => void;
+    removable: boolean;
+    beforeRemove: (index: number, fileItem: UploadFileItem) => boolean | Promise<void>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/upload/upload.js

@@ -0,0 +1,291 @@
+import { createBem } from "../../utils/bem.js";
+import { chooseFile, isImageFile, isImageUrl } from "../../utils/file.js";
+import { isFunction } from "../../utils/is.js";
+import { toArray } from "../../utils/array.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { previewImage } from "../preview-image/imperative.js";
+import { defaultUploadProps } from "./common.js";
+import upload_preview_default from "./upload-preview.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, reactive, ref, renderList, renderSlot, unref, watch } from "vue";
+import { Plus } from "@sard/icons";
+//#region packages/sard/components/upload/upload.vue
+var upload_default = /*@__PURE__*/ defineComponent({
+	__name: "upload",
+	props: /*@__PURE__*/ mergeDefaults({
+		mediaType: {
+			type: [String, Array],
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		capture: {
+			type: String,
+			required: false
+		},
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		maxSize: {
+			type: [Number, Function],
+			required: false
+		},
+		overSize: {
+			type: Function,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		beforeChoose: {
+			type: Function,
+			required: false
+		},
+		beforeRead: {
+			type: Function,
+			required: false
+		},
+		afterRead: {
+			type: Function,
+			required: false
+		},
+		removable: {
+			type: Boolean,
+			required: false
+		},
+		beforeRemove: {
+			type: Function,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultUploadProps),
+	emits: [
+		"update:modelValue",
+		"change",
+		"remove",
+		"item-click"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("upload");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const innerValue = ref(props.modelValue || []);
+		watch(() => props.modelValue, () => {
+			innerValue.value = props.modelValue || [];
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const limitCountNode = (files, next) => {
+			const remainCount = props.maxCount - innerValue.value.length;
+			if (files.length > remainCount) files = files.slice(0, remainCount);
+			next(files);
+		};
+		const beforeReadNode = (files, next) => {
+			Promise.allSettled(files.map((file) => new Promise((resolve, reject) => {
+				if (props.beforeRead) {
+					const ret = props.beforeRead(file);
+					if (!ret) {
+						reject();
+						return;
+					}
+					if (ret instanceof Promise) {
+						ret.then((mayNewFile) => {
+							resolve(mayNewFile ?? file);
+						}).catch(() => {
+							reject();
+						});
+						return;
+					}
+				}
+				resolve(file);
+			}))).then((results) => {
+				const fileList = [];
+				results.forEach((result) => {
+					if (result.status === "fulfilled") fileList.push(result.value);
+				});
+				next(fileList);
+			});
+		};
+		const toUploadFileNode = (files, next) => {
+			next(files.map((file) => {
+				return reactive({
+					file,
+					name: file.name
+				});
+			}));
+		};
+		const limitSizeNode = (fileList, next) => {
+			const valid = [];
+			const invalid = [];
+			fileList.forEach((item) => {
+				const file = item.file;
+				if (file && (isFunction(props.maxSize) && props.maxSize(file) || file.size && typeof props.maxSize === "number" && file.size > props.maxSize)) invalid.push(item);
+				else valid.push(item);
+			});
+			if (invalid.length) props.overSize?.(invalid);
+			if (valid.length) {
+				innerValue.value = [...innerValue.value, ...valid];
+				emit("update:modelValue", innerValue.value);
+				emit("change", innerValue.value);
+				next(valid);
+			}
+		};
+		const afterReadNode = (fileList) => {
+			toArray(fileList).forEach((fileItem) => {
+				props.afterRead?.(fileItem);
+			});
+		};
+		function toChain(files) {
+			[
+				limitCountNode,
+				beforeReadNode,
+				toUploadFileNode,
+				limitSizeNode,
+				afterReadNode
+			].reduceRight((next, node) => (data) => {
+				node(data, next);
+			}, () => {})(files);
+		}
+		let isSelectPending = false;
+		const select = () => {
+			if (isSelectPending || isDisabled.value || isReadonly.value || innerValue.value.length >= props.maxCount) return;
+			const next = (options = {}) => {
+				const arrayMediaType = toArray(props.mediaType);
+				const hasImage = arrayMediaType.includes("image");
+				const hasVideo = arrayMediaType.includes("video");
+				const accept = [];
+				if (hasImage) accept.push("image/*");
+				if (hasVideo) accept.push("video/*");
+				chooseFile({
+					accept,
+					multiple: props.multiple,
+					capture: options.capture || props.capture
+				}).then(toChain);
+			};
+			if (props.beforeChoose) {
+				isSelectPending = true;
+				props.beforeChoose?.(innerValue.value, (allowed) => {
+					isSelectPending = false;
+					if (allowed) next(typeof allowed === "object" ? allowed : void 0);
+				});
+			} else next();
+		};
+		const onSelect = () => {
+			select();
+		};
+		const removingSet = /* @__PURE__ */ new WeakSet();
+		const onRemove = (index, item) => {
+			if (!props.removable || isDisabled.value || isReadonly.value) return;
+			if (removingSet.has(item)) return;
+			function remove() {
+				const list = innerValue.value.filter((_, i) => i !== index);
+				innerValue.value = list;
+				emit("update:modelValue", list);
+				emit("change", list);
+				emit("remove", index, item);
+			}
+			if (props.beforeRemove) {
+				const ret = props.beforeRemove(index, item);
+				if (ret === false) return;
+				if (ret instanceof Promise) {
+					removingSet.add(item);
+					ret.then(() => {
+						remove();
+					}).catch(() => {}).finally(() => {
+						removingSet.delete(item);
+					});
+					return;
+				}
+			}
+			remove();
+		};
+		const onImageClick = (index) => {
+			const currentFileItem = innerValue.value[index];
+			const fileList = innerValue.value.filter((item) => item.isImage || (item.file ? isImageFile(item.file) : item.url ? isImageUrl(item.url) : false));
+			const currentIndex = fileList.findIndex((item) => item === currentFileItem);
+			previewImage({
+				urls: fileList.map((item) => item.url || URL.createObjectURL(item.file)),
+				current: currentIndex || 0
+			});
+		};
+		const onItemClick = (index, fileItem) => {
+			emit("item-click", fileItem, index);
+		};
+		__expose({ select });
+		const uploadClass = computed(() => {
+			return [
+				bem.b(),
+				bem.is("disabled", isDisabled.value),
+				bem.is("readonly", isReadonly.value)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(uploadClass.value) }, [renderSlot(_ctx.$slots, "default", {
+				list: innerValue.value,
+				onSelect,
+				onRemove,
+				onImageClick
+			}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("wrapper")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(innerValue.value, (item, index) => {
+				return openBlock(), createBlock(upload_preview_default, {
+					key: index,
+					file: item.file,
+					url: item.url,
+					"is-image": item.isImage,
+					"is-video": item.isVideo,
+					status: item.status,
+					name: item.name,
+					message: item.message,
+					removable: __props.removable,
+					index,
+					disabled: isDisabled.value,
+					readonly: isReadonly.value,
+					onRemove: ($event) => onRemove(index, item),
+					onImageClick: ($event) => onImageClick(index),
+					onClick: ($event) => onItemClick(index, item)
+				}, null, 8, [
+					"file",
+					"url",
+					"is-image",
+					"is-video",
+					"status",
+					"name",
+					"message",
+					"removable",
+					"index",
+					"disabled",
+					"readonly",
+					"onRemove",
+					"onImageClick",
+					"onClick"
+				]);
+			}), 128)), innerValue.value.length < __props.maxCount && !isReadonly.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("select")),
+				onClick: onSelect
+			}, [renderSlot(_ctx.$slots, "select", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("select-icon")) }, [createVNode(unref(Plus))], 2)])], 2)) : createCommentVNode("v-if", true)], 2)])], 2);
+		};
+	}
+});
+//#endregion
+export { upload_default as default };

package/components/waterfall/common.d.ts

@@ -0,0 +1,62 @@
+import { type InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface WaterfallProps {
+    columns?: number;
+    columnGap?: number;
+    rowGap?: number;
+}
+export declare const defaultWaterfallProps: DefaultProps<WaterfallProps>;
+export interface WaterfallSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface WaterfallEmits {
+    (e: 'load'): void;
+    (e: 'loadstart'): void;
+}
+export interface WaterfallExpose {
+    reflow: () => void;
+    onLoad: (handler: () => void) => void;
+}
+export interface WaterfallContext {
+    columnWidth: number;
+    addMember: (member: WaterfallMember) => void;
+    removeMember: (member: WaterfallMember) => void;
+    onItemLoad: () => void;
+}
+export declare const waterfallContextKey: InjectionKey<WaterfallContext>;
+export interface WaterfallItemProps {
+}
+export interface WaterfallItemSlots {
+    default?(props: {
+        onLoad: () => void;
+        columnWidth: number;
+    }): any;
+}
+export interface WaterfallItemEmits {
+}
+export interface WaterfallItemExpose {
+}
+export interface WaterfallMember {
+    height: number;
+    loaded: boolean;
+    visible: boolean;
+    top: number;
+    left: number;
+    beforeReflow: () => void;
+}
+export interface WaterfallLoadProps {
+    maxWait?: number;
+    width?: number;
+    height?: number;
+}
+export interface WaterfallLoadSlots {
+    default?(props: {
+        onLoad: (event: Event) => void;
+        overtime: boolean;
+    }): any;
+}
+export interface WaterfallLoadEmits {
+    (e: 'load'): void;
+}
+export interface WaterfallLoadExpose {
+}