zero-tooltip 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/zero-tooltip.js +1 -1
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +1 -1
- package/src/tooltip.ts +1 -1
package/dist/zero-tooltip.js
CHANGED
|
@@ -198,7 +198,7 @@ function Ee(t, e) {
|
|
|
198
198
|
return r.classList.add(...t.trim().split(" ")), r.style.borderWidth = `${e}px`, r;
|
|
199
199
|
}
|
|
200
200
|
async function J(t, e, r, s, o) {
|
|
201
|
-
if (!e.shouldShow)
|
|
201
|
+
if (h[s] === void 0 || !e.shouldShow)
|
|
202
202
|
return;
|
|
203
203
|
let i = o != null && o.isTooltip ? 0 : e.showDelay;
|
|
204
204
|
const d = 100;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(m,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(m=typeof globalThis<"u"?globalThis:m||self,m.ZeroTooltip=c(m.Vue))})(this,function(m){"use strict";const c="";let v;const te=new Uint8Array(16);function re(){if(!v&&(v=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!v))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return v(te)}const w=[];for(let t=0;t<256;++t)w.push((t+256).toString(16).slice(1));function se(t,e=0){return w[t[e+0]]+w[t[e+1]]+w[t[e+2]]+w[t[e+3]]+"-"+w[t[e+4]]+w[t[e+5]]+"-"+w[t[e+6]]+w[t[e+7]]+"-"+w[t[e+8]]+w[t[e+9]]+"-"+w[t[e+10]]+w[t[e+11]]+w[t[e+12]]+w[t[e+13]]+w[t[e+14]]+w[t[e+15]]}const z={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function oe(t,e,r){if(z.randomUUID&&!e&&!t)return z.randomUUID();t=t||{};const s=t.random||(t.rng||re)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,e){r=r||0;for(let o=0;o<16;++o)e[r+o]=s[o];return e}return se(s)}function ie(){let t=[];const e=(o,i)=>{r(o);for(const d of t)d.element.addEventListener("scroll",()=>{i(),s()},{signal:d.eventController.signal})},r=o=>{let i=o;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const n=window.getComputedStyle(i);if(n.overflow==="auto"||n.overflow==="scroll"){const p={element:i,eventController:new AbortController};t.push(p)}}i=i.parentElement}const d={element:window,eventController:new AbortController};t.push(d)},s=()=>{for(const o of t)o.eventController.abort();t=[]};return{handleHideOnScroll:e,removeHideOnScrollListeners:s}}function ne(){const t={},e={};return{handleHideOnResize:(o,i,d)=>{let n=new ResizeObserver(p=>{const u=p[0].target;if(!e[o])e[o]=i.getBoundingClientRect();else{const a=u.getBoundingClientRect();(a.left!==e[o].left||a.top!==e[o].top||a.width!==e[o].width||a.height!==e[o].height)&&d()}});t[o]=n,n.observe(i)},resetResizeReferences:o=>{t[o]&&t[o].disconnect(),delete t[o],delete e[o]}}}function de(){const t={};return{handleRepositionOnResize:(s,o)=>{t[s]=new AbortController,window.addEventListener("resize",o)},removeRepositionOnResizeHandler:s=>{t[s]&&t[s].abort()}}}const{handleHideOnScroll:pe,removeHideOnScrollListeners:ue}=ie(),{handleHideOnResize:he,resetResizeReferences:we}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),M="zero-tooltip__container",S="zero-tooltip__text",T="zero-tooltip__arrow",O={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},ce="body",ve="top",Oe=10,le=20,ye=100,Te=250,xe=0,W="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",V="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",fe=5,Fe="zt-absolute zt-border-solid zt-border-[#495057]",ze=6,Me=1,Se=!0,We=0,Ve=0,Be=!1,Ae=!0,h={},Le=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o,previousValue:r.value,prevArg:r.arg},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{h[o]&&f(h[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid,i=s.el.$_tooltip.prevValue,d=s.el.$_tooltip.prevArg;(!(i===r.value||typeof i=="object"&&typeof r.value=="object"&&JSON.stringify(i)===JSON.stringify(r.value))||d!==r.arg)&&(h[o]&&f(h[o]),x(r.value,t,r.arg,e,o),s.el.$_tooltip.prevValue=r.value,s.el.$_tooltip.prevArg=r.arg)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;h[o]&&f(h[o])}});function x(t,e,r,s,o){let i=He(t,e,r);const d=De(s,i,o);h[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function He(t,e,r){var Y,G,K,Q,b,C,g,ee;let s=(e==null?void 0:e.appendTo)??ce,o=Ie(t),i=r??(e==null?void 0:e.defaultPosition)??ve,d={left:((Y=e==null?void 0:e.positions)==null?void 0:Y.left)??O.left,top:((G=e==null?void 0:e.positions)==null?void 0:G.top)??O.top,right:((K=e==null?void 0:e.positions)==null?void 0:K.right)??O.right,bottom:((Q=e==null?void 0:e.positions)==null?void 0:Q.bottom)??O.bottom},n=(e==null?void 0:e.offsetFromSource)??Oe,p=(e==null?void 0:e.offsetFromViewport)??le,u=(e==null?void 0:e.minWidth)??ye,a=(e==null?void 0:e.maxWidth)??Te,y=(e==null?void 0:e.tooltipBorderWidth)??xe,P=M+" "+W+" "+((e==null?void 0:e.tooltipClasses)??""),k=S+" "+V+" "+((e==null?void 0:e.textClasses)??""),j=(e==null?void 0:e.arrowSize)??fe,q=(e==null?void 0:e.arrowClasses)??"",N=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??ze,U=(e==null?void 0:e.zIndex)??Me,F=Se,Z=(e==null?void 0:e.showDelay)??We,J=(e==null?void 0:e.hideDelay)??Ve,X=Be,Ee=(e==null?void 0:e.showWarnings)??Ae;return typeof t!="string"&&(t.appendTo!==void 0&&(s=t.appendTo),r===void 0&&t.defaultPosition!==void 0&&(i=t.defaultPosition),((b=t.positions)==null?void 0:b.left)!==void 0&&(d.left=t.positions.left),((C=t.positions)==null?void 0:C.top)!==void 0&&(d.top=t.positions.top),((g=t.positions)==null?void 0:g.right)!==void 0&&(d.right=t.positions.right),((ee=t.positions)==null?void 0:ee.bottom)!==void 0&&(d.bottom=t.positions.bottom),t.offsetFromSource!==void 0&&(n=t.offsetFromSource),t.offsetFromViewport!==void 0&&(p=t.offsetFromViewport),t.minWidth!==void 0&&(u=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(y=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(P=M+" "+W+" "+t.tooltipClasses),t.textClasses!==void 0&&(k=S+" "+V+" "+t.textClasses),t.arrowSize!==void 0&&(j=t.arrowSize),t.arrowClasses!==void 0&&(q=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(N=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(U=t.zIndex),t.showDelay!==void 0&&(Z=t.showDelay),t.hideDelay!==void 0&&(J=t.hideDelay),t.alwaysOn!==void 0&&(F=!1,X=t.alwaysOn),t.show!==void 0&&(F=t.show)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:d,tooltipOffsetFromSource:n,tooltipOffsetFromViewport:p,tooltipMinWidth:u,tooltipMaxWidth:a,tooltipBorderWidth:y,tooltipClasses:P,textClasses:k,arrowSize:j,arrowClasses:q,arrowMinOffsetFromTooltipCorner:N,zIndex:U,shouldShow:F,showDelay:Z,hideDelay:J,alwaysOn:X,showWarnings:Ee}}function Ie(t){if(t==null)return"";if(typeof t=="string")return t;if(Object.hasOwn(t,"content")){if(t.content===void 0||t.content===null)return"";if(typeof t.content=="string")return t.content}throw new Error("Tooltip text or 'content' option must be defined with correct type")}function De(t,e,r){let s=t,o=$e(e.textClasses,e.tooltipText),i=Re(e.tooltipClasses,e.tooltipBorderWidth);i.append(o),i.dataset.uuid=r;const d={currentInstanceId:Date.now(),isHoveringOverAnchorElement:!1,lastTooltipMouseLeaveTimestamp:0},n={anchorElementMouseEnter:new AbortController,anchorElementMouseLeave:new AbortController,tooltipElementMouseEnter:new AbortController,tooltipElementMouseLeave:new AbortController};return e.tooltipText===""?e.shouldShow&&e.showWarnings&&console.warn("Tooltip text is empty"):e.alwaysOn?queueMicrotask(()=>{A(s,e,i,"absolute"),ae(r,()=>_e(s,e,i,"absolute"))}):(s.addEventListener("mouseenter",()=>B(s,e,i,r),{signal:n.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>L(e,r),{signal:n.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>B(s,e,i,r,{isTooltip:!0}),{signal:n.tooltipElementMouseEnter.signal}),i.addEventListener("mouseleave",()=>L(e,r,{isTooltip:!0}),{signal:n.tooltipElementMouseLeave.signal})),{anchorElement:s,tooltipConfig:e,tooltipElement:i,mouseEnterEventControllers:n,mouseEventState:d}}function $e(t,e){let r=document.createElement("p");return r.classList.add(...t.trim().split(" ")),r.innerHTML=e,r}function Re(t,e){let r=document.createElement("div");return r.classList.add(...t.trim().split(" ")),r.style.borderWidth=`${e}px`,r}async function B(t,e,r,s,o){if(!e.shouldShow)return;let i=o!=null&&o.isTooltip?0:e.showDelay;const d=100;!(o!=null&&o.isTooltip)&&Date.now()-h[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=d&&(i=0);const n=Date.now();if(h[s].mouseEventState.currentInstanceId=n,h[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(u=>setTimeout(u,i)),!h[s].mouseEventState.isHoveringOverAnchorElement||h[s].mouseEventState.currentInstanceId!==n))return;A(t,e,r)&&(pe(t,()=>l(s)),he(s,t,()=>l(s)))}function A(t,e,r,s){let o={x:0,y:0};s==="absolute"&&(r.classList.replace("zt-fixed","zt-absolute"),o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect(),d=document.querySelector(e.appendTo);d==null||d.appendChild(r);let n=!1,p=e.tooltipPosition;for(let u=0;u<4&&(p=e.tooltipPositions[e.tooltipPosition][u],p==="left"?n=H(i,e,r,o):p==="top"?n=D(i,e,r,o):p==="right"?n=I(i,e,r,o):p==="bottom"&&(n=$(i,e,r,o)),!n);u++);return n?(R(i,p,e,r),r.style.opacity="1",r.style.zIndex=typeof e.zIndex=="string"?e.zIndex:e.zIndex.toString(),!0):!1}function _e(t,e,r,s){var p;(p=r.querySelector(`.${T}`))==null||p.remove();let o={x:0,y:0};s==="absolute"&&(o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect();let d=!1,n=e.tooltipPosition;for(let u=0;u<4&&(n=e.tooltipPositions[e.tooltipPosition][u],n==="left"?d=H(i,e,r,o):n==="top"?d=D(i,e,r,o):n==="right"?d=I(i,e,r,o):n==="bottom"&&(d=$(i,e,r,o)),!d);u++);d&&R(i,n,e,r)}async function L(t,e,r){r!=null&&r.isTooltip&&(h[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();h[e].mouseEventState.currentInstanceId=s,h[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),h[e].mouseEventState.isHoveringOverAnchorElement||h[e].mouseEventState.currentInstanceId!==s))&&l(e)}function H(t,e,r,s){const o=Math.min(t.left-e.tooltipOffsetFromSource-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const u=t.left-e.tooltipOffsetFromSource-n.width;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${u+s.x}px`,!0)}function I(t,e,r,s){const o=Math.min(window.innerWidth-(t.right+e.tooltipOffsetFromSource)-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const u=t.right+e.tooltipOffsetFromSource;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${u+s.x}px`,!0)}function D(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.top-e.tooltipOffsetFromSource-i.height;if(d<e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function $(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.bottom+e.tooltipOffsetFromSource;if(d+i.height>window.innerHeight-e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function R(t,e,r,s){const o=document.createElement("div"),i=s.getBoundingClientRect(),d=Math.sin(45*(180/Math.PI))*r.arrowSize,n=1;let p=0,u=0,a="";switch(e){case"left":a="!zt-border-y-transparent !zt-border-r-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,u=i.width-r.tooltipBorderWidth-n;break;case"top":a="!zt-border-x-transparent !zt-border-b-transparent",p=i.height-r.tooltipBorderWidth-n,u=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break;case"right":a="!zt-border-y-transparent !zt-border-l-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,u=-r.arrowSize*2-r.tooltipBorderWidth+n;break;case"bottom":a="!zt-border-x-transparent !zt-border-t-transparent",p=-r.arrowSize*2-r.tooltipBorderWidth+n,u=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break}e==="left"||e==="right"?_(e,i,p,r)||(p=E(e,i,p,r)):_(e,i,u,r)||(u=E(e,i,u,r));const y=T+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${u}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function _(t,e,r,s){switch(t){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function E(t,e,r,s){switch(t){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function l(t){var r,s;const e=(r=h[t])==null?void 0:r.tooltipElement;we(t),ue(),(s=e.querySelector(`.${T}`))==null||s.remove(),e.style.left="0",e.style.top="0",e.remove()}function f(t){const e=t.tooltipElement.dataset.uuid;e&&(me(e),l(e),delete h[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",Le(e))}}});
|
|
1
|
+
(function(m,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(m=typeof globalThis<"u"?globalThis:m||self,m.ZeroTooltip=c(m.Vue))})(this,function(m){"use strict";const c="";let v;const te=new Uint8Array(16);function re(){if(!v&&(v=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!v))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return v(te)}const w=[];for(let t=0;t<256;++t)w.push((t+256).toString(16).slice(1));function se(t,e=0){return w[t[e+0]]+w[t[e+1]]+w[t[e+2]]+w[t[e+3]]+"-"+w[t[e+4]]+w[t[e+5]]+"-"+w[t[e+6]]+w[t[e+7]]+"-"+w[t[e+8]]+w[t[e+9]]+"-"+w[t[e+10]]+w[t[e+11]]+w[t[e+12]]+w[t[e+13]]+w[t[e+14]]+w[t[e+15]]}const z={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function oe(t,e,r){if(z.randomUUID&&!e&&!t)return z.randomUUID();t=t||{};const s=t.random||(t.rng||re)();if(s[6]=s[6]&15|64,s[8]=s[8]&63|128,e){r=r||0;for(let o=0;o<16;++o)e[r+o]=s[o];return e}return se(s)}function ie(){let t=[];const e=(o,i)=>{r(o);for(const d of t)d.element.addEventListener("scroll",()=>{i(),s()},{signal:d.eventController.signal})},r=o=>{let i=o;for(;i!==null&&i.tagName!=="HTML";){if(i.scrollHeight!==i.clientHeight){const n=window.getComputedStyle(i);if(n.overflow==="auto"||n.overflow==="scroll"){const p={element:i,eventController:new AbortController};t.push(p)}}i=i.parentElement}const d={element:window,eventController:new AbortController};t.push(d)},s=()=>{for(const o of t)o.eventController.abort();t=[]};return{handleHideOnScroll:e,removeHideOnScrollListeners:s}}function ne(){const t={},e={};return{handleHideOnResize:(o,i,d)=>{let n=new ResizeObserver(p=>{const h=p[0].target;if(!e[o])e[o]=i.getBoundingClientRect();else{const a=h.getBoundingClientRect();(a.left!==e[o].left||a.top!==e[o].top||a.width!==e[o].width||a.height!==e[o].height)&&d()}});t[o]=n,n.observe(i)},resetResizeReferences:o=>{t[o]&&t[o].disconnect(),delete t[o],delete e[o]}}}function de(){const t={};return{handleRepositionOnResize:(s,o)=>{t[s]=new AbortController,window.addEventListener("resize",o)},removeRepositionOnResizeHandler:s=>{t[s]&&t[s].abort()}}}const{handleHideOnScroll:pe,removeHideOnScrollListeners:he}=ie(),{handleHideOnResize:ue,resetResizeReferences:we}=ne(),{handleRepositionOnResize:ae,removeRepositionOnResizeHandler:me}=de(),M="zero-tooltip__container",S="zero-tooltip__text",T="zero-tooltip__arrow",O={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]},ce="body",ve="top",Oe=10,le=20,ye=100,Te=250,xe=0,W="zt-fixed zt-opacity-0 zt-inline-block zt-w-fit zt-py-1.5 zt-px-2.5 zt-rounded-md zt-bg-[#495057] zt-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] zt-box-border",V="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",fe=5,Fe="zt-absolute zt-border-solid zt-border-[#495057]",ze=6,Me=1,Se=!0,We=0,Ve=0,Be=!1,Ae=!0,u={},Le=t=>({created:(e,r,s)=>{const o=oe();s.el.$_tooltip={uuid:o,previousValue:r.value,prevArg:r.arg},x(r.value,t,r.arg,e,o),typeof r.value!="string"&&m.isReactive(r.value)&&m.watch(r.value,i=>{u[o]&&f(u[o]),x(i,t,r.arg,e,o)})},updated:(e,r,s)=>{const o=s.el.$_tooltip.uuid,i=s.el.$_tooltip.prevValue,d=s.el.$_tooltip.prevArg;(!(i===r.value||typeof i=="object"&&typeof r.value=="object"&&JSON.stringify(i)===JSON.stringify(r.value))||d!==r.arg)&&(u[o]&&f(u[o]),x(r.value,t,r.arg,e,o),s.el.$_tooltip.prevValue=r.value,s.el.$_tooltip.prevArg=r.arg)},beforeUnmount:(e,r,s)=>{const o=s.el.$_tooltip.uuid;u[o]&&f(u[o])}});function x(t,e,r,s,o){let i=He(t,e,r);const d=De(s,i,o);u[o]=d,s.matches(":hover")&&s.dispatchEvent(new Event("mouseenter"))}function He(t,e,r){var Y,G,K,Q,b,C,g,ee;let s=(e==null?void 0:e.appendTo)??ce,o=Ie(t),i=r??(e==null?void 0:e.defaultPosition)??ve,d={left:((Y=e==null?void 0:e.positions)==null?void 0:Y.left)??O.left,top:((G=e==null?void 0:e.positions)==null?void 0:G.top)??O.top,right:((K=e==null?void 0:e.positions)==null?void 0:K.right)??O.right,bottom:((Q=e==null?void 0:e.positions)==null?void 0:Q.bottom)??O.bottom},n=(e==null?void 0:e.offsetFromSource)??Oe,p=(e==null?void 0:e.offsetFromViewport)??le,h=(e==null?void 0:e.minWidth)??ye,a=(e==null?void 0:e.maxWidth)??Te,y=(e==null?void 0:e.tooltipBorderWidth)??xe,P=M+" "+W+" "+((e==null?void 0:e.tooltipClasses)??""),k=S+" "+V+" "+((e==null?void 0:e.textClasses)??""),j=(e==null?void 0:e.arrowSize)??fe,q=(e==null?void 0:e.arrowClasses)??"",N=(e==null?void 0:e.arrowMinOffsetFromTooltipCorner)??ze,U=(e==null?void 0:e.zIndex)??Me,F=Se,Z=(e==null?void 0:e.showDelay)??We,J=(e==null?void 0:e.hideDelay)??Ve,X=Be,Ee=(e==null?void 0:e.showWarnings)??Ae;return typeof t!="string"&&(t.appendTo!==void 0&&(s=t.appendTo),r===void 0&&t.defaultPosition!==void 0&&(i=t.defaultPosition),((b=t.positions)==null?void 0:b.left)!==void 0&&(d.left=t.positions.left),((C=t.positions)==null?void 0:C.top)!==void 0&&(d.top=t.positions.top),((g=t.positions)==null?void 0:g.right)!==void 0&&(d.right=t.positions.right),((ee=t.positions)==null?void 0:ee.bottom)!==void 0&&(d.bottom=t.positions.bottom),t.offsetFromSource!==void 0&&(n=t.offsetFromSource),t.offsetFromViewport!==void 0&&(p=t.offsetFromViewport),t.minWidth!==void 0&&(h=t.minWidth),t.maxWidth!==void 0&&(a=t.maxWidth),t.tooltipBorderWidth!==void 0&&(y=t.tooltipBorderWidth),t.tooltipClasses!==void 0&&(P=M+" "+W+" "+t.tooltipClasses),t.textClasses!==void 0&&(k=S+" "+V+" "+t.textClasses),t.arrowSize!==void 0&&(j=t.arrowSize),t.arrowClasses!==void 0&&(q=t.arrowClasses),t.arrowMinOffsetFromTooltipCorner!==void 0&&(N=t.arrowMinOffsetFromTooltipCorner),t.zIndex!==void 0&&(U=t.zIndex),t.showDelay!==void 0&&(Z=t.showDelay),t.hideDelay!==void 0&&(J=t.hideDelay),t.alwaysOn!==void 0&&(F=!1,X=t.alwaysOn),t.show!==void 0&&(F=t.show)),{appendTo:s,tooltipText:o,tooltipPosition:i,tooltipPositions:d,tooltipOffsetFromSource:n,tooltipOffsetFromViewport:p,tooltipMinWidth:h,tooltipMaxWidth:a,tooltipBorderWidth:y,tooltipClasses:P,textClasses:k,arrowSize:j,arrowClasses:q,arrowMinOffsetFromTooltipCorner:N,zIndex:U,shouldShow:F,showDelay:Z,hideDelay:J,alwaysOn:X,showWarnings:Ee}}function Ie(t){if(t==null)return"";if(typeof t=="string")return t;if(Object.hasOwn(t,"content")){if(t.content===void 0||t.content===null)return"";if(typeof t.content=="string")return t.content}throw new Error("Tooltip text or 'content' option must be defined with correct type")}function De(t,e,r){let s=t,o=$e(e.textClasses,e.tooltipText),i=Re(e.tooltipClasses,e.tooltipBorderWidth);i.append(o),i.dataset.uuid=r;const d={currentInstanceId:Date.now(),isHoveringOverAnchorElement:!1,lastTooltipMouseLeaveTimestamp:0},n={anchorElementMouseEnter:new AbortController,anchorElementMouseLeave:new AbortController,tooltipElementMouseEnter:new AbortController,tooltipElementMouseLeave:new AbortController};return e.tooltipText===""?e.shouldShow&&e.showWarnings&&console.warn("Tooltip text is empty"):e.alwaysOn?queueMicrotask(()=>{A(s,e,i,"absolute"),ae(r,()=>_e(s,e,i,"absolute"))}):(s.addEventListener("mouseenter",()=>B(s,e,i,r),{signal:n.anchorElementMouseEnter.signal}),s.addEventListener("mouseleave",()=>L(e,r),{signal:n.anchorElementMouseLeave.signal}),i.addEventListener("mouseenter",()=>B(s,e,i,r,{isTooltip:!0}),{signal:n.tooltipElementMouseEnter.signal}),i.addEventListener("mouseleave",()=>L(e,r,{isTooltip:!0}),{signal:n.tooltipElementMouseLeave.signal})),{anchorElement:s,tooltipConfig:e,tooltipElement:i,mouseEnterEventControllers:n,mouseEventState:d}}function $e(t,e){let r=document.createElement("p");return r.classList.add(...t.trim().split(" ")),r.innerHTML=e,r}function Re(t,e){let r=document.createElement("div");return r.classList.add(...t.trim().split(" ")),r.style.borderWidth=`${e}px`,r}async function B(t,e,r,s,o){if(u[s]===void 0||!e.shouldShow)return;let i=o!=null&&o.isTooltip?0:e.showDelay;const d=100;!(o!=null&&o.isTooltip)&&Date.now()-u[s].mouseEventState.lastTooltipMouseLeaveTimestamp<=d&&(i=0);const n=Date.now();if(u[s].mouseEventState.currentInstanceId=n,u[s].mouseEventState.isHoveringOverAnchorElement=!0,i>0&&(await new Promise(h=>setTimeout(h,i)),!u[s].mouseEventState.isHoveringOverAnchorElement||u[s].mouseEventState.currentInstanceId!==n))return;A(t,e,r)&&(pe(t,()=>l(s)),ue(s,t,()=>l(s)))}function A(t,e,r,s){let o={x:0,y:0};s==="absolute"&&(r.classList.replace("zt-fixed","zt-absolute"),o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect(),d=document.querySelector(e.appendTo);d==null||d.appendChild(r);let n=!1,p=e.tooltipPosition;for(let h=0;h<4&&(p=e.tooltipPositions[e.tooltipPosition][h],p==="left"?n=H(i,e,r,o):p==="top"?n=D(i,e,r,o):p==="right"?n=I(i,e,r,o):p==="bottom"&&(n=$(i,e,r,o)),!n);h++);return n?(R(i,p,e,r),r.style.opacity="1",r.style.zIndex=typeof e.zIndex=="string"?e.zIndex:e.zIndex.toString(),!0):!1}function _e(t,e,r,s){var p;(p=r.querySelector(`.${T}`))==null||p.remove();let o={x:0,y:0};s==="absolute"&&(o.x=window.scrollX,o.y=window.scrollY);const i=t.getBoundingClientRect();let d=!1,n=e.tooltipPosition;for(let h=0;h<4&&(n=e.tooltipPositions[e.tooltipPosition][h],n==="left"?d=H(i,e,r,o):n==="top"?d=D(i,e,r,o):n==="right"?d=I(i,e,r,o):n==="bottom"&&(d=$(i,e,r,o)),!d);h++);d&&R(i,n,e,r)}async function L(t,e,r){r!=null&&r.isTooltip&&(u[e].mouseEventState.lastTooltipMouseLeaveTimestamp=Date.now());const s=Date.now();u[e].mouseEventState.currentInstanceId=s,u[e].mouseEventState.isHoveringOverAnchorElement=!1,!(t.hideDelay>0&&(await new Promise(o=>setTimeout(o,t.hideDelay)),u[e].mouseEventState.isHoveringOverAnchorElement||u[e].mouseEventState.currentInstanceId!==s))&&l(e)}function H(t,e,r,s){const o=Math.min(t.left-e.tooltipOffsetFromSource-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const h=t.left-e.tooltipOffsetFromSource-n.width;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${h+s.x}px`,!0)}function I(t,e,r,s){const o=Math.min(window.innerWidth-(t.right+e.tooltipOffsetFromSource)-e.tooltipOffsetFromViewport,e.tooltipMaxWidth),i=t.top>=e.tooltipOffsetFromViewport,d=window.innerHeight-t.bottom>=e.tooltipOffsetFromViewport;if(o<e.tooltipMinWidth||!i||!d)return!1;r.style.maxWidth=`${o}px`;const n=r.getBoundingClientRect();let p=t.top+t.height/2-n.height/2;p<e.tooltipOffsetFromViewport?p=e.tooltipOffsetFromViewport:p+n.height>window.innerHeight-e.tooltipOffsetFromViewport&&(p=window.innerHeight-e.tooltipOffsetFromViewport-n.height);const h=t.right+e.tooltipOffsetFromSource;return t.bottom<p+e.arrowMinOffsetFromTooltipCorner*2||t.top>p+n.height-e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${p+s.y}px`,r.style.left=`${h+s.x}px`,!0)}function D(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.top-e.tooltipOffsetFromSource-i.height;if(d<e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function $(t,e,r,s){const o=Math.min(window.innerWidth-e.tooltipOffsetFromViewport*2,e.tooltipMaxWidth);r.style.maxWidth=`${o}px`;const i=r.getBoundingClientRect();let d=t.bottom+e.tooltipOffsetFromSource;if(d+i.height>window.innerHeight-e.tooltipOffsetFromViewport)return!1;let n=t.left+t.width/2-i.width/2;return n<e.tooltipOffsetFromViewport?n=e.tooltipOffsetFromViewport:n+i.width>window.innerWidth-e.tooltipOffsetFromViewport&&(n=window.innerWidth-e.tooltipOffsetFromViewport-i.width),t.left>n+i.width-e.arrowMinOffsetFromTooltipCorner*2||t.right<n+e.arrowMinOffsetFromTooltipCorner*2?!1:(r.style.top=`${d+s.y}px`,r.style.left=`${n+s.x}px`,!0)}function R(t,e,r,s){const o=document.createElement("div"),i=s.getBoundingClientRect(),d=Math.sin(45*(180/Math.PI))*r.arrowSize,n=1;let p=0,h=0,a="";switch(e){case"left":a="!zt-border-y-transparent !zt-border-r-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,h=i.width-r.tooltipBorderWidth-n;break;case"top":a="!zt-border-x-transparent !zt-border-b-transparent",p=i.height-r.tooltipBorderWidth-n,h=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break;case"right":a="!zt-border-y-transparent !zt-border-l-transparent",p=t.top-i.top+t.height/2-d-r.tooltipBorderWidth,h=-r.arrowSize*2-r.tooltipBorderWidth+n;break;case"bottom":a="!zt-border-x-transparent !zt-border-t-transparent",p=-r.arrowSize*2-r.tooltipBorderWidth+n,h=t.left-i.left+t.width/2-d-r.tooltipBorderWidth;break}e==="left"||e==="right"?_(e,i,p,r)||(p=E(e,i,p,r)):_(e,i,h,r)||(h=E(e,i,h,r));const y=T+" "+Fe+" "+a+" "+r.arrowClasses;o.classList.add(...y.trim().split(" ")),o.style.top=`${p}px`,o.style.left=`${h}px`,o.style.borderWidth=`${r.arrowSize}px`,s.appendChild(o)}function _(t,e,r,s){switch(t){case"left":case"right":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.height+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r>s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth&&r<e.width+s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function E(t,e,r,s){switch(t){case"left":case"right":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.height-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2;case"top":case"bottom":return r<s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth?s.arrowMinOffsetFromTooltipCorner-s.tooltipBorderWidth:e.width-s.tooltipBorderWidth-s.arrowMinOffsetFromTooltipCorner-s.arrowSize*2}}function l(t){var r,s;const e=(r=u[t])==null?void 0:r.tooltipElement;we(t),he(),(s=e.querySelector(`.${T}`))==null||s.remove(),e.style.left="0",e.style.top="0",e.remove()}function f(t){const e=t.tooltipElement.dataset.uuid;e&&(me(e),l(e),delete u[e]);for(const r of Object.values(t.mouseEnterEventControllers))r.abort()}return{install:(t,e={})=>{t.directive("tooltip",Le(e))}}});
|
package/package.json
CHANGED
package/src/tooltip.ts
CHANGED
|
@@ -286,7 +286,7 @@ async function onMouseEnter(
|
|
|
286
286
|
uuid: string,
|
|
287
287
|
options?: { isTooltip?: boolean }
|
|
288
288
|
) {
|
|
289
|
-
if (!tooltipConfig.shouldShow) return
|
|
289
|
+
if (tooltips[uuid] === undefined || !tooltipConfig.shouldShow) return
|
|
290
290
|
|
|
291
291
|
let _showDelay = options?.isTooltip ? 0 : tooltipConfig.showDelay
|
|
292
292
|
|