@mantine-vue/contextmenu 2.4.0 → 3.1.0

package/esm/index.mjs

@@ -1,4 +1,4 @@
-import { Fragment, computed, defineComponent, h, inject, onBeforeUnmount, provide, readonly, ref, shallowRef, toRef, watch } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRef, unref, useSlots, watch, withCtx } from "vue";
 import { Box, Paper, Portal, UnstyledButton, parseThemeColor, px, resolveNode, rgba, useDirection, useMantineTheme } from "@mantine-vue/core";
 import { useHotkeys, useMediaQuery, useResizeObserver, useTimeout, useWindowEvent } from "@mantine-vue/hooks";
 //#region src/utils.ts
@@ -14,25 +14,24 @@ function resolveContextMenuStyles(styles, theme) {
 	return typeof styles === "function" ? styles(theme) : styles;
 }
 //#endregion
-//#region src/ContextMenuDivider.ts
-var ContextMenuDivider = defineComponent({
+//#region src/components/ContextMenuDivider/ContextMenuDivider.vue
+var ContextMenuDivider_default = /* @__PURE__ */ 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 = useMantineTheme();
-		return () => h(Box, {
-			class: ["mantine-contextmenu-divider", props.className],
-			style: resolveContextMenuStyle(props.style, theme.value)
-		});
+		const resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), {
+				class: normalizeClass(["mantine-contextmenu-divider", props.className]),
+				style: normalizeStyle(resolvedStyle.value)
+			}, null, 8, ["class", "style"]);
+		};
 	}
 });
 //#endregion
@@ -56,62 +55,61 @@ function useContextMenuSettings() {
 	} });
 }
 //#endregion
-//#region src/ContextMenuItem.ts
-var ContextMenuItem = 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__ */ 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 = useSlots();
 		const button = ref(null);
 		const submenuPosition = ref(null);
 		const settings = useContextMenuSettings();
 		const theme = useMantineTheme();
 		const hoverAvailable = useMediaQuery("(hover: hover)");
+		const hasSubmenu = computed(() => Boolean(props.items && !props.disabled));
+		const parsedColor = computed(() => props.color ? parseThemeColor({
+			color: props.color,
+			theme: theme.value
+		}) : null);
+		const itemStyle = 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 ? rgba(color, .08) : rgba(theme.value.colors.gray[4], .25),
+				"--mantine-contextmenu-item-button-hover-bg-color-dark": color ? rgba(color, .15) : rgba(theme.value.colors.dark[3], .25),
+				"--mantine-contextmenu-item-button-pressed-bg-color-light": color ? rgba(color, .2) : rgba(theme.value.colors.gray[4], .5),
+				"--mantine-contextmenu-item-button-pressed-bg-color-dark": color ? rgba(color, .3) : rgba(theme.value.colors.dark[3], .5),
+				...resolveContextMenuStyle(props.style, theme.value)
+			};
+		});
+		const icon = computed(() => resolveNode(props.icon, slots.icon));
+		const title = computed(() => resolveNode(props.title, slots.title));
+		const iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight));
+		const renderIcon = () => icon.value;
+		const renderTitle = () => title.value;
+		const renderIconRight = () => iconRight.value;
 		const showSubmenuTimeout = useTimeout(() => {
 			if (!button.value) return;
 			const rect = button.value.getBoundingClientRect();
@@ -120,129 +118,111 @@ var ContextMenuItem = defineComponent({
 				y: rect.top
 			};
 		}, settings.value.submenuDelay);
-		const hideSubmenuTimeout = useTimeout(() => {
-			submenuPosition.value = null;
-		}, settings.value.submenuDelay);
-		const showSubmenu = () => {
+		const hideSubmenuTimeout = 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 ? parseThemeColor({
-				color: props.color,
-				theme: theme.value
-			}) : null;
-			const itemColor = parsed?.value ?? "var(--mantine-color-text)";
-			const colorValue = parsed?.value;
-			const icon = resolveNode(props.icon, slots.icon);
-			const title = resolveNode(props.title, slots.title);
-			const iconRight = resolveNode(props.iconRight, slots.iconRight);
-			return h("div", {
-				onMouseenter: hasSubmenu && hoverAvailable.value ? showSubmenu : void 0,
-				onMouseleave: hasSubmenu && hoverAvailable.value ? hideSubmenu : void 0
-			}, [h(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 openBlock(), createElementBlock("div", {
+				onMouseenter: mouseenter,
+				onMouseleave: mouseleave
+			}, [createVNode(unref(UnstyledButton), {
+				ref: (node) => button.value = node?.$el ?? node ?? null,
 				dir: props.submenuProps.dir || "ltr",
-				class: ["mantine-contextmenu-item-button", props.className],
+				class: 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 ? rgba(colorValue, .08) : rgba(theme.value.colors.gray[4], .25),
-					"--mantine-contextmenu-item-button-hover-bg-color-dark": colorValue ? rgba(colorValue, .15) : rgba(theme.value.colors.dark[3], .25),
-					"--mantine-contextmenu-item-button-pressed-bg-color-light": colorValue ? rgba(colorValue, .2) : rgba(theme.value.colors.gray[4], .5),
-					"--mantine-contextmenu-item-button-pressed-bg-color-dark": colorValue ? rgba(colorValue, .3) : rgba(theme.value.colors.dark[3], .5),
-					...resolveContextMenuStyle(props.style, theme.value)
-				},
-				onClick: hasSubmenu ? handleSubmenuClick : props.onClick ? handleActionClick : void 0
-			}, () => [
-				icon ? h(Box, {
-					fz: 0,
-					me: "xs",
-					mt: -2
-				}, () => icon) : null,
-				h("div", { class: "mantine-contextmenu-item-button-title" }, [title]),
-				iconRight ? h(Box, {
-					fz: 0,
-					ms: "xs",
-					mt: -2
-				}, () => iconRight) : props.items ? h(Box, {
-					mt: -1,
-					ms: "xs"
-				}, () => (props.submenuProps.dir || "ltr") === "rtl" ? "‹" : "›") : null
-			]), submenuPosition.value && props.items ? h(ContextMenu, {
-				...props.submenuProps,
+				style: normalizeStyle(itemStyle.value),
+				onClick: click
+			}, {
+				default: withCtx(() => [
+					icon.value ? (openBlock(), createBlock(unref(Box), {
+						key: 0,
+						fz: 0,
+						me: "xs",
+						mt: -2
+					}, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderIcon)))]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_1, [(openBlock(), createBlock(resolveDynamicComponent(renderTitle)))]),
+					iconRight.value ? (openBlock(), createBlock(unref(Box), {
+						key: 1,
+						fz: 0,
+						ms: "xs",
+						mt: -2
+					}, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderIconRight)))]),
+						_: 1
+					})) : props.items ? (openBlock(), createBlock(unref(Box), {
+						key: 2,
+						mt: -1,
+						ms: "xs"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString((props.submenuProps.dir || "ltr") === "rtl" ? "‹" : "›"), 1)]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, [
+				"dir",
+				"class",
+				"disabled",
+				"style"
+			]), submenuPosition.value && props.items ? (openBlock(), createBlock(ContextMenu_default, 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"
+			])) : createCommentVNode("", true)], 32);
 		};
 	}
 });
 //#endregion
-//#region src/ContextMenu.ts
-var ContextMenu = defineComponent({
+//#region src/components/ContextMenu/ContextMenu.vue
+var ContextMenu_default = /* @__PURE__ */ 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 = useMantineTheme();
 		const { ref: menuRef, rect } = useResizeObserver();
@@ -251,9 +231,7 @@ var ContextMenu = defineComponent({
 		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 });
 		onBeforeUnmount(() => cancelAnimationFrame(frameId));
@@ -269,90 +247,104 @@ var ContextMenu = 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 = computed(() => resolveContextMenuStyles(props.styles, theme.value));
+		const rootStyle = computed(() => ({
+			...position.value,
+			...resolveContextMenuStyle(props.style, theme.value),
+			...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value)
+		}));
+		const submenuProps = 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 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 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 h(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 openBlock(), createBlock(unref(Paper), {
+				ref: (node) => menuRef.value = node?.$el ?? node ?? null,
+				shadow: unref(settings).shadow,
+				radius: unref(settings).borderRadius,
 				dir: props.dir,
-				class: [
+				class: 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: normalizeStyle(rootStyle.value)
+			}, {
+				default: withCtx(() => [typeof props.content === "function" ? (openBlock(), createBlock(resolveDynamicComponent(renderCustomContent), { key: 0 })) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.content, (item) => {
+					return openBlock(), createElementBlock(Fragment, { key: item.key }, [!item.hidden && (item.onClick || item.items) ? (openBlock(), createBlock(ContextMenuItem_default, {
+						key: 0,
+						"class-name": itemClass(item, "item"),
+						style: normalizeStyle(itemStyle(item, "item")),
+						title: item.title ?? 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 ? (openBlock(), createBlock(ContextMenuDivider_default, {
+						key: 1,
+						"class-name": itemClass(item, "divider"),
+						style: normalizeStyle(itemStyle(item, "divider"))
+					}, null, 8, ["class-name", "style"])) : createCommentVNode("", true)], 64);
+				}), 128))]),
+				_: 1
+			}, 8, [
+				"shadow",
+				"radius",
+				"dir",
+				"class",
+				"style"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/ContextMenuOverlay.ts
-var ContextMenuOverlay = defineComponent({
+//#region src/components/ContextMenuOverlay/ContextMenuOverlay.vue
+var ContextMenuOverlay_default = /* @__PURE__ */ 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 {
@@ -362,136 +354,102 @@ var ContextMenuOverlay = defineComponent({
 					clientY: event.clientY
 				}));
 			} catch {}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "mantine-contextmenu-overlay",
+				style: normalizeStyle({ zIndex: props.zIndex }),
+				onClick: click,
+				onContextmenu: contextmenu
+			}, [renderSlot(_ctx.$slots, "default")], 36);
 		};
-		return () => h("div", {
-			class: "mantine-contextmenu-overlay",
-			style: { zIndex: props.zIndex },
-			onClick: handleClick,
-			onContextmenu: handleContextMenu
-		}, slots.default?.());
 	}
 });
 //#endregion
-//#region src/ContextMenuPortal.ts
-var ContextMenuPortal = defineComponent({
+//#region src/components/ContextMenuPortal/ContextMenuPortal.vue
+var ContextMenuPortal_default = /* @__PURE__ */ 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) {
-		useWindowEvent("resize", props.onHide);
-		useWindowEvent("scroll", props.onHide);
-		useHotkeys([["Escape", props.onHide]]);
-		return () => h(Portal, null, () => h(ContextMenuOverlay, {
-			zIndex: props.zIndex,
-			onHide: props.onHide
-		}, () => 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");
+		useWindowEvent("resize", hide);
+		useWindowEvent("scroll", hide);
+		useHotkeys([["Escape", hide]]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Portal), null, {
+				default: withCtx(() => [createVNode(ContextMenuOverlay_default, {
+					"z-index": props.zIndex,
+					onHide: hide
+				}, {
+					default: withCtx(() => [createVNode(ContextMenu_default, {
+						x: props.x,
+						y: props.y,
+						content: props.content,
+						dir: props.dir,
+						"z-index": props.zIndex,
+						"class-name": props.className,
+						style: 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 = defineComponent({
+//#region src/components/ContextMenuProvider/ContextMenuProvider.vue
+var ContextMenuProvider_default = /* @__PURE__ */ 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 = shallowRef(null);
 		const { dir } = useDirection();
-		const hideContextMenu = () => {
+		function hideContextMenu() {
 			data.value = null;
-		};
+		}
 		const showContextMenu = (content, options) => (event) => {
 			event.preventDefault();
 			event.stopPropagation();
@@ -522,14 +480,15 @@ var ContextMenuProvider = defineComponent({
 			hideContextMenu,
 			isContextMenuVisible: toRef(() => Boolean(data.value))
 		});
-		return () => h(Fragment, null, [slots.default?.(), data.value ? h(ContextMenuPortal, {
-			...data.value,
-			onHide: hideContextMenu,
-			dir: dir.value
-		}) : null]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), data.value ? (openBlock(), createBlock(ContextMenuPortal_default, mergeProps({ key: 0 }, data.value, {
+				dir: unref(dir),
+				onHide: hideContextMenu
+			}), null, 16, ["dir"])) : createCommentVNode("", true)], 64);
+		};
 	}
 });
 //#endregion
-export { ContextMenu, ContextMenuKey as ContextMenuCtx, ContextMenuKey, ContextMenuDivider, ContextMenuItem, ContextMenuOverlay, ContextMenuPortal, ContextMenuProvider, ContextMenuSettingsKey as ContextMenuSettingsCtx, ContextMenuSettingsKey, humanize, resolveContextMenuStyle, resolveContextMenuStyles, useContextMenu };
+export { ContextMenu_default as ContextMenu, ContextMenuKey as ContextMenuCtx, ContextMenuKey, ContextMenuDivider_default as ContextMenuDivider, ContextMenuItem_default as ContextMenuItem, ContextMenuOverlay_default as ContextMenuOverlay, ContextMenuPortal_default as ContextMenuPortal, ContextMenuProvider_default as ContextMenuProvider, ContextMenuSettingsKey as ContextMenuSettingsCtx, ContextMenuSettingsKey, humanize, resolveContextMenuStyle, resolveContextMenuStyles, useContextMenu };
 
 //# sourceMappingURL=index.mjs.map