zero-tooltip 0.0.7 → 0.0.8
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 +3 -3
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +1 -1
- package/src/tooltip.ts +3 -3
package/dist/zero-tooltip.js
CHANGED
|
@@ -17,9 +17,9 @@ const J = 10, K = 20, P = 100, Q = 250, U = 0, X = "zt-absolute zt-opacity-0 zt-
|
|
|
17
17
|
return {
|
|
18
18
|
mounted: (y, O) => {
|
|
19
19
|
const A = O.arg ?? S, V = O.value, z = document.createElement("p");
|
|
20
|
-
z.classList.add(k), z.innerText = V;
|
|
20
|
+
z.classList.add(...k.split(" ")), z.innerText = V;
|
|
21
21
|
const d = document.createElement("div");
|
|
22
|
-
d.classList.add(_), d.style.borderWidth = `${a}px`, d.appendChild(z);
|
|
22
|
+
d.classList.add(..._.split(" ")), d.style.borderWidth = `${a}px`, d.appendChild(z);
|
|
23
23
|
function q(e) {
|
|
24
24
|
const i = Math.min(e.left - u - l, x), o = e.top >= l, r = window.innerHeight - e.bottom >= l;
|
|
25
25
|
if (i < C || !o || !r)
|
|
@@ -82,7 +82,7 @@ const J = 10, K = 20, P = 100, Q = 250, U = 0, X = "zt-absolute zt-opacity-0 zt-
|
|
|
82
82
|
}
|
|
83
83
|
i === "left" || i === "right" ? F(i, r, p) || (p = v(i, r, p)) : F(i, r, n) || (n = v(i, r, n));
|
|
84
84
|
const j = H + " " + E + " " + f + " " + (t == null ? void 0 : t.arrowClasses);
|
|
85
|
-
o.classList.add(j), o.style.top = `${p}px`, o.style.left = `${n}px`, o.style.borderWidth = `${w}px`, (B = document.querySelector(`.${W}`)) == null || B.appendChild(o);
|
|
85
|
+
o.classList.add(...j.split(" ")), o.style.top = `${p}px`, o.style.left = `${n}px`, o.style.borderWidth = `${w}px`, (B = document.querySelector(`.${W}`)) == null || B.appendChild(o);
|
|
86
86
|
}
|
|
87
87
|
function F(e, i, o) {
|
|
88
88
|
switch (e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(w,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(w=typeof globalThis<"u"?globalThis:w||self,w.ZeroTooltip=b())})(this,function(){"use strict";const w="zero-tooltip__container",b="zero-tooltip__text",C="zero-tooltip__arrow",m={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]};let M="top";const k=10,V=20,q=100,Z=250,j=0,D="zt-absolute 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",I="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",N=5,G="zt-absolute zt-border-solid zt-border-[#495057]",J=6,K=t=>{var L,O,A,F;t!=null&&t.defaultPosition&&(M=t.defaultPosition);const y={left:((L=t==null?void 0:t.positions)==null?void 0:L.left)??m.left,top:((O=t==null?void 0:t.positions)==null?void 0:O.top)??m.top,right:((A=t==null?void 0:t.positions)==null?void 0:A.right)??m.right,bottom:((F=t==null?void 0:t.positions)==null?void 0:F.bottom)??m.bottom},f=(t==null?void 0:t.offsetFromSource)??k,l=(t==null?void 0:t.offsetFromViewport)??V,$=(t==null?void 0:t.minWidth)??q,z=(t==null?void 0:t.maxWidth)??Z,a=(t==null?void 0:t.tooltipBorderWidth)??j,Q=w+" "+D+" "+(t==null?void 0:t.tooltipClasses),U=b+" "+I+" "+(t==null?void 0:t.textClasses),u=(t==null?void 0:t.arrowSize)??N,n=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??J;return{mounted:(T,v)=>{const B=v.arg??M,X=v.value,W=document.createElement("p");W.classList.add(U),W.innerText=X;const
|
|
1
|
+
(function(w,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(w=typeof globalThis<"u"?globalThis:w||self,w.ZeroTooltip=b())})(this,function(){"use strict";const w="zero-tooltip__container",b="zero-tooltip__text",C="zero-tooltip__arrow",m={left:["left","right","top","bottom"],top:["top","bottom","right","left"],right:["right","left","top","bottom"],bottom:["bottom","top","right","left"]};let M="top";const k=10,V=20,q=100,Z=250,j=0,D="zt-absolute 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",I="zt-text-sm zt-text-white zt-whitespace-pre-wrap zt-break-words",N=5,G="zt-absolute zt-border-solid zt-border-[#495057]",J=6,K=t=>{var L,O,A,F;t!=null&&t.defaultPosition&&(M=t.defaultPosition);const y={left:((L=t==null?void 0:t.positions)==null?void 0:L.left)??m.left,top:((O=t==null?void 0:t.positions)==null?void 0:O.top)??m.top,right:((A=t==null?void 0:t.positions)==null?void 0:A.right)??m.right,bottom:((F=t==null?void 0:t.positions)==null?void 0:F.bottom)??m.bottom},f=(t==null?void 0:t.offsetFromSource)??k,l=(t==null?void 0:t.offsetFromViewport)??V,$=(t==null?void 0:t.minWidth)??q,z=(t==null?void 0:t.maxWidth)??Z,a=(t==null?void 0:t.tooltipBorderWidth)??j,Q=w+" "+D+" "+(t==null?void 0:t.tooltipClasses),U=b+" "+I+" "+(t==null?void 0:t.textClasses),u=(t==null?void 0:t.arrowSize)??N,n=(t==null?void 0:t.arrowMinOffsetFromTooltipCorner)??J;return{mounted:(T,v)=>{const B=v.arg??M,X=v.value,W=document.createElement("p");W.classList.add(...U.split(" ")),W.innerText=X;const d=document.createElement("div");d.classList.add(...Q.split(" ")),d.style.borderWidth=`${a}px`,d.appendChild(W);function Y(e){const s=Math.min(e.left-f-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.left-f-i.width;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function g(e){const s=Math.min(window.innerWidth-(e.right+f)-l,z),o=e.top>=l,r=window.innerHeight-e.bottom>=l;if(s<$||!o||!r)return!1;d.style.maxWidth=`${s}px`;const i=d.getBoundingClientRect();let p=e.top+e.height/2-i.height/2;p<l?p=l:p+i.height>window.innerHeight-l&&(p=window.innerHeight-l-i.height);const h=e.right+f;return e.bottom<p+n*2||e.top>p+i.height-n*2?!1:(d.style.top=`${p}px`,d.style.left=`${h}px`,!0)}function E(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.top-f-o.height;if(r<l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function R(e){const s=Math.min(window.innerWidth-l*2,z);d.style.maxWidth=`${s}px`;const o=d.getBoundingClientRect();let r=e.bottom+f;if(r+o.height>window.innerHeight-l)return!1;let i=e.left+e.width/2-o.width/2;return i<l?i=l:i+o.width>window.innerWidth-l&&(i=window.innerWidth-l-o.width),e.left>i+o.width-n*2||e.right<i+n*2?!1:(d.style.top=`${r}px`,d.style.left=`${i}px`,!0)}function c(e,s){var _;const o=document.createElement("div"),r=d.getBoundingClientRect(),i=Math.sin(45*(180/Math.PI))*u;let p=0,h=0,x="";switch(s){case"left":x="zt-border-y-transparent zt-border-r-transparent",p=e.top-r.top+e.height/2-i-a,h=r.width-a;break;case"top":x="zt-border-x-transparent zt-border-b-transparent",p=r.height-a,h=e.left-r.left+e.width/2-i-a;break;case"right":x="zt-border-y-transparent zt-border-l-transparent",p=e.top-r.top+e.height/2-i-a,h=-u*2-a;break;case"bottom":x="zt-border-x-transparent zt-border-t-transparent",p=-u*2-a,h=e.left-r.left+e.width/2-i-a;break}s==="left"||s==="right"?S(s,r,p)||(p=H(s,r,p)):S(s,r,h)||(h=H(s,r,h));const tt=C+" "+G+" "+x+" "+(t==null?void 0:t.arrowClasses);o.classList.add(...tt.split(" ")),o.style.top=`${p}px`,o.style.left=`${h}px`,o.style.borderWidth=`${u}px`,(_=document.querySelector(`.${w}`))==null||_.appendChild(o)}function S(e,s,o){switch(e){case"left":case"right":return o>n-a&&o<s.height+a-n-u*2;case"top":case"bottom":return o>n-a&&o<s.width+a-n-u*2}}function H(e,s,o){switch(e){case"left":case"right":return o<n-a?n-a:s.height-a-n-u*2;case"top":case"bottom":return o<n-a?n-a:s.width-a-n-u*2}}T.addEventListener("mouseenter",()=>{const e=T.getBoundingClientRect(),s=document.querySelector("body");s==null||s.appendChild(d);let o=!1,r=B;for(let i=0;i<4&&(r=y[B][i],r==="left"?o=Y(e):r==="top"?o=E(e):r==="right"?o=g(e):r==="bottom"&&(o=R(e)),!o);i++);o&&(c(e,r),d.style.opacity="1")}),T.addEventListener("mouseleave",()=>P())}}};function P(){var y;const t=document.querySelector(`.${w}`);(y=t==null?void 0:t.querySelector(`.${C}`))==null||y.remove(),t==null||t.remove()}return K});
|
package/package.json
CHANGED
package/src/tooltip.ts
CHANGED
|
@@ -58,12 +58,12 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
58
58
|
|
|
59
59
|
// Create Text element
|
|
60
60
|
const textElement = document.createElement('p')
|
|
61
|
-
textElement.classList.add(textClasses)
|
|
61
|
+
textElement.classList.add(...textClasses.split(' '))
|
|
62
62
|
textElement.innerText = text
|
|
63
63
|
|
|
64
64
|
// Create Tooltip element
|
|
65
65
|
const tooltipElement = document.createElement('div')
|
|
66
|
-
tooltipElement.classList.add(tooltipClasses)
|
|
66
|
+
tooltipElement.classList.add(...tooltipClasses.split(' '))
|
|
67
67
|
tooltipElement.style.borderWidth = `${tooltipBorderWidth}px`
|
|
68
68
|
tooltipElement.appendChild(textElement)
|
|
69
69
|
|
|
@@ -249,7 +249,7 @@ const ZeroTooltip = (config?: TooltipConfig): Directive => {
|
|
|
249
249
|
|
|
250
250
|
// Set Arrow element id, styling/angle
|
|
251
251
|
const arrowClasses = arrowElementClass + ' ' + defaultArrowClasses + ' ' + arrowClassForCorrectAngle + ' ' + config?.arrowClasses ?? ''
|
|
252
|
-
arrowElement.classList.add(arrowClasses)
|
|
252
|
+
arrowElement.classList.add(...arrowClasses.split(' '))
|
|
253
253
|
|
|
254
254
|
// Set Arrow element size and position
|
|
255
255
|
arrowElement.style.top = `${arrowTop}px`
|