vue-pointing-bubble 0.2.0 → 0.4.0

package/dist/vue-pointing-bubble.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("vue"),T={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},I="pointing-bubble-styles",U=`:where(.pointing-bubble__inner) {
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("vue"),P={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},T="pointing-bubble-styles",q=`:where(.pointing-bubble__inner) {
   box-sizing: border-box;
   width: var(--pb-width, max-content);
   max-width: var(--pb-max-width, none);
@@ -6,4 +6,4 @@
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`,_="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function H(n=document){if(n.getElementById(I))return;const e=n.createElement("style");e.id=I,e.textContent=U,n.head.prepend(e)}function P(n){return typeof n=="object"&&n!==null&&typeof n.x=="number"&&typeof n.y=="number"&&n.nodeType!==1}function D(n){return typeof Element>"u"||n==null?null:typeof n=="string"?document.querySelector(n):n instanceof Element?n:null}function z(n,e){return!n||!e?!1:Object.keys(n).every(t=>n[t]===e[t])}function X(n){const e=n.getBoundingClientRect(),t=getComputedStyle(n),a=parseFloat(t.width)||0,l=parseFloat(t.height)||0;return{left:e.left,top:e.top,width:a,height:l,scaleX:a?e.width/a:1,scaleY:l?e.height/l:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function G(n,e,t,a){const l=getComputedStyle(n),{scaleX:r,scaleY:u}=t,i=n.getBoundingClientRect(),d=e.getBoundingClientRect();return{x:a?(i.left-d.left)/r:0,y:a?(i.top-d.top)/u:0,width:i.width/r,height:i.height/u,fill:l.backgroundColor,stroke:l.borderTopColor,strokeWidth:parseFloat(l.borderTopWidth)||0,radius:l.borderTopLeftRadius,zIndex:l.zIndex}}function F(n,e,t){const a=n.x-t;let l=a,r=e.width?e.width-n.x-t:1/0;return e.viewportWidth&&(l=Math.min(l,e.left/e.scaleX+a),r=Math.min(r,(e.viewportWidth-e.left)/e.scaleX-n.x-t)),{left:Math.max(0,l),right:Math.max(0,r)}}function O(n){return n.left>n.right?"left":"right"}function j(n){const{tip:e,box:t,frame:a,placement:l,targetRect:r,room:u,tailLength:i}=n;if(!t.width||!t.height)return null;const{width:d,height:f}=t,{x,y}=e,E=l==="manual",o=n.targetAnchor==="edge"?r:null;if(E){if(o){const v=t.x+d/2,w=t.y+f/2;if(!(v>=o.left&&v<=o.right&&w>=o.top&&w<=o.bottom)){const g=Math.min(o.right,Math.max(o.left,v)),b=Math.min(o.bottom,Math.max(o.top,w));return{placement:"manual",tx:g,ty:b,bx:t.x,by:t.y,w:d,h:f}}}return{placement:"manual",tx:x,ty:y,bx:t.x,by:t.y,w:d,h:f}}const k=v=>o?v==="top"?o.top:o.bottom:y;let S=l;if(l==="auto"){let v=y>(a.height||600)/2?"top":"bottom",w=O(u);const{scaleX:p,scaleY:g}=a;if(a.viewportHeight){const b=a.top+(k("top")-f-i)*g>=0,B=a.top+(k("bottom")+f+i)*g<=a.viewportHeight;v==="top"&&!b&&B?v="bottom":v==="bottom"&&!B&&b&&(v="top")}if(a.viewportWidth){const b=a.left+(x-d-i)*p>=0,B=a.left+(x+d+i)*p<=a.viewportWidth;w==="left"&&!b&&B?w="right":w==="right"&&!B&&b&&(w="left")}S=`${v}-${w}`}const[W,C]=S.split("-"),$=k(W);return{placement:S,tx:x,ty:$,bx:C==="left"?x-d-i:x+i,by:W==="top"?$-f-i:$+i,w:d,h:f}}const q=["tx","ty","bx","by"],V=["tx","ty"];function Z(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function K(n,e,t,a){let l=0;const r=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l)};if(!e||!n||t<=0||typeof requestAnimationFrame>"u"||Z())return a(e),{cancel:r};const u=performance.now(),i=d=>{const f=Math.min(1,(d-u)/t),x=1-Math.pow(1-f,3),y={...e},E=e.placement==="manual"?V:q;for(const o of E)y[o]=n[o]+(e[o]-n[o])*x;a(y),f<1&&(l=requestAnimationFrame(i))};return l=requestAnimationFrame(i),{cancel:r}}function N(n){const{geometry:e,strokeWidth:t,radius:a,tailBaseWidth:l}=n,{placement:r,tx:u,ty:i,bx:d,by:f,w:x,h:y}=e,E=parseFloat(a)*(a.endsWith("%")?Math.min(x,y)/100:1)||0,o=l/2,k=(s,c,h)=>c>h?(c+h)/2:Math.min(h,Math.max(c,s));let S=null,W=0;if(r==="manual"){const s=Math.max(d-u,u-(d+x),0),c=Math.max(f-i,i-(f+y),0);if(s>0&&s>=c)S=u<d?"left":"right",W=i;else if(c>0)S=i<f?"top":"bottom",W=u;else return null}else if(r!=="none"){const[s,c]=r.split("-");S=c==="left"?"right":"left",W=f+y*(s==="top"?.65:.35)}else return null;const C=1,$=S==="top"||S==="bottom",v={left:(s,c)=>[d-c,s],right:(s,c)=>[d+x+c,s],top:(s,c)=>[s,f-c],bottom:(s,c)=>[s,f+y+c]}[S],w={left:d-u,right:u-d-x,top:f-i,bottom:i-f-y}[S],p=$?k(W,d+E+o+t/2,d+x-E-o-t/2):k(W,f+E+o+t/2,f+y-E-o-t/2),g=Math.max(0,Math.min(t,w/2)),b=([s,c])=>`${s} ${c}`,B=(s,c)=>{const h=v(s,g),L=Math.hypot(u-h[0],i-h[1])||1,R=[h[0]+(u-h[0])*g/L,h[1]+(i-h[1])*g/L];return{inner:b(v(s,c)),outer:b(v(s,0)),ctrl:b(h),end:b(R)}},M=s=>{const c=B(p-o,s),h=B(p+o,s);return`M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${u} ${i} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`};return{fill:`${M(-t-C)} Z`,stroke:t?M(-t):null}}function Q(n){return{hasTarget:n,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!n,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function Y(n){H();let e={...T},t=null,a=null,l=null,r={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},u=null,i=null,d=null,f=null,x=Q(!1);const y=()=>{x=E(),n.onChange?.(x)};function E(){const p=e.target!=null,g=e.placement==="manual",b=p?u?.placement??"none":"none",B={position:"absolute",inset:"0",pointerEvents:"none",filter:e.shadow?_:void 0},M=l?.zIndex;M&&M!=="auto"&&(B.zIndex=M);const s={"--pb-padding":typeof e.padding=="number"?`${e.padding}px`:e.padding};if(e.maxWidth!=null&&(s["--pb-max-width"]=`${e.maxWidth}px`),!p)s["--pb-width"]="fit-content",e.shadow&&(s.filter=_);else if(Object.assign(s,{position:"absolute",pointerEvents:"auto",visibility:u?"visible":"hidden"}),g)s["--pb-width"]="fit-content";else if(Object.assign(s,{left:`${u?.bx??0}px`,top:`${u?.by??0}px`,margin:"0"}),e.maxWidth==null&&t){const h=F(t,r,e.tailLength),L=i?.placement??e.placement,R=L==="auto"?O(h):L.split("-")[1];s["--pb-max-width"]=`${h[R]}px`}const c=p&&u&&l?N({geometry:u,strokeWidth:l.strokeWidth,radius:l.radius,tailBaseWidth:e.tailBaseWidth}):null;return{hasTarget:p,placement:b,tip:t,slotTip:i?{x:i.tx,y:i.ty}:t,overlayStyle:B,boxStyle:s,rootIsBox:!p,tail:c,boxFill:l?.fill??"",boxStroke:l?.stroke??"",boxStrokeWidth:l?.strokeWidth??0,boxZIndex:l?.zIndex??"auto"}}function o(){if(!t||!l){i=null,k(null);return}const p=F(t,r,e.tailLength);i=j({tip:t,box:l,frame:r,placement:e.placement,targetAnchor:e.targetAnchor,targetRect:a,room:p,tailLength:e.tailLength}),k(i)}function k(p){d?.cancel(),d=K(u,p,e.transitionDuration,g=>{u=g,y()})}function S(){const p=n.getRootEl(),g=n.getBoxEl();if(!g||e.target==null||!p)return;const b=G(g,p,r,e.placement==="manual");z(b,l)||(l=b)}function W(){const p=n.getRootEl();if(e.target==null||!p){t=null,a=null,l=null,i=null,u=null,y();return}r=X(p);const g=D(e.target);if(g){const b=g.getBoundingClientRect(),{scaleX:B,scaleY:M,left:s,top:c}=r,h={left:(b.left-s)/B,top:(b.top-c)/M,right:(b.right-s)/B,bottom:(b.bottom-c)/M};z(h,a)||(a=h),t={x:(h.left+h.right)/2,y:(h.top+h.bottom)/2}}else if(P(e.target))a=null,t={x:e.target.x,y:e.target.y};else{a=null,t=null,l=null,i=null,u=null,y();return}S(),o()}function C(){W()}typeof window<"u"&&(window.addEventListener("resize",C),window.addEventListener("scroll",C,!0));function $(){if(typeof ResizeObserver>"u")return;f?.disconnect(),f=new ResizeObserver(()=>W());const p=n.getRootEl(),g=n.getBoxEl();p&&f.observe(p),g&&f.observe(g)}const v=W;function w(){$(),v()}return{update:w,setConfig(p){e={...e,...p},w()},getConfig:()=>e,getState:()=>x,destroy(){d?.cancel(),f?.disconnect(),typeof window<"u"&&(window.removeEventListener("resize",C),window.removeEventListener("scroll",C,!0))}}}const J=["data-placement"],tt=["d","fill"],et=["d","stroke","stroke-width"],A=m.defineComponent({name:"PointingBubble",inheritAttrs:!1,__name:"PointingBubble",props:{target:{default:null},placement:{default:"auto"},targetAnchor:{default:"center"},maxWidth:{default:void 0},tailLength:{default:45},tailBaseWidth:{default:24},padding:{default:8},shadow:{type:Boolean,default:!0},transitionDuration:{default:200}},setup(n,{expose:e}){const t=n,a=m.ref(null),l=m.ref(null),r=m.ref({hasTarget:!1,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!0,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function u(o){return o==null?null:typeof o=="string"||typeof Element<"u"&&o instanceof Element?o:typeof o=="object"&&"$el"in o&&o.$el instanceof Element?o.$el:typeof o=="object"&&typeof o.x=="number"&&typeof o.y=="number"?o:null}const i=Y({getRootEl:()=>a.value,getBoxEl:()=>l.value,onChange:o=>{r.value=o}});function d(){i.setConfig({target:u(t.target),placement:t.placement,targetAnchor:t.targetAnchor,maxWidth:t.maxWidth,tailLength:t.tailLength,tailBaseWidth:t.tailBaseWidth,padding:t.padding,shadow:t.shadow,transitionDuration:t.transitionDuration})}m.watch(()=>[t.target,typeof t.target=="object"&&t.target&&"x"in t.target?t.target.x:null,typeof t.target=="object"&&t.target&&"y"in t.target?t.target.y:null,t.placement,t.targetAnchor,t.maxWidth,t.tailLength,t.tailBaseWidth,t.padding,t.shadow,t.transitionDuration],d,{flush:"post"}),m.onMounted(()=>{d()}),m.onUpdated(()=>{i.update()}),m.onBeforeUnmount(()=>{i.destroy()});function f(){i.update()}e({update:f});const x=m.computed(()=>r.value.rootIsBox?r.value.boxStyle:r.value.overlayStyle),y=m.computed(()=>r.value.rootIsBox?{display:"contents"}:r.value.boxStyle),E=m.computed(()=>({position:"absolute",inset:"0",width:"100%",height:"100%",overflow:"visible",zIndex:r.value.boxZIndex}));return(o,k)=>(m.openBlock(),m.createElementBlock("div",m.mergeProps({ref_key:"rootRef",ref:a,class:["pointing-bubble",{"pointing-bubble__inner":!n.target}],"data-placement":r.value.placement},n.target?{}:o.$attrs,{style:x.value}),[m.createElementVNode("div",m.mergeProps({ref_key:"boxRef",ref:l,class:{"pointing-bubble__inner":!!n.target}},n.target?o.$attrs:{},{style:y.value}),[m.renderSlot(o.$slots,"default",{placement:r.value.placement,tip:r.value.slotTip},()=>[k[0]||(k[0]=m.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))])],16),n.target&&r.value.tail?(m.openBlock(),m.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:m.normalizeStyle(E.value)},[m.createElementVNode("path",{class:"pointing-bubble__path",d:r.value.tail.fill,fill:r.value.boxFill},null,8,tt),r.value.tail.stroke?(m.openBlock(),m.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:r.value.tail.stroke,fill:"none",stroke:r.value.boxStroke,"stroke-width":r.value.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,et)):m.createCommentVNode("",!0)],4)):m.createCommentVNode("",!0)],16,J))}}),nt={install(n,e={}){const t=e.name??"PointingBubble";n.component(t,A),n.component("Callout",A)}};exports.Callout=A;exports.DEFAULT_BUBBLE_CONFIG=T;exports.PointingBubble=A;exports.PointingBubblePlugin=nt;exports.buildTailPaths=N;exports.computeGeometry=j;exports.createBubbleController=Y;exports.default=A;exports.isPoint=P;exports.resolveElement=D;
+}`,_="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function H(e=document){if(e.getElementById(T))return;const t=e.createElement("style");t.id=T,t.textContent=q,e.head.prepend(t)}function D(e){return typeof e=="object"&&e!==null&&typeof e.x=="number"&&typeof e.y=="number"&&e.nodeType!==1}function O(e){return typeof Element>"u"||e==null?null:typeof e=="string"?document.querySelector(e):e instanceof Element?e:null}function A(e,t){return!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n])}function X(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e),a=parseFloat(n.width)||0,l=parseFloat(n.height)||0;return{left:t.left,top:t.top,width:a,height:l,scaleX:a?t.width/a:1,scaleY:l?t.height/l:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function Z(e,t,n,a){const l=getComputedStyle(e),{scaleX:i,scaleY:d}=n,r=e.getBoundingClientRect(),f=t.getBoundingClientRect();return{x:a?(r.left-f.left)/i:0,y:a?(r.top-f.top)/d:0,width:r.width/i,height:r.height/d,fill:l.backgroundColor,stroke:l.borderTopColor,strokeWidth:parseFloat(l.borderTopWidth)||0,radius:l.borderTopLeftRadius,zIndex:l.zIndex}}function F(e,t,n){const a=e.x-n;let l=a,i=t.width?t.width-e.x-n:1/0;return t.viewportWidth&&(l=Math.min(l,t.left/t.scaleX+a),i=Math.min(i,(t.viewportWidth-t.left)/t.scaleX-e.x-n)),{left:Math.max(0,l),right:Math.max(0,i)}}function j(e){return e.left>e.right?"left":"right"}function N(e){const{tip:t,box:n,frame:a,placement:l,targetRect:i,room:d,tailLength:r}=e;if(!n.width||!n.height)return null;const{width:f,height:p}=n,{x:b,y}=t,k=l==="manual",o=e.targetAnchor==="edge"?i:null;if(k){if(o){const v=n.x+f/2,w=n.y+p/2;if(!(v>=o.left&&v<=o.right&&w>=o.top&&w<=o.bottom)){const x=Math.min(o.right,Math.max(o.left,v)),g=Math.min(o.bottom,Math.max(o.top,w));return{placement:"manual",tx:x,ty:g,bx:n.x,by:n.y,w:f,h:p}}}return{placement:"manual",tx:b,ty:y,bx:n.x,by:n.y,w:f,h:p}}const E=v=>o?v==="top"?o.top:o.bottom:y;let B=l;if(l==="auto"){let v=y>(a.height||600)/2?"top":"bottom",w=j(d);const{scaleX:u,scaleY:x}=a;if(a.viewportHeight){const g=a.top+(E("top")-p-r)*x>=0,S=a.top+(E("bottom")+p+r)*x<=a.viewportHeight;v==="top"&&!g&&S?v="bottom":v==="bottom"&&!S&&g&&(v="top")}if(a.viewportWidth){const g=a.left+(b-f-r)*u>=0,S=a.left+(b+f+r)*u<=a.viewportWidth;w==="left"&&!g&&S?w="right":w==="right"&&!S&&g&&(w="left")}B=`${v}-${w}`}const[W,C]=B.split("-"),I=E(W);return{placement:B,tx:b,ty:I,bx:C==="left"?b-f-r:b+r,by:W==="top"?I-p-r:I+r,w:f,h:p}}const G=["tx","ty","bx","by"],V=["tx","ty"];function K(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function Q(e,t,n,a){let l=0;const i=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l)};if(!t||!e||n<=0||typeof requestAnimationFrame>"u"||K())return a(t),{cancel:i};const d=performance.now(),r=f=>{const p=Math.min(1,(f-d)/n),b=1-Math.pow(1-p,3),y={...t},k=t.placement==="manual"?V:G;for(const o of k)y[o]=e[o]+(t[o]-e[o])*b;a(y),p<1&&(l=requestAnimationFrame(r))};return l=requestAnimationFrame(r),{cancel:i}}function Y(e){const{geometry:t,strokeWidth:n,radius:a,tailBaseWidth:l}=e,{placement:i,tx:d,ty:r,bx:f,by:p,w:b,h:y}=t,k=parseFloat(a)*(a.endsWith("%")?Math.min(b,y)/100:1)||0,o=l/2,E=(s,c,h)=>c>h?(c+h)/2:Math.min(h,Math.max(c,s));let B=null,W=0;if(i==="manual"){const s=Math.max(f-d,d-(f+b),0),c=Math.max(p-r,r-(p+y),0);if(s>0&&s>=c)B=d<f?"left":"right",W=r;else if(c>0)B=r<p?"top":"bottom",W=d;else return null}else if(i!=="none"){const[s,c]=i.split("-");B=c==="left"?"right":"left",W=p+y*(s==="top"?.65:.35)}else return null;const C=1,I=B==="top"||B==="bottom",v={left:(s,c)=>[f-c,s],right:(s,c)=>[f+b+c,s],top:(s,c)=>[s,p-c],bottom:(s,c)=>[s,p+y+c]}[B],w={left:f-d,right:d-f-b,top:p-r,bottom:r-p-y}[B],u=I?E(W,f+k+o+n/2,f+b-k-o-n/2):E(W,p+k+o+n/2,p+y-k-o-n/2),x=Math.max(0,Math.min(n,w/2)),g=([s,c])=>`${s} ${c}`,S=(s,c)=>{const h=v(s,x),$=Math.hypot(d-h[0],r-h[1])||1,R=[h[0]+(d-h[0])*x/$,h[1]+(r-h[1])*x/$];return{inner:g(v(s,c)),outer:g(v(s,0)),ctrl:g(h),end:g(R)}},M=s=>{const c=S(u-o,s),h=S(u+o,s);return`M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${d} ${r} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`};return{fill:`${M(-n-C)} Z`,stroke:n?M(-n):null}}function J(e){return{hasTarget:e,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!e,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function z(e,t){return e===t?!0:!e||!t?!1:e.x===t.x&&e.y===t.y}function tt(e,t){return e.hasTarget===t.hasTarget&&e.placement===t.placement&&e.rootIsBox===t.rootIsBox&&e.boxFill===t.boxFill&&e.boxStroke===t.boxStroke&&e.boxStrokeWidth===t.boxStrokeWidth&&e.boxZIndex===t.boxZIndex&&z(e.tip,t.tip)&&z(e.slotTip,t.slotTip)&&A(e.overlayStyle,t.overlayStyle)&&A(e.boxStyle,t.boxStyle)&&e.tail?.fill===t.tail?.fill&&e.tail?.stroke===t.tail?.stroke}function U(e){H();let t={...P},n=null,a=null,l=null,i={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},d=null,r=null,f=null,p=null,b=J(!1);const y=()=>{const u=k();tt(b,u)||(b=u,e.onChange?.(b))};function k(){const u=t.target!=null,x=t.placement==="manual",g=u?d?.placement??"none":"none",S={position:"absolute",inset:"0",pointerEvents:"none",filter:t.shadow?_:void 0},M=l?.zIndex;M&&M!=="auto"&&(S.zIndex=M);const s={"--pb-padding":typeof t.padding=="number"?`${t.padding}px`:t.padding};if(t.maxWidth!=null&&(s["--pb-max-width"]=`${t.maxWidth}px`),!u)s["--pb-width"]="fit-content",t.shadow&&(s.filter=_);else if(Object.assign(s,{position:"absolute",pointerEvents:"auto",visibility:d?"visible":"hidden"}),x)s["--pb-width"]="fit-content";else if(Object.assign(s,{left:`${d?.bx??0}px`,top:`${d?.by??0}px`,margin:"0"}),t.maxWidth==null&&n){const h=F(n,i,t.tailLength),$=r?.placement??t.placement,R=$==="auto"?j(h):$.split("-")[1];s["--pb-max-width"]=`${h[R]}px`}const c=u&&d&&l?Y({geometry:d,strokeWidth:l.strokeWidth,radius:l.radius,tailBaseWidth:t.tailBaseWidth}):null;return{hasTarget:u,placement:g,tip:n,slotTip:r?{x:r.tx,y:r.ty}:n,overlayStyle:S,boxStyle:s,rootIsBox:!u,tail:c,boxFill:l?.fill??"",boxStroke:l?.stroke??"",boxStrokeWidth:l?.strokeWidth??0,boxZIndex:l?.zIndex??"auto"}}function o(){if(!n||!l){r=null,E(null);return}const u=F(n,i,t.tailLength);r=N({tip:n,box:l,frame:i,placement:t.placement,targetAnchor:t.targetAnchor,targetRect:a,room:u,tailLength:t.tailLength}),E(r)}function E(u){f?.cancel(),f=Q(d,u,t.transitionDuration,x=>{d=x,y()})}function B(){const u=e.getRootEl(),x=e.getBoxEl();if(!x||t.target==null||!u)return;const g=Z(x,u,i,t.placement==="manual");A(g,l)||(l=g)}function W(){const u=e.getRootEl();if(t.target==null||!u){n=null,a=null,l=null,r=null,d=null,y();return}i=X(u);const x=O(t.target);if(x){const g=x.getBoundingClientRect(),{scaleX:S,scaleY:M,left:s,top:c}=i,h={left:(g.left-s)/S,top:(g.top-c)/M,right:(g.right-s)/S,bottom:(g.bottom-c)/M};A(h,a)||(a=h),n={x:(h.left+h.right)/2,y:(h.top+h.bottom)/2}}else if(D(t.target))a=null,n={x:t.target.x,y:t.target.y};else{a=null,n=null,l=null,r=null,d=null,y();return}B(),o()}function C(){W()}typeof window<"u"&&(window.addEventListener("resize",C),window.addEventListener("scroll",C,!0));function I(){if(typeof ResizeObserver>"u")return;p?.disconnect(),p=new ResizeObserver(()=>W());const u=e.getRootEl(),x=e.getBoxEl();u&&p.observe(u),x&&p.observe(x)}const v=W;function w(){I(),v()}return{update:w,setConfig(u){t={...t,...u},w()},getConfig:()=>t,getState:()=>b,destroy(){f?.cancel(),p?.disconnect(),typeof window<"u"&&(window.removeEventListener("resize",C),window.removeEventListener("scroll",C,!0))}}}const et=["data-placement"],nt=["d","fill"],ot=["d","stroke","stroke-width"],L=m.defineComponent({name:"PointingBubble",inheritAttrs:!1,__name:"PointingBubble",props:{target:{default:null},placement:{default:"auto"},targetAnchor:{default:"center"},maxWidth:{default:void 0},tailLength:{default:45},tailBaseWidth:{default:24},padding:{default:8},shadow:{type:Boolean,default:!0},transitionDuration:{default:200}},setup(e,{expose:t}){const n=e,a=m.ref(null),l=m.ref(null),i=m.ref({hasTarget:!1,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!0,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function d(o){return o==null?null:typeof o=="string"||typeof Element<"u"&&o instanceof Element?o:typeof o=="object"&&"$el"in o&&o.$el instanceof Element?o.$el:typeof o=="object"&&typeof o.x=="number"&&typeof o.y=="number"?o:null}const r=U({getRootEl:()=>a.value,getBoxEl:()=>l.value,onChange:o=>{i.value=o}});function f(){r.setConfig({target:d(n.target),placement:n.placement,targetAnchor:n.targetAnchor,maxWidth:n.maxWidth,tailLength:n.tailLength,tailBaseWidth:n.tailBaseWidth,padding:n.padding,shadow:n.shadow,transitionDuration:n.transitionDuration})}m.watch(()=>[n.target,typeof n.target=="object"&&n.target&&"x"in n.target?n.target.x:null,typeof n.target=="object"&&n.target&&"y"in n.target?n.target.y:null,n.placement,n.targetAnchor,n.maxWidth,n.tailLength,n.tailBaseWidth,n.padding,n.shadow,n.transitionDuration],f,{flush:"post"}),m.onMounted(()=>{f()}),m.onBeforeUnmount(()=>{r.destroy()});function p(){r.update()}t({update:p});const b=m.computed(()=>i.value.rootIsBox?i.value.boxStyle:i.value.overlayStyle),y=m.computed(()=>i.value.rootIsBox?{display:"contents"}:i.value.boxStyle),k=m.computed(()=>({position:"absolute",inset:"0",width:"100%",height:"100%",overflow:"visible",zIndex:i.value.boxZIndex}));return(o,E)=>(m.openBlock(),m.createElementBlock("div",m.mergeProps({ref_key:"rootRef",ref:a,class:["pointing-bubble",{"pointing-bubble__inner":!e.target}],"data-placement":i.value.placement},e.target?{}:o.$attrs,{style:b.value}),[m.createElementVNode("div",m.mergeProps({ref_key:"boxRef",ref:l,class:{"pointing-bubble__inner":!!e.target}},e.target?o.$attrs:{},{style:y.value}),[m.renderSlot(o.$slots,"default",{placement:i.value.placement,tip:i.value.slotTip},()=>[E[0]||(E[0]=m.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))])],16),e.target&&i.value.tail?(m.openBlock(),m.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:m.normalizeStyle(k.value)},[m.createElementVNode("path",{class:"pointing-bubble__path",d:i.value.tail.fill,fill:i.value.boxFill},null,8,nt),i.value.tail.stroke?(m.openBlock(),m.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:i.value.tail.stroke,fill:"none",stroke:i.value.boxStroke,"stroke-width":i.value.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,ot)):m.createCommentVNode("",!0)],4)):m.createCommentVNode("",!0)],16,et))}}),lt={install(e,t={}){const n=t.name??"PointingBubble";e.component(n,L),e.component("Callout",L)}};exports.Callout=L;exports.DEFAULT_BUBBLE_CONFIG=P;exports.PointingBubble=L;exports.PointingBubblePlugin=lt;exports.buildTailPaths=Y;exports.computeGeometry=N;exports.createBubbleController=U;exports.default=L;exports.isPoint=D;exports.resolveElement=O;

package/dist/vue-pointing-bubble.js

@@ -1,4 +1,4 @@
-import { defineComponent as U, ref as L, watch as X, onMounted as N, onUpdated as Z, onBeforeUnmount as q, computed as R, openBlock as I, createElementBlock as z, mergeProps as F, createElementVNode as _, renderSlot as G, normalizeStyle as K, createCommentVNode as T } from "vue";
+import { defineComponent as Z, ref as L, watch as q, onMounted as N, onBeforeUnmount as U, computed as R, openBlock as z, createElementBlock as T, mergeProps as _, createElementVNode as F, renderSlot as G, normalizeStyle as K, createCommentVNode as D } from "vue";
 const Q = {
   target: null,
   placement: "auto",
@@ -8,7 +8,7 @@ const Q = {
   padding: 8,
   shadow: !0,
   transitionDuration: 200
-}, D = "pointing-bubble-styles", V = `:where(.pointing-bubble__inner) {
+}, j = "pointing-bubble-styles", V = `:where(.pointing-bubble__inner) {
   box-sizing: border-box;
   width: var(--pb-width, max-content);
   max-width: var(--pb-max-width, none);
@@ -16,41 +16,41 @@ const Q = {
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`, j = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
-function J(n = document) {
-  if (n.getElementById(D)) return;
-  const e = n.createElement("style");
-  e.id = D, e.textContent = V, n.head.prepend(e);
+}`, O = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
+function J(e = document) {
+  if (e.getElementById(j)) return;
+  const t = e.createElement("style");
+  t.id = j, t.textContent = V, e.head.prepend(t);
 }
-function tt(n) {
-  return typeof n == "object" && n !== null && typeof n.x == "number" && typeof n.y == "number" && n.nodeType !== 1;
+function tt(e) {
+  return typeof e == "object" && e !== null && typeof e.x == "number" && typeof e.y == "number" && e.nodeType !== 1;
 }
-function et(n) {
-  return typeof Element > "u" || n == null ? null : typeof n == "string" ? document.querySelector(n) : n instanceof Element ? n : null;
+function et(e) {
+  return typeof Element > "u" || e == null ? null : typeof e == "string" ? document.querySelector(e) : e instanceof Element ? e : null;
 }
-function O(n, e) {
-  return !n || !e ? !1 : Object.keys(n).every((t) => n[t] === e[t]);
+function A(e, t) {
+  return !e || !t ? !1 : Object.keys(e).every((n) => e[n] === t[n]);
 }
-function nt(n) {
-  const e = n.getBoundingClientRect(), t = getComputedStyle(n), a = parseFloat(t.width) || 0, l = parseFloat(t.height) || 0;
+function nt(e) {
+  const t = e.getBoundingClientRect(), n = getComputedStyle(e), a = parseFloat(n.width) || 0, l = parseFloat(n.height) || 0;
   return {
-    left: e.left,
-    top: e.top,
+    left: t.left,
+    top: t.top,
     width: a,
     height: l,
-    scaleX: a ? e.width / a : 1,
-    scaleY: l ? e.height / l : 1,
+    scaleX: a ? t.width / a : 1,
+    scaleY: l ? t.height / l : 1,
     viewportWidth: window.innerWidth,
     viewportHeight: window.innerHeight
   };
 }
-function ot(n, e, t, a) {
-  const l = getComputedStyle(n), { scaleX: r, scaleY: u } = t, i = n.getBoundingClientRect(), d = e.getBoundingClientRect();
+function ot(e, t, n, a) {
+  const l = getComputedStyle(e), { scaleX: i, scaleY: d } = n, r = e.getBoundingClientRect(), f = t.getBoundingClientRect();
   return {
-    x: a ? (i.left - d.left) / r : 0,
-    y: a ? (i.top - d.top) / u : 0,
-    width: i.width / r,
-    height: i.height / u,
+    x: a ? (r.left - f.left) / i : 0,
+    y: a ? (r.top - f.top) / d : 0,
+    width: r.width / i,
+    height: r.height / d,
     fill: l.backgroundColor,
     stroke: l.borderTopColor,
     strokeWidth: parseFloat(l.borderTopWidth) || 0,
@@ -58,106 +58,106 @@ function ot(n, e, t, a) {
     zIndex: l.zIndex
   };
 }
-function P(n, e, t) {
-  const a = n.x - t;
-  let l = a, r = e.width ? e.width - n.x - t : 1 / 0;
-  return e.viewportWidth && (l = Math.min(l, e.left / e.scaleX + a), r = Math.min(
-    r,
-    (e.viewportWidth - e.left) / e.scaleX - n.x - t
-  )), { left: Math.max(0, l), right: Math.max(0, r) };
+function P(e, t, n) {
+  const a = e.x - n;
+  let l = a, i = t.width ? t.width - e.x - n : 1 / 0;
+  return t.viewportWidth && (l = Math.min(l, t.left / t.scaleX + a), i = Math.min(
+    i,
+    (t.viewportWidth - t.left) / t.scaleX - e.x - n
+  )), { left: Math.max(0, l), right: Math.max(0, i) };
 }
-function H(n) {
-  return n.left > n.right ? "left" : "right";
+function X(e) {
+  return e.left > e.right ? "left" : "right";
 }
-function lt(n) {
-  const { tip: e, box: t, frame: a, placement: l, targetRect: r, room: u, tailLength: i } = n;
-  if (!t.width || !t.height) return null;
-  const { width: d, height: f } = t, { x: g, y: x } = e, W = l === "manual", o = n.targetAnchor === "edge" ? r : null;
-  if (W) {
+function lt(e) {
+  const { tip: t, box: n, frame: a, placement: l, targetRect: i, room: d, tailLength: r } = e;
+  if (!n.width || !n.height) return null;
+  const { width: f, height: p } = n, { x: g, y: x } = t, k = l === "manual", o = e.targetAnchor === "edge" ? i : null;
+  if (k) {
     if (o) {
-      const y = t.x + d / 2, v = t.y + f / 2;
+      const y = n.x + f / 2, v = n.y + p / 2;
       if (!(y >= o.left && y <= o.right && v >= o.top && v <= o.bottom)) {
         const b = Math.min(o.right, Math.max(o.left, y)), m = Math.min(o.bottom, Math.max(o.top, v));
-        return { placement: "manual", tx: b, ty: m, bx: t.x, by: t.y, w: d, h: f };
+        return { placement: "manual", tx: b, ty: m, bx: n.x, by: n.y, w: f, h: p };
       }
     }
-    return { placement: "manual", tx: g, ty: x, bx: t.x, by: t.y, w: d, h: f };
+    return { placement: "manual", tx: g, ty: x, bx: n.x, by: n.y, w: f, h: p };
   }
-  const B = (y) => o ? y === "top" ? o.top : o.bottom : x;
+  const W = (y) => o ? y === "top" ? o.top : o.bottom : x;
   let S = l;
   if (l === "auto") {
-    let y = x > (a.height || 600) / 2 ? "top" : "bottom", v = H(u);
-    const { scaleX: p, scaleY: b } = a;
+    let y = x > (a.height || 600) / 2 ? "top" : "bottom", v = X(d);
+    const { scaleX: u, scaleY: b } = a;
     if (a.viewportHeight) {
-      const m = a.top + (B("top") - f - i) * b >= 0, w = a.top + (B("bottom") + f + i) * b <= a.viewportHeight;
+      const m = a.top + (W("top") - p - r) * b >= 0, w = a.top + (W("bottom") + p + r) * b <= a.viewportHeight;
       y === "top" && !m && w ? y = "bottom" : y === "bottom" && !w && m && (y = "top");
     }
     if (a.viewportWidth) {
-      const m = a.left + (g - d - i) * p >= 0, w = a.left + (g + d + i) * p <= a.viewportWidth;
+      const m = a.left + (g - f - r) * u >= 0, w = a.left + (g + f + r) * u <= a.viewportWidth;
       v === "left" && !m && w ? v = "right" : v === "right" && !w && m && (v = "left");
     }
     S = `${y}-${v}`;
   }
-  const [k, $] = S.split("-"), M = B(k);
+  const [B, $] = S.split("-"), I = W(B);
   return {
     placement: S,
     tx: g,
-    ty: M,
-    bx: $ === "left" ? g - d - i : g + i,
-    by: k === "top" ? M - f - i : M + i,
-    w: d,
-    h: f
+    ty: I,
+    bx: $ === "left" ? g - f - r : g + r,
+    by: B === "top" ? I - p - r : I + r,
+    w: f,
+    h: p
   };
 }
 const it = ["tx", "ty", "bx", "by"], rt = ["tx", "ty"];
 function at() {
   return typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function st(n, e, t, a) {
+function st(e, t, n, a) {
   let l = 0;
-  const r = () => {
+  const i = () => {
     typeof cancelAnimationFrame < "u" && cancelAnimationFrame(l);
   };
-  if (!e || !n || t <= 0 || typeof requestAnimationFrame > "u" || at())
-    return a(e), { cancel: r };
-  const u = performance.now(), i = (d) => {
-    const f = Math.min(1, (d - u) / t), g = 1 - Math.pow(1 - f, 3), x = { ...e }, W = e.placement === "manual" ? rt : it;
-    for (const o of W)
-      x[o] = n[o] + (e[o] - n[o]) * g;
-    a(x), f < 1 && (l = requestAnimationFrame(i));
+  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || at())
+    return a(t), { cancel: i };
+  const d = performance.now(), r = (f) => {
+    const p = Math.min(1, (f - d) / n), g = 1 - Math.pow(1 - p, 3), x = { ...t }, k = t.placement === "manual" ? rt : it;
+    for (const o of k)
+      x[o] = e[o] + (t[o] - e[o]) * g;
+    a(x), p < 1 && (l = requestAnimationFrame(r));
   };
-  return l = requestAnimationFrame(i), { cancel: r };
+  return l = requestAnimationFrame(r), { cancel: i };
 }
-function ct(n) {
-  const { geometry: e, strokeWidth: t, radius: a, tailBaseWidth: l } = n, { placement: r, tx: u, ty: i, bx: d, by: f, w: g, h: x } = e, W = parseFloat(a) * (a.endsWith("%") ? Math.min(g, x) / 100 : 1) || 0, o = l / 2, B = (s, c, h) => c > h ? (c + h) / 2 : Math.min(h, Math.max(c, s));
-  let S = null, k = 0;
-  if (r === "manual") {
-    const s = Math.max(d - u, u - (d + g), 0), c = Math.max(f - i, i - (f + x), 0);
+function ut(e) {
+  const { geometry: t, strokeWidth: n, radius: a, tailBaseWidth: l } = e, { placement: i, tx: d, ty: r, bx: f, by: p, w: g, h: x } = t, k = parseFloat(a) * (a.endsWith("%") ? Math.min(g, x) / 100 : 1) || 0, o = l / 2, W = (s, c, h) => c > h ? (c + h) / 2 : Math.min(h, Math.max(c, s));
+  let S = null, B = 0;
+  if (i === "manual") {
+    const s = Math.max(f - d, d - (f + g), 0), c = Math.max(p - r, r - (p + x), 0);
     if (s > 0 && s >= c)
-      S = u < d ? "left" : "right", k = i;
+      S = d < f ? "left" : "right", B = r;
     else if (c > 0)
-      S = i < f ? "top" : "bottom", k = u;
+      S = r < p ? "top" : "bottom", B = d;
     else
       return null;
-  } else if (r !== "none") {
-    const [s, c] = r.split("-");
-    S = c === "left" ? "right" : "left", k = f + x * (s === "top" ? 0.65 : 0.35);
+  } else if (i !== "none") {
+    const [s, c] = i.split("-");
+    S = c === "left" ? "right" : "left", B = p + x * (s === "top" ? 0.65 : 0.35);
   } else
     return null;
-  const $ = 1, M = S === "top" || S === "bottom", y = {
-    left: (s, c) => [d - c, s],
-    right: (s, c) => [d + g + c, s],
-    top: (s, c) => [s, f - c],
-    bottom: (s, c) => [s, f + x + c]
+  const $ = 1, I = S === "top" || S === "bottom", y = {
+    left: (s, c) => [f - c, s],
+    right: (s, c) => [f + g + c, s],
+    top: (s, c) => [s, p - c],
+    bottom: (s, c) => [s, p + x + c]
   }[S], v = {
-    left: d - u,
-    right: u - d - g,
-    top: f - i,
-    bottom: i - f - x
-  }[S], p = M ? B(k, d + W + o + t / 2, d + g - W - o - t / 2) : B(k, f + W + o + t / 2, f + x - W - o - t / 2), b = Math.max(0, Math.min(t, v / 2)), m = ([s, c]) => `${s} ${c}`, w = (s, c) => {
-    const h = y(s, b), A = Math.hypot(u - h[0], i - h[1]) || 1, C = [
-      h[0] + (u - h[0]) * b / A,
-      h[1] + (i - h[1]) * b / A
+    left: f - d,
+    right: d - f - g,
+    top: p - r,
+    bottom: r - p - x
+  }[S], u = I ? W(B, f + k + o + n / 2, f + g - k - o - n / 2) : W(B, p + k + o + n / 2, p + x - k - o - n / 2), b = Math.max(0, Math.min(n, v / 2)), m = ([s, c]) => `${s} ${c}`, w = (s, c) => {
+    const h = y(s, b), M = Math.hypot(d - h[0], r - h[1]) || 1, C = [
+      h[0] + (d - h[0]) * b / M,
+      h[1] + (r - h[1]) * b / M
     ];
     return {
       inner: m(y(s, c)),
@@ -166,23 +166,23 @@ function ct(n) {
       end: m(C)
     };
   }, E = (s) => {
-    const c = w(p - o, s), h = w(p + o, s);
-    return `M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${u} ${i} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`;
+    const c = w(u - o, s), h = w(u + o, s);
+    return `M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${d} ${r} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`;
   };
   return {
-    fill: `${E(-t - $)} Z`,
-    stroke: t ? E(-t) : null
+    fill: `${E(-n - $)} Z`,
+    stroke: n ? E(-n) : null
   };
 }
-function ut(n) {
+function ct(e) {
   return {
-    hasTarget: n,
+    hasTarget: e,
     placement: "none",
     tip: null,
     slotTip: null,
     overlayStyle: {},
     boxStyle: {},
-    rootIsBox: !n,
+    rootIsBox: !e,
     tail: null,
     boxFill: "",
     boxStroke: "",
@@ -190,9 +190,15 @@ function ut(n) {
     boxZIndex: "auto"
   };
 }
-function dt(n) {
+function Y(e, t) {
+  return e === t ? !0 : !e || !t ? !1 : e.x === t.x && e.y === t.y;
+}
+function dt(e, t) {
+  return e.hasTarget === t.hasTarget && e.placement === t.placement && e.rootIsBox === t.rootIsBox && e.boxFill === t.boxFill && e.boxStroke === t.boxStroke && e.boxStrokeWidth === t.boxStrokeWidth && e.boxZIndex === t.boxZIndex && Y(e.tip, t.tip) && Y(e.slotTip, t.slotTip) && A(e.overlayStyle, t.overlayStyle) && A(e.boxStyle, t.boxStyle) && e.tail?.fill === t.tail?.fill && e.tail?.stroke === t.tail?.stroke;
+}
+function ft(e) {
   J();
-  let e = { ...Q }, t = null, a = null, l = null, r = {
+  let t = { ...Q }, n = null, a = null, l = null, i = {
     left: 0,
     top: 0,
     width: 0,
@@ -201,51 +207,52 @@ function dt(n) {
     scaleY: 1,
     viewportWidth: 0,
     viewportHeight: 0
-  }, u = null, i = null, d = null, f = null, g = ut(!1);
+  }, d = null, r = null, f = null, p = null, g = ct(!1);
   const x = () => {
-    g = W(), n.onChange?.(g);
+    const u = k();
+    dt(g, u) || (g = u, e.onChange?.(g));
   };
-  function W() {
-    const p = e.target != null, b = e.placement === "manual", m = p ? u?.placement ?? "none" : "none", w = {
+  function k() {
+    const u = t.target != null, b = t.placement === "manual", m = u ? d?.placement ?? "none" : "none", w = {
       position: "absolute",
       inset: "0",
       pointerEvents: "none",
-      filter: e.shadow ? j : void 0
+      filter: t.shadow ? O : void 0
     }, E = l?.zIndex;
     E && E !== "auto" && (w.zIndex = E);
     const s = {
-      "--pb-padding": typeof e.padding == "number" ? `${e.padding}px` : e.padding
+      "--pb-padding": typeof t.padding == "number" ? `${t.padding}px` : t.padding
     };
-    if (e.maxWidth != null && (s["--pb-max-width"] = `${e.maxWidth}px`), !p)
-      s["--pb-width"] = "fit-content", e.shadow && (s.filter = j);
+    if (t.maxWidth != null && (s["--pb-max-width"] = `${t.maxWidth}px`), !u)
+      s["--pb-width"] = "fit-content", t.shadow && (s.filter = O);
     else if (Object.assign(s, {
       position: "absolute",
       pointerEvents: "auto",
-      visibility: u ? "visible" : "hidden"
+      visibility: d ? "visible" : "hidden"
     }), b)
       s["--pb-width"] = "fit-content";
     else if (Object.assign(s, {
-      left: `${u?.bx ?? 0}px`,
-      top: `${u?.by ?? 0}px`,
+      left: `${d?.bx ?? 0}px`,
+      top: `${d?.by ?? 0}px`,
       margin: "0"
-    }), e.maxWidth == null && t) {
-      const h = P(t, r, e.tailLength), A = i?.placement ?? e.placement, C = A === "auto" ? H(h) : A.split("-")[1];
+    }), t.maxWidth == null && n) {
+      const h = P(n, i, t.tailLength), M = r?.placement ?? t.placement, C = M === "auto" ? X(h) : M.split("-")[1];
       s["--pb-max-width"] = `${h[C]}px`;
     }
-    const c = p && u && l ? ct({
-      geometry: u,
+    const c = u && d && l ? ut({
+      geometry: d,
       strokeWidth: l.strokeWidth,
       radius: l.radius,
-      tailBaseWidth: e.tailBaseWidth
+      tailBaseWidth: t.tailBaseWidth
     }) : null;
     return {
-      hasTarget: p,
+      hasTarget: u,
       placement: m,
-      tip: t,
-      slotTip: i ? { x: i.tx, y: i.ty } : t,
+      tip: n,
+      slotTip: r ? { x: r.tx, y: r.ty } : n,
       overlayStyle: w,
       boxStyle: s,
-      rootIsBox: !p,
+      rootIsBox: !u,
       tail: c,
       boxFill: l?.fill ?? "",
       boxStroke: l?.stroke ?? "",
@@ -254,100 +261,100 @@ function dt(n) {
     };
   }
   function o() {
-    if (!t || !l) {
-      i = null, B(null);
+    if (!n || !l) {
+      r = null, W(null);
       return;
     }
-    const p = P(t, r, e.tailLength);
-    i = lt({
-      tip: t,
+    const u = P(n, i, t.tailLength);
+    r = lt({
+      tip: n,
       box: l,
-      frame: r,
-      placement: e.placement,
-      targetAnchor: e.targetAnchor,
+      frame: i,
+      placement: t.placement,
+      targetAnchor: t.targetAnchor,
       targetRect: a,
-      room: p,
-      tailLength: e.tailLength
-    }), B(i);
+      room: u,
+      tailLength: t.tailLength
+    }), W(r);
   }
-  function B(p) {
-    d?.cancel(), d = st(
+  function W(u) {
+    f?.cancel(), f = st(
+      d,
       u,
-      p,
-      e.transitionDuration,
+      t.transitionDuration,
       (b) => {
-        u = b, x();
+        d = b, x();
       }
     );
   }
   function S() {
-    const p = n.getRootEl(), b = n.getBoxEl();
-    if (!b || e.target == null || !p) return;
+    const u = e.getRootEl(), b = e.getBoxEl();
+    if (!b || t.target == null || !u) return;
     const m = ot(
       b,
-      p,
-      r,
-      e.placement === "manual"
+      u,
+      i,
+      t.placement === "manual"
     );
-    O(
+    A(
       m,
       l
     ) || (l = m);
   }
-  function k() {
-    const p = n.getRootEl();
-    if (e.target == null || !p) {
-      t = null, a = null, l = null, i = null, u = null, x();
+  function B() {
+    const u = e.getRootEl();
+    if (t.target == null || !u) {
+      n = null, a = null, l = null, r = null, d = null, x();
       return;
     }
-    r = nt(p);
-    const b = et(e.target);
+    i = nt(u);
+    const b = et(t.target);
     if (b) {
-      const m = b.getBoundingClientRect(), { scaleX: w, scaleY: E, left: s, top: c } = r, h = {
+      const m = b.getBoundingClientRect(), { scaleX: w, scaleY: E, left: s, top: c } = i, h = {
         left: (m.left - s) / w,
         top: (m.top - c) / E,
         right: (m.right - s) / w,
         bottom: (m.bottom - c) / E
       };
-      O(h, a) || (a = h), t = {
+      A(h, a) || (a = h), n = {
         x: (h.left + h.right) / 2,
         y: (h.top + h.bottom) / 2
       };
-    } else if (tt(e.target))
-      a = null, t = { x: e.target.x, y: e.target.y };
+    } else if (tt(t.target))
+      a = null, n = { x: t.target.x, y: t.target.y };
     else {
-      a = null, t = null, l = null, i = null, u = null, x();
+      a = null, n = null, l = null, r = null, d = null, x();
       return;
     }
     S(), o();
   }
   function $() {
-    k();
+    B();
   }
   typeof window < "u" && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0));
-  function M() {
+  function I() {
     if (typeof ResizeObserver > "u") return;
-    f?.disconnect(), f = new ResizeObserver(() => k());
-    const p = n.getRootEl(), b = n.getBoxEl();
-    p && f.observe(p), b && f.observe(b);
+    p?.disconnect(), p = new ResizeObserver(() => B());
+    const u = e.getRootEl(), b = e.getBoxEl();
+    u && p.observe(u), b && p.observe(b);
   }
-  const y = k;
+  const y = B;
   function v() {
-    M(), y();
+    I(), y();
   }
   return {
     update: v,
-    setConfig(p) {
-      e = { ...e, ...p }, v();
+    setConfig(u) {
+      t = { ...t, ...u }, v();
     },
-    getConfig: () => e,
+    getConfig: () => t,
     getState: () => g,
     destroy() {
-      d?.cancel(), f?.disconnect(), typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+      f?.cancel(), p?.disconnect(), typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
     }
   };
 }
-const ft = ["data-placement"], pt = ["d", "fill"], ht = ["d", "stroke", "stroke-width"], Y = /* @__PURE__ */ U({
+const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-width"], H = /* @__PURE__ */ Z({
   name: "PointingBubble",
   inheritAttrs: !1,
   __name: "PointingBubble",
@@ -362,8 +369,8 @@ const ft = ["data-placement"], pt = ["d", "fill"], ht = ["d", "stroke", "stroke-
     shadow: { type: Boolean, default: !0 },
     transitionDuration: { default: 200 }
   },
-  setup(n, { expose: e }) {
-    const t = n, a = L(null), l = L(null), r = L({
+  setup(e, { expose: t }) {
+    const n = e, a = L(null), l = L(null), i = L({
       hasTarget: !1,
       placement: "none",
       tip: null,
@@ -377,84 +384,82 @@ const ft = ["data-placement"], pt = ["d", "fill"], ht = ["d", "stroke", "stroke-
       boxStrokeWidth: 0,
       boxZIndex: "auto"
     });
-    function u(o) {
+    function d(o) {
       return o == null ? null : typeof o == "string" || typeof Element < "u" && o instanceof Element ? o : typeof o == "object" && "$el" in o && o.$el instanceof Element ? o.$el : typeof o == "object" && typeof o.x == "number" && typeof o.y == "number" ? o : null;
     }
-    const i = dt({
+    const r = ft({
       getRootEl: () => a.value,
       getBoxEl: () => l.value,
       onChange: (o) => {
-        r.value = o;
+        i.value = o;
       }
     });
-    function d() {
-      i.setConfig({
-        target: u(t.target),
-        placement: t.placement,
-        targetAnchor: t.targetAnchor,
-        maxWidth: t.maxWidth,
-        tailLength: t.tailLength,
-        tailBaseWidth: t.tailBaseWidth,
-        padding: t.padding,
-        shadow: t.shadow,
-        transitionDuration: t.transitionDuration
+    function f() {
+      r.setConfig({
+        target: d(n.target),
+        placement: n.placement,
+        targetAnchor: n.targetAnchor,
+        maxWidth: n.maxWidth,
+        tailLength: n.tailLength,
+        tailBaseWidth: n.tailBaseWidth,
+        padding: n.padding,
+        shadow: n.shadow,
+        transitionDuration: n.transitionDuration
       });
     }
-    X(
+    q(
       () => [
-        t.target,
-        typeof t.target == "object" && t.target && "x" in t.target ? t.target.x : null,
-        typeof t.target == "object" && t.target && "y" in t.target ? t.target.y : null,
-        t.placement,
-        t.targetAnchor,
-        t.maxWidth,
-        t.tailLength,
-        t.tailBaseWidth,
-        t.padding,
-        t.shadow,
-        t.transitionDuration
+        n.target,
+        typeof n.target == "object" && n.target && "x" in n.target ? n.target.x : null,
+        typeof n.target == "object" && n.target && "y" in n.target ? n.target.y : null,
+        n.placement,
+        n.targetAnchor,
+        n.maxWidth,
+        n.tailLength,
+        n.tailBaseWidth,
+        n.padding,
+        n.shadow,
+        n.transitionDuration
       ],
-      d,
+      f,
       { flush: "post" }
     ), N(() => {
-      d();
-    }), Z(() => {
-      i.update();
-    }), q(() => {
-      i.destroy();
+      f();
+    }), U(() => {
+      r.destroy();
     });
-    function f() {
-      i.update();
+    function p() {
+      r.update();
     }
-    e({ update: f });
+    t({ update: p });
     const g = R(
-      () => r.value.rootIsBox ? r.value.boxStyle : r.value.overlayStyle
-    ), x = R(() => r.value.rootIsBox ? { display: "contents" } : r.value.boxStyle), W = R(
+      () => i.value.rootIsBox ? i.value.boxStyle : i.value.overlayStyle
+    ), x = R(() => i.value.rootIsBox ? { display: "contents" } : i.value.boxStyle), k = R(
       () => ({
         position: "absolute",
         inset: "0",
         width: "100%",
         height: "100%",
         overflow: "visible",
-        zIndex: r.value.boxZIndex
+        zIndex: i.value.boxZIndex
       })
     );
-    return (o, B) => (I(), z("div", F({
+    return (o, W) => (z(), T("div", _({
       ref_key: "rootRef",
       ref: a,
-      class: ["pointing-bubble", { "pointing-bubble__inner": !n.target }],
-      "data-placement": r.value.placement
-    }, n.target ? {} : o.$attrs, { style: g.value }), [
-      _("div", F({
+      class: ["pointing-bubble", { "pointing-bubble__inner": !e.target }],
+      "data-placement": i.value.placement
+    }, e.target ? {} : o.$attrs, { style: g.value }), [
+      F("div", _({
         ref_key: "boxRef",
         ref: l,
-        class: { "pointing-bubble__inner": !!n.target }
-      }, n.target ? o.$attrs : {}, { style: x.value }), [
+        class: { "pointing-bubble__inner": !!e.target }
+      }, e.target ? o.$attrs : {}, { style: x.value }), [
         G(o.$slots, "default", {
-          placement: r.value.placement,
-          tip: r.value.slotTip
+          placement: i.value.placement,
+          tip: i.value.slotTip
         }, () => [
-          B[0] || (B[0] = _("p", { style: {
+          W[0] || (W[0] = F("p", { style: {
             margin: 0,
             fontSize: "14px",
             fontWeight: 600,
@@ -462,44 +467,44 @@ const ft = ["data-placement"], pt = ["d", "fill"], ht = ["d", "stroke", "stroke-
           } }, " Callout content ", -1))
         ])
       ], 16),
-      n.target && r.value.tail ? (I(), z("svg", {
+      e.target && i.value.tail ? (z(), T("svg", {
         key: 0,
         class: "pointing-bubble__svg",
-        style: K(W.value)
+        style: K(k.value)
       }, [
-        _("path", {
+        F("path", {
           class: "pointing-bubble__path",
-          d: r.value.tail.fill,
-          fill: r.value.boxFill
-        }, null, 8, pt),
-        r.value.tail.stroke ? (I(), z("path", {
+          d: i.value.tail.fill,
+          fill: i.value.boxFill
+        }, null, 8, ht),
+        i.value.tail.stroke ? (z(), T("path", {
           key: 0,
           class: "pointing-bubble__path",
-          d: r.value.tail.stroke,
+          d: i.value.tail.stroke,
           fill: "none",
-          stroke: r.value.boxStroke,
-          "stroke-width": r.value.boxStrokeWidth,
+          stroke: i.value.boxStroke,
+          "stroke-width": i.value.boxStrokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "butt"
-        }, null, 8, ht)) : T("", !0)
-      ], 4)) : T("", !0)
-    ], 16, ft));
+        }, null, 8, mt)) : D("", !0)
+      ], 4)) : D("", !0)
+    ], 16, pt));
   }
 }), bt = {
-  install(n, e = {}) {
-    const t = e.name ?? "PointingBubble";
-    n.component(t, Y), n.component("Callout", Y);
+  install(e, t = {}) {
+    const n = t.name ?? "PointingBubble";
+    e.component(n, H), e.component("Callout", H);
   }
 };
 export {
-  Y as Callout,
+  H as Callout,
   Q as DEFAULT_BUBBLE_CONFIG,
-  Y as PointingBubble,
+  H as PointingBubble,
   bt as PointingBubblePlugin,
-  ct as buildTailPaths,
+  ut as buildTailPaths,
   lt as computeGeometry,
-  dt as createBubbleController,
-  Y as default,
+  ft as createBubbleController,
+  H as default,
   tt as isPoint,
   et as resolveElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pointing-bubble",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Vue 3 callout / speech bubble whose SVG tail points exactly at coordinates or a DOM element.",
   "type": "module",
   "sideEffects": false,