reka-ui/dist/NavigationMenu/NavigationMenuViewport.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\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   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}