UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 2.96 kB
{"version":3,"file":"ContextMenuContent.cjs","sources":["../../src/ContextMenu/ContextMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n MenuContentEmits,\n MenuContentProps,\n} from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nexport type ContextMenuContentEmits = MenuContentEmits\n\nexport interface ContextMenuContentProps\n extends Omit<\n MenuContentProps,\n | 'side'\n | 'sideOffset'\n | 'align'\n | 'arrowPadding'\n | 'updatePositionStrategy'\n > {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectContextMenuRootContext } from './ContextMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\n\nconst props = withDefaults(defineProps<ContextMenuContentProps>(), {\n alignOffset: 0,\n avoidCollisions: true,\n collisionBoundary: () => [],\n collisionPadding: 0,\n sticky: 'partial',\n hideWhenDetached: false,\n})\nconst emits = defineEmits<ContextMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nuseForwardExpose()\nconst rootContext = injectContextMenuRootContext()\nconst hasInteractedOutside = ref(false)\n</script>\n\n<template>\n <MenuContent\n v-bind=\"forwarded\"\n side=\"right\"\n :side-offset=\"2\"\n align=\"start\"\n update-position-strategy=\"always\"\n :style=\"{\n '--reka-context-menu-content-transform-origin':\n 'var(--reka-popper-transform-origin)',\n '--reka-context-menu-content-available-width':\n 'var(--reka-popper-available-width)',\n '--reka-context-menu-content-available-height':\n 'var(--reka-popper-available-height)',\n '--reka-context-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-context-menu-trigger-height':\n 'var(--reka-popper-anchor-height)',\n }\"\n @close-auto-focus=\"\n (event) => {\n if (!event.defaultPrevented && hasInteractedOutside) {\n event.preventDefault();\n }\n hasInteractedOutside = false;\n }\n \"\n @interact-outside=\"\n (event) => {\n const originalEvent = event.detail.originalEvent as PointerEvent\n // Prevent closing when right click (button=2) with the trigger element\n if (originalEvent.button === 2 && event.target === rootContext.triggerElement.value) {\n event.preventDefault()\n }\n if (!event.defaultPrevented && !rootContext.modal.value)\n hasInteractedOutside = true;\n }\n \"\n >\n <slot />\n </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectContextMenuRootContext","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAQd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AACjD,IAAM,MAAA,oBAAA,GAAuBC,QAAI,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}