@mantine-vue/contextmenu 3.5.0 → 3.6.0

package/cjs/index.cjs

@@ -67,9 +67,33 @@ var ContextMenuItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		className: {},
 		style: {},
 		hidden: { type: Boolean },
-		icon: {},
-		iconRight: {},
-		title: {},
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		iconRight: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
 		color: {},
 		disabled: {
 			type: Boolean,

package/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/utils.ts","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/context.ts","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue"],"sourcesContent":["import type { ContextMenuStyle, ContextMenuStyles } from './types'\nimport type { MantineStyle, MantineTheme } from '@mantine-vue/core'\n\n/** Returns a humanized version of a string, for example \"camelCase\" becomes \"Camel Case\". */\nexport function humanize(value: string) {\n  const str = value\n    .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n    .replace(/\\W|_/g, ' ')\n    .trim()\n    .toLowerCase()\n\n  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`\n}\n\nexport function resolveContextMenuStyle(\n  style: ContextMenuStyle | undefined,\n  theme: MantineTheme,\n): MantineStyle | undefined {\n  return typeof style === 'function' ? style(theme) : style\n}\n\nexport function resolveContextMenuStyles(\n  styles: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles) | undefined,\n  theme: MantineTheme,\n) {\n  return typeof styles === 'function' ? styles(theme) : styles\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","import { inject, readonly, ref, type InjectionKey, type Ref } from 'vue'\nimport type { ContextMenuContextValue, ContextMenuSettings } from './types'\n\nexport interface ResolvedContextMenuSettings {\n  shadow: NonNullable<ContextMenuSettings['shadow']>\n  borderRadius: NonNullable<ContextMenuSettings['borderRadius']>\n  submenuDelay: number\n  repositionOnRepeat: boolean\n}\n\nexport const ContextMenuSettingsKey = Symbol('ContextMenuSettings') as InjectionKey<\n  Ref<ResolvedContextMenuSettings>\n>\n\nexport const ContextMenuKey = Symbol('ContextMenu') as InjectionKey<ContextMenuContextValue>\n\nconst hidden = readonly(ref(false))\nconst fallback: ContextMenuContextValue = {\n  showContextMenu: () => () => undefined,\n  hideContextMenu: () => undefined,\n  isContextMenuVisible: hidden,\n}\n\nexport function useContextMenu() {\n  return inject(ContextMenuKey, fallback)\n}\n\nexport function useContextMenuSettings() {\n  return inject(ContextMenuSettingsKey, {\n    value: {\n      shadow: 'sm',\n      borderRadius: 'xs',\n      submenuDelay: 500,\n      repositionOnRepeat: false,\n    },\n  } as Ref<ResolvedContextMenuSettings>)\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/utils.ts","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/context.ts","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue"],"sourcesContent":["import type { ContextMenuStyle, ContextMenuStyles } from './types'\nimport type { MantineStyle, MantineTheme } from '@mantine-vue/core'\n\n/** Returns a humanized version of a string, for example \"camelCase\" becomes \"Camel Case\". */\nexport function humanize(value: string) {\n  const str = value\n    .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n    .replace(/\\W|_/g, ' ')\n    .trim()\n    .toLowerCase()\n\n  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`\n}\n\nexport function resolveContextMenuStyle(\n  style: ContextMenuStyle | undefined,\n  theme: MantineTheme,\n): MantineStyle | undefined {\n  return typeof style === 'function' ? style(theme) : style\n}\n\nexport function resolveContextMenuStyles(\n  styles: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles) | undefined,\n  theme: MantineTheme,\n) {\n  return typeof styles === 'function' ? styles(theme) : styles\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","import { inject, readonly, ref, type InjectionKey, type Ref } from 'vue'\nimport type { ContextMenuContextValue, ContextMenuSettings } from './types'\n\nexport interface ResolvedContextMenuSettings {\n  shadow: NonNullable<ContextMenuSettings['shadow']>\n  borderRadius: NonNullable<ContextMenuSettings['borderRadius']>\n  submenuDelay: number\n  repositionOnRepeat: boolean\n}\n\nexport const ContextMenuSettingsKey = Symbol('ContextMenuSettings') as InjectionKey<\n  Ref<ResolvedContextMenuSettings>\n>\n\nexport const ContextMenuKey = Symbol('ContextMenu') as InjectionKey<ContextMenuContextValue>\n\nconst hidden = readonly(ref(false))\nconst fallback: ContextMenuContextValue = {\n  showContextMenu: () => () => undefined,\n  hideContextMenu: () => undefined,\n  isContextMenuVisible: hidden,\n}\n\nexport function useContextMenu() {\n  return inject(ContextMenuKey, fallback)\n}\n\nexport function useContextMenuSettings() {\n  return inject(ContextMenuSettingsKey, {\n    value: {\n      shadow: 'sm',\n      borderRadius: 'xs',\n      submenuDelay: 500,\n      repositionOnRepeat: false,\n    },\n  } as Ref<ResolvedContextMenuSettings>)\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n"],"mappings":"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"}

package/esm/index.mjs

@@ -66,9 +66,33 @@ var ContextMenuItem_default = /* @__PURE__ */ defineComponent({
 		className: {},
 		style: {},
 		hidden: { type: Boolean },
-		icon: {},
-		iconRight: {},
-		title: {},
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		iconRight: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
 		color: {},
 		disabled: {
 			type: Boolean,

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/utils.ts","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/context.ts","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue"],"sourcesContent":["import type { ContextMenuStyle, ContextMenuStyles } from './types'\nimport type { MantineStyle, MantineTheme } from '@mantine-vue/core'\n\n/** Returns a humanized version of a string, for example \"camelCase\" becomes \"Camel Case\". */\nexport function humanize(value: string) {\n  const str = value\n    .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n    .replace(/\\W|_/g, ' ')\n    .trim()\n    .toLowerCase()\n\n  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`\n}\n\nexport function resolveContextMenuStyle(\n  style: ContextMenuStyle | undefined,\n  theme: MantineTheme,\n): MantineStyle | undefined {\n  return typeof style === 'function' ? style(theme) : style\n}\n\nexport function resolveContextMenuStyles(\n  styles: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles) | undefined,\n  theme: MantineTheme,\n) {\n  return typeof styles === 'function' ? styles(theme) : styles\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","import { inject, readonly, ref, type InjectionKey, type Ref } from 'vue'\nimport type { ContextMenuContextValue, ContextMenuSettings } from './types'\n\nexport interface ResolvedContextMenuSettings {\n  shadow: NonNullable<ContextMenuSettings['shadow']>\n  borderRadius: NonNullable<ContextMenuSettings['borderRadius']>\n  submenuDelay: number\n  repositionOnRepeat: boolean\n}\n\nexport const ContextMenuSettingsKey = Symbol('ContextMenuSettings') as InjectionKey<\n  Ref<ResolvedContextMenuSettings>\n>\n\nexport const ContextMenuKey = Symbol('ContextMenu') as InjectionKey<ContextMenuContextValue>\n\nconst hidden = readonly(ref(false))\nconst fallback: ContextMenuContextValue = {\n  showContextMenu: () => () => undefined,\n  hideContextMenu: () => undefined,\n  isContextMenuVisible: hidden,\n}\n\nexport function useContextMenu() {\n  return inject(ContextMenuKey, fallback)\n}\n\nexport function useContextMenuSettings() {\n  return inject(ContextMenuSettingsKey, {\n    value: {\n      shadow: 'sm',\n      borderRadius: 'xs',\n      submenuDelay: 500,\n      repositionOnRepeat: false,\n    },\n  } as Ref<ResolvedContextMenuSettings>)\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/utils.ts","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/components/ContextMenuDivider/ContextMenuDivider.vue","../src/context.ts","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenuItem/ContextMenuItem.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenu/ContextMenu.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuOverlay/ContextMenuOverlay.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuPortal/ContextMenuPortal.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue","../src/components/ContextMenuProvider/ContextMenuProvider.vue"],"sourcesContent":["import type { ContextMenuStyle, ContextMenuStyles } from './types'\nimport type { MantineStyle, MantineTheme } from '@mantine-vue/core'\n\n/** Returns a humanized version of a string, for example \"camelCase\" becomes \"Camel Case\". */\nexport function humanize(value: string) {\n  const str = value\n    .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n    .replace(/\\W|_/g, ' ')\n    .trim()\n    .toLowerCase()\n\n  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`\n}\n\nexport function resolveContextMenuStyle(\n  style: ContextMenuStyle | undefined,\n  theme: MantineTheme,\n): MantineStyle | undefined {\n  return typeof style === 'function' ? style(theme) : style\n}\n\nexport function resolveContextMenuStyles(\n  styles: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles) | undefined,\n  theme: MantineTheme,\n) {\n  return typeof styles === 'function' ? styles(theme) : styles\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Box, useMantineTheme } from '@mantine-vue/core'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuDividerProps } from '../../types'\nimport '../../ContextMenuDivider.css'\n\ndefineOptions({ name: 'ContextMenuDivider' })\nconst props = defineProps<ContextMenuDividerProps>()\nconst theme = useMantineTheme()\nconst resolvedStyle = computed(() => resolveContextMenuStyle(props.style, theme.value))\n</script>\n\n<template>\n  <Box :class=\"['mantine-contextmenu-divider', props.className]\" :style=\"resolvedStyle\" />\n</template>\n","import { inject, readonly, ref, type InjectionKey, type Ref } from 'vue'\nimport type { ContextMenuContextValue, ContextMenuSettings } from './types'\n\nexport interface ResolvedContextMenuSettings {\n  shadow: NonNullable<ContextMenuSettings['shadow']>\n  borderRadius: NonNullable<ContextMenuSettings['borderRadius']>\n  submenuDelay: number\n  repositionOnRepeat: boolean\n}\n\nexport const ContextMenuSettingsKey = Symbol('ContextMenuSettings') as InjectionKey<\n  Ref<ResolvedContextMenuSettings>\n>\n\nexport const ContextMenuKey = Symbol('ContextMenu') as InjectionKey<ContextMenuContextValue>\n\nconst hidden = readonly(ref(false))\nconst fallback: ContextMenuContextValue = {\n  showContextMenu: () => () => undefined,\n  hideContextMenu: () => undefined,\n  isContextMenuVisible: hidden,\n}\n\nexport function useContextMenu() {\n  return inject(ContextMenuKey, fallback)\n}\n\nexport function useContextMenuSettings() {\n  return inject(ContextMenuSettingsKey, {\n    value: {\n      shadow: 'sm',\n      borderRadius: 'xs',\n      submenuDelay: 500,\n      repositionOnRepeat: false,\n    },\n  } as Ref<ResolvedContextMenuSettings>)\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\nimport {\n  Box,\n  UnstyledButton,\n  parseThemeColor,\n  resolveNode,\n  rgba,\n  useMantineTheme,\n} from '@mantine-vue/core'\nimport { useMediaQuery, useTimeout } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { resolveContextMenuStyle } from '../../utils'\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from '../../types'\nimport '../../ContextMenuItem.css'\n\ndefineOptions({ name: 'ContextMenuItem' })\nconst props = withDefaults(defineProps<ContextMenuItemProps>(), { disabled: false })\nconst emit = defineEmits<ContextMenuItemEmits>()\nconst slots = useSlots()\nconst button = ref<HTMLElement | null>(null)\nconst submenuPosition = ref<{ x: number; y: number } | null>(null)\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst hoverAvailable = useMediaQuery('(hover: hover)')\nconst hasSubmenu = computed(() => Boolean(props.items && !props.disabled))\nconst parsedColor = computed(() =>\n  props.color ? parseThemeColor({ color: props.color, theme: theme.value }) : null,\n)\nconst itemStyle = computed(() => {\n  const color = parsedColor.value?.value\n  return {\n    '--mantine-contextmenu-item-button-color': color ?? 'var(--mantine-color-text)',\n    '--mantine-contextmenu-item-button-hover-bg-color-light': color\n      ? rgba(color, 0.08)\n      : rgba(theme.value.colors.gray[4], 0.25),\n    '--mantine-contextmenu-item-button-hover-bg-color-dark': color\n      ? rgba(color, 0.15)\n      : rgba(theme.value.colors.dark[3], 0.25),\n    '--mantine-contextmenu-item-button-pressed-bg-color-light': color\n      ? rgba(color, 0.2)\n      : rgba(theme.value.colors.gray[4], 0.5),\n    '--mantine-contextmenu-item-button-pressed-bg-color-dark': color\n      ? rgba(color, 0.3)\n      : rgba(theme.value.colors.dark[3], 0.5),\n    ...resolveContextMenuStyle(props.style, theme.value),\n  }\n})\nconst icon = computed(() => resolveNode(props.icon, slots.icon))\nconst title = computed(() => resolveNode(props.title, slots.title))\nconst iconRight = computed(() => resolveNode(props.iconRight, slots.iconRight))\nconst renderIcon = () => icon.value\nconst renderTitle = () => title.value\nconst renderIconRight = () => iconRight.value\n\nconst showSubmenuTimeout = useTimeout(() => {\n  if (!button.value) return\n  const rect = button.value.getBoundingClientRect()\n  submenuPosition.value = {\n    x: (props.submenuProps.dir || 'ltr') === 'ltr' ? rect.right : rect.left,\n    y: rect.top,\n  }\n}, settings.value.submenuDelay)\nconst hideSubmenuTimeout = useTimeout(\n  () => (submenuPosition.value = null),\n  settings.value.submenuDelay,\n)\n\nfunction showSubmenu() {\n  hideSubmenuTimeout.clear()\n  showSubmenuTimeout.start()\n}\nfunction hideSubmenu() {\n  showSubmenuTimeout.clear()\n  hideSubmenuTimeout.start()\n}\nfunction mouseenter() {\n  if (hasSubmenu.value && hoverAvailable.value) showSubmenu()\n}\nfunction mouseleave() {\n  if (hasSubmenu.value && hoverAvailable.value) hideSubmenu()\n}\nfunction click(event: MouseEvent) {\n  if (hasSubmenu.value) {\n    event.stopPropagation()\n    showSubmenu()\n  } else if (props.onClick) {\n    emit('hide')\n    props.onClick(event)\n  }\n}\n</script>\n\n<template>\n  <div @mouseenter=\"mouseenter\" @mouseleave=\"mouseleave\">\n    <UnstyledButton\n      :ref=\"(node: any) => (button = node?.$el ?? node ?? null)\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      :class=\"['mantine-contextmenu-item-button', props.className]\"\n      :disabled=\"props.disabled\"\n      :style=\"itemStyle\"\n      @click=\"click\"\n    >\n      <Box v-if=\"icon\" :fz=\"0\" me=\"xs\" :mt=\"-2\"><component :is=\"renderIcon\" /></Box>\n      <div class=\"mantine-contextmenu-item-button-title\"><component :is=\"renderTitle\" /></div>\n      <Box v-if=\"iconRight\" :fz=\"0\" ms=\"xs\" :mt=\"-2\"><component :is=\"renderIconRight\" /></Box>\n      <Box v-else-if=\"props.items\" :mt=\"-1\" ms=\"xs\">\n        {{ (props.submenuProps.dir || 'ltr') === 'rtl' ? '‹' : '›' }}\n      </Box>\n    </UnstyledButton>\n    <ContextMenu\n      v-if=\"submenuPosition && props.items\"\n      v-bind=\"props.submenuProps\"\n      :x=\"submenuPosition.x\"\n      :y=\"submenuPosition.y\"\n      :content=\"props.items\"\n      :dir=\"props.submenuProps.dir || 'ltr'\"\n      @hide=\"emit('hide')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Paper, px, useMantineTheme, type MantineRadius } from '@mantine-vue/core'\nimport { useResizeObserver } from '@mantine-vue/hooks'\nimport ContextMenuDivider from '../ContextMenuDivider/ContextMenuDivider.vue'\nimport ContextMenuItem from '../ContextMenuItem/ContextMenuItem.vue'\nimport { useContextMenuSettings } from '../../context'\nimport { humanize, resolveContextMenuStyle, resolveContextMenuStyles } from '../../utils'\nimport type { ContextMenuEmits, ContextMenuItemOptions, ContextMenuProps } from '../../types'\nimport '../../ContextMenu.css'\n\ndefineOptions({ name: 'ContextMenu' })\nconst props = withDefaults(defineProps<ContextMenuProps>(), { dir: 'ltr' })\nconst emit = defineEmits<ContextMenuEmits>()\nconst settings = useContextMenuSettings()\nconst theme = useMantineTheme()\nconst { ref: menuRef, rect } = useResizeObserver<HTMLElement>()\nconst mounted = ref(false)\nlet frameId = 0\n\nwatch(\n  () => [rect.value.width, rect.value.height],\n  ([width, height]) => {\n    if (width > 0 && height > 0) {\n      cancelAnimationFrame(frameId)\n      frameId = requestAnimationFrame(() => (mounted.value = true))\n    }\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => cancelAnimationFrame(frameId))\n\nconst position = computed(() => {\n  const spacing = px(theme.value.spacing.md)\n  const windowWidth = typeof window === 'undefined' ? 0 : window.innerWidth\n  const windowHeight = typeof window === 'undefined' ? 0 : window.innerHeight\n  const top =\n    props.y + rect.value.height + spacing > windowHeight\n      ? windowHeight - rect.value.height - spacing\n      : props.y\n  const left =\n    props.dir === 'rtl'\n      ? props.x - rect.value.width < spacing\n        ? spacing\n        : props.x - rect.value.width\n      : props.x + rect.value.width + spacing > windowWidth\n        ? windowWidth - rect.value.width - spacing\n        : props.x\n  return { zIndex: props.zIndex, top: `${top}px`, left: `${left}px` }\n})\nconst resolvedStyles = computed(() => resolveContextMenuStyles(props.styles, theme.value))\nconst rootStyle = computed(() => ({\n  ...position.value,\n  ...resolveContextMenuStyle(props.style, theme.value),\n  ...resolveContextMenuStyle(resolvedStyles.value?.root, theme.value),\n}))\nconst submenuProps = computed(() => ({\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  dir: props.dir,\n}))\n\nfunction itemClass(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return [props.classNames?.[part], item.className].filter(Boolean).join(' ')\n}\nfunction itemStyle(item: ContextMenuItemOptions, part: 'item' | 'divider') {\n  return {\n    ...resolveContextMenuStyle(resolvedStyles.value?.[part], theme.value),\n    ...resolveContextMenuStyle(item.style, theme.value),\n  }\n}\nconst renderCustomContent = () =>\n  typeof props.content === 'function' ? props.content(() => emit('hide')) : null\n</script>\n\n<template>\n  <Paper\n    :ref=\"(node: any) => (menuRef = node?.$el ?? node ?? null)\"\n    :shadow=\"settings.shadow\"\n    :radius=\"settings.borderRadius as MantineRadius\"\n    :dir=\"props.dir\"\n    :class=\"[\n      'mantine-contextmenu',\n      mounted && 'mantine-contextmenu-mounted',\n      props.className,\n      props.classNames?.root,\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <component v-if=\"typeof props.content === 'function'\" :is=\"renderCustomContent\" />\n    <template v-else>\n      <template v-for=\"item in props.content\" :key=\"item.key\">\n        <ContextMenuItem\n          v-if=\"!item.hidden && (item.onClick || item.items)\"\n          :class-name=\"itemClass(item, 'item')\"\n          :style=\"itemStyle(item, 'item')\"\n          :title=\"item.title ?? humanize(item.key)\"\n          :icon=\"item.icon\"\n          :icon-right=\"item.iconRight\"\n          :color=\"item.color\"\n          :disabled=\"item.disabled\"\n          :on-click=\"item.onClick\"\n          :items=\"item.items\"\n          :submenu-props=\"submenuProps\"\n          @hide=\"emit('hide')\"\n        />\n        <ContextMenuDivider\n          v-else-if=\"!item.hidden\"\n          :class-name=\"itemClass(item, 'divider')\"\n          :style=\"itemStyle(item, 'divider')\"\n        />\n      </template>\n    </template>\n  </Paper>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useContextMenuSettings } from '../../context'\nimport type { ContextMenuOverlayEmits } from '../../types'\nimport '../../ContextMenuOverlay.css'\n\ndefineOptions({ name: 'ContextMenuOverlay' })\nconst props = defineProps<{ zIndex?: number }>()\nconst emit = defineEmits<ContextMenuOverlayEmits>()\nconst settings = useContextMenuSettings()\n\nfunction click(event: MouseEvent) {\n  event.preventDefault()\n  emit('hide')\n}\n\nfunction contextmenu(event: MouseEvent) {\n  event.preventDefault()\n  if (!settings.value.repositionOnRepeat) {\n    emit('hide')\n    return\n  }\n  try {\n    document.elementsFromPoint(event.clientX, event.clientY)[1]?.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        bubbles: true,\n        clientX: event.clientX,\n        clientY: event.clientY,\n      }),\n    )\n  } catch {\n    // The target may disappear while the event is dispatched.\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"mantine-contextmenu-overlay\"\n    :style=\"{ zIndex: props.zIndex }\"\n    @click=\"click\"\n    @contextmenu=\"contextmenu\"\n  >\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { Portal } from '@mantine-vue/core'\nimport { useHotkeys, useWindowEvent } from '@mantine-vue/hooks'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport ContextMenuOverlay from '../ContextMenuOverlay/ContextMenuOverlay.vue'\nimport type { ContextMenuPortalEmits, ContextMenuPortalProps } from '../../types'\n\ndefineOptions({ name: 'ContextMenuPortal' })\nconst props = defineProps<ContextMenuPortalProps>()\nconst emit = defineEmits<ContextMenuPortalEmits>()\nconst hide = () => emit('hide')\nuseWindowEvent('resize', hide)\nuseWindowEvent('scroll', hide)\nuseHotkeys([['Escape', hide]])\n</script>\n\n<template>\n  <Portal>\n    <ContextMenuOverlay :z-index=\"props.zIndex\" @hide=\"hide\">\n      <ContextMenu\n        :x=\"props.x\"\n        :y=\"props.y\"\n        :content=\"props.content\"\n        :dir=\"props.dir\"\n        :z-index=\"props.zIndex\"\n        :class-name=\"props.className\"\n        :style=\"props.style\"\n        :class-names=\"props.classNames\"\n        :styles=\"props.styles\"\n        @hide=\"hide\"\n      />\n    </ContextMenuOverlay>\n  </Portal>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, shallowRef, toRef } from 'vue'\nimport { useDirection } from '@mantine-vue/core'\nimport ContextMenuPortal from '../ContextMenuPortal/ContextMenuPortal.vue'\nimport { ContextMenuKey, ContextMenuSettingsKey } from '../../context'\nimport type {\n  ContextMenuInstanceOptions,\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ShowContextMenuFunction,\n} from '../../types'\n\ndefineOptions({ name: 'ContextMenuProvider' })\nconst props = withDefaults(defineProps<ContextMenuProviderProps>(), {\n  zIndex: 9999,\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n  repositionOnRepeat: false,\n})\nconst data = shallowRef<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null)\nconst { dir } = useDirection()\n\nfunction hideContextMenu() {\n  data.value = null\n}\n\nconst showContextMenu: ShowContextMenuFunction = (content, options) => (event) => {\n  event.preventDefault()\n  event.stopPropagation()\n  const position =\n    'touches' in event\n      ? { x: event.touches.item(0)!.clientX, y: event.touches.item(0)!.clientY }\n      : { x: event.clientX, y: event.clientY }\n  data.value = {\n    ...position,\n    content,\n    zIndex: options?.zIndex || props.zIndex,\n    className: options?.className,\n    style: options?.style,\n    classNames: options?.classNames,\n    styles: options?.styles,\n  }\n}\n\nprovide(\n  ContextMenuSettingsKey,\n  computed(() => ({\n    shadow: props.shadow,\n    borderRadius: props.borderRadius,\n    submenuDelay: props.submenuDelay,\n    repositionOnRepeat: props.repositionOnRepeat,\n  })),\n)\nprovide(ContextMenuKey, {\n  showContextMenu,\n  hideContextMenu,\n  isContextMenuVisible: toRef(() => Boolean(data.value)),\n})\n</script>\n\n<template>\n  <slot />\n  <ContextMenuPortal v-if=\"data\" v-bind=\"data\" :dir=\"dir\" @hide=\"hideContextMenu\" />\n</template>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/contextmenu",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Desktop-grade context menu extension for Mantine Vue",
   "license": "MIT",
   "files": [
@@ -39,8 +39,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "3.5.0",
-    "@mantine-vue/hooks": "3.5.0",
+    "@mantine-vue/core": "3.6.0",
+    "@mantine-vue/hooks": "3.6.0",
     "vue": "^3.5.0"
   },
   "mantineVue": {