New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@svelte-plugins/tooltips
Advanced tools
@svelte-plugins/tooltips - npm Package Compare versions
Comparing version 2.2.0 to 3.0.0
@@ -1,35 +0,2 @@ | ||
| (function(_,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("svelte")):typeof define=="function"&&define.amd?define(["exports","svelte"],w):(_=typeof globalThis<"u"?globalThis:_||self,w(_.SvelteTooltips={},_.svelte))})(this,function(_,w){"use strict";var co=Object.defineProperty;var po=(_,w,k)=>w in _?co(_,w,{enumerable:!0,configurable:!0,writable:!0,value:k}):_[w]=k;var C=(_,w,k)=>(po(_,typeof w!="symbol"?w+"":w,k),k);function k(){}function Pt(t,o){for(const e in o)t[e]=o[e];return t}function it(t){return t()}function nt(){return Object.create(null)}function I(t){t.forEach(it)}function lt(t){return typeof t=="function"}function at(t,o){return t!=t?o==o:t!==o||t&&typeof t=="object"||typeof t=="function"}function Ct(t){return Object.keys(t).length===0}function rt(t,o,e,i){if(t){const n=st(t,o,e,i);return t[0](n)}}function st(t,o,e,i){return t[1]&&i?Pt(e.ctx.slice(),t[1](i(o))):e.ctx}function ft(t,o,e,i){if(t[2]&&i){const n=t[2](i(e));if(o.dirty===void 0)return n;if(typeof n=="object"){const l=[],c=Math.max(o.dirty.length,n.length);for(let f=0;f<c;f+=1)l[f]=o.dirty[f]|n[f];return l}return o.dirty|n}return o.dirty}function ct(t,o,e,i,n,l){if(n){const c=st(o,e,i,l);t.p(c,n)}}function pt(t){if(t.ctx.length>32){const o=[],e=t.ctx.length/32;for(let i=0;i<e;i++)o[i]=-1;return o}return-1}function St(t,o){t.appendChild(o)}function ut(t,o,e){const i=Rt(t);if(!i.getElementById(o)){const n=D("style");n.id=o,n.textContent=e,Nt(i,n)}}function Rt(t){if(!t)return document;const o=t.getRootNode?t.getRootNode():t.ownerDocument;return o&&o.host?o:t.ownerDocument}function Nt(t,o){return St(t.head||t,o),o.sheet}function T(t,o,e){t.insertBefore(o,e||null)}function L(t){t.parentNode&&t.parentNode.removeChild(t)}function D(t){return document.createElement(t)}function Mt(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function mt(t){return document.createTextNode(t)}function At(){return mt(" ")}function q(){return mt("")}function dt(t,o,e,i){return t.addEventListener(o,e,i),()=>t.removeEventListener(o,e,i)}function V(t,o,e){e==null?t.removeAttribute(o):t.getAttribute(o)!==e&&t.setAttribute(o,e)}function Wt(t){return Array.from(t.childNodes)}function d(t,o,e,i){e==null?t.style.removeProperty(o):t.style.setProperty(o,e,i?"important":"")}function P(t,o,e){t.classList.toggle(o,!!e)}class ht{constructor(o=!1){C(this,"is_svg",!1);C(this,"e");C(this,"n");C(this,"t");C(this,"a");this.is_svg=o,this.e=this.n=null}c(o){this.h(o)}m(o,e,i=null){this.e||(this.is_svg?this.e=Mt(e.nodeName):this.e=D(e.nodeType===11?"TEMPLATE":e.nodeName),this.t=e.tagName!=="TEMPLATE"?e:e.content,this.c(o)),this.i(i)}h(o){this.e.innerHTML=o,this.n=Array.from(this.e.nodeName==="TEMPLATE"?this.e.content.childNodes:this.e.childNodes)}i(o){for(let e=0;e<this.n.length;e+=1)T(this.t,this.n[e],o)}p(o){this.d(),this.h(o),this.i(this.a)}d(){this.n.forEach(L)}}let $;function U(t){$=t}const M=[],F=[];let A=[];const gt=[],Bt=Promise.resolve();let tt=!1;function Ot(){tt||(tt=!0,Bt.then(vt))}function ot(t){A.push(t)}const et=new Set;let W=0;function vt(){if(W!==0)return;const t=$;do{try{for(;W<M.length;){const o=M[W];W++,U(o),Ht(o.$$)}}catch(o){throw M.length=0,W=0,o}for(U(null),M.length=0,W=0;F.length;)F.pop()();for(let o=0;o<A.length;o+=1){const e=A[o];et.has(e)||(et.add(e),e())}A.length=0}while(M.length);for(;gt.length;)gt.pop()();tt=!1,et.clear(),U(t)}function Ht(t){if(t.fragment!==null){t.update(),I(t.before_update);const o=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,o),t.after_update.forEach(ot)}}function It(t){const o=[],e=[];A.forEach(i=>t.indexOf(i)===-1?o.push(i):e.push(i)),e.forEach(i=>i()),A=o}const K=new Set;let S;function Dt(){S={r:0,c:[],p:S}}function Vt(){S.r||I(S.c),S=S.p}function X(t,o){t&&t.i&&(K.delete(t),t.i(o))}function G(t,o,e,i){if(t&&t.o){if(K.has(t))return;K.add(t),S.c.push(()=>{K.delete(t),i&&(e&&t.d(1),i())}),t.o(o)}else i&&i()}function Ut(t,o,e){const{fragment:i,after_update:n}=t.$$;i&&i.m(o,e),ot(()=>{const l=t.$$.on_mount.map(it).filter(lt);t.$$.on_destroy?t.$$.on_destroy.push(...l):I(l),t.$$.on_mount=[]}),n.forEach(ot)}function Ft(t,o){const e=t.$$;e.fragment!==null&&(It(e.after_update),I(e.on_destroy),e.fragment&&e.fragment.d(o),e.on_destroy=e.fragment=null,e.ctx=[])}function Xt(t,o){t.$$.dirty[0]===-1&&(M.push(t),Ot(),t.$$.dirty.fill(0)),t.$$.dirty[o/31|0]|=1<<o%31}function yt(t,o,e,i,n,l,c=null,f=[-1]){const s=$;U(t);const a=t.$$={fragment:null,ctx:[],props:l,update:k,not_equal:n,bound:nt(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(o.context||(s?s.$$.context:[])),callbacks:nt(),dirty:f,skip_bound:!1,root:o.target||s.$$.root};c&&c(a.root);let r=!1;if(a.ctx=e?e(t,o.props||{},(m,h,...v)=>{const x=v.length?v[0]:h;return a.ctx&&n(a.ctx[m],a.ctx[m]=x)&&(!a.skip_bound&&a.bound[m]&&a.bound[m](x),r&&Xt(t,m)),h}):[],a.update(),r=!0,I(a.before_update),a.fragment=i?i(a.ctx):!1,o.target){if(o.hydrate){const m=Wt(o.target);a.fragment&&a.fragment.l(m),m.forEach(L)}else a.fragment&&a.fragment.c();o.intro&&X(t.$$.fragment),Ut(t,o.target,o.anchor),vt()}U(s)}class bt{constructor(){C(this,"$$");C(this,"$$set")}$destroy(){Ft(this,1),this.$destroy=k}$on(o,e){if(!lt(e))return k;const i=this.$$.callbacks[o]||(this.$$.callbacks[o]=[]);return i.push(e),()=>{const n=i.indexOf(e);n!==-1&&i.splice(n,1)}}$set(o){this.$$set&&!Ct(o)&&(this.$$.skip_bound=!0,this.$$set(o),this.$$.skip_bound=!1)}}const Zt="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(Zt);const wt=t=>t.replace(/-_$/g,"").replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])(?=[a-z])/g,"$1-$2").toLowerCase(),_t=(t,o)=>{const i=t.getBoundingClientRect().width+2,n=window.getComputedStyle(t),l=parseInt(n.getPropertyValue("padding-left"),10),c=parseInt(n.getPropertyValue("padding-right"),10),f=l+c,s=i-f;return Math.round(Math.min(o,s||o))},xt=(t,o=null,e)=>{const i=t.getBoundingClientRect(),n=window.innerWidth||document.documentElement.clientWidth,l=window.innerHeight||document.documentElement.clientHeight;let c=i.bottom>0&&i.top<l&&i.right>0&&i.left<n;if(o){const f=o.getBoundingClientRect();return e==="top"||e==="bottom"?c=f.bottom+f.height<l&&f.top<l:c=f.right+f.width<n&&f.left<n,c}return c},Z=(t,o,e,i)=>{if(!t||!o)return i;let n=0,l=0,c=0,f=0,s=0,a=t;for(;a!==document.body;){const x=window.getComputedStyle(a),j=x.position;j==="fixed"?(c+=a.getBoundingClientRect().top+window.scrollY,s+=a.getBoundingClientRect().left+window.scrollX):j==="sticky"?(f+=a.getBoundingClientRect().top,s+=a.getBoundingClientRect().left+window.scrollX):(j==="absolute"||j==="relative")&&(n-=parseFloat(x.top)||0,l-=parseFloat(x.left)||0,j==="relative"&&(n-=a.offsetTop,l-=a.offsetLeft));const E=x.transform;if(E&&E!=="none"){const g=new DOMMatrix(E);n-=g.m42,l-=g.m41}a=a.parentElement}const r=t.getBoundingClientRect(),m=o.getBoundingClientRect();let h=r.top+n+f-c,v=r.left+l-s;switch(e){case"top":i.top=h,i.left=v+r.width/2;break;case"bottom":i.top=h-m.height,i.left=v+r.width/2;break;case"left":i.left=v,i.top=h+r.height/2;break;case"right":i.left=v+r.width-m.width,i.top=h+r.height/2;break}return i.top+=window.scrollY,i.left+=window.scrollX,i},jt={left:"right",right:"left",top:"bottom",bottom:"top"};function Yt(t){ut(t,"svelte-ir0j5h",`:root{--tooltip-arrow-size:10px;--tooltip-background-color:rgba(0, 0, 0, 0.9);--tooltip-border-radius:4px;--tooltip-box-shadow:0 1px 20px rgba(0, 0, 0, 0.25);--tooltip-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, | ||
| 'Helvetica Neue', sans-serif;--tooltip-font-size:14px;--tooltip-font-weight:500;--tooltip-line-height:1.25rem;--tooltip-color:#fff;--tooltip-offset-x:0px;--tooltip-offset-y:0px;--tooltip-padding:12px;--tooltip-pointer-events:none;--tooltip-white-space-hidden:nowrap;--tooltip-white-space-shown:normal;--tooltip-z-index:100}.tooltip.svelte-ir0j5h{background-color:var(--tooltip-background-color);box-shadow:var(--tooltip-box-shadow);border-radius:var(--tooltip-border-radius);color:var(--tooltip-color);opacity:0;font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);font-style:normal;font-weight:var(--tooltip-font-weight);line-height:var(--tooltip-line-height);padding:var(--tooltip-padding);pointer-events:var(--tooltip-pointer-events);position:absolute;text-align:left;visibility:hidden;white-space:var(--tooltip-white-space-hidden);z-index:var(--tooltip-z-index)}.tooltip.show.svelte-ir0j5h{opacity:1;visibility:visible;white-space:var(--tooltip-white-space-shown)}.tooltip.bottom.svelte-ir0j5h:after,.tooltip.left.svelte-ir0j5h:after,.tooltip.right.svelte-ir0j5h:after,.tooltip.top.svelte-ir0j5h:after{border:var(--tooltip-arrow-size) solid var(--tooltip-background-color);content:' ';position:absolute}.tooltip.arrowless.svelte-ir0j5h:after{border:0 !important}.tooltip.bottom.svelte-ir0j5h,.tooltip.top.svelte-ir0j5h{--tooltip-offset-x:0px;--tooltip-offset-y:12px}.tooltip.left.svelte-ir0j5h,.tooltip.right.svelte-ir0j5h{--tooltip-offset-x:12px;--tooltip-offset-y:0px}.tooltip.bottom.svelte-ir0j5h{bottom:0;left:50%;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y)))}.tooltip.bottom.svelte-ir0j5h:after{border-color:transparent transparent var(--tooltip-background-color);left:50%;top:0;transform:translate(-50%, -99%)}.tooltip.top.svelte-ir0j5h{left:50%;top:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y)))}.tooltip.top.svelte-ir0j5h:after{border-color:var(--tooltip-background-color) transparent transparent transparent;bottom:0;left:50%;transform:translate(-50%, 99%)}.tooltip.left.svelte-ir0j5h{left:0;top:50%;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)))}.tooltip.left.svelte-ir0j5h:after{border-color:transparent transparent transparent var(--tooltip-background-color);right:0;top:50%;transform:translate(99%, -50%)}.tooltip.right.svelte-ir0j5h{right:0;top:50%;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)))}.tooltip.right.svelte-ir0j5h:after{border-color:transparent var(--tooltip-background-color) transparent transparent;left:0;top:50%;transform:translate(-99%, -50%)}.tooltip.animation-fade.svelte-ir0j5h{opacity:0;transition:opacity 0.25s ease-in-out}.tooltip.animation-fade.show.svelte-ir0j5h{opacity:1}.tooltip.top.animation-slide.svelte-ir0j5h{margin-top:10px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.top.animation-slide.show.svelte-ir0j5h{margin-top:0;opacity:1}.tooltip.bottom.animation-slide.svelte-ir0j5h{margin-bottom:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.bottom.animation-slide.show.svelte-ir0j5h{margin-bottom:0;opacity:1}.tooltip.right.animation-slide.svelte-ir0j5h{margin-right:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.right.animation-slide.show.svelte-ir0j5h{margin-right:0;opacity:1}.tooltip.left.animation-slide.svelte-ir0j5h{margin-left:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.left.animation-slide.show.svelte-ir0j5h{margin-left:0;opacity:1}.tooltip.left.animation-puff.svelte-ir0j5h{filter:blur(2px);opacity:0;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.left.animation-puff.show.svelte-ir0j5h{filter:blur(0);opacity:1;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.right.animation-puff.svelte-ir0j5h{filter:blur(2px);opacity:0;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.right.animation-puff.show.svelte-ir0j5h{filter:blur(0);opacity:1;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.top.animation-puff.svelte-ir0j5h{filter:blur(2px);opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.top.animation-puff.show.svelte-ir0j5h{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.bottom.animation-puff.svelte-ir0j5h{filter:blur(2px);opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.bottom.animation-puff.show.svelte-ir0j5h{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.left.animation-bounce.svelte-ir0j5h{opacity:0;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.left.animation-bounce.show.svelte-ir0j5h{opacity:1;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.right.animation-bounce.svelte-ir0j5h{opacity:0;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.right.animation-bounce.show.svelte-ir0j5h{opacity:1;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.top.animation-bounce.svelte-ir0j5h{opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.top.animation-bounce.show.svelte-ir0j5h{opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.bottom.animation-bounce.svelte-ir0j5h{opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.bottom.animation-bounce.show.svelte-ir0j5h{opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1)}`)}function qt(t){let o;const e=t[21].default,i=rt(e,t,t[20],null);return{c(){i&&i.c()},m(n,l){i&&i.m(n,l),o=!0},p(n,l){i&&i.p&&(!o||l[0]&1048576)&&ct(i,e,n,n[20],o?ft(e,n[20],l,null):pt(n[20]),null)},i(n){o||(X(i,n),o=!0)},o(n){G(i,n),o=!1},d(n){i&&i.d(n)}}}function Kt(t){let o,e,i,n,l;const c=t[21].default,f=rt(c,t,t[20],null);let s=!t[12]&&kt(t);return{c(){o=D("span"),f&&f.c(),e=At(),i=D("div"),s&&s.c(),V(o,"class","tooltip-container"),V(i,"class",n="tooltip animation-"+t[9]+" "+t[0]+" "+t[4]+" svelte-ir0j5h"),d(i,"bottom","auto"),d(i,"right","auto"),d(i,"left",t[11].left+"px"),d(i,"min-width",t[8]+"px"),d(i,"max-width",t[3]+"px"),d(i,"text-align",t[2]),d(i,"top",t[11].top+"px"),P(i,"arrowless",!t[5]),P(i,"show",t[10])},m(a,r){T(a,o,r),f&&f.m(o,null),t[22](o),T(a,e,r),T(a,i,r),s&&s.m(i,null),t[23](i),l=!0},p(a,r){f&&f.p&&(!l||r[0]&1048576)&&ct(f,c,a,a[20],l?ft(c,a[20],r,null):pt(a[20]),null),a[12]?s&&(s.d(1),s=null):s?s.p(a,r):(s=kt(a),s.c(),s.m(i,null)),(!l||r[0]&529&&n!==(n="tooltip animation-"+a[9]+" "+a[0]+" "+a[4]+" svelte-ir0j5h"))&&V(i,"class",n),(!l||r[0]&2048)&&d(i,"left",a[11].left+"px"),(!l||r[0]&256)&&d(i,"min-width",a[8]+"px"),(!l||r[0]&8)&&d(i,"max-width",a[3]+"px"),(!l||r[0]&4)&&d(i,"text-align",a[2]),(!l||r[0]&2048)&&d(i,"top",a[11].top+"px"),(!l||r[0]&561)&&P(i,"arrowless",!a[5]),(!l||r[0]&1553)&&P(i,"show",a[10])},i(a){l||(X(f,a),l=!0)},o(a){G(f,a),l=!1},d(a){a&&(L(o),L(e),L(i)),f&&f.d(a),t[22](null),s&&s.d(),t[23](null)}}}function kt(t){let o,e;return{c(){o=new ht(!1),e=q(),o.a=e},m(i,n){o.m(t[1],i,n),T(i,e,n)},p(i,n){n[0]&2&&o.p(i[1])},d(i){i&&(L(e),o.d())}}}function Gt(t){let o,e,i,n,l,c;const f=[Kt,qt],s=[];function a(r,m){return r[1]?0:1}return o=a(t),e=s[o]=f[o](t),{c(){e.c(),i=q()},m(r,m){s[o].m(r,m),T(r,i,m),n=!0,l||(c=dt(window,"resize",t[13]),l=!0)},p(r,m){let h=o;o=a(r),o===h?s[o].p(r,m):(Dt(),G(s[h],1,1,()=>{s[h]=null}),Vt(),e=s[o],e?e.p(r,m):(e=s[o]=f[o](r),e.c()),X(e,1),e.m(i.parentNode,i))},i(r){n||(X(e),n=!0)},o(r){G(e),n=!1},d(r){r&&L(i),s[o].d(r),l=!1,c()}}}function Jt(t,o,e){let i,{$$slots:n={},$$scope:l}=o,{action:c="hover"}=o,{content:f=""}=o,{align:s="left"}=o,{position:a="top"}=o,{maxWidth:r=200}=o,{style:m=null}=o,{theme:h=""}=o,{animation:v=""}=o,{delay:x=200}=o,{arrow:j=!0}=o,{autoPosition:E=!1}=o,{show:g=!1}=o,y=null,b=null,Y=0,z=null,R=a,B=null,O=null,N=!1,p={bottom:0,top:0,right:0,left:0};const J=()=>{N?Q():H()},H=()=>{const u=v?x:0;E&&!xt(y,b,a)&&e(0,a=jt[a]),e(11,p=Z(y,b,a,p)),v&&e(9,B=v),O=setTimeout(()=>e(10,N=!0),u)},Q=()=>{console.log("onHide"),e(10,N=!1),e(0,a=R),e(9,B=null),O&&(clearTimeout(O),O=null)},Lt=()=>{y!==null&&(Tt(),c==="click"&&y.addEventListener("click",J),c==="hover"&&(y.addEventListener("mouseenter",H),y.addEventListener("mouseleave",Q)))},Tt=()=>{y!==null&&(y.removeEventListener("click",J),y.removeEventListener("mouseenter",H),y.removeEventListener("mouseleave",Q))};w.onMount(()=>{if(Lt(),Z(),b!==null&&(i&&!z&&(z=new f.component({target:b,props:f.props})),e(8,Y=_t(b,r)),m&&typeof m=="object"))for(let u in m){const so=wt(u),fo=m[u];b.style.setProperty(`--tooltip-${so}`,fo)}}),w.onDestroy(()=>{z&&(z.$destroy(),z=null),Tt()});const lo=()=>{N&&e(11,p=Z(y,b,a,p))};function ao(u){F[u?"unshift":"push"](()=>{y=u,e(7,y)})}function ro(u){F[u?"unshift":"push"](()=>{b=u,e(6,b)})}return t.$$set=u=>{"action"in u&&e(14,c=u.action),"content"in u&&e(1,f=u.content),"align"in u&&e(2,s=u.align),"position"in u&&e(0,a=u.position),"maxWidth"in u&&e(3,r=u.maxWidth),"style"in u&&e(15,m=u.style),"theme"in u&&e(4,h=u.theme),"animation"in u&&e(16,v=u.animation),"delay"in u&&e(17,x=u.delay),"arrow"in u&&e(5,j=u.arrow),"autoPosition"in u&&e(18,E=u.autoPosition),"show"in u&&e(19,g=u.show),"$$scope"in u&&e(20,l=u.$$scope)},t.$$.update=()=>{t.$$.dirty[0]&2&&e(12,i=typeof f=="object"),t.$$.dirty[0]&16384&&Lt(),t.$$.dirty[0]&524352&&(b&&g?H():Q())},[a,f,s,r,h,j,b,y,Y,B,N,p,i,lo,c,m,v,x,E,g,l,n,ao,ro]}const Qt=class extends bt{constructor(o){super(),yt(this,o,Jt,Gt,at,{action:14,content:1,align:2,position:0,maxWidth:3,style:15,theme:4,animation:16,delay:17,arrow:5,autoPosition:18,show:19},Yt,[-1,-1])}};function $t(t){ut(t,"svelte-ngud14",`:root{--tooltip-arrow-size:10px;--tooltip-background-color:rgba(0, 0, 0, 0.9);--tooltip-border-radius:4px;--tooltip-box-shadow:0 1px 20px rgba(0, 0, 0, 0.25);--tooltip-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, | ||
| 'Helvetica Neue', sans-serif;--tooltip-font-size:14px;--tooltip-font-weight:500;--tooltip-line-height:1.25rem;--tooltip-color:#fff;--tooltip-offset-x:12px;--tooltip-offset-y:12px;--tooltip-padding:12px;--tooltip-pointer-events:none;--tooltip-white-space-hidden:nowrap;--tooltip-white-space-shown:normal;--tooltip-z-index:100}.tooltip.svelte-ngud14{background-color:var(--tooltip-background-color);box-shadow:var(--tooltip-box-shadow);border-radius:var(--tooltip-border-radius);color:var(--tooltip-color);opacity:0;font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);font-style:normal;font-weight:var(--tooltip-font-weight);line-height:var(--tooltip-line-height);padding:var(--tooltip-padding);pointer-events:var(---tooltip-pointer-events);position:absolute;text-align:left;visibility:hidden;white-space:var(--tooltip-white-space-hidden);z-index:var(--tooltip-z-index)}.tooltip.show.svelte-ngud14{opacity:1;visibility:visible;white-space:var(--tooltip-white-space-shown)}.tooltip.bottom.svelte-ngud14:after,.tooltip.left.svelte-ngud14:after,.tooltip.right.svelte-ngud14:after,.tooltip.top.svelte-ngud14:after{border:var(--tooltip-arrow-size) solid var(--tooltip-background-color);content:' ';position:absolute}.tooltip.arrowless.svelte-ngud14:after{border:0 !important}.tooltip.bottom.svelte-ngud14,.tooltip.top.svelte-ngud14{--tooltip-offset-x:0px;--tooltip-offset-y:12px}.tooltip.left.svelte-ngud14,.tooltip.right.svelte-ngud14{--tooltip-offset-x:12px;--tooltip-offset-y:0px}.tooltip.bottom.svelte-ngud14{bottom:0;left:50%;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y)))}.tooltip.bottom.svelte-ngud14:after{border-color:transparent transparent var(--tooltip-background-color);left:50%;top:0;transform:translate(-50%, -99%)}.tooltip.top.svelte-ngud14{left:50%;top:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y)))}.tooltip.top.svelte-ngud14:after{border-color:var(--tooltip-background-color) transparent transparent transparent;bottom:0;left:50%;transform:translate(-50%, 99%)}.tooltip.left.svelte-ngud14{left:0;top:50%;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)))}.tooltip.left.svelte-ngud14:after{border-color:transparent transparent transparent var(--tooltip-background-color);right:0;top:50%;transform:translate(99%, -50%)}.tooltip.right.svelte-ngud14{right:0;top:50%;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)))}.tooltip.right.svelte-ngud14:after{border-color:transparent var(--tooltip-background-color) transparent transparent;left:0;top:50%;transform:translate(-99%, -50%)}.tooltip.animation-fade.svelte-ngud14{opacity:0;transition:opacity 0.25s ease-in-out}.tooltip.animation-fade.show.svelte-ngud14{opacity:1}.tooltip.top.animation-slide.svelte-ngud14{margin-top:10px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.top.animation-slide.show.svelte-ngud14{margin-top:0;opacity:1}.tooltip.bottom.animation-slide.svelte-ngud14{margin-bottom:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.bottom.animation-slide.show.svelte-ngud14{margin-bottom:0;opacity:1}.tooltip.right.animation-slide.svelte-ngud14{margin-right:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.right.animation-slide.show.svelte-ngud14{margin-right:0;opacity:1}.tooltip.left.animation-slide.svelte-ngud14{margin-left:20px;opacity:0;transition:opacity 0.25s ease-in-out, | ||
| margin 0.25s ease-in-out}.tooltip.left.animation-slide.show.svelte-ngud14{margin-left:0;opacity:1}.tooltip.left.animation-puff.svelte-ngud14{filter:blur(2px);opacity:0;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.left.animation-puff.show.svelte-ngud14{filter:blur(0);opacity:1;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.right.animation-puff.svelte-ngud14{filter:blur(2px);opacity:0;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.right.animation-puff.show.svelte-ngud14{filter:blur(0);opacity:1;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.top.animation-puff.svelte-ngud14{filter:blur(2px);opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.top.animation-puff.show.svelte-ngud14{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.bottom.animation-puff.svelte-ngud14{filter:blur(2px);opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(2, 2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| filter 0.25s ease-in-out, | ||
| transform 0.25s ease-in-out}.tooltip.bottom.animation-puff.show.svelte-ngud14{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.left.animation-bounce.svelte-ngud14{opacity:0;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.left.animation-bounce.show.svelte-ngud14{opacity:1;transform:translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.right.animation-bounce.svelte-ngud14{opacity:0;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.right.animation-bounce.show.svelte-ngud14{opacity:1;transform:translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1)}.tooltip.top.animation-bounce.svelte-ngud14{opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.top.animation-bounce.show.svelte-ngud14{opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1)}.tooltip.bottom.animation-bounce.svelte-ngud14{opacity:0;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);transform-origin:50% 50%;transition:opacity 0.25s ease-in-out, | ||
| transform 0.25s cubic-bezier(0.5, -1, 0.5, 3)}.tooltip.bottom.animation-bounce.show.svelte-ngud14{opacity:1;transform:translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1)}`)}function Et(t){let o,e,i=!t[11]&&zt(t);return{c(){o=D("div"),i&&i.c(),V(o,"class",e="tooltip animation-"+t[8]+" "+t[0]+" "+t[4]+" svelte-ngud14"),d(o,"bottom","auto"),d(o,"right","auto"),d(o,"left",t[10].left+"px"),d(o,"min-width",t[7]+"px"),d(o,"max-width",t[3]+"px"),d(o,"text-align",t[2]),d(o,"top",t[10].top+"px"),P(o,"show",t[9]),P(o,"arrowless",!t[5])},m(n,l){T(n,o,l),i&&i.m(o,null),t[20](o)},p(n,l){n[11]?i&&(i.d(1),i=null):i?i.p(n,l):(i=zt(n),i.c(),i.m(o,null)),l&273&&e!==(e="tooltip animation-"+n[8]+" "+n[0]+" "+n[4]+" svelte-ngud14")&&V(o,"class",e),l&1024&&d(o,"left",n[10].left+"px"),l&128&&d(o,"min-width",n[7]+"px"),l&8&&d(o,"max-width",n[3]+"px"),l&4&&d(o,"text-align",n[2]),l&1024&&d(o,"top",n[10].top+"px"),l&785&&P(o,"show",n[9]),l&305&&P(o,"arrowless",!n[5])},d(n){n&&L(o),i&&i.d(),t[20](null)}}}function zt(t){let o,e;return{c(){o=new ht(!1),e=q(),o.a=e},m(i,n){o.m(t[1],i,n),T(i,e,n)},p(i,n){n&2&&o.p(i[1])},d(i){i&&(L(e),o.d())}}}function to(t){let o,e,i,n=t[1]&&Et(t);return{c(){n&&n.c(),o=q()},m(l,c){n&&n.m(l,c),T(l,o,c),e||(i=dt(window,"resize",t[12]),e=!0)},p(l,[c]){l[1]?n?n.p(l,c):(n=Et(l),n.c(),n.m(o.parentNode,o)):n&&(n.d(1),n=null)},i:k,o:k,d(l){l&&L(o),n&&n.d(l),e=!1,i()}}}function oo(t,o,e){let i,{targetElement:n=null}=o,{action:l="hover"}=o,{content:c=""}=o,{align:f="left"}=o,{position:s="top"}=o,{maxWidth:a=200}=o,{style:r=null}=o,{theme:m=""}=o,{animation:h=""}=o,{delay:v=200}=o,{arrow:x=!0}=o,{autoPosition:j=!1}=o,{show:E=!1}=o,g=null,y=0,b=null,Y=null,z=!1,R={bottom:0,top:0,right:0,left:0};const B=h?v:0;w.onMount(()=>{if(g!==null&&(i&&!b&&(b=new c.component({target:g,props:{action:l,...c.props}})),e(7,y=_t(g,a)),r&&typeof r=="object"))for(let p in r){const J=wt(p),H=r[p];g.style.setProperty(`--tooltip-${J}`,H)}j&&!xt(g,n,s)&&e(0,s=jt[s]),e(10,R=Z(n,g,s,R)),h&&e(8,Y=h),setTimeout(()=>e(9,z=!0),B)}),w.onDestroy(()=>{b&&(b.$destroy(),b=null)});const O=()=>{z&&e(10,R=Z(n,g,s,R))};function N(p){F[p?"unshift":"push"](()=>{g=p,e(6,g)})}return t.$$set=p=>{"targetElement"in p&&e(13,n=p.targetElement),"action"in p&&e(14,l=p.action),"content"in p&&e(1,c=p.content),"align"in p&&e(2,f=p.align),"position"in p&&e(0,s=p.position),"maxWidth"in p&&e(3,a=p.maxWidth),"style"in p&&e(15,r=p.style),"theme"in p&&e(4,m=p.theme),"animation"in p&&e(16,h=p.animation),"delay"in p&&e(17,v=p.delay),"arrow"in p&&e(5,x=p.arrow),"autoPosition"in p&&e(18,j=p.autoPosition),"show"in p&&e(19,E=p.show)},t.$$.update=()=>{t.$$.dirty&2&&e(11,i=typeof c=="object"),t.$$.dirty&524352&&(g&&E?setTimeout(()=>e(9,z=!0),B):e(9,z=!1))},[s,c,f,a,m,x,g,y,Y,z,R,i,O,n,l,r,h,v,j,E,N]}class eo extends bt{constructor(o){super(),yt(this,o,oo,to,at,{targetElement:13,action:14,content:1,align:2,position:0,maxWidth:3,style:15,theme:4,animation:16,delay:17,arrow:5,autoPosition:18,show:19},$t)}}const io=eo,no=(t,o)=>{let e=null,i=t.getAttribute("title"),n=(o==null?void 0:o.action)||t.getAttribute("action")||"hover";const l={...o,targetElement:t};i&&(t.removeAttribute("title"),l.content=i);const c=()=>{e?s():f()},f=()=>{e||(e=new io({target:t,props:l}))},s=()=>{e&&(e.$destroy(),e=null)},a=()=>{t!==null&&(r(),l.show&&f(),n==="click"&&t.addEventListener("click",c),n==="hover"&&(t.addEventListener("mouseenter",f),t.addEventListener("mouseleave",s)))},r=()=>{t!==null&&(t.removeEventListener("click",c),t.removeEventListener("mouseenter",f),t.removeEventListener("mouseleave",s))};return a(),{destroy(){r(),i&&t.setAttribute("title",i)}}};_.Tooltip=Qt,_.tooltip=no,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}); | ||
| export { default as Tooltip } from './tooltip.svelte'; | ||
| export { tooltip } from './action'; |
| { | ||
| "name": "@svelte-plugins/tooltips", | ||
| "version": "2.2.0", | ||
| "version": "3.0.0", | ||
| "license": "MIT", | ||
| "description": "A simple tooltip action and component designed for Svelte.", | ||
| "author": "Kieran Boyle (https://github.com/dysfunc)", | ||
| "svelte": "./src/index.js", | ||
| "types": "./src/index.d.ts", | ||
| "main": "./dist/index.js", | ||
| "module": "./dist/index.mjs", | ||
| "type": "module", | ||
| "sideEffects": false, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/svelte-plugins/tooltips.git" | ||
| }, | ||
| "homepage": "https://github.com/svelte-plugins/tooltips", | ||
| "bugs": "https://github.com/svelte-plugins/tooltips/issues", | ||
| "types": "./dist/index.d.ts", | ||
| "module": "./dist/index.js", | ||
| "svelte": "./dist/index.js", | ||
| "keywords": [ | ||
| "components", | ||
| "tooltip", | ||
| "tooltips", | ||
| "tooltip", | ||
| "actions", | ||
| "popover", | ||
| "action", | ||
| "svelte", | ||
| "svelte component", | ||
| "ui", | ||
| "javascript" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/svelte-plugins/tooltips.git" | ||
| }, | ||
| "files": [ | ||
| "/src", | ||
| "/dist" | ||
| "dist", | ||
| "src" | ||
| ], | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "svelte": "./dist/index.js", | ||
| "import": "./dist/index.js" | ||
| }, | ||
| "./package.json": "./package.json" | ||
| }, | ||
| "homepage": "https://github.com/svelte-plugins/tooltips", | ||
| "bugs": "https://github.com/svelte-plugins/tooltips/issues", | ||
| "scripts": { | ||
| "start": "npm --prefix ./docs install && vite & npm --prefix ./docs run dev", | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "build": "svelte-package --input ./src && pnpm lint:package", | ||
| "build:docs": "npm --prefix ./docs run build", | ||
| "deploy": "npm run build:docs && npx gh-pages -d docs/build", | ||
| "publish": "npm run build && npm publish --access=public", | ||
| "lint": "eslint -c ./.eslintrc.json --fix \"src/**/*.{.js,svelte}\"", | ||
| "format": "prettier --write \"src/**/*.{js,json,svelte}\"", | ||
| "deploy": "pnpm build:docs && npx gh-pages -d docs/build", | ||
| "publish": "pnpm build && npm publish --access=public", | ||
| "format": "prettier --write \"src/**/*.{js,ts,json,svelte}\"", | ||
| "check": "svelte-check --tsconfig ./tsconfig.json", | ||
| "lint": "eslint -c ./.eslintrc.json --fix \"src/**/*.{.js,.ts,svelte}\"", | ||
| "lint:package": "publint --strict", | ||
| "test": "vitest --run --coverage", | ||
| "test:watch": "vitest", | ||
| "test:coverage": "vitest --run --coverage && open ./coverage/index.html" | ||
| "test:coverage": "pnpm test && open ./coverage/index.html" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.23.3", | ||
| "@babel/eslint-parser": "^7.23.3", | ||
| "@babel/preset-env": "^7.23.3", | ||
| "@babel/runtime": "^7.23.4", | ||
| "@sveltejs/package": "^2.2.4", | ||
| "@sveltejs/vite-plugin-svelte": "^3.0.1", | ||
| "@testing-library/jest-dom": "^6.1.4", | ||
| "@testing-library/svelte": "^4.0.5", | ||
| "@tsconfig/svelte": "^5.0.2", | ||
| "@typescript-eslint/parser": "^6.16.0", | ||
| "@vitest/coverage-v8": "^0.34.6", | ||
| "autoprefixer": "^9.8.6", | ||
| "eslint": "^8.54.0", | ||
@@ -60,5 +69,8 @@ "eslint-plugin-svelte": "^2.35.1", | ||
| "lint-staged": "^10.5.4", | ||
| "postcss": "^8.4.32", | ||
| "prettier": "^3.1.0", | ||
| "prettier-plugin-svelte": "^3.1.2", | ||
| "publint": "^0.2.7", | ||
| "svelte": "^4.2.7", | ||
| "svelte-check": "^3.6.2", | ||
| "typescript": "^5.2.2", | ||
@@ -68,11 +80,5 @@ "vite": "^5.0.2", | ||
| }, | ||
| "exports": { | ||
| ".": { | ||
| "types": "./src/index.d.ts", | ||
| "svelte": "./src/index.js", | ||
| "require": "./dist/index.js", | ||
| "module": "./dist/index.mjs", | ||
| "default": "./src/index.js" | ||
| } | ||
| "peerDependencies": { | ||
| "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0" | ||
| } | ||
| } |
@@ -15,2 +15,6 @@ # @svelte-plugins/tooltips | ||
| npm i -D @svelte-plugins/tooltips | ||
| # or with PNPM | ||
| pnpm i -D @svelte-plugins/tooltips | ||
| ``` | ||
@@ -44,21 +48,22 @@ | ||
| ### Props | ||
| | Prop | Description | Value | | ||
| | :----------- | :------------------------------------------------------------------ | :---------------------------------------------- | | ||
| | action | The action that triggers the tooltip (hover | click | prop) | `string` (default: `hover`) | | ||
| | animation | The animation to apply to the tooltip | `string` (default: ``) | | ||
| | delay | The animation delay in milliseconds to apply to the tooltip | `number` (default: `200`) | | ||
| | arrow | If `false`, the tooltip arrow will not be shown. | `boolean` (default: `true`) | | ||
| | autoPosition | Adjust tooltip position if viewport clipping occurs | `string` (default: `false`) | | ||
| | content | The string or object containing componentref and props | `string` | `object` component (default: ``) | | ||
| | maxWidth | The max allowable width of the tooltip content | `number` (default: `200`) | | ||
| | position | The position where the tooltip should appear relative to its parent | `string` (default: `top`) | | ||
| | theme | The CSS theme class name | `string` (default: ``) | | ||
| | show | Allows you to manually control the tooltip visibility | `boolean` (default: `false`) | | ||
| | style | The object containing theme variable overrides | `object` (default: `null`) | | ||
| | Prop | Description | Value | | ||
| | :----------------- | :------------------------------------------------------------------ | :---------------------------------------------- | | ||
| | action | The action that triggers the tooltip (hover | click | prop) | `string` (default: `hover`) | | ||
| | animation | The animation to apply to the tooltip | `string` (default: ``) | | ||
| | arrow | If `false`, the tooltip arrow will not be shown. | `boolean` (default: `true`) | | ||
| | autoPosition | Adjust tooltip position if viewport clipping occurs | `boolean` (default: `false`) | | ||
| | content | The string or object containing componentref and props | `string` | `object` component (default: ``) | | ||
| | delay | The animation delay in milliseconds to apply to the tooltip | `number` (default: `200`) | | ||
| | hideOnOutsideClick | Hides a tooltip when an outside click occurs | `boolean` (default: `false`) | | ||
| | maxWidth | The max allowable width of the tooltip content | `number` (default: `200`) | | ||
| | position | The position where the tooltip should appear relative to its parent | `string` (default: `top`) | | ||
| | show | Allows you to manually control the tooltip visibility | `boolean` (default: `false`) | | ||
| | style | The object containing theme variable overrides | `object` (default: `null`) | | ||
| | theme | The CSS theme class name | `string` (default: ``) | | ||
| #### Using components as content | ||
| | Prop | Description | Value | | ||
| | :-----------------| :------------------------------------------------------------- | :---------------------------------- | | ||
| | content.component | Svelte component | `component` (default: `null`) | | ||
| | content.props | Any component propeties | `object` (default: `null`) | | ||
| | Prop | Description | Value | | ||
| | :-----------------| :------------------------------------------------------------------- | :---------------------------------------------- | | ||
| | content.component | Svelte component | `component` (default: `null`) | | ||
| | content.props | Any component propeties | `object` (default: `null`) | | ||
@@ -65,0 +70,0 @@ |
@@ -7,4 +7,4 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
| <div | ||
| class="tooltip animation-null top svelte-ngud14" | ||
| style="left: 0px; min-width: 0px; max-width: 200px; text-align: left; top: 0px;" | ||
| class="tooltip animation-null top svelte-16lxf1i" | ||
| style="left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;" | ||
| > | ||
@@ -11,0 +11,0 @@ Hello World! |
@@ -7,3 +7,10 @@ import Tooltip from './action-tooltip.svelte'; | ||
| let action = props?.action || element.getAttribute('action') || 'hover'; | ||
| const hideOnClickOutside = props?.hideOnClickOutside || element.getAttribute('hideOnClickOutside') || false; | ||
| const detect = ({ target }) => { | ||
| if (hideOnClickOutside && target && !target.classList.contains('tooltip')) { | ||
| onHide(); | ||
| } | ||
| }; | ||
| const config = { | ||
@@ -14,2 +21,6 @@ ...props, | ||
| if (config.hideOnClickOutside) { | ||
| delete config.hideOnClickOutside; | ||
| } | ||
| if (title) { | ||
@@ -22,3 +33,7 @@ element.removeAttribute('title'); | ||
| if (component) { | ||
| onHide(); | ||
| if ( | ||
| !(action === 'click' && hideOnClickOutside) | ||
| ) { | ||
| onHide(); | ||
| } | ||
| } else { | ||
@@ -49,8 +64,11 @@ onShow(); | ||
| if (config.show) { | ||
| onShow(); | ||
| } | ||
| if (action === 'click') { | ||
| element.addEventListener('click', onClick); | ||
| if (hideOnClickOutside) { | ||
| document.addEventListener('click', detect, { | ||
| passive: true, | ||
| capture: true | ||
| }); | ||
| } | ||
| } | ||
@@ -63,5 +81,9 @@ | ||
| } | ||
| } | ||
| }; | ||
| const removeListeners = () => { | ||
| if (hideOnClickOutside) { | ||
| document.removeEventListener('click', detect); | ||
| } | ||
| if (element !== null) { | ||
@@ -76,2 +98,6 @@ element.removeEventListener('click', onClick); | ||
| if (config.show) { | ||
| setTimeout(onShow, 0); | ||
| } | ||
| return { | ||
@@ -86,2 +112,2 @@ destroy() { | ||
| }; | ||
| } | ||
| }; |
@@ -13,4 +13,10 @@ export const formatVariableKey = (str) => { | ||
| const elementStyle = window.getComputedStyle(element); | ||
| const elementPaddingLeft = parseInt(elementStyle.getPropertyValue('padding-left'), 10); | ||
| const elementPaddingRight = parseInt(elementStyle.getPropertyValue('padding-right'), 10); | ||
| const elementPaddingLeft = parseInt( | ||
| elementStyle.getPropertyValue('padding-left'), | ||
| 10 | ||
| ); | ||
| const elementPaddingRight = parseInt( | ||
| elementStyle.getPropertyValue('padding-right'), | ||
| 10 | ||
| ); | ||
| const elementPadding = elementPaddingLeft + elementPaddingRight; | ||
@@ -24,6 +30,12 @@ const contentWidth = elementWidth - elementPadding; | ||
| const rect = element.getBoundingClientRect(); | ||
| const viewportWidth = window.innerWidth || document.documentElement.clientWidth; | ||
| const viewportHeight = window.innerHeight || document.documentElement.clientHeight; | ||
| const viewportWidth = | ||
| window.innerWidth || document.documentElement.clientWidth; | ||
| const viewportHeight = | ||
| window.innerHeight || document.documentElement.clientHeight; | ||
| let isInsideViewport = rect.bottom > 0 && rect.top < viewportHeight && rect.right > 0 && rect.left < viewportWidth; | ||
| let isInsideViewport = | ||
| rect.bottom > 0 && | ||
| rect.top < viewportHeight && | ||
| rect.right > 0 && | ||
| rect.left < viewportWidth; | ||
@@ -35,6 +47,8 @@ if (container) { | ||
| isInsideViewport = | ||
| containerRect.bottom + containerRect.height < viewportHeight && containerRect.top < viewportHeight; | ||
| containerRect.bottom + containerRect.height < viewportHeight && | ||
| containerRect.top < viewportHeight; | ||
| } else { | ||
| isInsideViewport = | ||
| containerRect.right + containerRect.width < viewportWidth && containerRect.left < viewportWidth; | ||
| containerRect.right + containerRect.width < viewportWidth && | ||
| containerRect.left < viewportWidth; | ||
| } | ||
@@ -48,3 +62,8 @@ | ||
| export const computeTooltipPosition = (containerRef, tooltipRef, position, coords) => { | ||
| export const computeTooltipPosition = ( | ||
| containerRef, | ||
| tooltipRef, | ||
| position, | ||
| coords | ||
| ) => { | ||
| if (!containerRef || !tooltipRef) { | ||
@@ -54,2 +73,7 @@ return coords; | ||
| const tooltipRect = tooltipRef.getBoundingClientRect(); | ||
| const containerRect = containerRef.getBoundingClientRect(); | ||
| const containerPosition = window.getComputedStyle(containerRef).position; | ||
| const containerStyle = window.getComputedStyle(containerRef); | ||
| let cumulativeOffsetTop = 0; | ||
@@ -64,15 +88,27 @@ let cumulativeOffsetLeft = 0; | ||
| while (currentElement !== document.body) { | ||
| while (currentElement && currentElement !== document.body) { | ||
| const computedStyle = window.getComputedStyle(currentElement); | ||
| const elementPosition = computedStyle.position; | ||
| const currentRect = currentElement.getBoundingClientRect(); | ||
| // if (elementPosition === 'static') { | ||
| // currentElement = currentElement.parentElement; | ||
| // continue; | ||
| // } | ||
| // console.log() | ||
| if (elementPosition === 'fixed') { | ||
| fixedOffsetTop += currentElement.getBoundingClientRect().top + window.scrollY; | ||
| fixedOffsetLeft += currentElement.getBoundingClientRect().left + window.scrollX; | ||
| fixedOffsetTop += | ||
| currentRect.top + window.scrollY; | ||
| fixedOffsetLeft += | ||
| currentRect.left + window.scrollX; | ||
| } else if (elementPosition === 'sticky') { | ||
| stickyOffsetTop += currentElement.getBoundingClientRect().top; | ||
| fixedOffsetLeft += currentElement.getBoundingClientRect().left + window.scrollX; | ||
| stickyOffsetTop += currentRect.top; | ||
| fixedOffsetLeft += | ||
| currentRect.left + window.scrollX; | ||
| } else if (elementPosition === 'absolute' || elementPosition === 'relative') { | ||
| cumulativeOffsetTop -= parseFloat(computedStyle.top) || 0; | ||
| cumulativeOffsetLeft -= parseFloat(computedStyle.left) || 0; | ||
| if (elementPosition === 'absolute') { | ||
| cumulativeOffsetTop -= parseFloat(computedStyle.top) || 0; | ||
| cumulativeOffsetLeft -= parseFloat(computedStyle.left) || 0; | ||
| } | ||
@@ -82,2 +118,16 @@ if (elementPosition === 'relative') { | ||
| cumulativeOffsetLeft -= currentElement.offsetLeft; | ||
| if (position === 'bottom') { | ||
| cumulativeOffsetTop += containerRect.height; | ||
| } | ||
| if (position === 'right') { | ||
| cumulativeOffsetLeft -= containerRect.width; | ||
| } | ||
| if (containerPosition === 'absolute') { | ||
| if (position === 'right') { | ||
| cumulativeOffsetLeft += containerRect.width; | ||
| } | ||
| } | ||
| } | ||
@@ -90,4 +140,10 @@ } | ||
| const transformMatrix = new DOMMatrix(transform); | ||
| cumulativeOffsetTop -= transformMatrix.m42; | ||
| cumulativeOffsetLeft -= transformMatrix.m41; | ||
| if (elementPosition === 'relative' || elementPosition === 'absolute') { | ||
| cumulativeOffsetTop -= transformMatrix.m42; | ||
| cumulativeOffsetLeft -= transformMatrix.m41; | ||
| } else { | ||
| cumulativeOffsetTop -= currentElement.offsetTop + transformMatrix.m42; | ||
| cumulativeOffsetLeft -= currentElement.offsetLeft + transformMatrix.m41; | ||
| } | ||
| } | ||
@@ -98,6 +154,4 @@ | ||
| const containerRect = containerRef.getBoundingClientRect(); | ||
| const tooltipRect = tooltipRef.getBoundingClientRect(); | ||
| let finalTop = containerRect.top + cumulativeOffsetTop + stickyOffsetTop - fixedOffsetTop; | ||
| let finalTop = | ||
| containerRect.top + cumulativeOffsetTop + stickyOffsetTop - fixedOffsetTop; | ||
| let finalLeft = containerRect.left + cumulativeOffsetLeft - fixedOffsetLeft; | ||
@@ -104,0 +158,0 @@ |
@@ -11,4 +11,4 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
| <div | ||
| class="tooltip animation-null top svelte-ir0j5h" | ||
| style="left: 0px; min-width: 0px; max-width: 200px; text-align: left; top: 0px;" | ||
| class="tooltip animation-null top svelte-1xktviv" | ||
| style="left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;" | ||
| > | ||
@@ -15,0 +15,0 @@ Hello World! |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of package files
35
94.44%- Number of low quality alerts
0
-100%- Number of lines in readme file
137
3.79%Worsened metrics
- Total package byte prevSize
94992
-17.91%- Dependency count
1
Infinity%- Dev dependency count
23
15%- Lines of code
1104
-32.27%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes