vue-pointing-bubble 0.1.0 → 0.2.0

package/dist/vue-pointing-bubble.js

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