vue-amazing-ui/lib/tooltip/Tooltip.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("../utils/index.cjs"),ce=e.defineComponent({__name:"Tooltip",props:{maxWidth:{default:240},content:{default:void 0},contentClass:{default:void 0},contentStyle:{default:()=>({})},tooltip:{default:void 0},tooltipClass:{default:void 0},tooltipStyle:{default:()=>({})},bgColor:{default:"rgba(0, 0, 0, 0.85)"},arrow:{type:Boolean,default:!0},placement:{default:"top"},flip:{type:Boolean,default:!0},trigger:{default:"hover"},keyboard:{type:Boolean,default:!1},to:{type:[String,Boolean],default:"body"},transitionDuration:{default:100},showDelay:{default:100},hideDelay:{default:100},show:{type:Boolean,default:!1},showControl:{type:Boolean,default:!1}},emits:["update:show","openChange","animationend"],setup(I,{expose:J,emit:Q}){const o=I,x=e.ref(!1),i=e.ref(!1),C=e.ref(),f=e.ref(null),A=e.ref(0),v=e.ref(0),p=e.ref(0),g=e.ref("top"),D=e.ref(null),s=e.ref(),W=e.ref(null),V=e.ref(null),N=e.ref(),K=e.ref(null),u=e.ref(),L=e.ref(document.documentElement.clientWidth),M=e.ref(document.documentElement.clientHeight),{isSupported:Z}=m.useOptionsSupported("passive"),{isSupported:j}=m.useOptionsSupported("capture"),k=Q,_=m.useSlotsExist(["tooltip"]),P=e.computed(()=>typeof o.maxWidth=="number"?`${o.maxWidth}px`:o.maxWidth),c=e.computed(()=>_.tooltip||o.tooltip),ee=e.computed(()=>{const t=s.value?.top??0,r=N.value?.top??0,a=t-r,$=s.value?.left??0,z=N.value?.left??0,h=$-z;switch(g.value){case"top":return{transformOrigin:`50% ${v.value}px`,top:`${a-v.value}px`,left:`${h-p.value}px`};case"bottom":return{transformOrigin:`50% ${o.arrow?-4:-6}px`,top:`${a+v.value}px`,left:`${h-p.value}px`};case"left":return{transformOrigin:`${p.value}px 50%`,top:`${a-v.value}px`,left:`${h-p.value}px`};case"right":return{transformOrigin:`${o.arrow?-4:-6}px 50%`,top:`${a-v.value}px`,left:`${h+p.value}px`};default:return{transformOrigin:`50% ${v.value}px`,top:`${a-v.value}px`,left:`${h-p.value}px`}}});e.watch(()=>[o.placement,o.arrow,o.flip],()=>{S()},{deep:!0}),e.watch(()=>c.value&&i.value,t=>{t&&!x.value&&(x.value=!0)},{immediate:!0}),e.watch(()=>o.show,t=>{t&&!i.value&&E(),!t&&i.value&&d()},{immediate:!0}),e.onMounted(()=>{H()}),e.onBeforeUnmount(()=>{X()});const U=m.useMutationObserver(f,()=>{A.value!==f.value?.scrollTop&&(A.value=f.value?.scrollTop??0,S())},{subtree:!0,attributes:!0});m.useEventListener(window,"resize",oe),m.useResizeObserver([K,D],t=>{if(c.value&&i.value){if(t.length===1&&t[0].target.classList.contains("tooltip-card")){const{blockSize:r,inlineSize:a}=t[0].borderBoxSize[0];if(Math.round(r)===Math.round(u.value.height)&&Math.round(a)===Math.round(u.value.width))return}S()}});function te(){let t=W.value?.parentElement;for(;t;){if(t===document.documentElement){V.value=document.documentElement;return}const{position:r}=getComputedStyle(t);if(r!=="static"){V.value=t;return}t=t.parentElement}}function oe(){L.value=document.documentElement.clientWidth,M.value=document.documentElement.clientHeight,H(),S()}function H(){X(),f.value=Y(D.value),f.value&&f.value.addEventListener("scroll",S,Z.value?{passive:!0}:void 0),f.value===document.documentElement?U.start():U.stop()}function X(){f.value&&f.value.removeEventListener("scroll",S),f.value=null}function ne(t){return t===document.documentElement?null:t.parentElement}function Y(t){if(t===null)return null;const r=ne(t);return r===null?null:r===document.documentElement?document.documentElement:($=>{const{overflow:z,overflowX:h,overflowY:q}=getComputedStyle($);return/(auto|scroll|overlay)/.test(z+q+h)})(r)?r:Y(r)}function S(){i.value&&F()}async function F(){await e.nextTick(),te(),N.value=V.value?.getBoundingClientRect(),s.value=D.value?.getBoundingClientRect(),u.value=K.value?.getBoundingClientRect(),o.flip&&(g.value=re()),g.value==="top"?(v.value=u.value.height+(o.arrow?16:6),p.value=(u.value.width-s.value.width)/2):g.value==="bottom"?(v.value=s.value.height+(o.arrow?4:6),p.value=(u.value.width-s.value.width)/2):g.value==="left"?(v.value=(u.value.height-s.value.height)/2,p.value=u.value.width+(o.arrow?16:6)):g.value==="right"&&(v.value=(u.value.height-s.value.height)/2,p.value=s.value.width+(o.arrow?4:6))}function le(){if(f.value){const t=f.value.getBoundingClientRect();return{top:t.top<0?0:t.top,left:t.left<0?0:t.left,bottom:t.bottom>M.value?M.value:t.bottom,right:t.right>L.value?L.value:t.right}}return{top:0,left:0,bottom:M.value,right:L.value}}function re(){const{top:t,bottom:r,left:a,right:$}=s.value,{top:z,bottom:h,left:q,right:pe}=le(),T=t-z-(o.arrow?12:0),B=h-r-(o.arrow?12:0),R=a-q-(o.arrow?12:0),b=pe-$-(o.arrow?12:0),w=(u.value.width-s.value.width)/2,y=(u.value.height-s.value.height)/2;return l(o.placement,[]);function l(O,n){if(O==="top"){if(n.includes("top"))return n.includes("bottom")?n.includes("left")?l("right",n):l("left",n):l("bottom",n);if(T<u.value.height+(o.arrow?4:6)&&n.length!==3)return l("bottom",[...n,"top"]);if(R>=w&&b>=w)return"top";if(n.length!==3){if(R>=w)return l("left",["top","bottom","right"]);if(b>=w)return l("right",["top","bottom","left"])}}else if(O==="bottom"){if(n.includes("bottom"))return n.includes("top")?n.includes("left")?l("right",n):l("left",n):l("top",n);if(B<u.value.height+(o.arrow?4:6)&&n.length!==3)return l("top",[...n,"bottom"]);if(R>=w&&b>=w)return"bottom";if(n.length!==3){if(R>=w)return l("left",["top","bottom","right"]);if(b>=w)return l("right",["top","bottom","left"])}}else if(O==="left"){if(n.includes("left"))return n.includes("right")?n.includes("top")?l("bottom",n):l("top",n):l("right",n);if(R<u.value.width+(o.arrow?4:6)&&n.length!==3)return l("right",[...n,"left"]);if(T>=y&&B>=y)return"left";if(n.length!==3){if(T>=y)return l("top",["left","right","bottom"]);if(B>=y)return l("bottom",["left","right","top"])}}else if(O==="right"){if(n.includes("right"))return n.includes("left")?n.includes("top")?l("bottom",n):l("top",n):l("left",n);if(b<u.value.width+(o.arrow?4:6)&&n.length!==3)return l("left",[...n,"right"]);if(T>=y&&B>=y)return"right";if(n.length!==3){if(T>=y)return l("top",["left","right","bottom"]);if(B>=y)return l("bottom",["left","right","top"])}}return o.placement}}function E(){C.value&&m.cancelRaf(C.value),i.value||(C.value=m.rafTimeout(()=>{i.value=!0,F(),k("update:show",!0),k("openChange",!0),c.value&&o.trigger==="click"&&document.addEventListener("click",G,j.value?{capture:!0}:!0)},o.showDelay))}function d(){C.value&&m.cancelRaf(C.value),i.value&&(C.value=m.rafTimeout(()=>{i.value=!1,k("update:show",!1),k("openChange",!1),c.value&&o.trigger==="click"&&document.removeEventListener("click",G,j.value?{capture:!0}:!0)},o.hideDelay))}function ie(){i.value?d():E()}function G(t){W.value?.contains(t.target)||d()}function ue(){c.value&&o.trigger==="hover"&&!o.showControl&&E()}function ae(){c.value&&o.trigger==="hover"&&!o.showControl&&d()}function fe(){k("animationend",i.value)}function se(){o.trigger==="hover"&&!o.showControl&&E()}function ve(){o.trigger==="hover"&&!o.showControl&&d()}return J({show:E,hide:d,observeScroll:H}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"tooltip-wrap",onMouseenter:ue,onMouseleave:ae},[(e.openBlock(),e.createBlock(e.Teleport,{disabled:t.to===!1,to:t.to===!1?null:t.to},[e.createVNode(e.Transition,{name:"zoom","enter-from-class":"zoom-enter","enter-active-class":"zoom-enter","enter-to-class":"zoom-enter zoom-enter-active","leave-from-class":"zoom-leave","leave-active-class":"zoom-leave zoom-leave-active","leave-to-class":"zoom-leave zoom-leave-active",onAnimationend:fe},{default:e.withCtx(()=>[x.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"tooltipRef",ref:W,class:e.normalizeClass(["tooltip-card-container",{[`tooltip-${g.value}-padding`]:t.arrow}]),style:e.normalizeStyle({...ee.value,"--tooltip-max-width":P.value,"--tooltip-background-color":t.bgColor,"--tooltip-transition-duration":`${t.transitionDuration}ms`}),onMouseenter:se,onMouseleave:ve,onKeydown:r[0]||(r[0]=e.withKeys(a=>t.trigger==="click"&&t.keyboard&&i.value?d():()=>!1,["esc"]))},[e.createElementVNode("div",{ref_key:"tooltipCardRef",ref:K,class:e.normalizeClass(["tooltip-card",t.tooltipClass]),style:e.normalizeStyle(t.tooltipStyle)},[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)],!0)],6),t.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tooltip-arrow",`arrow-${g.value||"top"}`])},null,2)):e.createCommentVNode("",!0)],38)),[[e.vShow,c.value&&i.value]]):e.createCommentVNode("",!0)]),_:3})],8,["disabled","to"])),e.createElementVNode("span",{ref_key:"tooltipContentRef",ref:D,class:e.normalizeClass(["tooltip-content",t.contentClass]),style:e.normalizeStyle(t.contentStyle),onClick:r[1]||(r[1]=a=>c.value&&t.trigger==="click"&&!i.value?E():()=>!1),onKeydown:[r[2]||(r[2]=e.withKeys(a=>c.value&&t.trigger==="click"&&t.keyboard?ie():()=>!1,["enter"])),r[3]||(r[3]=e.withKeys(a=>c.value&&t.trigger==="click"&&t.keyboard&&i.value?d():()=>!1,["esc"]))]},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)],!0)],38)],32))}});exports.default=ce;