reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 3.38 kB
Source Map (JSON)
{"version":3,"file":"DropdownMenuContent.cjs","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n MenuContentEmits,\n MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n if (event.defaultPrevented)\n return\n if (!hasInteractedOutsideRef.value) {\n setTimeout(() => {\n rootContext.triggerElement.value?.focus()\n }, 0)\n }\n hasInteractedOutsideRef.value = false\n\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n <MenuContent\n v-bind=\"forwarded\"\n :id=\"rootContext.contentId\"\n :aria-labelledby=\"rootContext?.triggerId\"\n :style=\"{\n '--reka-dropdown-menu-content-transform-origin':\n 'var(--reka-popper-transform-origin)',\n '--reka-dropdown-menu-content-available-width':\n 'var(--reka-popper-available-width)',\n '--reka-dropdown-menu-content-available-height':\n 'var(--reka-popper-available-height)',\n '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-dropdown-menu-trigger-height':\n 'var(--reka-popper-anchor-height)',\n }\"\n @close-auto-focus=\"handleCloseAutoFocus\"\n @interact-outside=\"(event) => {\n if (event.defaultPrevented) return\n\n const originalEvent = event.detail.originalEvent as PointerEvent;\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n }\"\n >\n <slot />\n </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectDropdownMenuRootContext","ref","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,2DAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}