@mantine-vue/dropzone 3.0.0 → 3.1.0

package/cjs/index.cjs

@@ -1,39 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _mantine_vue_core = require("@mantine-vue/core");
 let vue = require("vue");
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
-let _mantine_vue_core = require("@mantine-vue/core");
 //#region src/Dropzone.context.ts
 var [provideDropzoneContext, useDropzoneContext] = (0, _mantine_vue_core.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 (0, vue.defineComponent)({
-		name: `Dropzone${upperFirst(status)}`,
-		slots: Object,
-		props: { children: {
-			type: null,
-			default: void 0
-		} },
-		setup(props, { slots, attrs }) {
-			const ctx = useDropzoneContext();
-			return () => {
-				if (!ctx[status]) return null;
-				const slotChildren = slots.default?.();
-				const children = props.children !== void 0 ? props.children : slotChildren;
-				const child = Array.isArray(children) && children.length === 1 ? children[0] : children;
-				if ((0, vue.isVNode)(child) && !Array.isArray(child)) return (0, vue.cloneVNode)(child, attrs);
-				return (0, vue.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;
@@ -459,19 +430,8 @@ var Dropzone_module_default = {
 	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"
-};
+//#region src/components/Dropzone/Dropzone.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-enable-pointer-events"];
 var varsResolver = (0, _mantine_vue_core.createVarsResolver)((theme, { radius, variant, acceptColor, rejectColor }) => {
 	const acceptColors = theme.variantColorResolver({
 		color: acceptColor || theme.primaryColor,
@@ -491,22 +451,17 @@ var varsResolver = (0, _mantine_vue_core.createVarsResolver)((theme, { radius, v
 		"--dropzone-reject-bg": rejectColors.background
 	} };
 });
-var DropzoneBaseComponent = (0, vue.defineComponent)({
+//#endregion
+//#region src/components/Dropzone/Dropzone.vue
+var Dropzone_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Dropzone",
 	inheritAttrs: false,
+	__name: "Dropzone",
 	props: {
-		acceptColor: {
-			type: String,
-			default: void 0
-		},
-		rejectColor: {
-			type: String,
-			default: void 0
-		},
-		radius: {
-			type: [String, Number],
-			default: void 0
-		},
+		rootRef: {},
+		acceptColor: {},
+		rejectColor: { default: "red" },
+		radius: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -515,133 +470,69 @@ var DropzoneBaseComponent = (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		accept: {
-			type: [Object, Array],
-			default: void 0
-		},
+		accept: {},
+		openRef: {},
 		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
+			default: true
 		},
+		maxSize: { default: Infinity },
+		name: {},
+		maxFiles: {},
+		autoFocus: { type: Boolean },
 		activateOnClick: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		activateOnDrag: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		activateOnKeyboard: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		dragEventsBubbling: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		preventDropOnDocument: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		useFsAccessApi: {
 			type: Boolean,
-			default: void 0
+			default: false
 		},
+		getFilesFromEvent: {},
+		validator: {},
 		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
-		}
+		loaderProps: {},
+		inputProps: {},
+		variant: { default: "light" },
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = (0, _mantine_vue_core.useProps)("Dropzone", defaultProps$1, rawProps);
+	emits: [
+		"drop-any",
+		"drop",
+		"reject",
+		"drag-enter",
+		"drag-leave",
+		"drag-over",
+		"file-dialog-cancel",
+		"file-dialog-open"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const props = (0, _mantine_vue_core.useProps)("Dropzone", null, rawProps);
+		const attrs = (0, vue.useAttrs)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "Dropzone",
 			classes: Dropzone_module_default,
@@ -655,8 +546,8 @@ var DropzoneBaseComponent = (0, vue.defineComponent)({
 			unstyled: props.unstyled
 		});
 		const dz = useDropzone({
-			accept: () => Array.isArray(props.accept) ? props.accept.reduce((r, key) => ({
-				...r,
+			accept: () => Array.isArray(props.accept) ? props.accept.reduce((result, key) => ({
+				...result,
 				[key]: []
 			}), {}) : props.accept,
 			disabled: () => props.disabled || props.loading,
@@ -672,127 +563,267 @@ var DropzoneBaseComponent = (0, vue.defineComponent)({
 			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?.()
+			onDrop: (files, rejected) => emit("drop-any", files, rejected),
+			onDropAccepted: (files) => emit("drop", files),
+			onDropRejected: (rejected) => emit("reject", rejected),
+			onDragEnter: (event) => emit("drag-enter", event),
+			onDragLeave: (event) => emit("drag-leave", event),
+			onDragOver: (event) => emit("drag-over", event),
+			onFileDialogCancel: () => emit("file-dialog-cancel"),
+			onFileDialogOpen: () => emit("file-dialog-open")
 		});
-		(0, _mantine_vue_hooks.assignRef)(props.openRef, dz.open);
+		(0, vue.watch)(() => props.openRef, (value) => (0, _mantine_vue_hooks.assignRef)(value, dz.open), { immediate: true });
+		const accepted = (0, vue.computed)(() => dz.isDragActive.value && dz.isDragAccept.value);
+		const rejected = (0, vue.computed)(() => dz.isDragActive.value && dz.isDragReject.value);
+		const idle = (0, vue.computed)(() => !accepted.value && !rejected.value);
 		provideDropzoneContext({
 			get accept() {
-				return dz.isDragActive.value && dz.isDragAccept.value;
+				return accepted.value;
 			},
 			get reject() {
-				return dz.isDragActive.value && dz.isDragReject.value;
+				return rejected.value;
 			},
 			get idle() {
-				const accepted = dz.isDragActive.value && dz.isDragAccept.value;
-				const rejected = dz.isDragActive.value && dz.isDragReject.value;
-				return !accepted && !rejected;
+				return idle.value;
 			}
 		});
-		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 (0, vue.h)(_mantine_vue_core.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]
-			}, () => [
-				(0, vue.h)(_mantine_vue_core.LoadingOverlay, {
-					visible: props.loading,
-					overlayProps: { radius: props.radius },
-					unstyled: props.unstyled,
-					loaderProps: props.loaderProps
-				}),
-				(0, vue.h)("input", {
-					...inputProps,
-					name: props.name
-				}),
-				(0, vue.h)("div", {
-					...getStyles("inner"),
-					"data-enable-pointer-events": props.enablePointerEvents || void 0
-				}, slots.default?.())
-			]);
+		const rootAttrs = () => ({
+			...dz.getRootProps(),
+			...getStyles("root"),
+			...attrs,
+			mod: [{
+				accept: accepted.value,
+				reject: rejected.value,
+				idle: idle.value,
+				disabled: props.disabled,
+				loading: props.loading,
+				"activate-on-click": props.activateOnClick
+			}, attrs.mod]
+		});
+		const inputAttrs = () => ({
+			...dz.getInputProps(props.inputProps),
+			name: props.name
+		});
+		const rootElement = (0, vue.ref)(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
+		};
+		__expose({ rootElement });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ rootRef: setRootRef }, rootAttrs()), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.LoadingOverlay), {
+						visible: (0, vue.unref)(props).loading,
+						"overlay-props": { radius: (0, vue.unref)(props).radius },
+						unstyled: (0, vue.unref)(props).unstyled,
+						"loader-props": (0, vue.unref)(props).loaderProps
+					}, null, 8, [
+						"visible",
+						"overlay-props",
+						"unstyled",
+						"loader-props"
+					]),
+					(0, vue.createElementVNode)("input", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(inputAttrs())), null, 16),
+					(0, vue.createElementVNode)("div", (0, vue.mergeProps)((0, vue.unref)(getStyles)("inner"), { "data-enable-pointer-events": (0, vue.unref)(props).enablePointerEvents || void 0 }), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16, _hoisted_1)
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/DropzoneStatus/DropzoneStatus.vue
+var DropzoneStatus_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "DropzoneStatus",
+	inheritAttrs: false,
+	__name: "DropzoneStatus",
+	props: {
+		children: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		status: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = (0, vue.useSlots)();
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useDropzoneContext();
+		const renderContent = () => {
+			const slotChildren = slots.default?.();
+			const children = props.children !== void 0 ? props.children : slotChildren;
+			const child = Array.isArray(children) && children.length === 1 ? children[0] : children;
+			return (0, vue.isVNode)(child) && !Array.isArray(child) ? (0, vue.cloneVNode)(child, attrs) : child;
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(ctx)[props.status] && (0, vue.isVNode)(renderContent()) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderContent), { key: 0 })) : (0, vue.unref)(ctx)[props.status] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(attrs))), [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderContent)))], 16)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/DropzoneStatus/DropzoneAccept.vue
+var DropzoneAccept_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "DropzoneAccept",
+	inheritAttrs: false,
+	__name: "DropzoneAccept",
+	props: { children: { type: [
+		Object,
+		String,
+		Number,
+		Boolean,
+		null,
+		Array
+	] } },
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(DropzoneStatus_default, (0, vue.mergeProps)({
+				..._ctx.$props,
+				..._ctx.$attrs
+			}, {
+				status: "accept",
+				children: (0, vue.unref)(slots).default?.()
+			}), null, 16, ["children"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DropzoneStatus/DropzoneReject.vue
+var DropzoneReject_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "DropzoneReject",
+	inheritAttrs: false,
+	__name: "DropzoneReject",
+	props: { children: { type: [
+		Object,
+		String,
+		Number,
+		Boolean,
+		null,
+		Array
+	] } },
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(DropzoneStatus_default, (0, vue.mergeProps)({
+				..._ctx.$props,
+				..._ctx.$attrs
+			}, {
+				status: "reject",
+				children: (0, vue.unref)(slots).default?.()
+			}), null, 16, ["children"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DropzoneStatus/DropzoneIdle.vue
+var DropzoneIdle_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "DropzoneIdle",
+	inheritAttrs: false,
+	__name: "DropzoneIdle",
+	props: { children: { type: [
+		Object,
+		String,
+		Number,
+		Boolean,
+		null,
+		Array
+	] } },
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(DropzoneStatus_default, (0, vue.mergeProps)({
+				..._ctx.$props,
+				..._ctx.$attrs
+			}, {
+				status: "idle",
+				children: (0, vue.unref)(slots).default?.()
+			}), null, 16, ["children"]);
 		};
 	}
 });
-var Dropzone$1 = Object.assign((0, _mantine_vue_core.withBoxProps)(DropzoneBaseComponent), {
+//#endregion
+//#region src/components/Dropzone/index.ts
+var Dropzone$1 = (0, _mantine_vue_core.factory)(Dropzone_default, {
 	classes: Dropzone_module_default,
 	varsResolver,
-	Accept: DropzoneAccept,
-	Idle: DropzoneIdle,
-	Reject: DropzoneReject
+	Accept: DropzoneAccept_default,
+	Idle: DropzoneIdle_default,
+	Reject: DropzoneReject_default
 });
 //#endregion
-//#region src/DropzoneFullScreen.ts
-var defaultProps = {
-	maxSize: Infinity,
-	activateOnDrag: true,
-	dragEventsBubbling: true,
-	activateOnKeyboard: true,
-	active: true,
-	zIndex: (0, _mantine_vue_core.getDefaultZIndex)("max"),
-	withinPortal: true
-};
-var DropzoneFullScreenBaseComponent = (0, vue.defineComponent)({
+//#region src/components/DropzoneFullScreen/DropzoneFullScreen.vue
+var DropzoneFullScreen_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "DropzoneFullScreen",
 	inheritAttrs: false,
+	__name: "DropzoneFullScreen",
 	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
+			default: true
 		},
+		zIndex: { default: (0, _mantine_vue_core.getDefaultZIndex)("max") },
 		withinPortal: {
 			type: Boolean,
-			default: void 0
-		},
-		portalProps: {
-			type: Object,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
+			default: true
+		},
+		portalProps: {},
+		classNames: {},
+		styles: {},
+		rootRef: {},
+		acceptColor: {},
+		rejectColor: {},
+		radius: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
+		accept: {},
+		openRef: {},
+		multiple: { type: Boolean },
+		maxSize: { default: Infinity },
+		name: {},
+		maxFiles: {},
+		autoFocus: { type: Boolean },
+		activateOnClick: { type: Boolean },
+		activateOnDrag: {
+			type: Boolean,
+			default: true
 		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
+		activateOnKeyboard: {
+			type: Boolean,
+			default: true
 		},
-		unstyled: {
+		dragEventsBubbling: {
 			type: Boolean,
-			default: false
-		}
+			default: true
+		},
+		preventDropOnDocument: { type: Boolean },
+		useFsAccessApi: { type: Boolean },
+		getFilesFromEvent: {},
+		validator: {},
+		enablePointerEvents: { type: Boolean },
+		loaderProps: {},
+		inputProps: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = (0, _mantine_vue_core.useProps)("DropzoneFullScreen", defaultProps, rawProps);
+	emits: [
+		"drop-any",
+		"drop",
+		"reject",
+		"drag-enter",
+		"drag-leave",
+		"drag-over",
+		"file-dialog-cancel",
+		"file-dialog-open"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const props = (0, _mantine_vue_core.useProps)("DropzoneFullScreen", null, rawProps);
+		const attrs = (0, vue.useAttrs)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "DropzoneFullScreen",
 			classes: Dropzone_module_default,
@@ -806,64 +837,99 @@ var DropzoneFullScreenBaseComponent = (0, vue.defineComponent)({
 		});
 		const counter = (0, vue.ref)(0);
 		const [visible, { open, close }] = (0, _mantine_vue_hooks.useDisclosure)(false);
-		const handleDragEnter = (event) => {
+		function reset() {
+			close();
+			counter.value = 0;
+		}
+		function handleDragEnter(event) {
 			if (event.dataTransfer?.types.includes("Files")) {
 				counter.value += 1;
 				open();
 			}
-		};
-		const handleDragLeave = () => {
-			counter.value -= 1;
-		};
+		}
+		function handleDragLeave() {
+			counter.value = Math.max(0, counter.value - 1);
+		}
 		(0, vue.watch)(counter, (value) => {
 			if (value === 0) close();
 		});
 		let attached = false;
-		const attach = () => {
+		function attach() {
 			if (attached) return;
 			document.addEventListener("dragenter", handleDragEnter, false);
 			document.addEventListener("dragleave", handleDragLeave, false);
 			attached = true;
-		};
-		const detach = () => {
+		}
+		function detach() {
 			if (!attached) return;
 			document.removeEventListener("dragenter", handleDragEnter, false);
 			document.removeEventListener("dragleave", handleDragLeave, false);
 			attached = false;
-		};
+		}
 		(0, vue.watch)(() => props.active, (active) => {
 			detach();
 			if (active) attach();
+			else reset();
 		}, { immediate: true });
 		(0, vue.onUnmounted)(detach);
-		return () => (0, vue.h)(_mantine_vue_core.OptionalPortal, {
-			...props.portalProps,
-			withinPortal: props.withinPortal
-		}, () => (0, vue.h)("div", { ...getStyles("fullScreen", { style: {
-			opacity: visible.value ? 1 : 0,
-			pointerEvents: visible.value ? "all" : "none",
-			zIndex: props.zIndex
-		} }) }, [(0, vue.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)]));
+		const rootElement = (0, vue.ref)(null);
+		const setRootRef = (node) => {
+			const element = node && "$el" in node ? node.$el : node;
+			rootElement.value = element;
+			(0, _mantine_vue_hooks.assignRef)(props.rootRef, element);
+		};
+		__expose({ rootElement });
+		const dropzoneAttrs = () => {
+			const rest = Object.fromEntries(Object.entries(props).filter(([key]) => ![
+				"active",
+				"zIndex",
+				"withinPortal",
+				"portalProps",
+				"classNames",
+				"styles"
+			].includes(key)));
+			const { classNames, styles } = props;
+			return {
+				...rest,
+				...attrs,
+				activateOnClick: false,
+				classNames,
+				styles,
+				class: Dropzone_module_default.dropzone,
+				onDrop: (files) => {
+					emit("drop", files);
+					reset();
+				},
+				onReject: (rejections) => {
+					emit("reject", rejections);
+					reset();
+				},
+				onDropAny: (files, rejections) => emit("drop-any", files, rejections),
+				onDragEnter: (event) => emit("drag-enter", event),
+				onDragLeave: (event) => emit("drag-leave", event),
+				onDragOver: (event) => emit("drag-over", event),
+				onFileDialogCancel: () => emit("file-dialog-cancel"),
+				onFileDialogOpen: () => emit("file-dialog-open")
+			};
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.OptionalPortal), (0, vue.mergeProps)((0, vue.unref)(props).portalProps, { "within-portal": (0, vue.unref)(props).withinPortal }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ ref: setRootRef }, (0, vue.unref)(getStyles)("fullScreen", { style: {
+					opacity: (0, vue.unref)(visible) ? 1 : 0,
+					pointerEvents: (0, vue.unref)(visible) ? "all" : "none",
+					zIndex: (0, vue.unref)(props).zIndex
+				} })), [(0, vue.createVNode)(Dropzone_default, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(dropzoneAttrs())), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 16)], 16)]),
+				_: 3
+			}, 16, ["within-portal"]);
+		};
 	}
 });
-var DropzoneFullScreen = (0, _mantine_vue_core.withBoxProps)(DropzoneFullScreenBaseComponent);
+//#endregion
+//#region src/components/DropzoneFullScreen/index.ts
+var DropzoneFullScreen = (0, _mantine_vue_core.factory)(DropzoneFullScreen_default, { classes: Dropzone_module_default });
 //#endregion
 //#region src/mime-types.ts
 var MIME_TYPES = {
@@ -910,10 +976,10 @@ Object.assign(Dropzone$1, { FullScreen: DropzoneFullScreen });
 var Dropzone = Dropzone$1;
 //#endregion
 exports.Dropzone = Dropzone;
-exports.DropzoneAccept = DropzoneAccept;
+exports.DropzoneAccept = DropzoneAccept_default;
 exports.DropzoneFullScreen = DropzoneFullScreen;
-exports.DropzoneIdle = DropzoneIdle;
-exports.DropzoneReject = DropzoneReject;
+exports.DropzoneIdle = DropzoneIdle_default;
+exports.DropzoneReject = DropzoneReject_default;
 exports.EXE_MIME_TYPE = EXE_MIME_TYPE;
 exports.ErrorCode = ErrorCode;
 exports.FILE_INVALID_TYPE = FILE_INVALID_TYPE;