vue-data-ui-hq/dist/Tooltip-C7TJODUx.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";const e=require("vue"),y=require("./index-ZfICPrrM.cjs");function b({tooltip:t,chart:n,clientPosition:o,positionPreference:u="center",defaultOffsetY:a=24,blockShiftY:d=!1}){const r=e.ref(0),s=e.ref(a);if(t&&n){const{width:l,height:c}=t.getBoundingClientRect(),{right:f,left:i,bottom:p}=n.getBoundingClientRect();u==="center"&&(o.x+l/2>f?r.value=-l+(f-o.x):o.x-l/2<i?r.value=-l+(l-(o.x-i)):r.value=-l/2),u==="right"&&(o.x+l>f?r.value=-l+(f-o.x):r.value=0),u==="left"&&(o.x<i+l?r.value=-l+(l-(o.x-i)):r.value=-l),o.y+c>p&&!d&&(s.value=-c-a)}return{top:o.y+s.value,left:o.x+r.value}}function v(t,n,o){e.onMounted(()=>t.addEventListener(n,o)),e.onUnmounted(()=>t.removeEventListener(n,o))}function m(){const t=e.ref(0),n=e.ref(0);return v(window,"mousemove",o=>{t.value=o.clientX,n.value=o.clientY}),{x:t,y:n}}const g=["innerHTML"],x={__name:"Tooltip",props:{backgroundColor:{type:String,default:"#FFFFFF"},color:{type:String,default:"#000000"},content:String,maxWidth:{type:String,default:"300px"},parent:{type:Object},show:{type:Boolean,default:!1},isCustom:{type:Boolean,default:!1},fontSize:{type:[Number,String],default:14},borderRadius:{type:Number,default:4},borderColor:{type:String,default:"#e1e5e8"},borderWidth:{type:Number,default:1},backgroundOpacity:{type:Number,default:100},position:{type:String,default:"center"},offsetY:{type:Number,default:24},blockShiftY:{type:Boolean,default:!1},isFullscreen:{type:Boolean,default:!1}},setup(t){const n=t,o=e.ref(null),u=e.ref(m(n.parent)),a=e.computed(()=>b({tooltip:o.value,chart:n.parent,clientPosition:u.value,positionPreference:n.position,defaultOffsetY:n.offsetY,blockShiftY:n.blockShiftY})),d=e.computed(()=>y.setOpacity(n.backgroundColor,n.backgroundOpacity));return(r,s)=>(e.openBlock(),e.createBlock(e.Teleport,{to:t.isFullscreen?t.parent:"body"},[t.show?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"tooltip",ref:o,class:e.normalizeClass({"vue-data-ui-custom-tooltip":t.isCustom,"vue-data-ui-tooltip":!t.isCustom}),style:e.normalizeStyle(`pointer-events:none;top:${e.unref(a).top}px;left:${e.unref(a).left}px;${t.isCustom?"":`background:${e.unref(d)};color:${t.color};max-width:${t.maxWidth};font-size:${t.fontSize}px`};border-radius:${t.borderRadius}px;border:${t.borderWidth}px solid ${t.borderColor};z-index:2147483647;`)},[e.renderSlot(r.$slots,"tooltip-before"),e.renderSlot(r.$slots,"default"),e.createElementVNode("div",{innerHTML:t.content},null,8,g),e.renderSlot(r.$slots,"tooltip-after")],6)):e.createCommentVNode("",!0)],8,["to"]))}};exports._sfc_main=x;exports.useMouse=m;