@mantine-vue/contextmenu 3.0.0 → 3.1.0

package/cjs/index.cjs

@@ -15,25 +15,24 @@ function resolveContextMenuStyles(styles, theme) {
 	return typeof styles === "function" ? styles(theme) : styles;
 }
 //#endregion
-//#region src/ContextMenuDivider.ts
-var ContextMenuDivider = (0, vue.defineComponent)({
+//#region src/components/ContextMenuDivider/ContextMenuDivider.vue
+var ContextMenuDivider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenuDivider",
+	__name: "ContextMenuDivider",
 	props: {
-		className: {
-			type: String,
-			default: void 0
-		},
-		style: {
-			type: [Object, Function],
-			default: void 0
-		}
+		className: {},
+		style: { type: Function }
 	},
-	setup(props) {
+	setup(__props) {
+		const props = __props;
 		const theme = (0, _mantine_vue_core.useMantineTheme)();
-		return () => (0, vue.h)(_mantine_vue_core.Box, {
-			class: ["mantine-contextmenu-divider", props.className],
-			style: resolveContextMenuStyle(props.style, theme.value)
-		});
+		const resolvedStyle = (0, vue.computed)(() => resolveContextMenuStyle(props.style, theme.value));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), {
+				class: (0, vue.normalizeClass)(["mantine-contextmenu-divider", props.className]),
+				style: (0, vue.normalizeStyle)(resolvedStyle.value)
+			}, null, 8, ["class", "style"]);
+		};
 	}
 });
 //#endregion
@@ -57,62 +56,61 @@ function useContextMenuSettings() {
 	} });
 }
 //#endregion
-//#region src/ContextMenuItem.ts
-var ContextMenuItem = (0, vue.defineComponent)({
+//#region src/components/ContextMenuItem/ContextMenuItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "mantine-contextmenu-item-button-title" };
+//#endregion
+//#region src/components/ContextMenuItem/ContextMenuItem.vue
+var ContextMenuItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenuItem",
-	slots: Object,
+	__name: "ContextMenuItem",
 	props: {
-		title: {
-			type: null,
-			default: void 0
-		},
-		icon: {
-			type: null,
-			default: void 0
-		},
-		iconRight: {
-			type: null,
-			default: void 0
-		},
-		color: {
-			type: String,
-			default: void 0
-		},
+		className: {},
+		style: {},
+		hidden: { type: Boolean },
+		icon: {},
+		iconRight: {},
+		title: {},
+		color: {},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		onClick: {
-			type: Function,
-			default: void 0
-		},
-		items: {
-			type: Array,
-			default: void 0
-		},
-		onHide: {
-			type: Function,
-			required: true
-		},
-		submenuProps: {
-			type: Object,
-			required: true
-		},
-		className: {
-			type: String,
-			default: void 0
-		},
-		style: {
-			type: [Object, Function],
-			default: void 0
-		}
+		onClick: {},
+		items: {},
+		submenuProps: {}
 	},
-	setup(props, { slots }) {
+	emits: ["hide"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
 		const button = (0, vue.ref)(null);
 		const submenuPosition = (0, vue.ref)(null);
 		const settings = useContextMenuSettings();
 		const theme = (0, _mantine_vue_core.useMantineTheme)();
 		const hoverAvailable = (0, _mantine_vue_hooks.useMediaQuery)("(hover: hover)");
+		const hasSubmenu = (0, vue.computed)(() => Boolean(props.items && !props.disabled));
+		const parsedColor = (0, vue.computed)(() => props.color ? (0, _mantine_vue_core.parseThemeColor)({
+			color: props.color,
+			theme: theme.value
+		}) : null);
+		const itemStyle = (0, vue.computed)(() => {
+			const color = parsedColor.value?.value;
+			return {
+				"--mantine-contextmenu-item-button-color": color ?? "var(--mantine-color-text)",
+				"--mantine-contextmenu-item-button-hover-bg-color-light": color ? (0, _mantine_vue_core.rgba)(color, .08) : (0, _mantine_vue_core.rgba)(theme.value.colors.gray[4], .25),
+				"--mantine-contextmenu-item-button-hover-bg-color-dark": color ? (0, _mantine_vue_core.rgba)(color, .15) : (0, _mantine_vue_core.rgba)(theme.value.colors.dark[3], .25),
+				"--mantine-contextmenu-item-button-pressed-bg-color-light": color ? (0, _mantine_vue_core.rgba)(color, .2) : (0, _mantine_vue_core.rgba)(theme.value.colors.gray[4], .5),
+				"--mantine-contextmenu-item-button-pressed-bg-color-dark": color ? (0, _mantine_vue_core.rgba)(color, .3) : (0, _mantine_vue_core.rgba)(theme.value.colors.dark[3], .5),
+				...resolveContextMenuStyle(props.style, theme.value)
+			};
+		});
+		const icon = (0, vue.computed)(() => (0, _mantine_vue_core.resolveNode)(props.icon, slots.icon));
+		const title = (0, vue.computed)(() => (0, _mantine_vue_core.resolveNode)(props.title, slots.title));
+		const iconRight = (0, vue.computed)(() => (0, _mantine_vue_core.resolveNode)(props.iconRight, slots.iconRight));
+		const renderIcon = () => icon.value;
+		const renderTitle = () => title.value;
+		const renderIconRight = () => iconRight.value;
 		const showSubmenuTimeout = (0, _mantine_vue_hooks.useTimeout)(() => {
 			if (!button.value) return;
 			const rect = button.value.getBoundingClientRect();
@@ -121,129 +119,111 @@ var ContextMenuItem = (0, vue.defineComponent)({
 				y: rect.top
 			};
 		}, settings.value.submenuDelay);
-		const hideSubmenuTimeout = (0, _mantine_vue_hooks.useTimeout)(() => {
-			submenuPosition.value = null;
-		}, settings.value.submenuDelay);
-		const showSubmenu = () => {
+		const hideSubmenuTimeout = (0, _mantine_vue_hooks.useTimeout)(() => submenuPosition.value = null, settings.value.submenuDelay);
+		function showSubmenu() {
 			hideSubmenuTimeout.clear();
 			showSubmenuTimeout.start();
-		};
-		const hideSubmenu = () => {
+		}
+		function hideSubmenu() {
 			showSubmenuTimeout.clear();
 			hideSubmenuTimeout.start();
-		};
-		const handleSubmenuClick = (event) => {
-			event.stopPropagation();
-			showSubmenu();
-		};
-		const handleActionClick = (event) => {
-			props.onHide();
-			props.onClick?.(event);
-		};
-		const setButtonRef = (node) => {
-			button.value = node?.$el ?? node ?? null;
-		};
-		return () => {
-			const hasSubmenu = Boolean(props.items && !props.disabled);
-			const parsed = props.color ? (0, _mantine_vue_core.parseThemeColor)({
-				color: props.color,
-				theme: theme.value
-			}) : null;
-			const itemColor = parsed?.value ?? "var(--mantine-color-text)";
-			const colorValue = parsed?.value;
-			const icon = (0, _mantine_vue_core.resolveNode)(props.icon, slots.icon);
-			const title = (0, _mantine_vue_core.resolveNode)(props.title, slots.title);
-			const iconRight = (0, _mantine_vue_core.resolveNode)(props.iconRight, slots.iconRight);
-			return (0, vue.h)("div", {
-				onMouseenter: hasSubmenu && hoverAvailable.value ? showSubmenu : void 0,
-				onMouseleave: hasSubmenu && hoverAvailable.value ? hideSubmenu : void 0
-			}, [(0, vue.h)(_mantine_vue_core.UnstyledButton, {
-				ref: setButtonRef,
+		}
+		function mouseenter() {
+			if (hasSubmenu.value && hoverAvailable.value) showSubmenu();
+		}
+		function mouseleave() {
+			if (hasSubmenu.value && hoverAvailable.value) hideSubmenu();
+		}
+		function click(event) {
+			if (hasSubmenu.value) {
+				event.stopPropagation();
+				showSubmenu();
+			} else if (props.onClick) {
+				emit("hide");
+				props.onClick(event);
+			}
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				onMouseenter: mouseenter,
+				onMouseleave: mouseleave
+			}, [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), {
+				ref: (node) => button.value = node?.$el ?? node ?? null,
 				dir: props.submenuProps.dir || "ltr",
-				class: ["mantine-contextmenu-item-button", props.className],
+				class: (0, vue.normalizeClass)(["mantine-contextmenu-item-button", props.className]),
 				disabled: props.disabled,
-				style: {
-					"--mantine-contextmenu-item-button-color": itemColor,
-					"--mantine-contextmenu-item-button-hover-bg-color-light": colorValue ? (0, _mantine_vue_core.rgba)(colorValue, .08) : (0, _mantine_vue_core.rgba)(theme.value.colors.gray[4], .25),
-					"--mantine-contextmenu-item-button-hover-bg-color-dark": colorValue ? (0, _mantine_vue_core.rgba)(colorValue, .15) : (0, _mantine_vue_core.rgba)(theme.value.colors.dark[3], .25),
-					"--mantine-contextmenu-item-button-pressed-bg-color-light": colorValue ? (0, _mantine_vue_core.rgba)(colorValue, .2) : (0, _mantine_vue_core.rgba)(theme.value.colors.gray[4], .5),
-					"--mantine-contextmenu-item-button-pressed-bg-color-dark": colorValue ? (0, _mantine_vue_core.rgba)(colorValue, .3) : (0, _mantine_vue_core.rgba)(theme.value.colors.dark[3], .5),
-					...resolveContextMenuStyle(props.style, theme.value)
-				},
-				onClick: hasSubmenu ? handleSubmenuClick : props.onClick ? handleActionClick : void 0
-			}, () => [
-				icon ? (0, vue.h)(_mantine_vue_core.Box, {
-					fz: 0,
-					me: "xs",
-					mt: -2
-				}, () => icon) : null,
-				(0, vue.h)("div", { class: "mantine-contextmenu-item-button-title" }, [title]),
-				iconRight ? (0, vue.h)(_mantine_vue_core.Box, {
-					fz: 0,
-					ms: "xs",
-					mt: -2
-				}, () => iconRight) : props.items ? (0, vue.h)(_mantine_vue_core.Box, {
-					mt: -1,
-					ms: "xs"
-				}, () => (props.submenuProps.dir || "ltr") === "rtl" ? "‹" : "›") : null
-			]), submenuPosition.value && props.items ? (0, vue.h)(ContextMenu, {
-				...props.submenuProps,
+				style: (0, vue.normalizeStyle)(itemStyle.value),
+				onClick: click
+			}, {
+				default: (0, vue.withCtx)(() => [
+					icon.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), {
+						key: 0,
+						fz: 0,
+						me: "xs",
+						mt: -2
+					}, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderIcon)))]),
+						_: 1
+					})) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderTitle)))]),
+					iconRight.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), {
+						key: 1,
+						fz: 0,
+						ms: "xs",
+						mt: -2
+					}, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderIconRight)))]),
+						_: 1
+					})) : props.items ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), {
+						key: 2,
+						mt: -1,
+						ms: "xs"
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((props.submenuProps.dir || "ltr") === "rtl" ? "‹" : "›"), 1)]),
+						_: 1
+					})) : (0, vue.createCommentVNode)("", true)
+				]),
+				_: 1
+			}, 8, [
+				"dir",
+				"class",
+				"disabled",
+				"style"
+			]), submenuPosition.value && props.items ? ((0, vue.openBlock)(), (0, vue.createBlock)(ContextMenu_default, (0, vue.mergeProps)({ key: 0 }, props.submenuProps, {
 				x: submenuPosition.value.x,
 				y: submenuPosition.value.y,
 				content: props.items,
-				onHide: props.onHide,
-				dir: props.submenuProps.dir || "ltr"
-			}) : null]);
+				dir: props.submenuProps.dir || "ltr",
+				onHide: _cache[0] || (_cache[0] = ($event) => emit("hide"))
+			}), null, 16, [
+				"x",
+				"y",
+				"content",
+				"dir"
+			])) : (0, vue.createCommentVNode)("", true)], 32);
 		};
 	}
 });
 //#endregion
-//#region src/ContextMenu.ts
-var ContextMenu = (0, vue.defineComponent)({
+//#region src/components/ContextMenu/ContextMenu.vue
+var ContextMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenu",
+	__name: "ContextMenu",
 	props: {
-		x: {
-			type: Number,
-			required: true
-		},
-		y: {
-			type: Number,
-			required: true
-		},
-		content: {
-			type: [Array, Function],
-			required: true
-		},
-		onHide: {
-			type: Function,
-			required: true
-		},
-		zIndex: {
-			type: Number,
-			default: void 0
-		},
-		dir: {
-			type: String,
-			default: "ltr"
-		},
-		className: {
-			type: String,
-			default: void 0
-		},
-		style: {
-			type: [Object, Function],
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		}
+		dir: { default: "ltr" },
+		x: {},
+		y: {},
+		content: {},
+		zIndex: {},
+		className: {},
+		style: {},
+		classNames: {},
+		styles: {}
 	},
-	setup(props) {
+	emits: ["hide"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
 		const settings = useContextMenuSettings();
 		const theme = (0, _mantine_vue_core.useMantineTheme)();
 		const { ref: menuRef, rect } = (0, _mantine_vue_hooks.useResizeObserver)();
@@ -252,9 +232,7 @@ var ContextMenu = (0, vue.defineComponent)({
 		(0, vue.watch)(() => [rect.value.width, rect.value.height], ([width, height]) => {
 			if (width > 0 && height > 0) {
 				cancelAnimationFrame(frameId);
-				frameId = requestAnimationFrame(() => {
-					mounted.value = true;
-				});
+				frameId = requestAnimationFrame(() => mounted.value = true);
 			}
 		}, { immediate: true });
 		(0, vue.onBeforeUnmount)(() => cancelAnimationFrame(frameId));
@@ -270,90 +248,104 @@ var ContextMenu = (0, vue.defineComponent)({
 				left: `${left}px`
 			};
 		});
-		const setMenuRef = (node) => {
-			menuRef.value = node?.$el ?? node ?? null;
-		};
-		return () => {
-			const resolvedStyles = resolveContextMenuStyles(props.styles, theme.value);
-			const submenuProps = {
-				className: props.className,
-				style: props.style,
-				classNames: props.classNames,
-				styles: props.styles,
-				dir: props.dir
+		const resolvedStyles = (0, vue.computed)(() => resolveContextMenuStyles(props.styles, theme.value));
+		const rootStyle = (0, vue.computed)(() => ({
+			...position.value,
+			...resolveContextMenuStyle(props.style, theme.value),
+			...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value)
+		}));
+		const submenuProps = (0, vue.computed)(() => ({
+			className: props.className,
+			style: props.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			dir: props.dir
+		}));
+		function itemClass(item, part) {
+			return [props.classNames?.[part], item.className].filter(Boolean).join(" ");
+		}
+		function itemStyle(item, part) {
+			return {
+				...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),
+				...resolveContextMenuStyle(item.style, theme.value)
 			};
-			const content = typeof props.content === "function" ? props.content(props.onHide) : props.content.map((item) => {
-				if (item.hidden) return null;
-				if (item.onClick || item.items) return (0, vue.h)(ContextMenuItem, {
-					key: item.key,
-					className: [props.classNames?.item, item.className].filter(Boolean).join(" "),
-					style: {
-						...resolveContextMenuStyle(resolvedStyles?.item, theme.value),
-						...resolveContextMenuStyle(item.style, theme.value)
-					},
-					title: item.title ?? humanize(item.key),
-					icon: item.icon,
-					iconRight: item.iconRight,
-					color: item.color,
-					disabled: item.disabled,
-					onClick: item.onClick,
-					items: item.items,
-					onHide: props.onHide,
-					submenuProps
-				});
-				return (0, vue.h)(ContextMenuDivider, {
-					key: item.key,
-					className: [props.classNames?.divider, item.className].filter(Boolean).join(" "),
-					style: {
-						...resolveContextMenuStyle(resolvedStyles?.divider, theme.value),
-						...resolveContextMenuStyle(item.style, theme.value)
-					}
-				});
-			});
-			return (0, vue.h)(_mantine_vue_core.Paper, {
-				ref: setMenuRef,
-				shadow: settings.value.shadow,
-				radius: settings.value.borderRadius,
+		}
+		const renderCustomContent = () => typeof props.content === "function" ? props.content(() => emit("hide")) : null;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Paper), {
+				ref: (node) => menuRef.value = node?.$el ?? node ?? null,
+				shadow: (0, vue.unref)(settings).shadow,
+				radius: (0, vue.unref)(settings).borderRadius,
 				dir: props.dir,
-				class: [
+				class: (0, vue.normalizeClass)([
 					"mantine-contextmenu",
 					mounted.value && "mantine-contextmenu-mounted",
 					props.className,
 					props.classNames?.root
-				],
-				style: {
-					...position.value,
-					...resolveContextMenuStyle(props.style, theme.value),
-					...resolveContextMenuStyle(resolvedStyles?.root, theme.value)
-				}
-			}, () => content);
+				]),
+				style: (0, vue.normalizeStyle)(rootStyle.value)
+			}, {
+				default: (0, vue.withCtx)(() => [typeof props.content === "function" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderCustomContent), { key: 0 })) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(props.content, (item) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.key }, [!item.hidden && (item.onClick || item.items) ? ((0, vue.openBlock)(), (0, vue.createBlock)(ContextMenuItem_default, {
+						key: 0,
+						"class-name": itemClass(item, "item"),
+						style: (0, vue.normalizeStyle)(itemStyle(item, "item")),
+						title: item.title ?? (0, vue.unref)(humanize)(item.key),
+						icon: item.icon,
+						"icon-right": item.iconRight,
+						color: item.color,
+						disabled: item.disabled,
+						"on-click": item.onClick,
+						items: item.items,
+						"submenu-props": submenuProps.value,
+						onHide: _cache[0] || (_cache[0] = ($event) => emit("hide"))
+					}, null, 8, [
+						"class-name",
+						"style",
+						"title",
+						"icon",
+						"icon-right",
+						"color",
+						"disabled",
+						"on-click",
+						"items",
+						"submenu-props"
+					])) : !item.hidden ? ((0, vue.openBlock)(), (0, vue.createBlock)(ContextMenuDivider_default, {
+						key: 1,
+						"class-name": itemClass(item, "divider"),
+						style: (0, vue.normalizeStyle)(itemStyle(item, "divider"))
+					}, null, 8, ["class-name", "style"])) : (0, vue.createCommentVNode)("", true)], 64);
+				}), 128))]),
+				_: 1
+			}, 8, [
+				"shadow",
+				"radius",
+				"dir",
+				"class",
+				"style"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/ContextMenuOverlay.ts
-var ContextMenuOverlay = (0, vue.defineComponent)({
+//#region src/components/ContextMenuOverlay/ContextMenuOverlay.vue
+var ContextMenuOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenuOverlay",
-	props: {
-		zIndex: {
-			type: Number,
-			default: void 0
-		},
-		onHide: {
-			type: Function,
-			required: true
-		}
-	},
-	setup(props, { slots }) {
+	__name: "ContextMenuOverlay",
+	props: { zIndex: {} },
+	emits: ["hide"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
 		const settings = useContextMenuSettings();
-		const handleClick = (event) => {
+		function click(event) {
 			event.preventDefault();
-			props.onHide();
-		};
-		const handleContextMenu = (event) => {
+			emit("hide");
+		}
+		function contextmenu(event) {
 			event.preventDefault();
 			if (!settings.value.repositionOnRepeat) {
-				props.onHide();
+				emit("hide");
 				return;
 			}
 			try {
@@ -363,136 +355,102 @@ var ContextMenuOverlay = (0, vue.defineComponent)({
 					clientY: event.clientY
 				}));
 			} catch {}
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: "mantine-contextmenu-overlay",
+				style: (0, vue.normalizeStyle)({ zIndex: props.zIndex }),
+				onClick: click,
+				onContextmenu: contextmenu
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 36);
 		};
-		return () => (0, vue.h)("div", {
-			class: "mantine-contextmenu-overlay",
-			style: { zIndex: props.zIndex },
-			onClick: handleClick,
-			onContextmenu: handleContextMenu
-		}, slots.default?.());
 	}
 });
 //#endregion
-//#region src/ContextMenuPortal.ts
-var ContextMenuPortal = (0, vue.defineComponent)({
+//#region src/components/ContextMenuPortal/ContextMenuPortal.vue
+var ContextMenuPortal_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenuPortal",
+	__name: "ContextMenuPortal",
 	props: {
-		x: {
-			type: Number,
-			required: true
-		},
-		y: {
-			type: Number,
-			required: true
-		},
-		content: {
-			type: [Array, Function],
-			required: true
-		},
-		onHide: {
-			type: Function,
-			required: true
-		},
-		zIndex: {
-			type: Number,
-			default: void 0
-		},
-		dir: {
-			type: String,
-			required: true
-		},
-		className: {
-			type: String,
-			default: void 0
-		},
-		style: {
-			type: [Object, Function],
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		}
+		zIndex: {},
+		dir: {},
+		x: {},
+		y: {},
+		content: { type: [Array, Function] },
+		className: {},
+		style: { type: Function },
+		classNames: {},
+		styles: { type: [Object, Function] }
 	},
-	setup(props) {
-		(0, _mantine_vue_hooks.useWindowEvent)("resize", props.onHide);
-		(0, _mantine_vue_hooks.useWindowEvent)("scroll", props.onHide);
-		(0, _mantine_vue_hooks.useHotkeys)([["Escape", props.onHide]]);
-		return () => (0, vue.h)(_mantine_vue_core.Portal, null, () => (0, vue.h)(ContextMenuOverlay, {
-			zIndex: props.zIndex,
-			onHide: props.onHide
-		}, () => (0, vue.h)(ContextMenu, {
-			x: props.x,
-			y: props.y,
-			content: props.content,
-			onHide: props.onHide,
-			dir: props.dir,
-			zIndex: props.zIndex,
-			className: props.className,
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles
-		})));
+	emits: ["hide"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const hide = () => emit("hide");
+		(0, _mantine_vue_hooks.useWindowEvent)("resize", hide);
+		(0, _mantine_vue_hooks.useWindowEvent)("scroll", hide);
+		(0, _mantine_vue_hooks.useHotkeys)([["Escape", hide]]);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Portal), null, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(ContextMenuOverlay_default, {
+					"z-index": props.zIndex,
+					onHide: hide
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(ContextMenu_default, {
+						x: props.x,
+						y: props.y,
+						content: props.content,
+						dir: props.dir,
+						"z-index": props.zIndex,
+						"class-name": props.className,
+						style: (0, vue.normalizeStyle)(props.style),
+						"class-names": props.classNames,
+						styles: props.styles,
+						onHide: hide
+					}, null, 8, [
+						"x",
+						"y",
+						"content",
+						"dir",
+						"z-index",
+						"class-name",
+						"style",
+						"class-names",
+						"styles"
+					])]),
+					_: 1
+				}, 8, ["z-index"])]),
+				_: 1
+			});
+		};
 	}
 });
 //#endregion
-//#region src/ContextMenuProvider.ts
-var DEFAULT_SETTINGS = {
-	shadow: "sm",
-	borderRadius: "xs",
-	submenuDelay: 500,
-	repositionOnRepeat: false
-};
-var ContextMenuProvider = (0, vue.defineComponent)({
+//#region src/components/ContextMenuProvider/ContextMenuProvider.vue
+var ContextMenuProvider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ContextMenuProvider",
+	__name: "ContextMenuProvider",
 	props: {
-		zIndex: {
-			type: Number,
-			default: 9999
-		},
-		shadow: {
-			type: String,
-			default: DEFAULT_SETTINGS.shadow
-		},
-		borderRadius: {
-			type: [String, Number],
-			default: DEFAULT_SETTINGS.borderRadius
-		},
-		submenuDelay: {
-			type: Number,
-			default: DEFAULT_SETTINGS.submenuDelay
-		},
+		shadow: { default: "sm" },
+		borderRadius: { default: "xs" },
+		submenuDelay: { default: 500 },
 		repositionOnRepeat: {
 			type: Boolean,
-			default: DEFAULT_SETTINGS.repositionOnRepeat
-		},
-		className: {
-			type: String,
-			default: void 0
-		},
-		style: {
-			type: [Object, Function],
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			default: void 0
+			default: false
 		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		}
+		zIndex: { default: 9999 },
+		className: {},
+		style: {},
+		classNames: {},
+		styles: {}
 	},
-	setup(props, { slots }) {
+	setup(__props) {
+		const props = __props;
 		const data = (0, vue.shallowRef)(null);
 		const { dir } = (0, _mantine_vue_core.useDirection)();
-		const hideContextMenu = () => {
+		function hideContextMenu() {
 			data.value = null;
-		};
+		}
 		const showContextMenu = (content, options) => (event) => {
 			event.preventDefault();
 			event.stopPropagation();
@@ -523,22 +481,23 @@ var ContextMenuProvider = (0, vue.defineComponent)({
 			hideContextMenu,
 			isContextMenuVisible: (0, vue.toRef)(() => Boolean(data.value))
 		});
-		return () => (0, vue.h)(vue.Fragment, null, [slots.default?.(), data.value ? (0, vue.h)(ContextMenuPortal, {
-			...data.value,
-			onHide: hideContextMenu,
-			dir: dir.value
-		}) : null]);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.renderSlot)(_ctx.$slots, "default"), data.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(ContextMenuPortal_default, (0, vue.mergeProps)({ key: 0 }, data.value, {
+				dir: (0, vue.unref)(dir),
+				onHide: hideContextMenu
+			}), null, 16, ["dir"])) : (0, vue.createCommentVNode)("", true)], 64);
+		};
 	}
 });
 //#endregion
-exports.ContextMenu = ContextMenu;
+exports.ContextMenu = ContextMenu_default;
 exports.ContextMenuCtx = ContextMenuKey;
+exports.ContextMenuDivider = ContextMenuDivider_default;
+exports.ContextMenuItem = ContextMenuItem_default;
 exports.ContextMenuKey = ContextMenuKey;
-exports.ContextMenuDivider = ContextMenuDivider;
-exports.ContextMenuItem = ContextMenuItem;
-exports.ContextMenuOverlay = ContextMenuOverlay;
-exports.ContextMenuPortal = ContextMenuPortal;
-exports.ContextMenuProvider = ContextMenuProvider;
+exports.ContextMenuOverlay = ContextMenuOverlay_default;
+exports.ContextMenuPortal = ContextMenuPortal_default;
+exports.ContextMenuProvider = ContextMenuProvider_default;
 exports.ContextMenuSettingsCtx = ContextMenuSettingsKey;
 exports.ContextMenuSettingsKey = ContextMenuSettingsKey;
 exports.humanize = humanize;