UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 6.43 kB
{"version":3,"file":"NavigationMenuItem.cjs","sources":["../../src/NavigationMenu/NavigationMenuItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { createContext, getActiveElement, useArrowNavigation, useForwardExpose, useId } from '@/shared'\n\nexport interface NavigationMenuItemProps extends PrimitiveProps {\n /**\n * A unique value that associates the item with an active value when the navigation menu is controlled.\n *\n * This prop is managed automatically when uncontrolled.\n */\n value?: string\n}\n\nexport type NavigationMenuItemContext = {\n value: string\n contentId: string\n triggerRef: Ref<HTMLElement | undefined>\n focusProxyRef: Ref<HTMLElement | undefined>\n wasEscapeCloseRef: Ref<boolean>\n onEntryKeyDown: () => void\n onFocusProxyEnter: (side: 'start' | 'end') => void\n onContentFocusOutside: () => void\n onRootContentClose: () => void\n}\n\nexport const [injectNavigationMenuItemContext, provideNavigationMenuItemContext]\n = createContext<NavigationMenuItemContext>('NavigationMenuItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { Primitive } from '@/Primitive'\nimport {\n focusFirst,\n getTabbableCandidates,\n makeContentId,\n removeFromTabOrder,\n} from './utils'\n\nconst props = withDefaults(defineProps<NavigationMenuItemProps>(), {\n as: 'li',\n})\n\nuseForwardExpose()\nconst { getItems } = useCollection({ key: 'NavigationMenu' })\n\nconst context = injectNavigationMenuContext()\n\nconst value = useId(props.value)\nconst triggerRef = ref<HTMLElement>()\nconst focusProxyRef = ref<HTMLElement>()\n\nconst contentId = makeContentId(context.baseId, value)\n\nlet restoreContentTabOrderRef: () => void = () => ({})\n\nconst wasEscapeCloseRef = ref(false)\nasync function handleContentEntry(side = 'start') {\n const el = document.getElementById(contentId)\n if (el) {\n restoreContentTabOrderRef()\n const candidates = getTabbableCandidates(el)\n if (candidates.length)\n focusFirst(side === 'start' ? candidates : candidates.reverse())\n }\n}\n\nfunction handleContentExit() {\n const el = document.getElementById(contentId)\n if (el) {\n const candidates = getTabbableCandidates(el)\n if (candidates.length)\n restoreContentTabOrderRef = removeFromTabOrder(candidates)\n }\n}\n\nprovideNavigationMenuItemContext({\n value,\n contentId,\n triggerRef,\n focusProxyRef,\n wasEscapeCloseRef,\n onEntryKeyDown: handleContentEntry,\n onFocusProxyEnter: handleContentEntry,\n onContentFocusOutside: handleContentExit,\n onRootContentClose: handleContentExit,\n})\n\nfunction handleClose() {\n context.onItemDismiss()\n triggerRef.value?.focus()\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n const currentFocus = getActiveElement() as HTMLElement\n if (ev.keyCode === 32 || ev.key === 'Enter') {\n if (context.modelValue.value === value) {\n handleClose()\n ev.preventDefault()\n return\n }\n else {\n (ev.target as HTMLElement).click()\n ev.preventDefault()\n return\n }\n }\n\n const itemsArray = getItems().filter(i =>\n i.ref.parentElement?.hasAttribute('data-menu-item'),\n ).map(i => i.ref)\n\n // prevent triggering when the focus is on link\n if (!itemsArray.includes(currentFocus))\n return\n\n const newSelectedElement = useArrowNavigation(ev, currentFocus, undefined, {\n itemsArray,\n loop: false,\n })\n\n if (newSelectedElement)\n newSelectedElement?.focus()\n\n ev.preventDefault()\n ev.stopPropagation()\n}\n</script>\n\n<template>\n <Primitive\n :as-child=\"asChild\"\n :as=\"as\"\n data-menu-item\n @keydown.up.down.left.right.home.end.space=\"handleKeydown\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["createContext","useForwardExpose","useCollection","injectNavigationMenuContext","useId","ref","makeContentId","getTabbableCandidates","focusFirst","removeFromTabOrder","getActiveElement","useArrowNavigation"],"mappings":"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"}