reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.21 kB
Source Map (JSON)
{"version":3,"file":"MenuSubContent.cjs","sources":["../../src/Menu/MenuSubContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n MenuContentImplEmits,\n MenuContentImplProps,\n} from './MenuContentImpl.vue'\n\nexport type MenuSubContentEmits = MenuContentImplEmits\n\n// reference: https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L1152\nexport interface MenuSubContentProps extends Omit<MenuContentImplProps, 'disableOutsidePointerEvents' | 'disableOutsideScroll' | 'trapFocus' | 'side' | 'align'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with Vue animation libraries.\n */\n forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport MenuContentImpl from './MenuContentImpl.vue'\nimport { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'\nimport { injectMenuSubContext } from './MenuSub.vue'\nimport { SUB_CLOSE_KEYS } from './utils'\nimport { Presence } from '@/Presence'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = withDefaults(defineProps<MenuSubContentProps>(), {\n prioritizePosition: true,\n})\nconst emits = defineEmits<MenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst menuContext = injectMenuContext()\nconst rootContext = injectMenuRootContext()\nconst menuSubContext = injectMenuSubContext()\n\nconst { forwardRef, currentElement: subContentElement } = useForwardExpose()\n\nmenuSubContext.contentId ||= useId(undefined, 'reka-menu-sub-content')\n</script>\n\n<template>\n <Presence :present=\"forceMount || menuContext.open.value\">\n <MenuContentImpl\n v-bind=\"forwarded\"\n :id=\"menuSubContext.contentId\"\n :ref=\"forwardRef\"\n :aria-labelledby=\"menuSubContext.triggerId\"\n align=\"start\"\n :side=\"rootContext.dir.value === 'rtl' ? 'left' : 'right'\"\n :disable-outside-pointer-events=\"false\"\n :disable-outside-scroll=\"false\"\n :trap-focus=\"false\"\n @open-auto-focus.prevent=\"(event) => {\n // when opening a submenu, focus content for keyboard users only\n if (rootContext.isUsingKeyboardRef.value) subContentElement?.focus();\n }\"\n @close-auto-focus.prevent\n @focus-outside=\"\n (event) => {\n if (event.defaultPrevented) return;\n // We prevent closing when the trigger is focused to avoid triggering a re-open animation\n // on pointer interaction.\n if (event.target !== menuSubContext.trigger.value)\n menuContext.onOpenChange(false);\n }\n \"\n @escape-key-down=\"\n (event) => {\n rootContext.onClose();\n // ensure pressing escape in submenu doesn't escape full screen mode\n event.preventDefault();\n }\n \"\n @keydown=\"(event: KeyboardEvent) => {\n // Submenu key events bubble through portals. We only care about keys in this menu.\n const isKeyDownInside = (event.currentTarget as HTMLElement)?.contains(event.target as HTMLElement);\n const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir.value].includes(event.key);\n if (isKeyDownInside && isCloseKey) {\n menuContext.onOpenChange(false);\n // We focus manually because we prevented it in `onCloseAutoFocus`\n menuSubContext.trigger.value?.focus();\n // prevent window from scrolling\n event.preventDefault();\n }\n }\"\n >\n <slot />\n </MenuContentImpl>\n </Presence>\n</template>\n"],"names":["useForwardPropsEmits","injectMenuContext","injectMenuRootContext","injectMenuSubContext","useForwardExpose","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAcC,+BAAkB,EAAA;AACtC,IAAA,MAAM,cAAcC,mCAAsB,EAAA;AAC1C,IAAA,MAAM,iBAAiBC,iCAAqB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,iBAAA,KAAsBC,wCAAiB,EAAA;AAE3E,IAAe,cAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,uBAAuB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}