vue-pointing-bubble 0.5.0 → 0.5.1

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

@@ -9,5 +9,5 @@ export { easeGeometry } from './ease';
 export type { EaseHandle } from './ease';
 export { buildTailPaths } from './tail';
 export type { BuildTailOptions } from './tail';
-export { createBubbleController } from './createBubbleController';
+export { createBubbleController, isBubbleVisible, } from './createBubbleController';
 export type { BubbleRenderState, BubbleControllerOptions, BubbleController, } from './createBubbleController';

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

@@ -30,5 +30,7 @@ export interface BubbleController {
     getState: () => BubbleRenderState;
     destroy: () => void;
 }
+/** True when the bubble chrome is painted (not display/visibility/opacity hidden). */
+export declare function isBubbleVisible(el: HTMLElement): boolean;
 export declare function createBubbleController(options: BubbleControllerOptions): BubbleController;
 export type { BubbleTarget };

package/dist/vue-pointing-bubble.cjs

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

package/dist/vue-pointing-bubble.js

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

package/package.json

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