@destyler/file-upload 0.2.10 → 0.2.12

package/dist/index.d.mts

@@ -1,11 +1,8 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { FileError, FileMimeType } from "@destyler/file";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, LocaleProperties, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "dropzone" | "trigger" | "label" | "item" | "itemName" | "itemSizeText" | "itemPreview" | "itemDeleteTrigger" | "itemGroup" | "itemPreviewImage" | "clearTrigger">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "dropzone" | "item" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "label" | "trigger" | "clearTrigger">;
 //#endregion
 //#region src/types.d.ts
 interface FileRejection {
@@ -238,15 +235,15 @@ interface MachineApi<T extends PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("name" | "ids" | "translations" | "accept" | "disabled" | "required" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "preventDocumentDrop" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject" | "capture" | "directory" | "invalid" | "locale" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "name" | "ids" | "translations" | "accept" | "disabled" | "required" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "preventDocumentDrop" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject" | "capture" | "directory" | "invalid" | "locale" | "dir" | "id" | "getRootNode">];
-declare const itemProps: "file"[];
-declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "file">];
+export declare const props: ("name" | "ids" | "translations" | "accept" | "disabled" | "required" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "preventDocumentDrop" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject" | "capture" | "directory" | "invalid" | "locale" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "name" | "ids" | "translations" | "accept" | "disabled" | "required" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "preventDocumentDrop" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject" | "capture" | "directory" | "invalid" | "locale" | "dir" | "id" | "getRootNode">];
+export declare const itemProps: "file"[];
+export declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "file">];
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type DropzoneProps, type ElementIds, type FileAcceptDetails, type FileChangeDetails, type FileError, type FileMimeType, type FileRejectDetails, type FileRejection, type FileValidateDetails, type IntlTranslations, type ItemPreviewImageProps, type ItemProps, type Service, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export type { MachineApi as Api, UserDefinedContext as Context, DropzoneProps, ElementIds, FileAcceptDetails, FileChangeDetails, FileError, FileMimeType, FileRejectDetails, FileRejection, FileValidateDetails, IntlTranslations, ItemPreviewImageProps, ItemProps, Service };

package/dist/index.mjs

@@ -5,11 +5,9 @@ import { getAcceptAttrString, isFileEqual, isValidFileSize, isValidFileType } fr
 import { callAll, compact, createSplitProps } from "@destyler/utils";
 import { createMachine, ref } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("file-upload").parts("root", "dropzone", "item", "itemDeleteTrigger", "itemGroup", "itemName", "itemPreview", "itemPreviewImage", "itemSizeText", "label", "trigger", "clearTrigger");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -26,7 +24,6 @@ const dom = createScope({
 	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
 	getDropzoneEl: (ctx) => dom.getById(ctx, dom.getDropzoneId(ctx))
 });
-
 //#endregion
 //#region src/utils.ts
 function isEventWithFiles(event) {
@@ -77,7 +74,6 @@ function getFilesFromEvent(ctx, files) {
 		rejectedFiles
 	};
 }
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -148,13 +144,13 @@ function connect(state, send, normalize) {
 				"data-dragging": dataAttr(dragging)
 			});
 		},
-		getDropzoneProps(props$1 = {}) {
+		getDropzoneProps(props = {}) {
 			return normalize.element({
 				...parts.dropzone.attrs,
 				"dir": state.context.dir,
 				"id": dom.getDropzoneId(state.context),
-				"tabIndex": disabled || props$1.disableClick ? void 0 : 0,
-				"role": props$1.disableClick ? "application" : "button",
+				"tabIndex": disabled || props.disableClick ? void 0 : 0,
+				"role": props.disableClick ? "application" : "button",
 				"aria-label": translations.dropzone,
 				"aria-disabled": disabled,
 				"data-invalid": dataAttr(state.context.invalid),
@@ -164,7 +160,7 @@ function connect(state, send, normalize) {
 					if (disabled) return;
 					if (event.defaultPrevented) return;
 					if (!isSelfTarget(event)) return;
-					if (props$1.disableClick) return;
+					if (props.disableClick) return;
 					if (event.key !== "Enter" && event.key !== " ") return;
 					send({
 						type: "DROPZONE.CLICK",
@@ -174,7 +170,7 @@ function connect(state, send, normalize) {
 				onClick(event) {
 					if (disabled) return;
 					if (event.defaultPrevented) return;
-					if (props$1.disableClick) return;
+					if (props.disableClick) return;
 					if (!isSelfTarget(event)) return;
 					if (event.currentTarget.localName === "label") event.preventDefault();
 					send("DROPZONE.CLICK");
@@ -273,8 +269,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemProps(props$1) {
-			const { file } = props$1;
+		getItemProps(props) {
+			const { file } = props;
 			return normalize.element({
 				...parts.item.attrs,
 				"dir": state.context.dir,
@@ -282,8 +278,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemNameProps(props$1) {
-			const { file } = props$1;
+		getItemNameProps(props) {
+			const { file } = props;
 			return normalize.element({
 				...parts.itemName.attrs,
 				"dir": state.context.dir,
@@ -291,8 +287,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemSizeTextProps(props$1) {
-			const { file } = props$1;
+		getItemSizeTextProps(props) {
+			const { file } = props;
 			return normalize.element({
 				...parts.itemSizeText.attrs,
 				"dir": state.context.dir,
@@ -300,8 +296,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemPreviewProps(props$1) {
-			const { file } = props$1;
+		getItemPreviewProps(props) {
+			const { file } = props;
 			return normalize.element({
 				...parts.itemPreview.attrs,
 				"dir": state.context.dir,
@@ -309,8 +305,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemPreviewImageProps(props$1) {
-			const { file, url } = props$1;
+		getItemPreviewImageProps(props) {
+			const { file, url } = props;
 			if (!file.type.startsWith("image/")) throw new Error("Preview Image is only supported for image files");
 			return normalize.img({
 				...parts.itemPreviewImage.attrs,
@@ -319,8 +315,8 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemDeleteTriggerProps(props$1) {
-			const { file } = props$1;
+		getItemDeleteTriggerProps(props) {
+			const { file } = props;
 			return normalize.button({
 				...parts.itemDeleteTrigger.attrs,
 				"dir": state.context.dir,
@@ -363,7 +359,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const invoke = {
@@ -412,8 +407,8 @@ function machine(userContext) {
 			}
 		},
 		computed: {
-			acceptAttr: (ctx$1) => getAcceptAttrString(ctx$1.accept),
-			multiple: (ctx$1) => ctx$1.maxFiles > 1
+			acceptAttr: (ctx) => getAcceptAttrString(ctx.accept),
+			multiple: (ctx) => ctx.maxFiles > 1
 		},
 		watch: { acceptedFiles: ["syncInputElement"] },
 		on: {
@@ -445,72 +440,71 @@ function machine(userContext) {
 			} }
 		}
 	}, {
-		activities: { preventDocumentDrop(ctx$1) {
-			if (!ctx$1.preventDocumentDrop) return;
-			if (!ctx$1.allowDrop) return;
-			if (ctx$1.disabled) return;
-			const doc = dom.getDoc(ctx$1);
+		activities: { preventDocumentDrop(ctx) {
+			if (!ctx.preventDocumentDrop) return;
+			if (!ctx.allowDrop) return;
+			if (ctx.disabled) return;
+			const doc = dom.getDoc(ctx);
 			const onDragOver = (event) => {
 				event?.preventDefault();
 			};
 			const onDrop = (event) => {
-				if (contains(dom.getRootEl(ctx$1), getEventTarget(event))) return;
+				if (contains(dom.getRootEl(ctx), getEventTarget(event))) return;
 				event.preventDefault();
 			};
 			return callAll(addDomEvent(doc, "dragover", onDragOver, false), addDomEvent(doc, "drop", onDrop, false));
 		} },
 		actions: {
-			syncInputElement(ctx$1) {
+			syncInputElement(ctx) {
 				queueMicrotask(() => {
-					const inputEl = dom.getHiddenInputEl(ctx$1);
+					const inputEl = dom.getHiddenInputEl(ctx);
 					if (!inputEl) return;
-					const win = dom.getWin(ctx$1);
+					const win = dom.getWin(ctx);
 					const dataTransfer = new win.DataTransfer();
-					ctx$1.acceptedFiles.forEach((v) => {
+					ctx.acceptedFiles.forEach((v) => {
 						dataTransfer.items.add(v);
 					});
 					inputEl.files = dataTransfer.files;
 					inputEl.dispatchEvent(new win.Event("change", { bubbles: true }));
 				});
 			},
-			openFilePicker(ctx$1) {
+			openFilePicker(ctx) {
 				raf(() => {
-					dom.getHiddenInputEl(ctx$1)?.click();
+					dom.getHiddenInputEl(ctx)?.click();
 				});
 			},
-			setFilesFromEvent(ctx$1, evt) {
-				const { acceptedFiles, rejectedFiles } = getFilesFromEvent(ctx$1, evt.files);
-				if (ctx$1.multiple) {
-					const files = ref([...ctx$1.acceptedFiles, ...acceptedFiles]);
-					set.files(ctx$1, files, rejectedFiles);
+			setFilesFromEvent(ctx, evt) {
+				const { acceptedFiles, rejectedFiles } = getFilesFromEvent(ctx, evt.files);
+				if (ctx.multiple) {
+					const files = ref([...ctx.acceptedFiles, ...acceptedFiles]);
+					set.files(ctx, files, rejectedFiles);
 					return;
 				}
 				if (acceptedFiles.length) {
 					const files = ref([acceptedFiles[0]]);
-					set.files(ctx$1, files, rejectedFiles);
-				} else if (rejectedFiles.length) set.files(ctx$1, ctx$1.acceptedFiles, rejectedFiles);
+					set.files(ctx, files, rejectedFiles);
+				} else if (rejectedFiles.length) set.files(ctx, ctx.acceptedFiles, rejectedFiles);
 			},
-			removeFile(ctx$1, evt) {
-				const files = Array.from(ctx$1.acceptedFiles.filter((file) => file !== evt.file));
-				const rejectedFiles = Array.from(ctx$1.rejectedFiles.filter((item) => item.file !== evt.file));
-				ctx$1.acceptedFiles = ref(files);
-				ctx$1.rejectedFiles = ref(rejectedFiles);
-				invoke.change(ctx$1);
+			removeFile(ctx, evt) {
+				const files = Array.from(ctx.acceptedFiles.filter((file) => file !== evt.file));
+				const rejectedFiles = Array.from(ctx.rejectedFiles.filter((item) => item.file !== evt.file));
+				ctx.acceptedFiles = ref(files);
+				ctx.rejectedFiles = ref(rejectedFiles);
+				invoke.change(ctx);
 			},
-			clearRejectedFiles(ctx$1) {
-				ctx$1.rejectedFiles = ref([]);
-				invoke.change(ctx$1);
+			clearRejectedFiles(ctx) {
+				ctx.rejectedFiles = ref([]);
+				invoke.change(ctx);
 			},
-			clearFiles(ctx$1) {
-				ctx$1.acceptedFiles = ref([]);
-				ctx$1.rejectedFiles = ref([]);
-				invoke.change(ctx$1);
+			clearFiles(ctx) {
+				ctx.acceptedFiles = ref([]);
+				ctx.rejectedFiles = ref([]);
+				invoke.change(ctx);
 			}
 		},
 		compareFns: { acceptedFiles: (a, b) => a.length === b.length && a.every((file, i) => isFileEqual(file, b[i])) }
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -540,6 +534,5 @@ const props = createProps()([
 const splitProps = createSplitProps(props);
 const itemProps = createProps()(["file"]);
 const splitItemProps = createSplitProps(itemProps);
-
 //#endregion
-export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/file-upload",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "a component that is used to upload multiple files.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,13 +22,13 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/file": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/i18n": "0.2.10",
-    "@destyler/xstate": "0.2.10",
-    "@destyler/utils": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/file": "0.2.12",
+    "@destyler/i18n": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"