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"),a=require("../utils/index.cjs"),se=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},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(F,{expose:G,emit:I}){const r=F,u=e.ref(!1),w=e.ref(),i=e.ref(null),f=e.ref(0),s=e.ref(0),E=e.ref("top"),y=e.ref(),x=e.ref(0),R=e.ref(0),H=e.ref(),T=e.ref(),h=e.ref(0),d=e.ref(0),N=e.ref(document.documentElement.clientWidth),K=e.ref(document.documentElement.clientHeight),{isSupported:J}=a.useOptionsSupported("passive"),{isSupported:q}=a.useOptionsSupported("capture"),$=I,Q=a.useSlotsExist(["tooltip"]),Z=e.computed(()=>typeof r.maxWidth=="number"?`${r.maxWidth}px`:r.maxWidth),v=e.computed(()=>Q.tooltip||r.tooltip),_=e.computed(()=>{switch(E.value){case"top":return{transformOrigin:`50% ${f.value}px`,top:`${-f.value}px`,left:`${-s.value}px`};case"bottom":return{transformOrigin:`50% ${r.arrow?-4:-6}px`,bottom:`${-f.value}px`,left:`${-s.value}px`};case"left":return{transformOrigin:`${s.value}px 50%`,top:`${-f.value}px`,left:`${-s.value}px`};case"right":return{transformOrigin:`${r.arrow?-4:-6}px 50%`,top:`${-f.value}px`,right:`${-s.value}px`};default:return{transformOrigin:`50% ${f.value}px`,top:`${-f.value}px`,left:`${-s.value}px`}}});e.watch(()=>[r.placement,r.arrow,r.flip],()=>{S()},{deep:!0}),e.watch(()=>r.show,t=>{t&&!u.value&&C(),!t&&u.value&&p()},{immediate:!0}),e.onMounted(()=>{b()}),e.onBeforeUnmount(()=>{j()});const A=a.useMutationObserver(i,()=>{S()},{subtree:!0,childList:!0,attributes:!0,characterData:!0});a.useEventListener(window,"resize",P),a.useResizeObserver([T,y],t=>{if(t.length===1&&t[0].target.className==="tooltip-card"){const{blockSize:l,inlineSize:c}=t[0].borderBoxSize[0];if(l===d.value&&c===h.value)return}S()});function P(){N.value=document.documentElement.clientWidth,K.value=document.documentElement.clientHeight,b(),S()}function b(){j(),i.value=U(y.value),i.value&&i.value.addEventListener("scroll",S,J.value?{passive:!0}:void 0),i.value===document.documentElement&&A.start()}function j(){i.value&&i.value.removeEventListener("scroll",S),i.value=null,A.stop()}function ee(t){return t===document.documentElement?null:t.parentElement}function U(t){if(t===null)return null;const l=ee(t);return l===null?null:l===document.documentElement?document.documentElement:(O=>{const{overflow:L,overflowX:M,overflowY:V}=getComputedStyle(O);return/(auto|scroll|overlay)/.test(L+V+M)})(l)?l:U(l)}function S(){u.value&&X()}async function X(){await e.nextTick(),x.value=y.value.offsetWidth,R.value=y.value.offsetHeight,h.value=T.value.offsetWidth,d.value=T.value.offsetHeight,r.flip&&(E.value=oe()),["top","bottom"].includes(E.value)?(f.value=d.value+(r.arrow?16:6),s.value=(h.value-x.value)/2):(f.value=(d.value-R.value)/2,s.value=h.value+(r.arrow?16:6))}function te(){return i.value&&i.value!==document.documentElement?i.value.getBoundingClientRect():{top:0,left:0,bottom:K.value,right:N.value}}function oe(){const{top:t,bottom:l,left:c,right:O}=y.value.getBoundingClientRect(),{top:L,bottom:M,left:V,right:fe}=te(),k=t-L-(r.arrow?12:0),z=M-l-(r.arrow?12:0),D=c-V-(r.arrow?12:0),B=fe-O-(r.arrow?12:0),m=(h.value-x.value)/2,g=(d.value-R.value)/2;return n(r.placement,[]);function n(W,o){if(W==="top"){if(o.includes("top"))return o.includes("bottom")?o.includes("left")?n("right",o):n("left",o):n("bottom",o);if(k<d.value+(r.arrow?4:6)&&o.length!==3)return n("bottom",[...o,"top"]);if(D>=m&&B>=m)return"top";if(o.length!==3){if(D>=m)return n("left",["top","bottom","right"]);if(B>=m)return n("right",["top","bottom","left"])}}else if(W==="bottom"){if(o.includes("bottom"))return o.includes("top")?o.includes("left")?n("right",o):n("left",o):n("top",o);if(z<d.value+(r.arrow?4:6)&&o.length!==3)return n("top",[...o,"bottom"]);if(D>=m&&B>=m)return"bottom";if(o.length!==3){if(D>=m)return n("left",["top","bottom","right"]);if(B>=m)return n("right",["top","bottom","left"])}}else if(W==="left"){if(o.includes("left"))return o.includes("right")?o.includes("top")?n("bottom",o):n("top",o):n("right",o);if(D<h.value+(r.arrow?4:6)&&o.length!==3)return n("right",[...o,"left"]);if(k>=g&&z>=g)return"left";if(o.length!==3){if(k>=g)return n("top",["left","right","bottom"]);if(z>=g)return n("bottom",["left","right","top"])}}else if(W==="right"){if(o.includes("right"))return o.includes("left")?o.includes("top")?n("bottom",o):n("top",o):n("left",o);if(B<h.value+(r.arrow?4:6)&&o.length!==3)return n("left",[...o,"right"]);if(k>=g&&z>=g)return"right";if(o.length!==3){if(k>=g)return n("top",["left","right","bottom"]);if(z>=g)return n("bottom",["left","right","top"])}}return r.placement}}function C(){w.value&&a.cancelRaf(w.value),u.value||(w.value=a.rafTimeout(()=>{u.value=!0,X(),$("update:show",!0),$("openChange",!0),v.value&&r.trigger==="click"&&document.addEventListener("click",Y,q.value?{capture:!0}:!0)},r.showDelay))}function p(){w.value&&a.cancelRaf(w.value),u.value&&(w.value=a.rafTimeout(()=>{u.value=!1,$("update:show",!1),$("openChange",!1),v.value&&r.trigger==="click"&&document.removeEventListener("click",Y,q.value?{capture:!0}:!0)},r.hideDelay))}function re(){u.value?p():C()}function Y(t){H.value.contains(t.target)||p()}function ne(){v.value&&r.trigger==="hover"&&!r.showControl&&C()}function le(){v.value&&r.trigger==="hover"&&!r.showControl&&p()}function ue(){$("animationend",u.value)}function ie(){r.trigger==="hover"&&!r.showControl&&C()}function ae(){r.trigger==="hover"&&!r.showControl&&p()}return G({show:C,hide:p,observeScroll:b}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:"m-tooltip-wrap",style:e.normalizeStyle(`--tooltip-max-width: ${Z.value}; --tooltip-background-color: ${t.bgColor}; --transition-duration: ${t.transitionDuration}ms;`),onMouseenter:ne,onMouseleave:le},[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:ue},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"tooltipRef",ref:H,class:e.normalizeClass(["m-tooltip-card",{[`tooltip-${E.value}-padding`]:t.arrow}]),style:e.normalizeStyle(_.value),onMouseenter:ie,onMouseleave:ae,onKeydown:l[0]||(l[0]=e.withKeys(c=>t.trigger==="click"&&t.keyboard&&u.value?p():()=>!1,["esc"]))},[e.createElementVNode("div",{ref_key:"tooltipCardRef",ref:T,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-${E.value||"top"}`])},null,2)):e.createCommentVNode("",!0)],38),[[e.vShow,v.value&&u.value]])]),_:3}),e.createElementVNode("span",{ref_key:"contentRef",ref:y,class:e.normalizeClass(["tooltip-content",t.contentClass]),style:e.normalizeStyle(t.contentStyle),onClick:l[1]||(l[1]=c=>v.value&&t.trigger==="click"&&!u.value?C():()=>!1),onKeydown:[l[2]||(l[2]=e.withKeys(c=>v.value&&t.trigger==="click"&&t.keyboard?re():()=>!1,["enter"])),l[3]||(l[3]=e.withKeys(c=>v.value&&t.trigger==="click"&&t.keyboard&&u.value?p():()=>!1,["esc"]))]},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)],!0)],38)],36))}});exports.default=se;