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