@mantine-vue/dropzone 1.1.2

package/esm/index.mjs

@@ -0,0 +1,906 @@
+import { cloneVNode, computed, defineComponent, h, isVNode, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { assignRef, useDisclosure } from "@mantine-vue/hooks";
+import { Box, LoadingOverlay, OptionalPortal, createSafeContext, createVarsResolver, getDefaultZIndex, getRadius, useProps, useStyles, withBoxProps } from "@mantine-vue/core";
+//#region src/Dropzone.context.ts
+var [provideDropzoneContext, useDropzoneContext] = createSafeContext("Dropzone component was not found in tree");
+//#endregion
+//#region src/DropzoneStatus.ts
+function upperFirst(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function createDropzoneStatus(status) {
+	return defineComponent({
+		name: `Dropzone${upperFirst(status)}`,
+		setup(_, { slots, attrs }) {
+			const ctx = useDropzoneContext();
+			return () => {
+				if (!ctx[status]) return null;
+				const children = slots.default?.();
+				const child = children && children.length === 1 ? children[0] : children;
+				if (isVNode(child) && !Array.isArray(child)) return cloneVNode(child, attrs);
+				return h("span", attrs, children);
+			};
+		}
+	});
+}
+var DropzoneAccept = createDropzoneStatus("accept");
+var DropzoneReject = createDropzoneStatus("reject");
+var DropzoneIdle = createDropzoneStatus("idle");
+//#endregion
+//#region src/get-files-from-event.ts
+function toFileWithPath(file, path) {
+	const fileWithPath = file;
+	const relativePath = path || file.webkitRelativePath || file.name;
+	if (fileWithPath.path === void 0) try {
+		Object.defineProperty(fileWithPath, "path", {
+			value: relativePath,
+			writable: false,
+			configurable: true,
+			enumerable: true
+		});
+	} catch {}
+	return fileWithPath;
+}
+async function fromDataTransferItem(item) {
+	const entry = item.webkitGetAsEntry?.();
+	if (entry?.isDirectory) return fromDirectoryEntry(entry);
+	const file = item.getAsFile();
+	return file ? [toFileWithPath(file)] : [];
+}
+function fromDirectoryEntry(dirEntry, path = "") {
+	const reader = dirEntry.createReader();
+	return new Promise((resolve) => {
+		const entries = [];
+		const readEntries = () => {
+			reader.readEntries(async (batch) => {
+				if (batch.length === 0) {
+					resolve((await Promise.all(entries.map((entry) => entry.isDirectory ? fromDirectoryEntry(entry, `${path}${dirEntry.name}/`) : new Promise((res) => {
+						entry.file((file) => res([toFileWithPath(file, `${path}${dirEntry.name}/${file.name}`)]));
+					})))).flat());
+					return;
+				}
+				entries.push(...batch);
+				readEntries();
+			}, () => resolve([]));
+		};
+		readEntries();
+	});
+}
+async function fromDataTransfer(dataTransfer) {
+	if (dataTransfer.items && dataTransfer.items.length > 0) {
+		const items = Array.from(dataTransfer.items).filter((item) => item.kind === "file");
+		return (await Promise.all(items.map(fromDataTransferItem))).flat();
+	}
+	return Array.from(dataTransfer.files || []).map((file) => toFileWithPath(file));
+}
+async function getFilesFromEvent(event) {
+	if (Array.isArray(event)) return (await Promise.all(event.map((handle) => handle.getFile()))).map((file) => toFileWithPath(file));
+	const dragEvent = event;
+	if (dragEvent.dataTransfer) return fromDataTransfer(dragEvent.dataTransfer);
+	const target = event.target;
+	if (target?.files) return Array.from(target.files).map((file) => toFileWithPath(file));
+	return [];
+}
+//#endregion
+//#region src/utils.ts
+var FILE_INVALID_TYPE = "file-invalid-type";
+var FILE_TOO_LARGE = "file-too-large";
+var FILE_TOO_SMALL = "file-too-small";
+var TOO_MANY_FILES = "too-many-files";
+var ErrorCode = {
+	FileInvalidType: FILE_INVALID_TYPE,
+	FileTooLarge: FILE_TOO_LARGE,
+	FileTooSmall: FILE_TOO_SMALL,
+	TooManyFiles: TOO_MANY_FILES
+};
+var getInvalidTypeRejectionErr = (accept = "") => {
+	const acceptArr = accept.split(",");
+	return {
+		code: FILE_INVALID_TYPE,
+		message: `File type must be ${acceptArr.length > 1 ? `one of ${acceptArr.join(", ")}` : acceptArr[0]}`
+	};
+};
+var getTooLargeRejectionErr = (maxSize) => ({
+	code: FILE_TOO_LARGE,
+	message: `File is larger than ${maxSize} ${maxSize === 1 ? "byte" : "bytes"}`
+});
+var getTooSmallRejectionErr = (minSize) => ({
+	code: FILE_TOO_SMALL,
+	message: `File is smaller than ${minSize} ${minSize === 1 ? "byte" : "bytes"}`
+});
+var TOO_MANY_FILES_REJECTION = {
+	code: TOO_MANY_FILES,
+	message: "Too many files"
+};
+function isDefined(value) {
+	return value !== void 0 && value !== null;
+}
+function attrAccept(file, acceptedFiles) {
+	if (!acceptedFiles) return true;
+	const fileName = file.name || "";
+	const mimeType = (file.type || "").toLowerCase();
+	const baseMimeType = mimeType.replace(/\/.*$/, "");
+	return acceptedFiles.split(",").map((type) => type.trim().toLowerCase()).some((type) => {
+		if (type.startsWith(".")) return fileName.toLowerCase().endsWith(type);
+		if (type.endsWith("/*")) return baseMimeType === type.replace(/\/.*$/, "");
+		return mimeType === type;
+	});
+}
+/**
+* Check if the given file is a DataTransferItem with an empty type. During drag events some
+* browsers report an empty MIME type on DataTransferItem for certain file extensions even though
+* the type is correctly set once the file is actually dropped, so we accept those provisionally.
+*/
+function isDataTransferItemWithEmptyType(file) {
+	return file.type === "" && typeof file.getAsFile === "function";
+}
+function fileAccepted(file, accept) {
+	const isAcceptable = file.type === "application/x-moz-file" || attrAccept(file, accept) || isDataTransferItemWithEmptyType(file);
+	return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
+}
+function fileMatchSize(file, minSize, maxSize) {
+	if (isDefined(file.size)) {
+		if (isDefined(minSize) && isDefined(maxSize)) {
+			if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
+			if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
+		} else if (isDefined(minSize) && file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
+		else if (isDefined(maxSize) && file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
+	}
+	return [true, null];
+}
+function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles, validator }) {
+	if (!multiple && files.length > 1 || multiple && (maxFiles ?? 0) >= 1 && files.length > maxFiles) return false;
+	return files.every((file) => {
+		const [accepted] = fileAccepted(file, accept);
+		const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
+		const customErrors = validator ? validator(file) : null;
+		return accepted && sizeMatch && !customErrors;
+	});
+}
+function isEvtWithFiles(event) {
+	const dataTransfer = event.dataTransfer;
+	if (!dataTransfer) {
+		const target = event.target;
+		return !!target && !!target.files;
+	}
+	return Array.prototype.some.call(dataTransfer.types || [], (type) => type === "Files" || type === "application/x-moz-file");
+}
+function canUseFileSystemAccessAPI() {
+	return typeof window !== "undefined" && "showOpenFilePicker" in window;
+}
+/** Convert the `accept` prop into the `{types}` option for `window.showOpenFilePicker`. */
+function pickerOptionsFromAccept(accept) {
+	if (!isDefined(accept)) return;
+	return [{
+		description: "Files",
+		accept: Object.entries(accept).filter(([mimeType, ext]) => isMIMEType(mimeType) && Array.isArray(ext) && ext.every(isExt)).reduce((agg, [mimeType, ext]) => ({
+			...agg,
+			[mimeType]: ext
+		}), {})
+	}];
+}
+/** Convert the `accept` prop into a comma-separated string suitable for `<input accept>`. */
+function acceptPropAsAcceptAttr(accept) {
+	if (!isDefined(accept)) return;
+	return Object.entries(accept).reduce((acc, [mimeType, ext]) => [
+		...acc,
+		mimeType,
+		...ext
+	], []).filter((v) => isMIMEType(v) || isExt(v)).join(",");
+}
+function isAbort(v) {
+	return v instanceof DOMException && (v.name === "AbortError" || v.code === v.ABORT_ERR);
+}
+function isSecurityError(v) {
+	return v instanceof DOMException && (v.name === "SecurityError" || v.code === v.SECURITY_ERR);
+}
+function isMIMEType(v) {
+	return v === "audio/*" || v === "video/*" || v === "image/*" || v === "text/*" || v === "application/*" || /\w+\/[-+.\w]+/g.test(v);
+}
+function isExt(v) {
+	return /^.*\.[\w]+$/.test(v);
+}
+//#endregion
+//#region src/use-dropzone.ts
+function useDropzone(options) {
+	const rootRef = ref(null);
+	const inputRef = ref(null);
+	const state = reactive({
+		isFocused: false,
+		isFileDialogActive: false,
+		isDragActive: false,
+		isDragAccept: false,
+		isDragReject: false
+	});
+	let dragTargets = [];
+	const fsAccessApiWorks = typeof window !== "undefined" && window.isSecureContext && !!options.useFsAccessApi?.() && canUseFileSystemAccessAPI();
+	const acceptAttr = computed(() => acceptPropAsAcceptAttr(options.accept?.()));
+	const pickerTypes = computed(() => pickerOptionsFromAccept(options.accept?.()));
+	const getFilesFromEvent$1 = (event) => (options.getFilesFromEvent?.() ?? getFilesFromEvent)(event);
+	const onErr = (error) => {
+		if (options.onError) options.onError(error);
+		else console.error(error);
+	};
+	const stopPropagation = (event) => {
+		if (options.noDragEventsBubbling?.()) event.stopPropagation();
+	};
+	const onWindowFocus = () => {
+		if (!fsAccessApiWorks && state.isFileDialogActive) setTimeout(() => {
+			if (inputRef.value && !inputRef.value.files?.length) {
+				state.isFileDialogActive = false;
+				options.onFileDialogCancel?.();
+			}
+		}, 300);
+	};
+	const onDocumentDragOver = (event) => event.preventDefault();
+	const onDocumentDrop = (event) => {
+		if (rootRef.value && event.target && rootRef.value.contains(event.target)) return;
+		event.preventDefault();
+		dragTargets = [];
+	};
+	onMounted(() => {
+		window.addEventListener("focus", onWindowFocus, false);
+		if (options.preventDropOnDocument?.() ?? true) {
+			document.addEventListener("dragover", onDocumentDragOver, false);
+			document.addEventListener("drop", onDocumentDrop, false);
+		}
+		if ((options.autoFocus?.() ?? false) && !options.disabled?.()) rootRef.value?.focus();
+	});
+	onUnmounted(() => {
+		window.removeEventListener("focus", onWindowFocus, false);
+		document.removeEventListener("dragover", onDocumentDragOver);
+		document.removeEventListener("drop", onDocumentDrop);
+	});
+	const setFiles = (files, event) => {
+		const acceptedFiles = [];
+		const fileRejections = [];
+		const minSize = options.minSize?.();
+		const maxSize = options.maxSize?.();
+		const multiple = options.multiple?.() ?? true;
+		const maxFiles = options.maxFiles?.();
+		const validator = options.validator?.();
+		files.forEach((file) => {
+			const [accepted, acceptError] = fileAccepted(file, acceptAttr.value);
+			const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
+			const customErrors = validator ? validator(file) : null;
+			if (accepted && sizeMatch && !customErrors) acceptedFiles.push(file);
+			else {
+				const errors = [acceptError, sizeError].filter((e) => !!e);
+				if (customErrors) errors.push(...Array.isArray(customErrors) ? customErrors : [customErrors]);
+				fileRejections.push({
+					file,
+					errors
+				});
+			}
+		});
+		if (!multiple && acceptedFiles.length > 1 || multiple && (maxFiles ?? 0) >= 1 && acceptedFiles.length > maxFiles) {
+			acceptedFiles.forEach((file) => fileRejections.push({
+				file,
+				errors: [TOO_MANY_FILES_REJECTION]
+			}));
+			acceptedFiles.length = 0;
+		}
+		options.onDrop?.(acceptedFiles, fileRejections, event);
+		if (fileRejections.length > 0) options.onDropRejected?.(fileRejections, event);
+		if (acceptedFiles.length > 0) options.onDropAccepted?.(acceptedFiles, event);
+	};
+	const onDragEnterCb = (event) => {
+		event.preventDefault();
+		stopPropagation(event);
+		dragTargets = [...dragTargets, event.target];
+		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent$1(event)).then((files) => {
+			const isDragAccept = files.length > 0 && allFilesAccepted({
+				files,
+				accept: acceptAttr.value,
+				minSize: options.minSize?.(),
+				maxSize: options.maxSize?.(),
+				multiple: options.multiple?.() ?? true,
+				maxFiles: options.maxFiles?.(),
+				validator: options.validator?.()
+			});
+			const isDragReject = files.length > 0 && !isDragAccept;
+			state.isDragActive = true;
+			state.isDragAccept = isDragAccept;
+			state.isDragReject = isDragReject;
+			options.onDragEnter?.(event);
+		}).catch(onErr);
+	};
+	const onDragOverCb = (event) => {
+		event.preventDefault();
+		stopPropagation(event);
+		const hasFiles = isEvtWithFiles(event);
+		if (hasFiles && event.dataTransfer) try {
+			event.dataTransfer.dropEffect = "copy";
+		} catch {}
+		if (hasFiles) options.onDragOver?.(event);
+	};
+	const onDragLeaveCb = (event) => {
+		event.preventDefault();
+		stopPropagation(event);
+		const targets = dragTargets.filter((target) => rootRef.value && rootRef.value.contains(target));
+		const targetIdx = targets.indexOf(event.target);
+		if (targetIdx !== -1) targets.splice(targetIdx, 1);
+		dragTargets = targets;
+		if (targets.length > 0) return;
+		state.isDragActive = false;
+		state.isDragAccept = false;
+		state.isDragReject = false;
+		if (isEvtWithFiles(event)) options.onDragLeave?.(event);
+	};
+	const onDropCb = (event) => {
+		event.preventDefault();
+		stopPropagation(event);
+		dragTargets = [];
+		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent$1(event)).then((files) => setFiles(files, event)).catch(onErr);
+		state.isDragActive = false;
+		state.isDragAccept = false;
+		state.isDragReject = false;
+	};
+	const openFileDialog = () => {
+		if (options.disabled?.()) return;
+		if (fsAccessApiWorks) {
+			state.isFileDialogActive = true;
+			options.onFileDialogOpen?.();
+			const opts = {
+				multiple: options.multiple?.() ?? true,
+				types: pickerTypes.value
+			};
+			window.showOpenFilePicker(opts).then((handles) => getFilesFromEvent$1(handles)).then((files) => {
+				setFiles(files, null);
+				state.isFileDialogActive = false;
+			}).catch((e) => {
+				if (isAbort(e)) {
+					options.onFileDialogCancel?.();
+					state.isFileDialogActive = false;
+				} else if (isSecurityError(e)) if (inputRef.value) {
+					inputRef.value.value = "";
+					inputRef.value.click();
+				} else onErr(/* @__PURE__ */ new Error("Cannot open the file picker: no <input> was rendered as a fallback."));
+				else onErr(e);
+			});
+			return;
+		}
+		if (inputRef.value) {
+			state.isFileDialogActive = true;
+			options.onFileDialogOpen?.();
+			inputRef.value.value = "";
+			inputRef.value.click();
+		}
+	};
+	const onKeyDownCb = (event) => {
+		if (!rootRef.value || rootRef.value !== event.target) return;
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			openFileDialog();
+		}
+	};
+	const onFocusCb = () => {
+		state.isFocused = true;
+	};
+	const onBlurCb = () => {
+		state.isFocused = false;
+	};
+	const onClickCb = () => {
+		if (!options.noClick?.()) openFileDialog();
+	};
+	const onInputClickCb = (event) => {
+		event.stopPropagation();
+	};
+	const onInputChangeCb = (event) => {
+		onDropCb(event);
+	};
+	const composeHandler = (fn) => options.disabled?.() ? null : fn;
+	const composeKeyboardHandler = (fn) => options.noKeyboard?.() ? null : composeHandler(fn);
+	const composeDragHandler = (fn) => options.noDrag?.() ? null : composeHandler(fn);
+	const getRootProps = (overrides = {}) => ({
+		onKeydown: composeKeyboardHandler(onKeyDownCb),
+		onFocus: composeKeyboardHandler(onFocusCb),
+		onBlur: composeKeyboardHandler(onBlurCb),
+		onClick: composeHandler(onClickCb),
+		onDragenter: composeDragHandler(onDragEnterCb),
+		onDragover: composeDragHandler(onDragOverCb),
+		onDragleave: composeDragHandler(onDragLeaveCb),
+		onDrop: composeDragHandler(onDropCb),
+		role: "presentation",
+		ref: (el) => {
+			rootRef.value = el?.$el ?? el ?? null;
+		},
+		...!options.disabled?.() && !options.noKeyboard?.() ? { tabindex: 0 } : {},
+		...overrides
+	});
+	const getInputProps = (overrides = {}) => ({
+		type: "file",
+		accept: acceptAttr.value,
+		multiple: options.multiple?.() ?? true,
+		style: {
+			border: 0,
+			clip: "rect(0, 0, 0, 0)",
+			clipPath: "inset(50%)",
+			height: "1px",
+			margin: "0 -1px -1px 0",
+			overflow: "hidden",
+			padding: 0,
+			position: "absolute",
+			width: "1px",
+			whiteSpace: "nowrap"
+		},
+		onChange: composeHandler(onInputChangeCb),
+		onClick: composeHandler(onInputClickCb),
+		tabindex: -1,
+		ref: (el) => {
+			inputRef.value = el?.$el ?? el ?? null;
+		},
+		...overrides
+	});
+	return {
+		state,
+		rootRef,
+		inputRef,
+		isFocused: computed(() => state.isFocused && !options.disabled?.()),
+		isDragActive: computed(() => state.isDragActive),
+		isDragAccept: computed(() => state.isDragAccept),
+		isDragReject: computed(() => state.isDragReject),
+		getRootProps,
+		getInputProps,
+		open: () => composeHandler(openFileDialog)?.()
+	};
+}
+var Dropzone_module_default = {
+	root: "_root_27ynu_1",
+	inner: "_inner_27ynu_53",
+	fullScreen: "_fullScreen_27ynu_62",
+	dropzone: "_dropzone_27ynu_71"
+};
+//#endregion
+//#region src/Dropzone.ts
+var defaultProps$1 = {
+	multiple: true,
+	maxSize: Infinity,
+	activateOnClick: true,
+	activateOnDrag: true,
+	dragEventsBubbling: true,
+	activateOnKeyboard: true,
+	useFsAccessApi: false,
+	preventDropOnDocument: true,
+	variant: "light",
+	rejectColor: "red"
+};
+var varsResolver = createVarsResolver((theme, { radius, variant, acceptColor, rejectColor }) => {
+	const acceptColors = theme.variantColorResolver({
+		color: acceptColor || theme.primaryColor,
+		theme,
+		variant
+	});
+	const rejectColors = theme.variantColorResolver({
+		color: rejectColor || "red",
+		theme,
+		variant
+	});
+	return { root: {
+		"--dropzone-radius": getRadius(radius),
+		"--dropzone-accept-color": acceptColors.color,
+		"--dropzone-accept-bg": acceptColors.background,
+		"--dropzone-reject-color": rejectColors.color,
+		"--dropzone-reject-bg": rejectColors.background
+	} };
+});
+var DropzoneBaseComponent = defineComponent({
+	name: "Dropzone",
+	inheritAttrs: false,
+	props: {
+		acceptColor: {
+			type: String,
+			default: void 0
+		},
+		rejectColor: {
+			type: String,
+			default: void 0
+		},
+		radius: {
+			type: [String, Number],
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		accept: {
+			type: [Object, Array],
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: void 0
+		},
+		maxSize: {
+			type: Number,
+			default: void 0
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		maxFiles: {
+			type: Number,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		activateOnClick: {
+			type: Boolean,
+			default: void 0
+		},
+		activateOnDrag: {
+			type: Boolean,
+			default: void 0
+		},
+		activateOnKeyboard: {
+			type: Boolean,
+			default: void 0
+		},
+		dragEventsBubbling: {
+			type: Boolean,
+			default: void 0
+		},
+		preventDropOnDocument: {
+			type: Boolean,
+			default: void 0
+		},
+		useFsAccessApi: {
+			type: Boolean,
+			default: void 0
+		},
+		enablePointerEvents: {
+			type: Boolean,
+			default: false
+		},
+		variant: {
+			type: String,
+			default: void 0
+		},
+		loaderProps: {
+			type: Object,
+			default: void 0
+		},
+		inputProps: {
+			type: Object,
+			default: void 0
+		},
+		validator: {
+			type: Function,
+			default: void 0
+		},
+		getFilesFromEvent: {
+			type: Function,
+			default: void 0
+		},
+		openRef: {
+			type: [Object, Function],
+			default: void 0
+		},
+		onDrop: {
+			type: Function,
+			required: true
+		},
+		onDropAny: {
+			type: Function,
+			default: void 0
+		},
+		onReject: {
+			type: Function,
+			default: void 0
+		},
+		onDragEnter: {
+			type: Function,
+			default: void 0
+		},
+		onDragLeave: {
+			type: Function,
+			default: void 0
+		},
+		onDragOver: {
+			type: Function,
+			default: void 0
+		},
+		onFileDialogCancel: {
+			type: Function,
+			default: void 0
+		},
+		onFileDialogOpen: {
+			type: Function,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = useProps("Dropzone", defaultProps$1, rawProps);
+		const getStyles = useStyles({
+			name: "Dropzone",
+			classes: Dropzone_module_default,
+			props,
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			vars: props.vars,
+			varsResolver,
+			unstyled: props.unstyled
+		});
+		const dz = useDropzone({
+			accept: () => Array.isArray(props.accept) ? props.accept.reduce((r, key) => ({
+				...r,
+				[key]: []
+			}), {}) : props.accept,
+			disabled: () => props.disabled || props.loading,
+			multiple: () => props.multiple,
+			maxSize: () => props.maxSize,
+			maxFiles: () => props.maxFiles,
+			autoFocus: () => props.autoFocus,
+			noClick: () => !props.activateOnClick,
+			noDrag: () => !props.activateOnDrag,
+			noDragEventsBubbling: () => !props.dragEventsBubbling,
+			noKeyboard: () => !props.activateOnKeyboard,
+			preventDropOnDocument: () => props.preventDropOnDocument,
+			useFsAccessApi: () => props.useFsAccessApi,
+			validator: () => props.validator,
+			getFilesFromEvent: () => props.getFilesFromEvent,
+			onDrop: (files, fileRejections) => props.onDropAny?.(files, fileRejections),
+			onDropAccepted: (files) => props.onDrop(files),
+			onDropRejected: (fileRejections) => props.onReject?.(fileRejections),
+			onDragEnter: (event) => props.onDragEnter?.(event),
+			onDragLeave: (event) => props.onDragLeave?.(event),
+			onDragOver: (event) => props.onDragOver?.(event),
+			onFileDialogCancel: () => props.onFileDialogCancel?.(),
+			onFileDialogOpen: () => props.onFileDialogOpen?.()
+		});
+		assignRef(props.openRef, dz.open);
+		provideDropzoneContext({
+			get accept() {
+				return dz.isDragActive.value && dz.isDragAccept.value;
+			},
+			get reject() {
+				return dz.isDragActive.value && dz.isDragReject.value;
+			},
+			get idle() {
+				const accepted = dz.isDragActive.value && dz.isDragAccept.value;
+				const rejected = dz.isDragActive.value && dz.isDragReject.value;
+				return !accepted && !rejected;
+			}
+		});
+		return () => {
+			const isAccepted = dz.isDragActive.value && dz.isDragAccept.value;
+			const isRejected = dz.isDragActive.value && dz.isDragReject.value;
+			const isIdle = !isAccepted && !isRejected;
+			const rootProps = dz.getRootProps();
+			const inputProps = dz.getInputProps(props.inputProps);
+			return h(Box, {
+				...rootProps,
+				...getStyles("root"),
+				...attrs,
+				mod: [{
+					accept: isAccepted,
+					reject: isRejected,
+					idle: isIdle,
+					disabled: props.disabled,
+					loading: props.loading,
+					"activate-on-click": props.activateOnClick
+				}, attrs.mod]
+			}, () => [
+				h(LoadingOverlay, {
+					visible: props.loading,
+					overlayProps: { radius: props.radius },
+					unstyled: props.unstyled,
+					loaderProps: props.loaderProps
+				}),
+				h("input", {
+					...inputProps,
+					name: props.name
+				}),
+				h("div", {
+					...getStyles("inner"),
+					"data-enable-pointer-events": props.enablePointerEvents || void 0
+				}, slots.default?.())
+			]);
+		};
+	}
+});
+var Dropzone$1 = Object.assign(withBoxProps(DropzoneBaseComponent), {
+	classes: Dropzone_module_default,
+	varsResolver,
+	Accept: DropzoneAccept,
+	Idle: DropzoneIdle,
+	Reject: DropzoneReject
+});
+//#endregion
+//#region src/DropzoneFullScreen.ts
+var defaultProps = {
+	maxSize: Infinity,
+	activateOnDrag: true,
+	dragEventsBubbling: true,
+	activateOnKeyboard: true,
+	active: true,
+	zIndex: getDefaultZIndex("max"),
+	withinPortal: true
+};
+var DropzoneFullScreen = withBoxProps(defineComponent({
+	name: "DropzoneFullScreen",
+	inheritAttrs: false,
+	props: {
+		active: {
+			type: Boolean,
+			default: void 0
+		},
+		onDrop: {
+			type: Function,
+			required: true
+		},
+		onReject: {
+			type: Function,
+			default: void 0
+		},
+		zIndex: {
+			type: [String, Number],
+			default: void 0
+		},
+		withinPortal: {
+			type: Boolean,
+			default: void 0
+		},
+		portalProps: {
+			type: Object,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = useProps("DropzoneFullScreen", defaultProps, rawProps);
+		const getStyles = useStyles({
+			name: "DropzoneFullScreen",
+			classes: Dropzone_module_default,
+			props,
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			rootSelector: "fullScreen"
+		});
+		const counter = ref(0);
+		const [visible, { open, close }] = useDisclosure(false);
+		const handleDragEnter = (event) => {
+			if (event.dataTransfer?.types.includes("Files")) {
+				counter.value += 1;
+				open();
+			}
+		};
+		const handleDragLeave = () => {
+			counter.value -= 1;
+		};
+		watch(counter, (value) => {
+			if (value === 0) close();
+		});
+		let attached = false;
+		const attach = () => {
+			if (attached) return;
+			document.addEventListener("dragenter", handleDragEnter, false);
+			document.addEventListener("dragleave", handleDragLeave, false);
+			attached = true;
+		};
+		const detach = () => {
+			if (!attached) return;
+			document.removeEventListener("dragenter", handleDragEnter, false);
+			document.removeEventListener("dragleave", handleDragLeave, false);
+			attached = false;
+		};
+		watch(() => props.active, (active) => {
+			detach();
+			if (active) attach();
+		}, { immediate: true });
+		onUnmounted(detach);
+		return () => h(OptionalPortal, {
+			...props.portalProps,
+			withinPortal: props.withinPortal
+		}, () => h("div", { ...getStyles("fullScreen", { style: {
+			opacity: visible.value ? 1 : 0,
+			pointerEvents: visible.value ? "all" : "none",
+			zIndex: props.zIndex
+		} }) }, [h(Dropzone$1, {
+			activateOnClick: false,
+			...attrs,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			class: Dropzone_module_default.dropzone,
+			onDrop: (files) => {
+				props.onDrop(files);
+				close();
+				counter.value = 0;
+			},
+			onReject: (fileRejections) => {
+				props.onReject?.(fileRejections);
+				close();
+				counter.value = 0;
+			}
+		}, slots)]));
+	}
+}));
+//#endregion
+//#region src/mime-types.ts
+var MIME_TYPES = {
+	png: "image/png",
+	gif: "image/gif",
+	jpeg: "image/jpeg",
+	svg: "image/svg+xml",
+	webp: "image/webp",
+	avif: "image/avif",
+	heic: "image/heic",
+	heif: "image/heif",
+	mp4: "video/mp4",
+	zip: "application/zip",
+	rar: "application/x-rar",
+	"7z": "application/x-7z-compressed",
+	csv: "text/csv",
+	pdf: "application/pdf",
+	doc: "application/msword",
+	docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	xls: "application/vnd.ms-excel",
+	xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	ppt: "application/vnd.ms-powerpoint",
+	pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+	exe: "application/vnd.microsoft.portable-executable"
+};
+var IMAGE_MIME_TYPE = [
+	MIME_TYPES.png,
+	MIME_TYPES.gif,
+	MIME_TYPES.jpeg,
+	MIME_TYPES.svg,
+	MIME_TYPES.webp,
+	MIME_TYPES.avif,
+	MIME_TYPES.heic,
+	MIME_TYPES.heif
+];
+var PDF_MIME_TYPE = [MIME_TYPES.pdf];
+var MS_WORD_MIME_TYPE = [MIME_TYPES.doc, MIME_TYPES.docx];
+var MS_EXCEL_MIME_TYPE = [MIME_TYPES.xls, MIME_TYPES.xlsx];
+var MS_POWERPOINT_MIME_TYPE = [MIME_TYPES.ppt, MIME_TYPES.pptx];
+var EXE_MIME_TYPE = [MIME_TYPES.exe];
+//#endregion
+//#region src/index.ts
+Object.assign(Dropzone$1, { FullScreen: DropzoneFullScreen });
+var Dropzone = Dropzone$1;
+//#endregion
+export { Dropzone, DropzoneAccept, DropzoneFullScreen, DropzoneIdle, DropzoneReject, EXE_MIME_TYPE, ErrorCode, FILE_INVALID_TYPE, FILE_TOO_LARGE, FILE_TOO_SMALL, IMAGE_MIME_TYPE, MIME_TYPES, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MS_WORD_MIME_TYPE, PDF_MIME_TYPE, TOO_MANY_FILES, TOO_MANY_FILES_REJECTION, acceptPropAsAcceptAttr, allFilesAccepted, canUseFileSystemAccessAPI, fileAccepted, fileMatchSize, getInvalidTypeRejectionErr, getTooLargeRejectionErr, getTooSmallRejectionErr, isAbort, isDataTransferItemWithEmptyType, isEvtWithFiles, isExt, isMIMEType, isSecurityError, pickerOptionsFromAccept, useDropzone };
+
+//# sourceMappingURL=index.mjs.map