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

Vue port for Radix UI Primitives.

{"version":3,"file":"NavigationMenuIndicator.cjs","sources":["../../src/NavigationMenu/NavigationMenuIndicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface NavigationMenuIndicatorProps 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</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watchEffect } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { useForwardExpose } from '@/shared'\nimport { Primitive } from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n\nconst { forwardRef } = useForwardExpose()\nconst menuContext = injectNavigationMenuContext()\n\nconst indicatorStyle = ref<{ size: number, position: number }>()\nconst isHorizontal = computed(() => menuContext.orientation === 'horizontal')\nconst isVisible = computed(() => !!menuContext.modelValue.value)\nconst { activeTrigger } = menuContext\n\nfunction handlePositionChange() {\n  if (!activeTrigger.value) {\n    return\n  }\n\n  indicatorStyle.value = {\n    size: isHorizontal.value\n      ? activeTrigger.value.offsetWidth\n      : activeTrigger.value.offsetHeight,\n    position: isHorizontal.value\n      ? activeTrigger.value.offsetLeft\n      : activeTrigger.value.offsetTop,\n  }\n}\n\nwatchEffect(() => {\n  if (!menuContext.modelValue.value) {\n    return\n  }\n  handlePositionChange()\n})\n\nuseResizeObserver(activeTrigger, handlePositionChange)\nuseResizeObserver(menuContext.indicatorTrack, handlePositionChange)\n</script>\n\n<template>\n  <Teleport\n    v-if=\"menuContext.indicatorTrack.value\"\n    :to=\"menuContext.indicatorTrack.value\"\n  >\n    <Presence :present=\"forceMount || isVisible\">\n      <Primitive\n        :ref=\"forwardRef\"\n        aria-hidden=\"true\"\n        :data-state=\"isVisible ? 'visible' : 'hidden'\"\n        :data-orientation=\"menuContext.orientation\"\n        :as-child=\"props.asChild\"\n        :as=\"as\"\n        :style=\"{\n          ...(indicatorStyle ? {\n            '--reka-navigation-menu-indicator-size': `${indicatorStyle.size}px`,\n            '--reka-navigation-menu-indicator-position': `${indicatorStyle.position}px`,\n          } : {}),\n        }\"\n        v-bind=\"$attrs\"\n      >\n        <slot />\n      </Primitive>\n    </Presence>\n  </Teleport>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watchEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AACxC,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAEhD,IAAA,MAAM,iBAAiBC,OAAwC,EAAA;AAC/D,IAAA,MAAM,YAAe,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,gBAAgB,YAAY,CAAA;AAC5E,IAAA,MAAM,YAAYA,YAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAC/D,IAAM,MAAA,EAAE,eAAkB,GAAA,WAAA;AAE1B,IAAA,SAAS,oBAAuB,GAAA;AAC9B,MAAI,IAAA,CAAC,cAAc,KAAO,EAAA;AACxB,QAAA;AAAA;AAGF,MAAA,cAAA,CAAe,KAAQ,GAAA;AAAA,QACrB,MAAM,YAAa,CAAA,KAAA,GACf,cAAc,KAAM,CAAA,WAAA,GACpB,cAAc,KAAM,CAAA,YAAA;AAAA,QACxB,UAAU,YAAa,CAAA,KAAA,GACnB,cAAc,KAAM,CAAA,UAAA,GACpB,cAAc,KAAM,CAAA;AAAA,OAC1B;AAAA;AAGF,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAI,IAAA,CAAC,WAAY,CAAA,UAAA,CAAW,KAAO,EAAA;AACjC,QAAA;AAAA;AAEF,MAAqB,oBAAA,EAAA;AAAA,KACtB,CAAA;AAED,IAAAC,sBAAA,CAAkB,eAAe,oBAAoB,CAAA;AACrD,IAAkBA,sBAAA,CAAA,WAAA,CAAY,gBAAgB,oBAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}