reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.38 kB
Source Map (JSON)
{"version":3,"file":"MenubarTrigger.cjs","sources":["../../src/Menubar/MenubarTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nexport interface MenubarTriggerProps extends PrimitiveProps {\n /** When `true`, prevents the user from interacting with item */\n disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { injectMenubarRootContext } from './MenubarRoot.vue'\nimport { injectMenubarMenuContext } from './MenubarMenu.vue'\nimport {\n Primitive,\n} from '@/Primitive'\nimport { MenuAnchor } from '@/Menu'\nimport { RovingFocusItem } from '@/RovingFocus'\n\nwithDefaults(defineProps<MenubarTriggerProps>(), {\n as: 'button',\n})\nconst rootContext = injectMenubarRootContext()\nconst menuContext = injectMenubarMenuContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst { CollectionItem } = useCollection({ key: 'Menubar' })\n\nconst isFocused = ref(false)\n\nconst open = computed(() => rootContext.modelValue.value === menuContext.value)\n\nonMounted(() => {\n menuContext.triggerElement = triggerElement\n})\n</script>\n\n<template>\n <RovingFocusItem\n as-child\n :focusable=\"!disabled\"\n :tab-stop-id=\"menuContext.value\"\n >\n <CollectionItem>\n <MenuAnchor as-child>\n <Primitive\n :id=\"menuContext.triggerId\"\n :ref=\"forwardRef\"\n :as=\"as\"\n :type=\"as === 'button' ? 'button' : undefined\"\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n :aria-expanded=\"open\"\n :aria-controls=\"open ? menuContext.contentId : undefined\"\n :data-highlighted=\"isFocused ? '' : undefined\"\n :data-state=\"open ? 'open' : 'closed'\"\n :data-disabled=\"disabled ? '' : undefined\"\n :disabled=\"disabled\"\n :data-value=\"menuContext.value\"\n @pointerdown=\"(event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n rootContext.onMenuOpen(menuContext.value);\n // prevent trigger focusing when opening\n // this allows the content to be given focus without competition\n if (!open) event.preventDefault();\n }\n }\"\n @pointerenter=\"() => {\n const menubarOpen = Boolean(rootContext.modelValue.value);\n if (menubarOpen && !open) {\n rootContext.onMenuOpen(menuContext.value);\n triggerElement?.focus()\n }\n }\"\n @keydown.enter.space.arrow-down=\"(event) => {\n if (disabled) return;\n if (['Enter', ' '].includes(event.key)) rootContext.onMenuToggle(menuContext.value);\n if (event.key === 'ArrowDown') rootContext.onMenuOpen(menuContext.value);\n // prevent keydown from scrolling window / first focused item to execute\n // that keydown (inadvertently closing the menu)\n if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {\n menuContext.wasKeyboardTriggerOpenRef.value = true;\n event.preventDefault();\n }\n }\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n >\n <slot />\n </Primitive>\n </MenuAnchor>\n </CollectionItem>\n </RovingFocusItem>\n</template>\n"],"names":["injectMenubarRootContext","injectMenubarMenuContext","useForwardExpose","useCollection","ref","computed","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,cAAcA,4CAAyB,EAAA;AAC7C,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AACxE,IAAA,MAAM,EAAE,cAAe,EAAA,GAAIC,oCAAc,EAAE,GAAA,EAAK,WAAW,CAAA;AAE3D,IAAM,MAAA,SAAA,GAAYC,QAAI,KAAK,CAAA;AAE3B,IAAA,MAAM,OAAOC,YAAS,CAAA,MAAM,YAAY,UAAW,CAAA,KAAA,KAAU,YAAY,KAAK,CAAA;AAE9E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}