{"version":3,"file":"PopperArrow.js","sources":["../../src/Popper/PopperArrow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Side } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { ArrowProps } from '@/shared/component/Arrow.vue'\n\nconst OPPOSITE_SIDE: Record<Side, Side> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport interface PopperArrowProps extends ArrowProps, PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useForwardExpose } from '@/shared'\nimport Arrow from '@/shared/component/Arrow.vue'\nimport { injectPopperContentContext } from './PopperContent.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nwithDefaults(\n  defineProps<PopperArrowProps>(),\n  { as: 'svg' },\n)\n\nconst { forwardRef } = useForwardExpose()\nconst contentContext = injectPopperContentContext()\n\nconst baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])\n</script>\n\n<template>\n  <span\n    :ref=\"(el: HTMLElement) => {\n      contentContext.onArrowChange(el)\n      return undefined\n    }\"\n    :style=\"{\n      position: 'absolute',\n      left: contentContext.arrowX?.value ? `${contentContext.arrowX?.value}px` : undefined,\n      top: contentContext.arrowY?.value ? `${contentContext.arrowY?.value}px` : undefined,\n      [baseSide]: 0,\n      transformOrigin: {\n        top: '',\n        right: '0 0',\n        bottom: 'center 0',\n        left: '100% 0',\n      }[contentContext.placedSide.value],\n      transform: {\n        top: 'translateY(100%)',\n        right: 'translateY(50%) rotate(90deg) translateX(-50%)',\n        bottom: `rotate(180deg)`,\n        left: 'translateY(50%) rotate(-90deg) translateX(50%)',\n      }[contentContext.placedSide.value],\n      visibility: contentContext.shouldHideArrow.value ? 'hidden' : undefined,\n    }\"\n  >\n    <Arrow\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :style=\"{\n        display: 'block',\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :rounded=\"rounded\"\n      :width=\"width\"\n      :height=\"height\"\n    >\n      <slot />\n    </Arrow>\n  </span>\n</template>\n"],"names":[],"mappings":";;;;;AAKA,MAAM,aAAoC,GAAA;AAAA,EACxC,GAAK,EAAA,QAAA;AAAA,EACL,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,KAAA;AAAA,EACR,IAAM,EAAA;AACR,CAAA;;;;;;;;;;;;;;AAoBA,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAElD,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,cAAc,cAAe,CAAA,UAAA,CAAW,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}