vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
10 lines (9 loc) • 3.44 kB
JavaScript
;const e=require("vue"),p=require("./index-B7zOq_yO.cjs");function h({tooltip:t,chart:a,clientPosition:o,positionPreference:d="center",defaultOffsetY:c=24,blockShiftY:i=!1}){const l=e.ref(0),r=e.ref(c);if(t&&a){const{width:u,height:v}=t.getBoundingClientRect(),{right:f,left:n,bottom:s}=a.getBoundingClientRect();d==="center"&&(o.x+u/2>f?l.value=-u+(f-o.x):o.x-u/2<n?l.value=-u+(u-(o.x-n)):l.value=-u/2),d==="right"&&(o.x+u>f?l.value=-u+(f-o.x):l.value=0),d==="left"&&(o.x<n+u?l.value=-u+(u-(o.x-n)):l.value=-u),o.y+v>s&&!i&&(r.value=-v-c)}return{top:o.y+r.value,left:o.x+l.value}}function b(t,a,o){e.onMounted(()=>t.addEventListener(a,o)),e.onUnmounted(()=>t.removeEventListener(a,o))}function x(){const t=e.ref(0),a=e.ref(0);return b(window,"mousemove",o=>{t.value=o.clientX,a.value=o.clientY}),{x:t,y:a}}const g=["aria-hidden"],S=["innerHTML"],y=.18,k={__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},disableSmoothing:{type:Boolean,default:!1}},setup(t){const a=t,o=e.ref(null),{x:d,y:c}=x(a.parent),i=e.ref({x:0,y:0}),l=e.ref({x:0,y:0});let r=null;function u(){if(a.disableSmoothing){l.value.x=i.value.x,l.value.y=i.value.y;return}l.value.x+=(i.value.x-l.value.x)*y,l.value.y+=(i.value.y-l.value.y)*y,r=requestAnimationFrame(u)}e.watch([d,c],([n,s])=>{i.value.x=n,i.value.y=s,a.disableSmoothing&&(l.value.x=n,l.value.y=s)}),e.watch(()=>a.show,async n=>{if(n){const s=d.value,m=c.value;i.value.x=s,i.value.y=m,l.value.x=s,l.value.y=m,await e.nextTick(),r||u()}else r&&(cancelAnimationFrame(r),r=null)}),e.onUnmounted(()=>{r&&cancelAnimationFrame(r)});const v=e.computed(()=>{const n=h({tooltip:o.value,chart:a.parent,clientPosition:l.value,positionPreference:a.position,defaultOffsetY:a.offsetY,blockShiftY:a.blockShiftY});return{top:Math.round(n.top),left:Math.round(n.left)}}),f=e.computed(()=>p.setOpacity(a.backgroundColor,a.backgroundOpacity));return(n,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,role:"tooltip","aria-hidden":!t.show,"aria-live":"polite",class:e.normalizeClass({"vue-data-ui-custom-tooltip":t.isCustom,"vue-data-ui-tooltip":!t.isCustom}),style:e.normalizeStyle(`
pointer-events:none;
top:${v.value.top}px;
left:${v.value.left}px;
${t.isCustom?"":`background:${f.value};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(n.$slots,"tooltip-before"),e.renderSlot(n.$slots,"default"),e.createElementVNode("div",{innerHTML:t.content},null,8,S),e.renderSlot(n.$slots,"tooltip-after")],14,g)):e.createCommentVNode("",!0)],8,["to"]))}};exports._sfc_main=k;exports.useMouse=x;