vue-pointing-bubble 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { PointingBubble, PointingBubble as Callout, PointingBubble as default, PointingBubblePlugin, type PointingBubblePluginOptions, } from './pointing-bubble';
+export { PointingBubble, PointingBubble as default, } from './pointing-bubble';
 export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, BubbleConfig, BubbleController, BubbleRenderState, } from './pointing-bubble';
 export { DEFAULT_BUBBLE_CONFIG, createBubbleController, resolveElement, isPoint, computeGeometry, buildTailPaths, } from './pointing-bubble';

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

@@ -1,11 +1,5 @@
-import { Plugin } from 'vue';
 import { default as PointingBubble } from './PointingBubble.vue';
 export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, BubbleConfig, BubbleController, BubbleRenderState, } from './core';
 export { DEFAULT_BUBBLE_CONFIG, createBubbleController, resolveElement, isPoint, computeGeometry, buildTailPaths, } from './core';
 export { PointingBubble };
-export { PointingBubble as Callout };
 export { PointingBubble as default };
-export interface PointingBubblePluginOptions {
-    name?: string;
-}
-export declare const PointingBubblePlugin: Plugin;

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"),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) {
+"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) {
   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(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;
+}`,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;

package/dist/vue-pointing-bubble.js

@@ -1,5 +1,5 @@
-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 = {
+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 = {
   target: null,
   placement: "auto",
   targetAnchor: "center",
@@ -8,7 +8,7 @@ const pt = {
   padding: 8,
   shadow: !0,
   transitionDuration: 200
-}, V = "pointing-bubble-styles", ht = `:where(.pointing-bubble__inner) {
+}, V = "pointing-bubble-styles", pt = `: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 pt = {
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`, mt = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
-function gt(e = document) {
+}`, ht = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
+function mt(e = document) {
   if (e.getElementById(V)) return;
   const t = e.createElement("style");
-  t.id = V, t.textContent = ht, e.head.prepend(t);
+  t.id = V, t.textContent = pt, e.head.prepend(t);
 }
-function bt(e) {
+function gt(e) {
   return typeof e == "object" && e !== null && typeof e.x == "number" && typeof e.y == "number" && e.nodeType !== 1;
 }
 function Z(e) {
   return typeof Element > "u" || e == null ? null : typeof e == "string" ? document.querySelector(e) : e instanceof Element ? e : null;
 }
-function j(e, t) {
+function D(e, t) {
   return !e || !t ? !1 : Object.keys(e).every((n) => e[n] === t[n]);
 }
-function tt(e) {
+function Q(e) {
   let t = e.parentElement;
   for (; t; ) {
     const n = getComputedStyle(t).position;
@@ -41,7 +41,7 @@ function tt(e) {
   }
   return document.documentElement;
 }
-function xt(e) {
+function bt(e) {
   const t = e.getBoundingClientRect(), n = getComputedStyle(e), i = parseFloat(n.width) || 0, o = parseFloat(n.height) || 0;
   return {
     left: t.left,
@@ -54,10 +54,10 @@ function xt(e) {
     viewportHeight: window.innerHeight
   };
 }
-function yt(e) {
-  return xt(tt(e));
+function xt(e) {
+  return bt(Q(e));
 }
-function wt(e, t) {
+function yt(e, t) {
   const n = getComputedStyle(e), { scaleX: i, scaleY: o, left: u, top: a } = t, l = e.getBoundingClientRect();
   return {
     x: (l.left - u) / i,
@@ -83,10 +83,10 @@ function G(e, t, n) {
     (t.viewportWidth - t.left) / t.scaleX - e.x - n
   )), { left: Math.max(0, o), right: Math.max(0, u) };
 }
-function et(e) {
+function tt(e) {
   return e.left > e.right ? "left" : "right";
 }
-function vt(e) {
+function wt(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;
@@ -100,22 +100,22 @@ function vt(e) {
     }
     return { placement: "manual", tx: p, ty: m, bx: n.x, by: n.y, w: r, h: f };
   }
-  const C = (S) => c ? S === "top" ? c.top : c.bottom : m;
+  const $ = (S) => c ? S === "top" ? c.top : c.bottom : m;
   let y = o;
   if (o === "auto") {
-    let S = m > (i.height || 600) / 2 ? "top" : "bottom", W = et(a);
-    const { scaleX: $, scaleY: g } = i;
+    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 + (C("top") - f - l) * g >= 0, A = i.top + (C("bottom") + f + l) * g <= 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");
     }
     if (i.viewportWidth) {
-      const E = i.left + (p - r - l) * $ >= 0, A = i.left + (p + r + l) * $ <= 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");
     }
     y = `${S}-${W}`;
   }
-  const [d, _] = y.split("-"), w = C(d);
+  const [d, _] = y.split("-"), w = $(d);
   return {
     placement: y,
     tx: p,
@@ -126,27 +126,27 @@ function vt(e) {
     h: f
   };
 }
-const St = ["tx", "ty", "bx", "by"], kt = ["tx", "ty"];
-function Wt() {
+const vt = ["tx", "ty", "bx", "by"], St = ["tx", "ty"];
+function kt() {
   return typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function Et(e, t, n, i) {
+function Wt(e, t, n, i) {
   let o = 0;
   const u = () => {
     typeof cancelAnimationFrame < "u" && cancelAnimationFrame(o);
   };
-  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || Wt())
+  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" ? kt : St;
+    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));
   };
   return o = requestAnimationFrame(l), { cancel: u };
 }
-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));
+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;
   if (u === "manual") {
     const x = Math.max(r - a, a - (r + p), 0), h = Math.max(f - l, l - (f + m), 0);
@@ -166,14 +166,14 @@ function Bt(e) {
     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(
+  }[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);
+  ), 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);
   return {
-    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
+    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
   };
 }
 const Lt = [
@@ -189,7 +189,7 @@ const Lt = [
   "inset-inline",
   "inset-block"
 ];
-function Ct(e) {
+function Bt(e) {
   return {
     hasTarget: e,
     placement: "none",
@@ -204,14 +204,14 @@ function Ct(e) {
     boxZIndex: "auto"
   };
 }
-function D(e, t) {
+function P(e, t) {
   return e === t ? !0 : !e || !t ? !1 : e.x === t.x && e.y === t.y;
 }
 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 _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 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 K(e) {
   if (typeof e.checkVisibility == "function")
@@ -226,9 +226,9 @@ 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 = {
+function _t(e) {
+  mt();
+  let t = { ...ft }, n = null, i = null, o = null, u = {
     left: 0,
     top: 0,
     width: 0,
@@ -237,16 +237,16 @@ function At(e) {
     scaleY: 1,
     viewportWidth: 0,
     viewportHeight: 0
-  }, a = null, l = null, r = null, f = null, p = null, m = null, k = Ct(!1), c = !1, C = "";
+  }, a = null, l = null, r = null, f = null, p = null, m = null, k = Bt(!1), c = !1, $ = "";
   const y = () => {
     const s = d();
-    _t(k, s) || (k = s, e.onChange?.(k));
+    Ct(k, s) || (k = s, e.onChange?.(k));
   };
   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 && (v["--pb-max-width"] = `${t.maxWidth}px`), t.shadow && (v.filter = mt), !s)
+    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, {
       position: "absolute",
@@ -259,12 +259,12 @@ function At(e) {
       top: `${a?.by ?? 0}px`,
       margin: "0"
     }), t.maxWidth == null && n) {
-      const M = G(n, u, t.tailLength), B = l?.placement ?? t.placement, I = B === "auto" ? et(M) : B.split("-")[1];
+      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 L = o?.zIndex;
-    L && L !== "auto" && (v.zIndex = L);
-    const F = s && a && o ? Bt({
+    const B = o?.zIndex;
+    B && B !== "auto" && (v.zIndex = B);
+    const F = s && a && o ? Et({
       geometry: a,
       strokeWidth: o.strokeWidth,
       radius: o.radius,
@@ -272,11 +272,11 @@ function At(e) {
     }) : null;
     let T = {};
     if (F && a && u.width && u.height) {
-      const M = o?.borderLeft ?? 0, B = o?.borderTop ?? 0;
+      const M = o?.borderLeft ?? 0, L = o?.borderTop ?? 0;
       T = {
         position: "absolute",
         left: `${-a.bx - M}px`,
-        top: `${-a.by - B}px`,
+        top: `${-a.by - L}px`,
         width: `${u.width}px`,
         height: `${u.height}px`,
         overflow: "visible",
@@ -303,7 +303,7 @@ function At(e) {
       (l !== null || a !== null) && (l = null, w(null));
       return;
     }
-    const s = G(n, u, t.tailLength), b = vt({
+    const s = G(n, u, t.tailLength), b = wt({
       tip: n,
       box: o,
       frame: u,
@@ -316,7 +316,7 @@ function At(e) {
     $t(l, b) || (l = b, w(l));
   }
   function w(s) {
-    r?.cancel(), r = Et(
+    r?.cancel(), r = Wt(
       a,
       s,
       t.transitionDuration,
@@ -326,8 +326,8 @@ function At(e) {
     );
   }
   function S(s) {
-    const b = wt(s, u);
-    return j(
+    const b = yt(s, u);
+    return D(
       b,
       o
     ) ? !1 : (o = b, !0);
@@ -348,20 +348,20 @@ function At(e) {
       return;
     }
     const z = u;
-    u = yt(s);
-    const v = !j(
+    u = xt(s);
+    const v = !D(
       u,
       z
-    ), L = typeof t.target == "string" ? tt(s).querySelector(t.target) ?? Z(t.target) : Z(t.target);
+    ), B = typeof t.target == "string" ? Q(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
+    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
       };
-      T = !j(
+      T = !D(
         R,
         i
       ), T && (i = R);
@@ -369,28 +369,28 @@ function At(e) {
         x: (R.left + R.right) / 2,
         y: (R.top + R.bottom) / 2
       };
-      F = !D(n, N), n = N;
-    } else if (bt(t.target)) {
+      F = !P(n, N), n = N;
+    } else if (gt(t.target)) {
       T = i != null, i = null;
-      const B = { x: t.target.x, y: t.target.y };
-      F = !D(n, B), n = B;
+      const L = { x: t.target.x, y: t.target.y };
+      F = !P(n, L), n = L;
     } else {
       n = null, i = null, o = null, l = null, a = null, y();
       return;
     }
     const M = S(s);
-    C = J(s), !(!b && !v && !F && !T && !M && a) && _();
+    $ = J(s), !(!b && !v && !F && !T && !M && a) && _();
   }
-  function $() {
+  function C() {
     W();
   }
-  typeof window < "u" && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0));
+  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;
     if (s.some(
-      (L) => L.attributeName === "class" || L.attributeName === "hidden"
+      (B) => B.attributeName === "class" || B.attributeName === "hidden"
     )) {
       if (!K(b)) {
         r?.cancel(), c = !0;
@@ -400,7 +400,7 @@ function At(e) {
       return;
     }
     const v = J(b);
-    v !== C && (C = v, g());
+    v !== $ && ($ = v, g());
   }
   function A() {
     const s = e.getBoxEl();
@@ -409,22 +409,22 @@ function At(e) {
       attributeFilter: ["style", "class", "hidden"]
     }))));
   }
-  function P() {
+  function Y() {
     A(), g();
   }
   return {
-    update: P,
+    update: Y,
     setConfig(s) {
-      t = { ...t, ...s }, P();
+      t = { ...t, ...s }, Y();
     },
     getConfig: () => t,
     getState: () => k,
     destroy() {
-      r?.cancel(), f?.disconnect(), p?.disconnect(), m = null, typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+      r?.cancel(), f?.disconnect(), p?.disconnect(), m = null, typeof window < "u" && (window.removeEventListener("resize", C), window.removeEventListener("scroll", C, !0));
     }
   };
 }
-const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-width"], Q = /* @__PURE__ */ nt({
+const At = ["data-placement"], Tt = ["d", "fill"], Ft = ["d", "stroke", "stroke-width"], zt = /* @__PURE__ */ et({
   name: "PointingBubble",
   inheritAttrs: !1,
   __name: "PointingBubble",
@@ -440,10 +440,10 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
     transitionDuration: { default: 200 }
   },
   setup(e, { expose: t }) {
-    const n = e, i = ot(), o = Y(() => i.class), u = Y(() => i.style), a = Y(() => {
+    const n = e, i = nt(), o = j(() => i.class), u = j(() => i.style), a = j(() => {
       const { class: d, style: _, ...w } = i;
       return w;
-    }), l = it(null), r = lt({
+    }), l = ot(null), r = it({
       hasTarget: !1,
       placement: "none",
       tip: null,
@@ -459,7 +459,7 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
     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 p = rt(), m = At({
+    const p = lt(), m = _t({
       getBoxEl: () => l.value,
       onChange: (d) => {
         Object.assign(r, d), p?.update();
@@ -478,7 +478,7 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
         transitionDuration: n.transitionDuration
       });
     }
-    st(
+    rt(
       () => [
         n.target,
         typeof n.target == "object" && n.target && "x" in n.target ? n.target.x : null,
@@ -494,28 +494,28 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
       ],
       k,
       { flush: "post" }
-    ), at(() => {
+    ), st(() => {
       k();
-    }), ct(() => {
+    }), at(() => {
       m.destroy();
     });
     function c() {
       m.update();
     }
     t({ update: c });
-    const C = Y(
+    const $ = j(
       () => ({
         ...u.value,
         ...r.boxStyle
       })
-    ), y = Y(() => r.svgStyle);
-    return (d, _) => (H(), q("div", ut({
+    ), y = j(() => r.svgStyle);
+    return (d, _) => (H(), q("div", ct({
       ref_key: "rootRef",
       ref: l,
       class: ["pointing-bubble", "pointing-bubble__inner", o.value],
       "data-placement": r.placement
-    }, a.value, { style: C.value }), [
-      dt(d.$slots, "default", {
+    }, a.value, { style: $.value }), [
+      ut(d.$slots, "default", {
         placement: r.placement,
         tip: r.slotTip
       }, () => [
@@ -529,13 +529,13 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
       e.target && r.tail ? (H(), q("svg", {
         key: 0,
         class: "pointing-bubble__svg",
-        style: ft(y.value)
+        style: dt(y.value)
       }, [
         X("path", {
           class: "pointing-bubble__path",
           d: r.tail.fill,
           fill: r.boxFill
-        }, null, 8, Ft),
+        }, null, 8, Tt),
         r.tail.stroke ? (H(), q("path", {
           key: 0,
           class: "pointing-bubble__path",
@@ -545,25 +545,18 @@ const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-
           "stroke-width": r.boxStrokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "butt"
-        }, null, 8, Mt)) : U("", !0)
+        }, null, 8, Ft)) : U("", !0)
       ], 4)) : U("", !0)
-    ], 16, Tt));
-  }
-}), It = {
-  install(e, t = {}) {
-    const n = t.name ?? "PointingBubble";
-    e.component(n, Q), e.component("Callout", Q);
+    ], 16, At));
   }
-};
+});
 export {
-  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,
+  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
 };

package/package.json

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