element-plus
Version:
A Component Library for Vue 3
1 lines • 5.55 kB
Source Map (JSON)
{"version":3,"file":"content2.mjs","sources":["../../../../../../packages/components/tooltip-v2/src/content.vue"],"sourcesContent":["<template>\n <div ref=\"contentRef\" :style=\"contentStyle\" data-tooltip-v2-root>\n <div v-if=\"!nowrap\" :data-side=\"side\" :class=\"contentClass\">\n <slot :content-style=\"contentStyle\" :content-class=\"contentClass\" />\n <el-visually-hidden :id=\"contentId\" role=\"tooltip\">\n <template v-if=\"ariaLabel\">\n {{ ariaLabel }}\n </template>\n <slot v-else />\n </el-visually-hidden>\n <slot name=\"arrow\" :style=\"arrowStyle\" :side=\"side\" />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, onMounted, provide, ref, unref, watch } from 'vue'\nimport { offset } from '@floating-ui/dom'\nimport { tooltipV2ContentKey, tooltipV2RootKey } from '@element-plus/tokens'\nimport {\n arrowMiddleware,\n useFloating,\n useNamespace,\n useZIndex,\n} from '@element-plus/hooks'\nimport ElVisuallyHidden from '@element-plus/components/visual-hidden'\nimport { tooltipV2ContentProps } from './content'\nimport { tooltipV2CommonProps } from './common'\n\nimport type { CSSProperties } from 'vue'\nimport type { Middleware } from '@floating-ui/dom'\n\ndefineOptions({\n name: 'ElTooltipV2Content',\n})\n\nconst props = defineProps({ ...tooltipV2ContentProps, ...tooltipV2CommonProps })\n\nconst { triggerRef, contentId } = inject(tooltipV2RootKey)!\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nconst { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({\n placement,\n strategy,\n middleware: computed(() => {\n const middleware: Middleware[] = [offset(props.offset)]\n\n if (props.showArrow) {\n middleware.push(\n arrowMiddleware({\n arrowRef,\n })\n )\n }\n\n return middleware\n }),\n})\n\nconst zIndex = useZIndex().nextZIndex()\n\nconst ns = useNamespace('tooltip-v2')\n\nconst side = computed(() => {\n return placement.value.split('-')[0]\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n return {\n position: unref(strategy),\n top: `${unref(y) || 0}px`,\n left: `${unref(x) || 0}px`,\n zIndex,\n }\n})\n\nconst arrowStyle = computed<CSSProperties>(() => {\n if (!props.showArrow) return {}\n\n const { arrow } = unref(middlewareData)\n\n return {\n [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow?.x}px` || '',\n [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow?.y}px` || '',\n }\n})\n\nconst contentClass = computed(() => [\n ns.e('content'),\n ns.is('dark', props.effect === 'dark'),\n ns.is(unref(strategy)),\n props.contentClass,\n])\n\nwatch(arrowRef, () => update())\n\nwatch(\n () => props.placement,\n (val) => (placement.value = val)\n)\n\nonMounted(() => {\n watch(\n () => props.reference || triggerRef.value,\n (el) => {\n referenceRef.value = el || undefined\n },\n {\n immediate: true,\n }\n )\n})\n\nprovide(tooltipV2ContentKey, { arrowRef })\n</script>\n"],"names":[],"mappings":"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"}