vue-pointing-bubble 0.1.0 → 0.4.0

package/dist/vue-pointing-bubble.js

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