sci-pro/lib/src/tooltip/tooltip.vue.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./style/index.css");const N=require("./trigger.vue.js"),z=require("./only-child.js"),L=["data-popper-placement"],Y=e.defineComponent({name:"sci-tooltip"}),$=e.defineComponent({...Y,props:{content:{default:""},effect:{default:"dark"},trigger:{default:"hover"},placement:{default:"bottom"}},setup(B,{expose:T}){const s=B,r=e.ref(!1),g=e.ref(s.content),k=e.ref(s.effect),p=e.ref(s.trigger),x=e.ref(s.placement),a=e.ref(x),c=e.ref(0),d=e.ref(0),u=e.ref(0),b=e.ref(0),i=e.ref(null),v=e.ref("none"),m=(t,l="hover",n)=>{if(p.value==l&&(i.value=(t==null?void 0:t.target)||t,W(),n||(r.value=!r.value),r.value&&i.value instanceof HTMLElement)){const{y:_,left:o,height:f,width:w}=i.value.getBoundingClientRect(),h=_+window.scrollY;switch(a.value){case"bottom":c.value=o,d.value=h+f+10,u.value=Number((w.toFixed()/2).toFixed())-5,u.value>=0||(u.value=2),v.value=window.innerWidth-o-42+"px";break;case"right":c.value=o+w+10,d.value=f/2+h-15,b.value=Number((f.toFixed()/2).toFixed()),v.value=window.innerWidth-(o+w)-42+"px";break;case"left":c.value=-(window.innerWidth-o),d.value=f/2+h-15,b.value=Number((f.toFixed()/2).toFixed()),v.value=o-42+"px";break;case"top":c.value=o,d.value=-(window.innerHeight-h+10),u.value=Number((w.toFixed()/2).toFixed())-5,u.value>=0||(u.value=2),v.value=window.innerWidth-o-42+"px";break}}},y=()=>{p.value=="hover"&&(r.value=!1)},W=()=>{const{y:t,left:l,height:n,width:_}=i.value.getBoundingClientRect(),o=t+window.scrollY;switch(x.value){case"top":o>=50?a.value="top":a.value="bottom";break;case"bottom":window.innerHeight-(o+n)>=50?a.value="bottom":a.value="top";break;case"left":l>=50?a.value="left":a.value="right";break;case"right":window.innerWidth-(l+_)>=50?a.value="right":a.value="left";break}},E=()=>{switch(a.value){case"bottom":return"0px auto auto 0px";case"right":return"0px auto auto 0px";case"left":return"0 0 auto auto";case"top":return"auto auto 0px 0px"}},F=t=>{g.value=t.content,k.value=t.effect?t.effect:"dark",p.value=t.trigger?t.trigger:"hover",x.value=t.placement?t.placement:"bottom"};e.watch(()=>s.content,(t,l)=>{g.value=t}),e.onUnmounted(()=>{window.removeEventListener("click",C),window.removeEventListener("resize",S)});const C=t=>{i.value!=t.target&&(r.value=!1)},S=()=>{r.value&&m(i.value,p.value,"resize")};return window.addEventListener("click",C),window.addEventListener("resize",S),T({openTooltip:m,closeTooltip:y,directiveUpdateState:F}),(t,l)=>(e.openBlock(),e.createBlock(N.default,null,{default:e.withCtx(()=>[e.createVNode(e.unref(z.OnlyChild),{onClick:l[0]||(l[0]=n=>m(n,"click")),onMouseenter:l[1]||(l[1]=n=>m(n,"hover")),onMouseleave:l[2]||(l[2]=n=>y())},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3}),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[r.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tooltip",["is-"+k.value]]),ref:"tooltip",style:e.normalizeStyle({transform:`translate(${c.value}px,${d.value}px)`,inset:E(),maxWidth:v.value})},[e.createElementVNode("span",null,e.toDisplayString(g.value),1),e.createElementVNode("span",{class:"tooltip-arrow","data-popper-placement":a.value,style:e.normalizeStyle({transform:`translate(${u.value}px,${b.value}px)`})},null,12,L)],6)):e.createCommentVNode("",!0)]))]),_:3}))}});exports.default=$;