vue-pointing-bubble 0.6.0 → 0.6.1

package/dist/pointing-bubble/measure.d.ts

@@ -5,9 +5,10 @@ export declare function sameKeys(a: Record<string, unknown> | null | undefined,
  * frame. Falls back to `document.documentElement`.
  */
 export declare function positioningFrameEl(boxEl: HTMLElement): HTMLElement;
+export declare function effectiveZoom(el: Element): number;
 /** Measure a frame element including ancestor CSS scale (e.g. Slidev). */
 export declare function measureFrame(frameEl: HTMLElement): FrameRect;
 /** Frame for tip/tail math: the bubble's positioning containing block. */
 export declare function measureFrameFrom(boxEl: HTMLElement): FrameRect;
 /** Box size and top-left in frame-local coordinates. */
-export declare function measureBox(boxEl: HTMLElement, frame: FrameRect): BoxMeasure;
+export declare function measureBox(boxEl: HTMLElement, frame: FrameRect, boxZoom?: number, frameZoom?: number): BoxMeasure;

package/dist/vue-pointing-bubble.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("vue"),G={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},H="pointing-bubble-styles",ot=`:where(.pointing-bubble__inner) {
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("vue"),et={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},K="pointing-bubble-styles",ct=`: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;
-}`,lt="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function it(e=document){if(e.getElementById(H))return;const t=e.createElement("style");t.id=H,t.textContent=ot,e.head.prepend(t)}function Z(e){return typeof e=="object"&&e!==null&&typeof e.x=="number"&&typeof e.y=="number"&&e.nodeType!==1}function N(e){return typeof Element>"u"||e==null?null:typeof e=="string"?document.querySelector(e):e instanceof Element?e:null}function Y(e,t){return!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n])}function K(e){let t=e.parentElement;for(;t;){const n=getComputedStyle(t).position;if(n&&n!=="static")return t;if(t===document.documentElement)break;t=t.parentElement}return document.documentElement}function rt(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e),l=parseFloat(n.width)||0,o=parseFloat(n.height)||0;return{left:t.left,top:t.top,width:l,height:o,scaleX:l?t.width/l:1,scaleY:o?t.height/o:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function st(e){return rt(K(e))}function at(e,t){const n=getComputedStyle(e),{scaleX:l,scaleY:o,left:u,top:a}=t,i=e.getBoundingClientRect();return{x:(i.left-u)/l,y:(i.top-a)/o,width:i.width/l,height:i.height/o,fill:n.backgroundColor,stroke:n.borderTopColor,strokeWidth:parseFloat(n.borderTopWidth)||0,borderLeft:(parseFloat(n.borderLeftWidth)||0)/l,borderTop:(parseFloat(n.borderTopWidth)||0)/o,radius:n.borderTopLeftRadius,zIndex:n.zIndex}}function U(e,t,n){const l=e.x-n;let o=l,u=t.width?t.width-e.x-n:1/0;return t.viewportWidth&&(o=Math.min(o,t.left/t.scaleX+l),u=Math.min(u,(t.viewportWidth-t.left)/t.scaleX-e.x-n)),{left:Math.max(0,o),right:Math.max(0,u)}}function J(e){return e.left>e.right?"left":"right"}function Q(e){const{tip:t,box:n,frame:l,placement:o,targetRect:u,room:a,tailLength:i}=e;if(!n.width||!n.height)return null;const{width:r,height:f}=n,{x:h,y:g}=t,E=o==="manual",c=e.targetAnchor==="edge"?u:null;if(E){if(c){const k=n.x+r/2,W=n.y+f/2;if(!(k>=c.left&&k<=c.right&&W>=c.top&&W<=c.bottom)){const b=Math.min(c.right,Math.max(c.left,k)),B=Math.min(c.bottom,Math.max(c.top,W));return{placement:"manual",tx:b,ty:B,bx:n.x,by:n.y,w:r,h:f}}}return{placement:"manual",tx:h,ty:g,bx:n.x,by:n.y,w:r,h:f}}const _=k=>c?k==="top"?c.top:c.bottom:g;let w=o;if(o==="auto"){let k=g>(l.height||600)/2?"top":"bottom",W=J(a);const{scaleX:$,scaleY:b}=l;if(l.viewportHeight){const B=l.top+(_("top")-f-i)*b>=0,A=l.top+(_("bottom")+f+i)*b<=l.viewportHeight;k==="top"&&!B&&A?k="bottom":k==="bottom"&&!A&&B&&(k="top")}if(l.viewportWidth){const B=l.left+(h-r-i)*$>=0,A=l.left+(h+r+i)*$<=l.viewportWidth;W==="left"&&!B&&A?W="right":W==="right"&&!A&&B&&(W="left")}w=`${k}-${W}`}const[d,T]=w.split("-"),v=_(d);return{placement:w,tx:h,ty:v,bx:T==="left"?h-r-i:h+i,by:d==="top"?v-f-i:v+i,w:r,h:f}}const ct=["tx","ty","bx","by"],ut=["tx","ty"];function dt(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function ft(e,t,n,l){let o=0;const u=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(o)};if(!t||!e||n<=0||typeof requestAnimationFrame>"u"||dt())return l(t),{cancel:u};const a=performance.now(),i=r=>{const f=Math.min(1,(r-a)/n),h=1-Math.pow(1-f,3),g={...t},E=t.placement==="manual"?ut:ct;for(const c of E)g[c]=e[c]+(t[c]-e[c])*h;l(g),f<1&&(o=requestAnimationFrame(i))};return o=requestAnimationFrame(i),{cancel:u}}function tt(e){const{geometry:t,strokeWidth:n,radius:l,tailBaseWidth:o}=e,{placement:u,tx:a,ty:i,bx:r,by:f,w:h,h:g}=t,E=parseFloat(l)*(l.endsWith("%")?Math.min(h,g)/100:1)||0,c=o/2,_=(y,m,R)=>m>R?(m+R)/2:Math.min(R,Math.max(m,y));let w=null,d=0;if(u==="manual"){const y=Math.max(r-a,a-(r+h),0),m=Math.max(f-i,i-(f+g),0);if(y>0&&y>=m)w=a<r?"left":"right",d=i;else if(m>0)w=i<f?"top":"bottom",d=a;else return null}else if(u!=="none"){const[y,m]=u.split("-");w=m==="left"?"right":"left",d=f+g*(y==="top"?.65:.35)}else return null;const T=w==="top"||w==="bottom",v={left:(y,m)=>[r-m,y],right:(y,m)=>[r+h+m,y],top:(y,m)=>[y,f-m],bottom:(y,m)=>[y,f+g+m]}[w],k=T?r:f,W=T?r+h:f+g,$=_(d,k+c+n/2+E,W-c-n/2-E),b=([y,m])=>`${y} ${m}`,B=n>0?-n/2:0,A=2,P=2,s=$-c,x=$+c,z=v(s-A,B),S=v(s,B),C=v(x,B),M=v(x+A,B),F=v(s,-(n+P)),O=v(x,-(n+P)),L=v(s,1),I=v(x,1);return{fill:`M ${b(F)} L ${b(L)} L ${b(S)} L ${a} ${i} L ${b(C)} L ${b(I)} L ${b(O)} Z`,stroke:n?`M ${b(z)} L ${b(S)} L ${a} ${i} L ${b(C)} L ${b(M)}`:null}}const pt=["left","top","right","bottom","width","height","transform","translate","inset","inset-inline","inset-block"];function ht(e){return{hasTarget:e,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function D(e,t){return e===t?!0:!e||!t?!1:e.x===t.x&&e.y===t.y}function mt(e,t){return e===t?!0:!e||!t?!1:e.placement===t.placement&&e.tx===t.tx&&e.ty===t.ty&&e.bx===t.bx&&e.by===t.by&&e.w===t.w&&e.h===t.h}function gt(e,t){return e.hasTarget===t.hasTarget&&e.placement===t.placement&&e.boxFill===t.boxFill&&e.boxStroke===t.boxStroke&&e.boxStrokeWidth===t.boxStrokeWidth&&e.boxZIndex===t.boxZIndex&&D(e.tip,t.tip)&&D(e.slotTip,t.slotTip)&&Y(e.boxStyle,t.boxStyle)&&Y(e.svgStyle,t.svgStyle)&&e.tail?.fill===t.tail?.fill&&e.tail?.stroke===t.tail?.stroke}function V(e){if(typeof e.checkVisibility=="function")return e.checkVisibility({checkOpacity:!0,checkVisibilityCSS:!0});const t=getComputedStyle(e);return!(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)===0)}function X(e){const t=e.style;return pt.map(n=>t.getPropertyValue(n)).join("|")}function et(e){it();let t={...G},n=null,l=null,o=null,u={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},a=null,i=null,r=null,f=null,h=null,g=null,E=ht(!1),c=!1,_="";const w=()=>{const s=d();gt(E,s)||(E=s,e.onChange?.(E))};function d(){const s=t.target!=null,x=t.placement==="manual",z=s?a?.placement??"none":"none",S={"--pb-padding":typeof t.padding=="number"?`${t.padding}px`:t.padding};if(t.maxWidth!=null&&(S["--pb-max-width"]=`${t.maxWidth}px`),t.shadow&&(S.filter=lt),!s)S["--pb-width"]="fit-content";else if(Object.assign(S,{position:"absolute",pointerEvents:"auto",overflow:"visible"}),x)S["--pb-width"]="fit-content";else if(Object.assign(S,{left:`${a?.bx??0}px`,top:`${a?.by??0}px`,margin:"0"}),t.maxWidth==null&&n){const O=U(n,u,t.tailLength),L=i?.placement??t.placement,I=L==="auto"?J(O):L.split("-")[1];S["--pb-max-width"]=`${O[I]}px`}const C=o?.zIndex;C&&C!=="auto"&&(S.zIndex=C);const M=s&&a&&o?tt({geometry:a,strokeWidth:o.strokeWidth,radius:o.radius,tailBaseWidth:t.tailBaseWidth}):null;let F={};if(M&&a&&u.width&&u.height){const O=o?.borderLeft??0,L=o?.borderTop??0;F={position:"absolute",left:`${-a.bx-O}px`,top:`${-a.by-L}px`,width:`${u.width}px`,height:`${u.height}px`,overflow:"visible",pointerEvents:"none",zIndex:o?.zIndex??"auto"}}return{hasTarget:s,placement:z,tip:n,slotTip:i?{x:i.tx,y:i.ty}:n,boxStyle:S,svgStyle:F,tail:M,boxFill:o?.fill??"",boxStroke:o?.stroke??"",boxStrokeWidth:o?.strokeWidth??0,boxZIndex:o?.zIndex??"auto"}}function T(){if(!n||!o){(i!==null||a!==null)&&(i=null,v(null));return}const s=U(n,u,t.tailLength),x=Q({tip:n,box:o,frame:u,placement:t.placement,targetAnchor:t.targetAnchor,targetRect:l,room:s,tailLength:t.tailLength});mt(i,x)||(i=x,v(i))}function v(s){r?.cancel(),r=ft(a,s,t.transitionDuration,x=>{a=x,w()})}function k(s){const x=at(s,u);return Y(x,o)?!1:(o=x,!0)}function W(){const s=e.getBoxEl();if(!s){n=null,l=null,o=null,i=null,a=null,c=!1,w();return}if(!V(s)){r?.cancel(),c=!0;return}const x=c;if(c=!1,t.target==null){n=null,l=null,o=null,i=null,a=null,w();return}const z=u;u=st(s);const S=!Y(u,z),C=typeof t.target=="string"?K(s).querySelector(t.target)??N(t.target):N(t.target);let M=!1,F=!1;if(C){const L=C.getBoundingClientRect(),{scaleX:I,scaleY:y,left:m,top:R}=u,j={left:(L.left-m)/I,top:(L.top-R)/y,right:(L.right-m)/I,bottom:(L.bottom-R)/y};F=!Y(j,l),F&&(l=j);const q={x:(j.left+j.right)/2,y:(j.top+j.bottom)/2};M=!D(n,q),n=q}else if(Z(t.target)){F=l!=null,l=null;const L={x:t.target.x,y:t.target.y};M=!D(n,L),n=L}else{n=null,l=null,o=null,i=null,a=null,w();return}const O=k(s);_=X(s),!(!x&&!S&&!M&&!F&&!O&&a)&&T()}function $(){W()}typeof window<"u"&&(window.addEventListener("resize",$),window.addEventListener("scroll",$,!0));const b=W;function B(s){const x=e.getBoxEl();if(!x)return;if(s.some(C=>C.attributeName==="class"||C.attributeName==="hidden")){if(!V(x)){r?.cancel(),c=!0;return}b();return}const S=X(x);S!==_&&(_=S,b())}function A(){const s=e.getBoxEl();s!==g&&(g=s,f?.disconnect(),h?.disconnect(),f=null,h=null,s&&(typeof ResizeObserver<"u"&&(f=new ResizeObserver(()=>b()),f.observe(s)),typeof MutationObserver<"u"&&(h=new MutationObserver(B),h.observe(s,{attributes:!0,attributeFilter:["style","class","hidden"]}))))}function P(){A(),b()}return{update:P,setConfig(s){t={...t,...s},P()},getConfig:()=>t,getState:()=>E,destroy(){r?.cancel(),f?.disconnect(),h?.disconnect(),g=null,typeof window<"u"&&(window.removeEventListener("resize",$),window.removeEventListener("scroll",$,!0))}}}const bt=["data-placement"],xt=["d","fill"],yt=["d","stroke","stroke-width"],nt=p.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,l=p.useAttrs(),o=p.computed(()=>l.class),u=p.computed(()=>l.style),a=p.computed(()=>{const{class:d,style:T,...v}=l;return v}),i=p.ref(null),r=p.reactive({hasTarget:!1,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function f(d){return d==null?null:typeof d=="string"||typeof Element<"u"&&d instanceof Element?d:typeof d=="object"&&"$el"in d&&d.$el instanceof Element?d.$el:typeof d=="object"&&typeof d.x=="number"&&typeof d.y=="number"?d:null}const h=p.getCurrentInstance(),g=et({getBoxEl:()=>i.value,onChange:d=>{Object.assign(r,d),h?.update()}});function E(){g.setConfig({target:f(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})}p.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],E,{flush:"post"}),p.onMounted(()=>{E()}),p.onBeforeUnmount(()=>{g.destroy()});function c(){g.update()}t({update:c});const _=p.computed(()=>({...u.value,...r.boxStyle})),w=p.computed(()=>r.svgStyle);return(d,T)=>(p.openBlock(),p.createElementBlock("div",p.mergeProps({ref_key:"rootRef",ref:i,class:["pointing-bubble","pointing-bubble__inner",o.value],"data-placement":r.placement},a.value,{style:_.value}),[p.renderSlot(d.$slots,"default",{placement:r.placement,tip:r.slotTip},()=>[T[0]||(T[0]=p.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))]),e.target&&r.tail?(p.openBlock(),p.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:p.normalizeStyle(w.value)},[p.createElementVNode("path",{class:"pointing-bubble__path",d:r.tail.fill,fill:r.boxFill},null,8,xt),r.tail.stroke?(p.openBlock(),p.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:r.tail.stroke,fill:"none",stroke:r.boxStroke,"stroke-width":r.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,yt)):p.createCommentVNode("",!0)],4)):p.createCommentVNode("",!0)],16,bt))}});exports.DEFAULT_BUBBLE_CONFIG=G;exports.PointingBubble=nt;exports.buildTailPaths=tt;exports.computeGeometry=Q;exports.createBubbleController=et;exports.default=nt;exports.isPoint=Z;exports.resolveElement=N;
+}`,ut="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function dt(e=document){if(e.getElementById(K))return;const t=e.createElement("style");t.id=K,t.textContent=ct,e.head.prepend(t)}function nt(e){return typeof e=="object"&&e!==null&&typeof e.x=="number"&&typeof e.y=="number"&&e.nodeType!==1}function q(e){return typeof Element>"u"||e==null?null:typeof e=="string"?document.querySelector(e):e instanceof Element?e:null}function j(e,t){return!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n])}function ot(e){let t=e.parentElement;for(;t;){const n=getComputedStyle(t).position;if(n&&n!=="static")return t;if(t===document.documentElement)break;t=t.parentElement}return document.documentElement}function X(e){let t=1,n=e;for(;n;){const i=Number.parseFloat(getComputedStyle(n).zoom);Number.isFinite(i)&&i>0&&(t*=i),n=n.parentElement}return t}function ft(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e),i=parseFloat(n.width)||0,o=parseFloat(n.height)||0;return{left:t.left,top:t.top,width:i,height:o,scaleX:i?t.width/i:1,scaleY:o?t.height/o:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function pt(e){return ft(ot(e))}function ht(e,t,n=1,i=1){const o=getComputedStyle(e),{scaleX:u,scaleY:f,left:r,top:l}=t,a=e.getBoundingClientRect();return{x:(a.left*n-r*i)/(u*n),y:(a.top*n-l*i)/(f*n),width:a.width/u,height:a.height/f,fill:o.backgroundColor,stroke:o.borderTopColor,strokeWidth:parseFloat(o.borderTopWidth)||0,borderLeft:(parseFloat(o.borderLeftWidth)||0)/u,borderTop:(parseFloat(o.borderTopWidth)||0)/f,radius:o.borderTopLeftRadius,zIndex:o.zIndex}}function J(e,t,n){const i=e.x-n;let o=i,u=t.width?t.width-e.x-n:1/0;return t.viewportWidth&&(o=Math.min(o,t.left/t.scaleX+i),u=Math.min(u,(t.viewportWidth-t.left)/t.scaleX-e.x-n)),{left:Math.max(0,o),right:Math.max(0,u)}}function lt(e){return e.left>e.right?"left":"right"}function it(e){const{tip:t,box:n,frame:i,placement:o,targetRect:u,room:f,tailLength:r}=e;if(!n.width||!n.height)return null;const{width:l,height:a}=n,{x:g,y:m}=t,L=o==="manual",d=e.targetAnchor==="edge"?u:null;if(L){if(d){const E=n.x+l/2,F=n.y+a/2;if(!(E>=d.left&&E<=d.right&&F>=d.top&&F<=d.bottom)){const y=Math.min(d.right,Math.max(d.left,E)),v=Math.min(d.bottom,Math.max(d.top,F));return{placement:"manual",tx:y,ty:v,bx:n.x,by:n.y,w:l,h:a}}}return{placement:"manual",tx:g,ty:m,bx:n.x,by:n.y,w:l,h:a}}const C=E=>d?E==="top"?d.top:d.bottom:m;let S=o;if(o==="auto"){let E=m>(i.height||600)/2?"top":"bottom",F=lt(f);const{scaleX:z,scaleY:y}=i;if(i.viewportHeight){const v=i.top+(C("top")-a-r)*y>=0,T=i.top+(C("bottom")+a+r)*y<=i.viewportHeight;E==="top"&&!v&&T?E="bottom":E==="bottom"&&!T&&v&&(E="top")}if(i.viewportWidth){const v=i.left+(g-l-r)*z>=0,T=i.left+(g+l+r)*z<=i.viewportWidth;F==="left"&&!v&&T?F="right":F==="right"&&!T&&v&&(F="left")}S=`${E}-${F}`}const[c,$]=S.split("-"),k=C(c);return{placement:S,tx:g,ty:k,bx:$==="left"?g-l-r:g+r,by:c==="top"?k-a-r:k+r,w:l,h:a}}const mt=["tx","ty","bx","by"],gt=["tx","ty"];function bt(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function yt(e,t,n,i){let o=0;const u=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(o)};if(!t||!e||n<=0||typeof requestAnimationFrame>"u"||bt())return i(t),{cancel:u};const f=performance.now(),r=l=>{const a=Math.min(1,(l-f)/n),g=1-Math.pow(1-a,3),m={...t},L=t.placement==="manual"?gt:mt;for(const d of L)m[d]=e[d]+(t[d]-e[d])*g;i(m),a<1&&(o=requestAnimationFrame(r))};return o=requestAnimationFrame(r),{cancel:u}}function rt(e){const{geometry:t,strokeWidth:n,radius:i,tailBaseWidth:o}=e,{placement:u,tx:f,ty:r,bx:l,by:a,w:g,h:m}=t,L=parseFloat(i)*(i.endsWith("%")?Math.min(g,m)/100:1)||0,d=o/2,C=(h,x,_)=>x>_?(x+_)/2:Math.min(_,Math.max(x,h));let S=null,c=0;if(u==="manual"){const h=Math.max(l-f,f-(l+g),0),x=Math.max(a-r,r-(a+m),0);if(h>0&&h>=x)S=f<l?"left":"right",c=r;else if(x>0)S=r<a?"top":"bottom",c=f;else return null}else if(u!=="none"){const[h,x]=u.split("-");S=x==="left"?"right":"left",c=a+m*(h==="top"?.65:.35)}else return null;const $=S==="top"||S==="bottom",k={left:(h,x)=>[l-x,h],right:(h,x)=>[l+g+x,h],top:(h,x)=>[h,a-x],bottom:(h,x)=>[h,a+m+x]}[S],E=$?l:a,F=$?l+g:a+m,z=C(c,E+d+n/2+L,F-d-n/2-L),y=([h,x])=>`${h} ${x}`,v=n>0?-n/2:0,T=2,N=2,I=z-d,s=z+d,W=k(I-T,v),O=k(I,v),b=k(s,v),w=k(s+T,v),B=k(I,-(n+N)),R=k(s,-(n+N)),A=k(I,1),M=k(s,1);return{fill:`M ${y(B)} L ${y(A)} L ${y(O)} L ${f} ${r} L ${y(b)} L ${y(M)} L ${y(R)} Z`,stroke:n?`M ${y(W)} L ${y(O)} L ${f} ${r} L ${y(b)} L ${y(w)}`:null}}const xt=["left","top","right","bottom","width","height","transform","translate","inset","inset-inline","inset-block"];function wt(e){return{hasTarget:e,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function D(e,t){return e===t?!0:!e||!t?!1:e.x===t.x&&e.y===t.y}function vt(e,t){return e===t?!0:!e||!t?!1:e.placement===t.placement&&e.tx===t.tx&&e.ty===t.ty&&e.bx===t.bx&&e.by===t.by&&e.w===t.w&&e.h===t.h}function St(e,t){return e.hasTarget===t.hasTarget&&e.placement===t.placement&&e.boxFill===t.boxFill&&e.boxStroke===t.boxStroke&&e.boxStrokeWidth===t.boxStrokeWidth&&e.boxZIndex===t.boxZIndex&&D(e.tip,t.tip)&&D(e.slotTip,t.slotTip)&&j(e.boxStyle,t.boxStyle)&&j(e.svgStyle,t.svgStyle)&&e.tail?.fill===t.tail?.fill&&e.tail?.stroke===t.tail?.stroke}function Q(e){if(typeof e.checkVisibility=="function")return e.checkVisibility({checkOpacity:!0,checkVisibilityCSS:!0});const t=getComputedStyle(e);return!(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)===0)}function tt(e){const t=e.style;return xt.map(n=>t.getPropertyValue(n)).join("|")}function st(e){dt();let t={...et},n=null,i=null,o=null,u={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},f={...u},r=null,l=null,a=null,g=null,m=null,L=null,d=wt(!1),C=!1,S="";const c=()=>{const s=$();St(d,s)||(d=s,e.onChange?.(d))};function $(){const s=t.target!=null,W=t.placement==="manual",O=s?r?.placement??"none":"none",b={"--pb-padding":typeof t.padding=="number"?`${t.padding}px`:t.padding};if(t.maxWidth!=null&&(b["--pb-max-width"]=`${t.maxWidth}px`),t.shadow&&(b.filter=ut),!s)b["--pb-width"]="fit-content";else if(Object.assign(b,{position:"absolute",pointerEvents:"auto",overflow:"visible"}),W)b["--pb-width"]="fit-content";else if(Object.assign(b,{left:`${r?.bx??0}px`,top:`${r?.by??0}px`,margin:"0"}),t.maxWidth==null&&n){const A=J(n,f,t.tailLength),M=l?.placement??t.placement,h=M==="auto"?lt(A):M.split("-")[1];b["--pb-max-width"]=`${A[h]}px`}const w=o?.zIndex;w&&w!=="auto"&&(b.zIndex=w);const B=s&&r&&o?rt({geometry:r,strokeWidth:o.strokeWidth,radius:o.radius,tailBaseWidth:t.tailBaseWidth}):null;let R={};if(B&&r&&f.width&&f.height){const A=o?.borderLeft??0,M=o?.borderTop??0;R={position:"absolute",left:`${-r.bx-A}px`,top:`${-r.by-M}px`,width:`${f.width}px`,height:`${f.height}px`,overflow:"visible",pointerEvents:"none",zIndex:o?.zIndex??"auto"}}return{hasTarget:s,placement:O,tip:n,slotTip:l?{x:l.tx,y:l.ty}:n,boxStyle:b,svgStyle:R,tail:B,boxFill:o?.fill??"",boxStroke:o?.stroke??"",boxStrokeWidth:o?.strokeWidth??0,boxZIndex:o?.zIndex??"auto"}}function k(){if(!n||!o){(l!==null||r!==null)&&(l=null,E(null));return}const s=J(n,f,t.tailLength),W=it({tip:n,box:o,frame:f,placement:t.placement,targetAnchor:t.targetAnchor,targetRect:i,room:s,tailLength:t.tailLength});vt(l,W)||(l=W,E(l))}function E(s){a?.cancel(),a=yt(r,s,t.transitionDuration,W=>{r=W,c()})}function F(s,W,O){const b=ht(s,u,W,O);return j(b,o)?!1:(o=b,!0)}function z(){const s=e.getBoxEl();if(!s){n=null,i=null,o=null,l=null,r=null,C=!1,c();return}if(!Q(s)){a?.cancel(),C=!0;return}const W=C;if(C=!1,t.target==null){n=null,i=null,o=null,l=null,r=null,c();return}const O=f;u=pt(s);const b=ot(s),w=X(b),B=X(s);f={...u,left:u.left*w,top:u.top*w,width:u.width*w/B,height:u.height*w/B,scaleX:u.scaleX*B,scaleY:u.scaleY*B};const R=!j(f,O),A=typeof t.target=="string"?b.querySelector(t.target)??q(t.target):q(t.target);let M=!1,h=!1;if(A){const _=A.getBoundingClientRect(),P=X(A),{scaleX:H,scaleY:U,left:V,top:G}=u,Y={left:(_.left*P-V*w)/(H*B),top:(_.top*P-G*w)/(U*B),right:(_.right*P-V*w)/(H*B),bottom:(_.bottom*P-G*w)/(U*B)};h=!j(Y,i),h&&(i=Y);const Z={x:(Y.left+Y.right)/2,y:(Y.top+Y.bottom)/2};M=!D(n,Z),n=Z}else if(nt(t.target)){h=i!=null,i=null;const _={x:t.target.x,y:t.target.y};M=!D(n,_),n=_}else{n=null,i=null,o=null,l=null,r=null,c();return}const x=F(s,B,w);S=tt(s),!(!W&&!R&&!M&&!h&&!x&&r)&&k()}function y(){z()}typeof window<"u"&&(window.addEventListener("resize",y),window.addEventListener("scroll",y,!0));const v=z;function T(s){const W=e.getBoxEl();if(!W)return;if(s.some(w=>w.attributeName==="class"||w.attributeName==="hidden")){if(!Q(W)){a?.cancel(),C=!0;return}v();return}const b=tt(W);b!==S&&(S=b,v())}function N(){const s=e.getBoxEl();s!==L&&(L=s,g?.disconnect(),m?.disconnect(),g=null,m=null,s&&(typeof ResizeObserver<"u"&&(g=new ResizeObserver(()=>v()),g.observe(s)),typeof MutationObserver<"u"&&(m=new MutationObserver(T),m.observe(s,{attributes:!0,attributeFilter:["style","class","hidden"]}))))}function I(){N(),v()}return{update:I,setConfig(s){t={...t,...s},I()},getConfig:()=>t,getState:()=>d,destroy(){a?.cancel(),g?.disconnect(),m?.disconnect(),L=null,typeof window<"u"&&(window.removeEventListener("resize",y),window.removeEventListener("scroll",y,!0))}}}const kt=["data-placement"],Et=["d","fill"],Wt=["d","stroke","stroke-width"],at=p.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,i=p.useAttrs(),o=p.computed(()=>i.class),u=p.computed(()=>i.style),f=p.computed(()=>{const{class:c,style:$,...k}=i;return k}),r=p.ref(null),l=p.reactive({hasTarget:!1,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function a(c){return c==null?null:typeof c=="string"||typeof Element<"u"&&c instanceof Element?c:typeof c=="object"&&"$el"in c&&c.$el instanceof Element?c.$el:typeof c=="object"&&typeof c.x=="number"&&typeof c.y=="number"?c:null}const g=p.getCurrentInstance(),m=st({getBoxEl:()=>r.value,onChange:c=>{Object.assign(l,c),g?.update()}});function L(){m.setConfig({target:a(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})}p.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],L,{flush:"post"}),p.onMounted(()=>{L()}),p.onBeforeUnmount(()=>{m.destroy()});function d(){m.update()}t({update:d});const C=p.computed(()=>({...u.value,...l.boxStyle})),S=p.computed(()=>l.svgStyle);return(c,$)=>(p.openBlock(),p.createElementBlock("div",p.mergeProps({ref_key:"rootRef",ref:r,class:["pointing-bubble","pointing-bubble__inner",o.value],"data-placement":l.placement},f.value,{style:C.value}),[p.renderSlot(c.$slots,"default",{placement:l.placement,tip:l.slotTip},()=>[$[0]||($[0]=p.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))]),e.target&&l.tail?(p.openBlock(),p.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:p.normalizeStyle(S.value)},[p.createElementVNode("path",{class:"pointing-bubble__path",d:l.tail.fill,fill:l.boxFill},null,8,Et),l.tail.stroke?(p.openBlock(),p.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:l.tail.stroke,fill:"none",stroke:l.boxStroke,"stroke-width":l.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,Wt)):p.createCommentVNode("",!0)],4)):p.createCommentVNode("",!0)],16,kt))}});exports.DEFAULT_BUBBLE_CONFIG=et;exports.PointingBubble=at;exports.buildTailPaths=rt;exports.computeGeometry=it;exports.createBubbleController=st;exports.default=at;exports.isPoint=nt;exports.resolveElement=q;

package/dist/vue-pointing-bubble.js

@@ -1,5 +1,5 @@
-import { defineComponent as et, useAttrs as nt, computed as j, ref as ot, reactive as it, getCurrentInstance as lt, watch as rt, onMounted as st, onBeforeUnmount as at, openBlock as H, createElementBlock as q, mergeProps as ct, renderSlot as ut, createElementVNode as X, normalizeStyle as dt, createCommentVNode as U } from "vue";
-const ft = {
+import { defineComponent as st, useAttrs as at, computed as Y, ref as ct, reactive as ut, getCurrentInstance as dt, watch as ft, onMounted as pt, onBeforeUnmount as ht, openBlock as X, createElementBlock as H, mergeProps as mt, renderSlot as gt, createElementVNode as J, normalizeStyle as bt, createCommentVNode as Q } from "vue";
+const xt = {
   target: null,
   placement: "auto",
   targetAnchor: "center",
@@ -8,7 +8,7 @@ const ft = {
   padding: 8,
   shadow: !0,
   transitionDuration: 200
-}, V = "pointing-bubble-styles", pt = `:where(.pointing-bubble__inner) {
+}, tt = "pointing-bubble-styles", yt = `:where(.pointing-bubble__inner) {
   box-sizing: border-box;
   width: var(--pb-width, max-content);
   max-width: var(--pb-max-width, none);
@@ -16,22 +16,22 @@ const ft = {
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`, ht = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
-function mt(e = document) {
-  if (e.getElementById(V)) return;
+}`, wt = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
+function vt(e = document) {
+  if (e.getElementById(tt)) return;
   const t = e.createElement("style");
-  t.id = V, t.textContent = pt, e.head.prepend(t);
+  t.id = tt, t.textContent = yt, e.head.prepend(t);
 }
-function gt(e) {
+function St(e) {
   return typeof e == "object" && e !== null && typeof e.x == "number" && typeof e.y == "number" && e.nodeType !== 1;
 }
-function Z(e) {
+function et(e) {
   return typeof Element > "u" || e == null ? null : typeof e == "string" ? document.querySelector(e) : e instanceof Element ? e : null;
 }
-function D(e, t) {
+function j(e, t) {
   return !e || !t ? !1 : Object.keys(e).every((n) => e[n] === t[n]);
 }
-function Q(e) {
+function lt(e) {
   let t = e.parentElement;
   for (; t; ) {
     const n = getComputedStyle(t).position;
@@ -41,142 +41,150 @@ function Q(e) {
   }
   return document.documentElement;
 }
-function bt(e) {
-  const t = e.getBoundingClientRect(), n = getComputedStyle(e), i = parseFloat(n.width) || 0, o = parseFloat(n.height) || 0;
+function q(e) {
+  let t = 1, n = e;
+  for (; n; ) {
+    const l = Number.parseFloat(getComputedStyle(n).zoom);
+    Number.isFinite(l) && l > 0 && (t *= l), n = n.parentElement;
+  }
+  return t;
+}
+function kt(e) {
+  const t = e.getBoundingClientRect(), n = getComputedStyle(e), l = parseFloat(n.width) || 0, o = parseFloat(n.height) || 0;
   return {
     left: t.left,
     top: t.top,
-    width: i,
+    width: l,
     height: o,
-    scaleX: i ? t.width / i : 1,
+    scaleX: l ? t.width / l : 1,
     scaleY: o ? t.height / o : 1,
     viewportWidth: window.innerWidth,
     viewportHeight: window.innerHeight
   };
 }
-function xt(e) {
-  return bt(Q(e));
+function Wt(e) {
+  return kt(lt(e));
 }
-function yt(e, t) {
-  const n = getComputedStyle(e), { scaleX: i, scaleY: o, left: u, top: a } = t, l = e.getBoundingClientRect();
+function Et(e, t, n = 1, l = 1) {
+  const o = getComputedStyle(e), { scaleX: u, scaleY: f, left: r, top: i } = t, a = e.getBoundingClientRect();
   return {
-    x: (l.left - u) / i,
-    y: (l.top - a) / o,
-    width: l.width / i,
-    height: l.height / o,
-    fill: n.backgroundColor,
-    stroke: n.borderTopColor,
-    strokeWidth: parseFloat(n.borderTopWidth) || 0,
+    x: (a.left * n - r * l) / (u * n),
+    y: (a.top * n - i * l) / (f * n),
+    width: a.width / u,
+    height: a.height / f,
+    fill: o.backgroundColor,
+    stroke: o.borderTopColor,
+    strokeWidth: parseFloat(o.borderTopWidth) || 0,
     // Abspos SVG is positioned against the padding edge; path math uses the
     // border box from getBoundingClientRect — subtract these when offsetting.
-    borderLeft: (parseFloat(n.borderLeftWidth) || 0) / i,
-    borderTop: (parseFloat(n.borderTopWidth) || 0) / o,
-    radius: n.borderTopLeftRadius,
-    zIndex: n.zIndex
+    borderLeft: (parseFloat(o.borderLeftWidth) || 0) / u,
+    borderTop: (parseFloat(o.borderTopWidth) || 0) / f,
+    radius: o.borderTopLeftRadius,
+    zIndex: o.zIndex
   };
 }
-function G(e, t, n) {
-  const i = e.x - n;
-  let o = i, u = t.width ? t.width - e.x - n : 1 / 0;
-  return t.viewportWidth && (o = Math.min(o, t.left / t.scaleX + i), u = Math.min(
+function nt(e, t, n) {
+  const l = e.x - n;
+  let o = l, u = t.width ? t.width - e.x - n : 1 / 0;
+  return t.viewportWidth && (o = Math.min(o, t.left / t.scaleX + l), u = Math.min(
     u,
     (t.viewportWidth - t.left) / t.scaleX - e.x - n
   )), { left: Math.max(0, o), right: Math.max(0, u) };
 }
-function tt(e) {
+function rt(e) {
   return e.left > e.right ? "left" : "right";
 }
-function wt(e) {
-  const { tip: t, box: n, frame: i, placement: o, targetRect: u, room: a, tailLength: l } = e;
+function Lt(e) {
+  const { tip: t, box: n, frame: l, placement: o, targetRect: u, room: f, tailLength: r } = e;
   if (!n.width || !n.height) return null;
-  const { width: r, height: f } = n, { x: p, y: m } = t, k = o === "manual", c = e.targetAnchor === "edge" ? u : null;
-  if (k) {
-    if (c) {
-      const S = n.x + r / 2, W = n.y + f / 2;
-      if (!(S >= c.left && S <= c.right && W >= c.top && W <= c.bottom)) {
-        const g = Math.min(c.right, Math.max(c.left, S)), E = Math.min(c.bottom, Math.max(c.top, W));
-        return { placement: "manual", tx: g, ty: E, bx: n.x, by: n.y, w: r, h: f };
+  const { width: i, height: a } = n, { x: m, y: h } = t, L = o === "manual", d = e.targetAnchor === "edge" ? u : null;
+  if (L) {
+    if (d) {
+      const k = n.x + i / 2, $ = n.y + a / 2;
+      if (!(k >= d.left && k <= d.right && $ >= d.top && $ <= d.bottom)) {
+        const b = Math.min(d.right, Math.max(d.left, k)), w = Math.min(d.bottom, Math.max(d.top, $));
+        return { placement: "manual", tx: b, ty: w, bx: n.x, by: n.y, w: i, h: a };
       }
     }
-    return { placement: "manual", tx: p, ty: m, bx: n.x, by: n.y, w: r, h: f };
+    return { placement: "manual", tx: m, ty: h, bx: n.x, by: n.y, w: i, h: a };
   }
-  const $ = (S) => c ? S === "top" ? c.top : c.bottom : m;
-  let y = o;
+  const B = (k) => d ? k === "top" ? d.top : d.bottom : h;
+  let v = o;
   if (o === "auto") {
-    let S = m > (i.height || 600) / 2 ? "top" : "bottom", W = tt(a);
-    const { scaleX: C, scaleY: g } = i;
-    if (i.viewportHeight) {
-      const E = i.top + ($("top") - f - l) * g >= 0, A = i.top + ($("bottom") + f + l) * g <= i.viewportHeight;
-      S === "top" && !E && A ? S = "bottom" : S === "bottom" && !A && E && (S = "top");
+    let k = h > (l.height || 600) / 2 ? "top" : "bottom", $ = rt(f);
+    const { scaleX: M, scaleY: b } = l;
+    if (l.viewportHeight) {
+      const w = l.top + (B("top") - a - r) * b >= 0, _ = l.top + (B("bottom") + a + r) * b <= l.viewportHeight;
+      k === "top" && !w && _ ? k = "bottom" : k === "bottom" && !_ && w && (k = "top");
     }
-    if (i.viewportWidth) {
-      const E = i.left + (p - r - l) * C >= 0, A = i.left + (p + r + l) * C <= i.viewportWidth;
-      W === "left" && !E && A ? W = "right" : W === "right" && !A && E && (W = "left");
+    if (l.viewportWidth) {
+      const w = l.left + (m - i - r) * M >= 0, _ = l.left + (m + i + r) * M <= l.viewportWidth;
+      $ === "left" && !w && _ ? $ = "right" : $ === "right" && !_ && w && ($ = "left");
     }
-    y = `${S}-${W}`;
+    v = `${k}-${$}`;
   }
-  const [d, _] = y.split("-"), w = $(d);
+  const [c, F] = v.split("-"), S = B(c);
   return {
-    placement: y,
-    tx: p,
-    ty: w,
-    bx: _ === "left" ? p - r - l : p + l,
-    by: d === "top" ? w - f - l : w + l,
-    w: r,
-    h: f
+    placement: v,
+    tx: m,
+    ty: S,
+    bx: F === "left" ? m - i - r : m + r,
+    by: c === "top" ? S - a - r : S + r,
+    w: i,
+    h: a
   };
 }
-const vt = ["tx", "ty", "bx", "by"], St = ["tx", "ty"];
-function kt() {
+const Bt = ["tx", "ty", "bx", "by"], $t = ["tx", "ty"];
+function Ct() {
   return typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function Wt(e, t, n, i) {
+function Ft(e, t, n, l) {
   let o = 0;
   const u = () => {
     typeof cancelAnimationFrame < "u" && cancelAnimationFrame(o);
   };
-  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || kt())
-    return i(t), { cancel: u };
-  const a = performance.now(), l = (r) => {
-    const f = Math.min(1, (r - a) / n), p = 1 - Math.pow(1 - f, 3), m = { ...t }, k = t.placement === "manual" ? St : vt;
-    for (const c of k)
-      m[c] = e[c] + (t[c] - e[c]) * p;
-    i(m), f < 1 && (o = requestAnimationFrame(l));
+  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || Ct())
+    return l(t), { cancel: u };
+  const f = performance.now(), r = (i) => {
+    const a = Math.min(1, (i - f) / n), m = 1 - Math.pow(1 - a, 3), h = { ...t }, L = t.placement === "manual" ? $t : Bt;
+    for (const d of L)
+      h[d] = e[d] + (t[d] - e[d]) * m;
+    l(h), a < 1 && (o = requestAnimationFrame(r));
   };
-  return o = requestAnimationFrame(l), { cancel: u };
+  return o = requestAnimationFrame(r), { cancel: u };
 }
-function Et(e) {
-  const { geometry: t, strokeWidth: n, radius: i, tailBaseWidth: o } = e, { placement: u, tx: a, ty: l, bx: r, by: f, w: p, h: m } = t, k = parseFloat(i) * (i.endsWith("%") ? Math.min(p, m) / 100 : 1) || 0, c = o / 2, $ = (x, h, O) => h > O ? (h + O) / 2 : Math.min(O, Math.max(h, x));
-  let y = null, d = 0;
+function _t(e) {
+  const { geometry: t, strokeWidth: n, radius: l, tailBaseWidth: o } = e, { placement: u, tx: f, ty: r, bx: i, by: a, w: m, h } = t, L = parseFloat(l) * (l.endsWith("%") ? Math.min(m, h) / 100 : 1) || 0, d = o / 2, B = (p, x, C) => x > C ? (x + C) / 2 : Math.min(C, Math.max(x, p));
+  let v = null, c = 0;
   if (u === "manual") {
-    const x = Math.max(r - a, a - (r + p), 0), h = Math.max(f - l, l - (f + m), 0);
-    if (x > 0 && x >= h)
-      y = a < r ? "left" : "right", d = l;
-    else if (h > 0)
-      y = l < f ? "top" : "bottom", d = a;
+    const p = Math.max(i - f, f - (i + m), 0), x = Math.max(a - r, r - (a + h), 0);
+    if (p > 0 && p >= x)
+      v = f < i ? "left" : "right", c = r;
+    else if (x > 0)
+      v = r < a ? "top" : "bottom", c = f;
     else
       return null;
   } else if (u !== "none") {
-    const [x, h] = u.split("-");
-    y = h === "left" ? "right" : "left", d = f + m * (x === "top" ? 0.65 : 0.35);
+    const [p, x] = u.split("-");
+    v = x === "left" ? "right" : "left", c = a + h * (p === "top" ? 0.65 : 0.35);
   } else
     return null;
-  const _ = y === "top" || y === "bottom", w = {
-    left: (x, h) => [r - h, x],
-    right: (x, h) => [r + p + h, x],
-    top: (x, h) => [x, f - h],
-    bottom: (x, h) => [x, f + m + h]
-  }[y], S = _ ? r : f, W = _ ? r + p : f + m, C = $(
-    d,
-    S + c + n / 2 + k,
-    W - c - n / 2 - k
-  ), g = ([x, h]) => `${x} ${h}`, E = n > 0 ? -n / 2 : 0, A = 2, Y = 2, s = C - c, b = C + c, z = w(s - A, E), v = w(s, E), B = w(b, E), F = w(b + A, E), T = w(s, -(n + Y)), M = w(b, -(n + Y)), L = w(s, 1), I = w(b, 1);
+  const F = v === "top" || v === "bottom", S = {
+    left: (p, x) => [i - x, p],
+    right: (p, x) => [i + m + x, p],
+    top: (p, x) => [p, a - x],
+    bottom: (p, x) => [p, a + h + x]
+  }[v], k = F ? i : a, $ = F ? i + m : a + h, M = B(
+    c,
+    k + d + n / 2 + L,
+    $ - d - n / 2 - L
+  ), b = ([p, x]) => `${p} ${x}`, w = n > 0 ? -n / 2 : 0, _ = 2, D = 2, I = M - d, s = M + d, W = S(I - _, w), z = S(I, w), g = S(s, w), y = S(s + _, w), E = S(I, -(n + D)), O = S(s, -(n + D)), A = S(I, 1), T = S(s, 1);
   return {
-    fill: `M ${g(T)} L ${g(L)} L ${g(v)} L ${a} ${l} L ${g(B)} L ${g(I)} L ${g(M)} Z`,
-    stroke: n ? `M ${g(z)} L ${g(v)} L ${a} ${l} L ${g(B)} L ${g(F)}` : null
+    fill: `M ${b(E)} L ${b(A)} L ${b(z)} L ${f} ${r} L ${b(g)} L ${b(T)} L ${b(O)} Z`,
+    stroke: n ? `M ${b(W)} L ${b(z)} L ${f} ${r} L ${b(g)} L ${b(y)}` : null
   };
 }
-const Lt = [
+const At = [
   "left",
   "top",
   "right",
@@ -189,7 +197,7 @@ const Lt = [
   "inset-inline",
   "inset-block"
 ];
-function Bt(e) {
+function Tt(e) {
   return {
     hasTarget: e,
     placement: "none",
@@ -207,13 +215,13 @@ function Bt(e) {
 function P(e, t) {
   return e === t ? !0 : !e || !t ? !1 : e.x === t.x && e.y === t.y;
 }
-function $t(e, t) {
+function Mt(e, t) {
   return e === t ? !0 : !e || !t ? !1 : e.placement === t.placement && e.tx === t.tx && e.ty === t.ty && e.bx === t.bx && e.by === t.by && e.w === t.w && e.h === t.h;
 }
-function Ct(e, t) {
-  return e.hasTarget === t.hasTarget && e.placement === t.placement && e.boxFill === t.boxFill && e.boxStroke === t.boxStroke && e.boxStrokeWidth === t.boxStrokeWidth && e.boxZIndex === t.boxZIndex && P(e.tip, t.tip) && P(e.slotTip, t.slotTip) && D(e.boxStyle, t.boxStyle) && D(e.svgStyle, t.svgStyle) && e.tail?.fill === t.tail?.fill && e.tail?.stroke === t.tail?.stroke;
+function zt(e, t) {
+  return e.hasTarget === t.hasTarget && e.placement === t.placement && e.boxFill === t.boxFill && e.boxStroke === t.boxStroke && e.boxStrokeWidth === t.boxStrokeWidth && e.boxZIndex === t.boxZIndex && P(e.tip, t.tip) && P(e.slotTip, t.slotTip) && j(e.boxStyle, t.boxStyle) && j(e.svgStyle, t.svgStyle) && e.tail?.fill === t.tail?.fill && e.tail?.stroke === t.tail?.stroke;
 }
-function K(e) {
+function ot(e) {
   if (typeof e.checkVisibility == "function")
     return e.checkVisibility({
       checkOpacity: !0,
@@ -222,13 +230,13 @@ function K(e) {
   const t = getComputedStyle(e);
   return !(t.display === "none" || t.visibility === "hidden" || parseFloat(t.opacity) === 0);
 }
-function J(e) {
+function it(e) {
   const t = e.style;
-  return Lt.map((n) => t.getPropertyValue(n)).join("|");
+  return At.map((n) => t.getPropertyValue(n)).join("|");
 }
-function _t(e) {
-  mt();
-  let t = { ...ft }, n = null, i = null, o = null, u = {
+function It(e) {
+  vt();
+  let t = { ...xt }, n = null, l = null, o = null, u = {
     left: 0,
     top: 0,
     width: 0,
@@ -237,48 +245,48 @@ function _t(e) {
     scaleY: 1,
     viewportWidth: 0,
     viewportHeight: 0
-  }, a = null, l = null, r = null, f = null, p = null, m = null, k = Bt(!1), c = !1, $ = "";
-  const y = () => {
-    const s = d();
-    Ct(k, s) || (k = s, e.onChange?.(k));
+  }, f = { ...u }, r = null, i = null, a = null, m = null, h = null, L = null, d = Tt(!1), B = !1, v = "";
+  const c = () => {
+    const s = F();
+    zt(d, s) || (d = s, e.onChange?.(d));
   };
-  function d() {
-    const s = t.target != null, b = t.placement === "manual", z = s ? a?.placement ?? "none" : "none", v = {
+  function F() {
+    const s = t.target != null, W = t.placement === "manual", z = s ? r?.placement ?? "none" : "none", g = {
       "--pb-padding": typeof t.padding == "number" ? `${t.padding}px` : t.padding
     };
-    if (t.maxWidth != null && (v["--pb-max-width"] = `${t.maxWidth}px`), t.shadow && (v.filter = ht), !s)
-      v["--pb-width"] = "fit-content";
-    else if (Object.assign(v, {
+    if (t.maxWidth != null && (g["--pb-max-width"] = `${t.maxWidth}px`), t.shadow && (g.filter = wt), !s)
+      g["--pb-width"] = "fit-content";
+    else if (Object.assign(g, {
       position: "absolute",
       pointerEvents: "auto",
       overflow: "visible"
-    }), b)
-      v["--pb-width"] = "fit-content";
-    else if (Object.assign(v, {
-      left: `${a?.bx ?? 0}px`,
-      top: `${a?.by ?? 0}px`,
+    }), W)
+      g["--pb-width"] = "fit-content";
+    else if (Object.assign(g, {
+      left: `${r?.bx ?? 0}px`,
+      top: `${r?.by ?? 0}px`,
       margin: "0"
     }), t.maxWidth == null && n) {
-      const M = G(n, u, t.tailLength), L = l?.placement ?? t.placement, I = L === "auto" ? tt(M) : L.split("-")[1];
-      v["--pb-max-width"] = `${M[I]}px`;
+      const A = nt(n, f, t.tailLength), T = i?.placement ?? t.placement, p = T === "auto" ? rt(A) : T.split("-")[1];
+      g["--pb-max-width"] = `${A[p]}px`;
     }
-    const B = o?.zIndex;
-    B && B !== "auto" && (v.zIndex = B);
-    const F = s && a && o ? Et({
-      geometry: a,
+    const y = o?.zIndex;
+    y && y !== "auto" && (g.zIndex = y);
+    const E = s && r && o ? _t({
+      geometry: r,
       strokeWidth: o.strokeWidth,
       radius: o.radius,
       tailBaseWidth: t.tailBaseWidth
     }) : null;
-    let T = {};
-    if (F && a && u.width && u.height) {
-      const M = o?.borderLeft ?? 0, L = o?.borderTop ?? 0;
-      T = {
+    let O = {};
+    if (E && r && f.width && f.height) {
+      const A = o?.borderLeft ?? 0, T = o?.borderTop ?? 0;
+      O = {
         position: "absolute",
-        left: `${-a.bx - M}px`,
-        top: `${-a.by - L}px`,
-        width: `${u.width}px`,
-        height: `${u.height}px`,
+        left: `${-r.bx - A}px`,
+        top: `${-r.by - T}px`,
+        width: `${f.width}px`,
+        height: `${f.height}px`,
         overflow: "visible",
         pointerEvents: "none",
         zIndex: o?.zIndex ?? "auto"
@@ -288,143 +296,153 @@ function _t(e) {
       hasTarget: s,
       placement: z,
       tip: n,
-      slotTip: l ? { x: l.tx, y: l.ty } : n,
-      boxStyle: v,
-      svgStyle: T,
-      tail: F,
+      slotTip: i ? { x: i.tx, y: i.ty } : n,
+      boxStyle: g,
+      svgStyle: O,
+      tail: E,
       boxFill: o?.fill ?? "",
       boxStroke: o?.stroke ?? "",
       boxStrokeWidth: o?.strokeWidth ?? 0,
       boxZIndex: o?.zIndex ?? "auto"
     };
   }
-  function _() {
+  function S() {
     if (!n || !o) {
-      (l !== null || a !== null) && (l = null, w(null));
+      (i !== null || r !== null) && (i = null, k(null));
       return;
     }
-    const s = G(n, u, t.tailLength), b = wt({
+    const s = nt(n, f, t.tailLength), W = Lt({
       tip: n,
       box: o,
-      frame: u,
+      frame: f,
       placement: t.placement,
       targetAnchor: t.targetAnchor,
-      targetRect: i,
+      targetRect: l,
       room: s,
       tailLength: t.tailLength
     });
-    $t(l, b) || (l = b, w(l));
+    Mt(i, W) || (i = W, k(i));
   }
-  function w(s) {
-    r?.cancel(), r = Wt(
-      a,
+  function k(s) {
+    a?.cancel(), a = Ft(
+      r,
       s,
       t.transitionDuration,
-      (b) => {
-        a = b, y();
+      (W) => {
+        r = W, c();
       }
     );
   }
-  function S(s) {
-    const b = yt(s, u);
-    return D(
-      b,
+  function $(s, W, z) {
+    const g = Et(s, u, W, z);
+    return j(
+      g,
       o
-    ) ? !1 : (o = b, !0);
+    ) ? !1 : (o = g, !0);
   }
-  function W() {
+  function M() {
     const s = e.getBoxEl();
     if (!s) {
-      n = null, i = null, o = null, l = null, a = null, c = !1, y();
+      n = null, l = null, o = null, i = null, r = null, B = !1, c();
       return;
     }
-    if (!K(s)) {
-      r?.cancel(), c = !0;
+    if (!ot(s)) {
+      a?.cancel(), B = !0;
       return;
     }
-    const b = c;
-    if (c = !1, t.target == null) {
-      n = null, i = null, o = null, l = null, a = null, y();
+    const W = B;
+    if (B = !1, t.target == null) {
+      n = null, l = null, o = null, i = null, r = null, c();
       return;
     }
-    const z = u;
-    u = xt(s);
-    const v = !D(
-      u,
+    const z = f;
+    u = Wt(s);
+    const g = lt(s), y = q(g), E = q(s);
+    f = {
+      ...u,
+      left: u.left * y,
+      top: u.top * y,
+      width: u.width * y / E,
+      height: u.height * y / E,
+      scaleX: u.scaleX * E,
+      scaleY: u.scaleY * E
+    };
+    const O = !j(
+      f,
       z
-    ), B = typeof t.target == "string" ? Q(s).querySelector(t.target) ?? Z(t.target) : Z(t.target);
-    let F = !1, T = !1;
-    if (B) {
-      const L = B.getBoundingClientRect(), { scaleX: I, scaleY: x, left: h, top: O } = u, R = {
-        left: (L.left - h) / I,
-        top: (L.top - O) / x,
-        right: (L.right - h) / I,
-        bottom: (L.bottom - O) / x
+    ), A = typeof t.target == "string" ? g.querySelector(t.target) ?? et(t.target) : et(t.target);
+    let T = !1, p = !1;
+    if (A) {
+      const C = A.getBoundingClientRect(), N = q(A), { scaleX: U, scaleY: V, left: Z, top: G } = u, R = {
+        left: (C.left * N - Z * y) / (U * E),
+        top: (C.top * N - G * y) / (V * E),
+        right: (C.right * N - Z * y) / (U * E),
+        bottom: (C.bottom * N - G * y) / (V * E)
       };
-      T = !D(
+      p = !j(
         R,
-        i
-      ), T && (i = R);
-      const N = {
+        l
+      ), p && (l = R);
+      const K = {
         x: (R.left + R.right) / 2,
         y: (R.top + R.bottom) / 2
       };
-      F = !P(n, N), n = N;
-    } else if (gt(t.target)) {
-      T = i != null, i = null;
-      const L = { x: t.target.x, y: t.target.y };
-      F = !P(n, L), n = L;
+      T = !P(n, K), n = K;
+    } else if (St(t.target)) {
+      p = l != null, l = null;
+      const C = { x: t.target.x, y: t.target.y };
+      T = !P(n, C), n = C;
     } else {
-      n = null, i = null, o = null, l = null, a = null, y();
+      n = null, l = null, o = null, i = null, r = null, c();
       return;
     }
-    const M = S(s);
-    $ = J(s), !(!b && !v && !F && !T && !M && a) && _();
+    const x = $(s, E, y);
+    v = it(s), !(!W && !O && !T && !p && !x && r) && S();
   }
-  function C() {
-    W();
+  function b() {
+    M();
   }
-  typeof window < "u" && (window.addEventListener("resize", C), window.addEventListener("scroll", C, !0));
-  const g = W;
-  function E(s) {
-    const b = e.getBoxEl();
-    if (!b) return;
+  typeof window < "u" && (window.addEventListener("resize", b), window.addEventListener("scroll", b, !0));
+  const w = M;
+  function _(s) {
+    const W = e.getBoxEl();
+    if (!W) return;
     if (s.some(
-      (B) => B.attributeName === "class" || B.attributeName === "hidden"
+      (y) => y.attributeName === "class" || y.attributeName === "hidden"
     )) {
-      if (!K(b)) {
-        r?.cancel(), c = !0;
+      if (!ot(W)) {
+        a?.cancel(), B = !0;
         return;
       }
-      g();
+      w();
       return;
     }
-    const v = J(b);
-    v !== $ && ($ = v, g());
+    const g = it(W);
+    g !== v && (v = g, w());
   }
-  function A() {
+  function D() {
     const s = e.getBoxEl();
-    s !== m && (m = s, f?.disconnect(), p?.disconnect(), f = null, p = null, s && (typeof ResizeObserver < "u" && (f = new ResizeObserver(() => g()), f.observe(s)), typeof MutationObserver < "u" && (p = new MutationObserver(E), p.observe(s, {
+    s !== L && (L = s, m?.disconnect(), h?.disconnect(), m = null, h = null, s && (typeof ResizeObserver < "u" && (m = new ResizeObserver(() => w()), m.observe(s)), typeof MutationObserver < "u" && (h = new MutationObserver(_), h.observe(s, {
       attributes: !0,
       attributeFilter: ["style", "class", "hidden"]
     }))));
   }
-  function Y() {
-    A(), g();
+  function I() {
+    D(), w();
   }
   return {
-    update: Y,
+    update: I,
     setConfig(s) {
-      t = { ...t, ...s }, Y();
+      t = { ...t, ...s }, I();
     },
     getConfig: () => t,
-    getState: () => k,
+    getState: () => d,
     destroy() {
-      r?.cancel(), f?.disconnect(), p?.disconnect(), m = null, typeof window < "u" && (window.removeEventListener("resize", C), window.removeEventListener("scroll", C, !0));
+      a?.cancel(), m?.disconnect(), h?.disconnect(), L = null, typeof window < "u" && (window.removeEventListener("resize", b), window.removeEventListener("scroll", b, !0));
     }
   };
 }
-const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-width"], zt = /* @__PURE__ */ et({
+const Ot = ["data-placement"], Rt = ["d", "fill"], Yt = ["d", "stroke", "stroke-width"], Dt = /* @__PURE__ */ st({
   name: "PointingBubble",
   inheritAttrs: !1,
   __name: "PointingBubble",
@@ -440,10 +458,10 @@ const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-
     transitionDuration: { default: 200 }
   },
   setup(e, { expose: t }) {
-    const n = e, i = nt(), o = j(() => i.class), u = j(() => i.style), a = j(() => {
-      const { class: d, style: _, ...w } = i;
-      return w;
-    }), l = ot(null), r = it({
+    const n = e, l = at(), o = Y(() => l.class), u = Y(() => l.style), f = Y(() => {
+      const { class: c, style: F, ...S } = l;
+      return S;
+    }), r = ct(null), i = ut({
       hasTarget: !1,
       placement: "none",
       tip: null,
@@ -456,18 +474,18 @@ const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-
       boxStrokeWidth: 0,
       boxZIndex: "auto"
     });
-    function f(d) {
-      return d == null ? null : typeof d == "string" || typeof Element < "u" && d instanceof Element ? d : typeof d == "object" && "$el" in d && d.$el instanceof Element ? d.$el : typeof d == "object" && typeof d.x == "number" && typeof d.y == "number" ? d : null;
+    function a(c) {
+      return c == null ? null : typeof c == "string" || typeof Element < "u" && c instanceof Element ? c : typeof c == "object" && "$el" in c && c.$el instanceof Element ? c.$el : typeof c == "object" && typeof c.x == "number" && typeof c.y == "number" ? c : null;
     }
-    const p = lt(), m = _t({
-      getBoxEl: () => l.value,
-      onChange: (d) => {
-        Object.assign(r, d), p?.update();
+    const m = dt(), h = It({
+      getBoxEl: () => r.value,
+      onChange: (c) => {
+        Object.assign(i, c), m?.update();
       }
     });
-    function k() {
-      m.setConfig({
-        target: f(n.target),
+    function L() {
+      h.setConfig({
+        target: a(n.target),
         placement: n.placement,
         targetAnchor: n.targetAnchor,
         maxWidth: n.maxWidth,
@@ -478,7 +496,7 @@ const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-
         transitionDuration: n.transitionDuration
       });
     }
-    rt(
+    ft(
       () => [
         n.target,
         typeof n.target == "object" && n.target && "x" in n.target ? n.target.x : null,
@@ -492,71 +510,71 @@ const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-
         n.shadow,
         n.transitionDuration
       ],
-      k,
+      L,
       { flush: "post" }
-    ), st(() => {
-      k();
-    }), at(() => {
-      m.destroy();
+    ), pt(() => {
+      L();
+    }), ht(() => {
+      h.destroy();
     });
-    function c() {
-      m.update();
+    function d() {
+      h.update();
     }
-    t({ update: c });
-    const $ = j(
+    t({ update: d });
+    const B = Y(
       () => ({
         ...u.value,
-        ...r.boxStyle
+        ...i.boxStyle
       })
-    ), y = j(() => r.svgStyle);
-    return (d, _) => (H(), q("div", ct({
+    ), v = Y(() => i.svgStyle);
+    return (c, F) => (X(), H("div", mt({
       ref_key: "rootRef",
-      ref: l,
+      ref: r,
       class: ["pointing-bubble", "pointing-bubble__inner", o.value],
-      "data-placement": r.placement
-    }, a.value, { style: $.value }), [
-      ut(d.$slots, "default", {
-        placement: r.placement,
-        tip: r.slotTip
+      "data-placement": i.placement
+    }, f.value, { style: B.value }), [
+      gt(c.$slots, "default", {
+        placement: i.placement,
+        tip: i.slotTip
       }, () => [
-        _[0] || (_[0] = X("p", { style: {
+        F[0] || (F[0] = J("p", { style: {
           margin: 0,
           fontSize: "14px",
           fontWeight: 600,
           color: "#1e293b"
         } }, " Callout content ", -1))
       ]),
-      e.target && r.tail ? (H(), q("svg", {
+      e.target && i.tail ? (X(), H("svg", {
         key: 0,
         class: "pointing-bubble__svg",
-        style: dt(y.value)
+        style: bt(v.value)
       }, [
-        X("path", {
+        J("path", {
           class: "pointing-bubble__path",
-          d: r.tail.fill,
-          fill: r.boxFill
-        }, null, 8, Tt),
-        r.tail.stroke ? (H(), q("path", {
+          d: i.tail.fill,
+          fill: i.boxFill
+        }, null, 8, Rt),
+        i.tail.stroke ? (X(), H("path", {
           key: 0,
           class: "pointing-bubble__path",
-          d: r.tail.stroke,
+          d: i.tail.stroke,
           fill: "none",
-          stroke: r.boxStroke,
-          "stroke-width": r.boxStrokeWidth,
+          stroke: i.boxStroke,
+          "stroke-width": i.boxStrokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "butt"
-        }, null, 8, Ft)) : U("", !0)
-      ], 4)) : U("", !0)
-    ], 16, At));
+        }, null, 8, Yt)) : Q("", !0)
+      ], 4)) : Q("", !0)
+    ], 16, Ot));
   }
 });
 export {
-  ft as DEFAULT_BUBBLE_CONFIG,
-  zt as PointingBubble,
-  Et as buildTailPaths,
-  wt as computeGeometry,
-  _t as createBubbleController,
-  zt as default,
-  gt as isPoint,
-  Z as resolveElement
+  xt as DEFAULT_BUBBLE_CONFIG,
+  Dt as PointingBubble,
+  _t as buildTailPaths,
+  Lt as computeGeometry,
+  It as createBubbleController,
+  Dt as default,
+  St as isPoint,
+  et as resolveElement
 };

package/package.json

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