reka-ui/dist/Menu/MenuItem.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"MenuItem.cjs","sources":["../../src/Menu/MenuItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuItemImplProps } from './MenuItemImpl.vue'\nimport { useForwardExpose } from '@/shared'\n\nexport type MenuItemEmits = {\n  /**\n   * Event handler called when the user selects an item (via mouse or keyboard). <br>\n   *  Calling `event.preventDefault` in this handler will prevent the menu from closing when selecting that item.\n   */\n  select: [event: Event]\n}\n\nexport interface MenuItemProps extends MenuItemImplProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport MenuItemImpl from './MenuItemImpl.vue'\nimport { injectMenuRootContext } from './MenuRoot.vue'\nimport { injectMenuContentContext } from './MenuContentImpl.vue'\nimport { ITEM_SELECT, SELECTION_KEYS } from './utils'\n\nconst props = defineProps<MenuItemProps>()\nconst emits = defineEmits<MenuItemEmits>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst rootContext = injectMenuRootContext()\nconst contentContext = injectMenuContentContext()\n\nconst isPointerDownRef = ref(false)\n\nasync function handleSelect() {\n  const menuItem = currentElement.value\n  if (!props.disabled && menuItem) {\n    const itemSelectEvent = new CustomEvent(ITEM_SELECT, {\n      bubbles: true,\n      cancelable: true,\n    })\n    emits('select', itemSelectEvent)\n    // let select event finish\n    await nextTick()\n    if (itemSelectEvent.defaultPrevented)\n      isPointerDownRef.value = false\n    else rootContext.onClose()\n  }\n}\n</script>\n\n<template>\n  <MenuItemImpl\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n    @click=\"handleSelect\"\n    @pointerdown=\"\n      () => {\n        isPointerDownRef = true;\n      }\n    \"\n    @pointerup=\"\n      async (event) => {\n        await nextTick();\n        if (event.defaultPrevented) return;\n        // Pointer down can move to a different menu item which should activate it on pointer up.\n        // We dispatch a click for selection to allow composition with click based triggers and to\n        // prevent Firefox from getting stuck in text selection mode when the menu closes.\n        if (!isPointerDownRef) event.currentTarget?.click();\n      }\n    \"\n    @keydown=\"\n      async (event) => {\n        const isTypingAhead = contentContext.searchRef.value !== '';\n        if (disabled || (isTypingAhead && event.key === ' ')) return;\n        if (SELECTION_KEYS.includes(event.key)) {\n          event.currentTarget.click();\n          /**\n           * We prevent default browser behaviour for selection keys as they should trigger\n           * a selection only:\n           * - prevents space from scrolling the page.\n           * - if keydown causes focus to move, prevents keydown from firing on the new target.\n           */\n          event.preventDefault();\n        }\n      }\n    \"\n  >\n    <slot />\n  </MenuItemImpl>\n</template>\n"],"names":["useForwardExpose","injectMenuRootContext","injectMenuContentContext","ref","ITEM_SELECT","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAA,MAAM,cAAcC,mCAAsB,EAAA;AAC1C,IAAA,MAAM,iBAAiBC,6CAAyB,EAAA;AAEhD,IAAM,MAAA,gBAAA,GAAmBC,QAAI,KAAK,CAAA;AAElC,IAAA,eAAe,YAAe,GAAA;AAC5B,MAAA,MAAM,WAAW,cAAe,CAAA,KAAA;AAChC,MAAI,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,QAAU,EAAA;AAC/B,QAAM,MAAA,eAAA,GAAkB,IAAI,WAAA,CAAYC,sBAAa,EAAA;AAAA,UACnD,OAAS,EAAA,IAAA;AAAA,UACT,UAAY,EAAA;AAAA,SACb,CAAA;AACD,QAAA,KAAA,CAAM,UAAU,eAAe,CAAA;AAE/B,QAAA,MAAMC,YAAS,EAAA;AACf,QAAA,IAAI,eAAgB,CAAA,gBAAA;AAClB,UAAA,gBAAA,CAAiB,KAAQ,GAAA,KAAA;AAAA,yBACV,OAAQ,EAAA;AAAA;AAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}