reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 2.68 kB
Source Map (JSON)
{"version":3,"file":"PopperArrow.cjs","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 { injectPopperContentContext } from './PopperContent.vue'\nimport { useForwardExpose } from '@/shared'\nimport Arrow from '@/shared/component/Arrow.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":["useForwardExpose","injectPopperContentContext","computed"],"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,GAAIA,wCAAiB,EAAA;AACxC,IAAA,MAAM,iBAAiBC,+CAA2B,EAAA;AAElD,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,cAAc,cAAe,CAAA,UAAA,CAAW,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}