reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 5.3 kB
Source Map (JSON)
{"version":3,"file":"MenubarContent.cjs","sources":["../../src/Menubar/MenubarContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuContentEmits, MenuContentProps } from '@/Menu'\nimport { useCollection } from '@/Collection'\n\nexport type MenubarContentEmits = MenuContentEmits\n\nexport interface MenubarContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectMenubarRootContext } from './MenubarRoot.vue'\nimport { injectMenubarMenuContext } from './MenubarMenu.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { wrapArray } from '@/shared/useTypeahead'\n\nconst props = withDefaults(defineProps<MenubarContentProps>(), {\n align: 'start',\n})\nconst emits = defineEmits<MenubarContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectMenubarRootContext()\nconst menuContext = injectMenubarMenuContext()\n\nmenuContext.contentId ||= useId(undefined, 'reka-menubar-content')\n\nconst { getItems } = useCollection({ key: 'Menubar' })\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleArrowNavigation(event: KeyboardEvent) {\n const target = event.target as HTMLElement\n const targetIsSubTrigger = target.hasAttribute(\n 'data-reka-menubar-subtrigger',\n )\n\n const prevMenuKey = rootContext.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'\n const isPrevKey = prevMenuKey === event.key\n const isNextKey = !isPrevKey\n\n // Prevent navigation when we're opening a submenu\n if (isNextKey && targetIsSubTrigger)\n return\n\n let candidateValues = getItems().filter(i => i.ref.dataset.disabled !== '').map(i => i.ref.dataset.value)\n if (isPrevKey)\n candidateValues.reverse()\n\n const currentIndex = candidateValues.indexOf(menuContext.value)\n\n candidateValues = rootContext.loop.value\n ? wrapArray(candidateValues, currentIndex + 1)\n : candidateValues.slice(currentIndex + 1)\n\n const [nextValue] = candidateValues\n if (nextValue)\n rootContext.onMenuOpen(nextValue)\n}\n</script>\n\n<template>\n <MenuContent\n v-bind=\"forwarded\"\n :id=\"menuContext.contentId\"\n data-reka-menubar-content=\"\"\n :aria-labelledby=\"menuContext.triggerId\"\n :style=\"{\n '--reka-menubar-content-transform-origin':\n 'var(--reka-popper-transform-origin)',\n '--reka-menubar-content-available-width':\n 'var(--reka-popper-available-width)',\n '--reka-menubar-content-available-height':\n 'var(--reka-popper-available-height)',\n '--reka-menubar-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-menubar-trigger-height': 'var(--reka-popper-anchor-height)',\n }\"\n @close-auto-focus=\"(event) => {\n const menubarOpen = Boolean(rootContext.modelValue.value);\n if (!menubarOpen && !hasInteractedOutsideRef) {\n menuContext.triggerElement.value?.focus();\n }\n\n hasInteractedOutsideRef = false;\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\"\n @focus-outside=\"(event) => {\n const target = event.target as HTMLElement;\n const isMenubarTrigger = getItems().filter(i => i.ref.dataset.disabled !== '').some((i) => i.ref.contains(target));\n if (isMenubarTrigger) event.preventDefault();\n }\"\n @interact-outside=\"\n (event) => {\n hasInteractedOutsideRef = true;\n }\n \"\n @entry-focus=\"(event) => {\n if (!menuContext.wasKeyboardTriggerOpenRef.value) event.preventDefault()\n }\"\n @keydown.arrow-right.arrow-left=\"handleArrowNavigation\"\n >\n <slot />\n </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectMenubarRootContext","injectMenubarMenuContext","useId","useCollection","ref","wrapArray"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAC7C,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,sBAAsB,CAAA;AAEjE,IAAA,MAAM,EAAE,QAAS,EAAA,GAAIC,oCAAc,EAAE,GAAA,EAAK,WAAW,CAAA;AAErD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,sBAAsB,KAAsB,EAAA;AACnD,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAA,MAAM,qBAAqB,MAAO,CAAA,YAAA;AAAA,QAChC;AAAA,OACF;AAEA,MAAA,MAAM,WAAc,GAAA,WAAA,CAAY,GAAI,CAAA,KAAA,KAAU,QAAQ,YAAe,GAAA,WAAA;AACrE,MAAM,MAAA,SAAA,GAAY,gBAAgB,KAAM,CAAA,GAAA;AACxC,MAAA,MAAM,YAAY,CAAC,SAAA;AAGnB,MAAA,IAAI,SAAa,IAAA,kBAAA;AACf,QAAA;AAEF,MAAA,IAAI,kBAAkB,QAAS,EAAA,CAAE,MAAO,CAAA,CAAA,CAAA,KAAK,EAAE,GAAI,CAAA,OAAA,CAAQ,QAAa,KAAA,EAAE,EAAE,GAAI,CAAA,CAAA,CAAA,KAAK,CAAE,CAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AACxG,MAAI,IAAA,SAAA;AACF,QAAA,eAAA,CAAgB,OAAQ,EAAA;AAE1B,MAAA,MAAM,YAAe,GAAA,eAAA,CAAgB,OAAQ,CAAA,WAAA,CAAY,KAAK,CAAA;AAE9D,MAAkB,eAAA,GAAA,WAAA,CAAY,IAAK,CAAA,KAAA,GAC/BC,6BAAU,CAAA,eAAA,EAAiB,YAAe,GAAA,CAAC,CAC3C,GAAA,eAAA,CAAgB,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAE1C,MAAM,MAAA,CAAC,SAAS,CAAI,GAAA,eAAA;AACpB,MAAI,IAAA,SAAA;AACF,QAAA,WAAA,CAAY,WAAW,SAAS,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}