@orvui/vue 0.0.0-stage → 0.1.1

package/dist/tooltip-DWqJD6DG.js

@@ -0,0 +1,561 @@
+import { i as e, n as t, s as n, t as r } from "./composables-BJ1sih_H.js";
+import { r as i } from "./ease-rIvCM4O3.js";
+import { t as a } from "./utils-DIrLOK2M.js";
+import { Comment as o, Fragment as s, Teleport as c, Text as l, cloneVNode as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, h as v, inject as y, mergeProps as b, nextTick as x, normalizeStyle as S, onBeforeUnmount as C, onMounted as w, openBlock as T, provide as E, ref as D, renderSlot as O, unref as k, useId as A, useSlots as j, watch as M, withCtx as N } from "vue";
+import { AnimatePresence as P, motion as F } from "motion-v";
+import { arrow as I, autoUpdate as L, computePosition as R, flip as z, hide as B, offset as V, shift as H } from "@floating-ui/dom";
+// src/motion/tooltip/src/grace.ts
+var U = (e, t, n) => (t.x - e.x) * (n.y - e.y) - (t.y - e.y) * (n.x - e.x), W = (e, t) => (e.x - t.x) ** 2 + (e.y - t.y) ** 2;
+function G(e, t) {
+	let n = [
+		{
+			x: e.x - 5,
+			y: e.y - 5
+		},
+		{
+			x: e.x + 5,
+			y: e.y - 5
+		},
+		{
+			x: e.x + 5,
+			y: e.y + 5
+		},
+		{
+			x: e.x - 5,
+			y: e.y + 5
+		},
+		{
+			x: t.left,
+			y: t.top
+		},
+		{
+			x: t.right,
+			y: t.top
+		},
+		{
+			x: t.right,
+			y: t.bottom
+		},
+		{
+			x: t.left,
+			y: t.bottom
+		}
+	].filter((e, t, n) => n.findIndex((t) => t.x === e.x && t.y === e.y) === t), r = n.reduce((e, t) => t.x < e.x || t.x === e.x && t.y < e.y ? t : e), i = [], a = r;
+	do {
+		i.push(a);
+		let e = n.find((e) => e !== a);
+		for (let t of n) {
+			if (t === a) continue;
+			let n = U(a, e, t);
+			(n < 0 || n === 0 && W(a, t) > W(a, e)) && (e = t);
+		}
+		a = e;
+	} while (a !== r && i.length <= n.length);
+	return i;
+}
+function K(e, t) {
+	return t.left <= e.x && e.x <= t.right && t.top <= e.y && e.y <= t.bottom;
+}
+function ee(e, t) {
+	if (t.length < 3) return !1;
+	let n = 0;
+	for (let r = 0; r < t.length; r++) {
+		let i = Math.sign(U(t[r], t[(r + 1) % t.length], e));
+		if (i) {
+			if (n && i !== n) return !1;
+			n = i;
+		}
+	}
+	return !0;
+}
+// src/motion/tooltip/src/context.ts
+var q = Symbol("tooltip-timing"), J = Symbol("tooltip");
+function Y() {
+	let e = y(J);
+	if (!e) throw Error("Tooltip parts must be rendered inside Tooltip");
+	return e;
+}
+var X = /* @__PURE__ */ new WeakMap();
+function te(e) {
+	let t = X.get(e);
+	return t || (t = {
+		mode: "keyboard",
+		closedAt: 0
+	}, X.set(e, t)), t;
+}
+function ne(n, i, a, o = !1) {
+	let s = y(q, d(() => ({
+		delay: 120,
+		closeDelay: 0,
+		skipDelay: 300
+	}))), c = t(n, "open", i, n.defaultOpen ?? !1), l = D(null), u = D(null), f = D(null), p = D(o), m = d(() => c.value && !n.disabled && !p.value), h = e(m, u), g, _, v = !1, b = !1, x = 0, S = !1, T = /* @__PURE__ */ new Set(), E, O, k = { close: F };
+	function A() {
+		++x;
+		for (let e of T) clearTimeout(e);
+		T.clear(), S = !1;
+	}
+	function j() {
+		O?.(), O = void 0;
+	}
+	function N(e, t) {
+		let n = x, r = setTimeout(() => {
+			T.delete(r), !b && n === x && e();
+		}, t);
+		T.add(r);
+	}
+	function P(e) {
+		c.value !== e && (c.value = e, i("openChange", e));
+	}
+	function F() {
+		A(), j(), _ && m.value && (_.closedAt = Date.now()), _?.owner === k && (_.owner = void 0), P(!1);
+	}
+	function I() {
+		A(), j(), !(b || n.disabled || p.value || l.value?.matches(":disabled,[aria-disabled=\"true\"]")) && (_?.owner !== k && _?.owner?.close(), _ && (_.owner = k), P(!0));
+	}
+	function L() {
+		if (A(), m.value || n.disabled || p.value) return;
+		let e = _ && Date.now() - _.closedAt < s.value.skipDelay ? 0 : n.delay ?? s.value.delay;
+		e <= 0 ? I() : (S = !0, N(I, e));
+	}
+	function R() {
+		A();
+		let e = n.closeDelay ?? s.value.closeDelay;
+		e > 0 ? N(F, e) : F();
+	}
+	function z(e, t, n) {
+		if (j(), !n || !g) {
+			R();
+			return;
+		}
+		let r = t.getBoundingClientRect(), i = n.getBoundingClientRect(), a = G({
+			x: e.clientX,
+			y: e.clientY
+		}, i), o = (e) => {
+			let t = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			K(t, r) || K(t, i) || ee(t, a) || R();
+		}, s = g;
+		s.addEventListener("pointermove", o), O = () => s.removeEventListener("pointermove", o);
+	}
+	function B(e) {
+		if (E?.(), E = void 0, !v || !e || n.anchorRef) return;
+		let t, r = !1, i = !1, a = (e) => {
+			n.followCursor && (f.value = {
+				x: e.clientX,
+				y: e.clientY
+			});
+		}, o = {
+			pointerenter: (e) => {
+				let t = e;
+				t.pointerType !== "touch" && (a(t), j(), r ? A() : L());
+			},
+			pointerleave: (t) => {
+				let a = t;
+				a.pointerType !== "touch" && (r = !1, f.value = null, !i && (S ? A() : m.value && !n.followCursor ? z(a, e, u.value) : R()));
+			},
+			pointerdown: (e) => {
+				let n = e;
+				t = {
+					type: n.pointerType,
+					opened: m.value,
+					x: n.clientX,
+					y: n.clientY
+				}, a(n), n.pointerType === "mouse" && (r = !0, F());
+			},
+			pointermove: (e) => {
+				let n = e;
+				a(n), t && Math.hypot(n.clientX - t.x, n.clientY - t.y) > 8 && (t = void 0);
+			},
+			pointercancel: () => {
+				t = void 0, f.value = null;
+			},
+			click: () => {
+				let e = t;
+				t = void 0, e && e.type !== "mouse" && (e.opened ? F() : I());
+			},
+			keydown: () => {
+				t = void 0, f.value = null;
+			},
+			focusin: () => {
+				_?.mode === "keyboard" && (i = !0, f.value = null, I());
+			},
+			focusout: (t) => {
+				e.contains(t.relatedTarget) || (i = !1, F());
+			}
+		};
+		for (let [t, n] of Object.entries(o)) e.addEventListener(t, n);
+		let s = typeof MutationObserver > "u" ? void 0 : new MutationObserver(() => {
+			e.matches(":disabled,[aria-disabled=\"true\"]") && F();
+		});
+		s?.observe(e, {
+			attributes: !0,
+			attributeFilter: ["disabled", "aria-disabled"]
+		}), E = () => {
+			s?.disconnect();
+			for (let [t, n] of Object.entries(o)) e.removeEventListener(t, n);
+		};
+	}
+	M(l, B, { flush: "post" }), M(() => n.anchorRef, (e) => {
+		e && (l.value = r("value" in e ? e.value : e));
+	}, {
+		immediate: !0,
+		deep: !0
+	}), M(() => [n.disabled, p.value], () => {
+		(n.disabled || p.value && !n.anchorRef) && F();
+	}), M(m, (e) => {
+		_ && (e ? (_.owner !== k && _.owner?.close(), _.owner = k) : _.owner === k && (_.closedAt = Date.now(), _.owner = void 0));
+	});
+	let V = (e) => {
+		_ && (_.mode = "keyboard"), h.claimEscape(e) && F();
+	}, H = (e) => {
+		_ && (_.mode = "pointer"), m.value && !h.containsHigher(e.target) && e.target instanceof Node && !l.value?.contains(e.target) && !u.value?.contains(e.target) && F();
+	}, U = () => {
+		n.followCursor && f.value && F();
+	};
+	return w(() => {
+		v = !0, g = l.value?.ownerDocument ?? document, _ = te(g), g.addEventListener("keydown", V, !0), g.addEventListener("pointerdown", H, !0), window.addEventListener("blur", F), window.addEventListener("scroll", U, !0), B(l.value), m.value && (_.owner?.close(), _.owner = k);
+	}), C(() => {
+		b = !0, v = !1, A(), j(), E?.(), _?.owner === k && (_.owner = void 0), g?.removeEventListener("keydown", V, !0), g?.removeEventListener("pointerdown", H, !0), window.removeEventListener("blur", F), window.removeEventListener("scroll", U, !0);
+	}), {
+		open: m,
+		id: a,
+		labelId: a + "-label",
+		props: n,
+		anchor: l,
+		floating: u,
+		cursor: f,
+		empty: p,
+		setTrigger: (e) => {
+			n.anchorRef || (l.value = r(e));
+		},
+		setEmpty: (e) => {
+			p.value = e;
+		},
+		close: F,
+		enterContent: () => {
+			j(), A();
+		},
+		leaveContent: (e) => {
+			n.anchorRef ? (A(), N(F, 100)) : u.value && z(e, u.value, l.value);
+		}
+	};
+}
+// src/motion/tooltip/src/TooltipProvider.vue
+var re = /* @__PURE__ */ _({
+	__name: "TooltipProvider",
+	props: {
+		delay: {},
+		closeDelay: {},
+		skipDelay: {},
+		skipDelayDuration: {}
+	},
+	setup(e) {
+		let t = e, n = y(q, d(() => ({
+			delay: 120,
+			closeDelay: 0,
+			skipDelay: 300
+		})));
+		return E(q, d(() => ({
+			delay: t.delay ?? n.value.delay,
+			closeDelay: t.closeDelay ?? n.value.closeDelay,
+			skipDelay: t.skipDelay ?? t.skipDelayDuration ?? n.value.skipDelay
+		}))), (e, t) => O(e.$slots, "default");
+	}
+});
+// src/motion/tooltip/src/TooltipTrigger.vue?vue&type=script&lang.ts
+function Z(e) {
+	return e.flatMap((e) => e.type === s ? Z(e.children) : e.type === o || e.type === l && !String(e.children).trim() ? [] : [e]);
+}
+// src/motion/tooltip/src/TooltipTrigger.vue
+var Q = _({
+	name: "TooltipTrigger",
+	inheritAttrs: !1,
+	props: { asChild: Boolean },
+	setup(e, { attrs: t, slots: n }) {
+		let r = Y();
+		return () => {
+			let i = [t["aria-describedby"], r.open.value && !r.empty.value ? r.id : void 0].filter(Boolean).join(" ") || void 0, a = r.props.asLabel ? { "aria-labelledby": r.empty.value ? t["aria-labelledby"] : r.labelId } : { "aria-describedby": i }, o = {
+				...t,
+				...a,
+				"data-state": r.open.value ? "open" : "closed",
+				ref: r.setTrigger
+			}, s = n.default?.() ?? [];
+			if (!e.asChild) return v("button", {
+				type: "button",
+				...o
+			}, s);
+			let c = Z(s);
+			return c.length === 1 ? u(c[0], o, !0) : c.length ? c : null;
+		};
+	}
+});
+// src/motion/tooltip/src/position.ts
+function ie(e, t, n) {
+	let r = D(!1), i = D(!1), a = D(null), o = D(null), s = D(t.side ?? "top"), c, l, u = 0, f = 0, p = !1, m, h = {
+		top: "center bottom",
+		bottom: "center top",
+		left: "right center",
+		right: "left center"
+	};
+	async function g() {
+		let n = e.anchor.value, r = a.value;
+		if (!e.open.value || !n || !r || p) return;
+		let c = ++u, l = e.props.followCursor ? e.cursor.value : null, d = !!l || !!t.anchorPoint, f = d ? {
+			contextElement: n,
+			getBoundingClientRect: () => {
+				let e = n.getBoundingClientRect(), r = l?.x ?? e.left + e.width * (t.anchorPoint?.x ?? .5), i = l?.y ?? e.top + e.height * (t.anchorPoint?.y ?? .5);
+				return {
+					x: r,
+					y: i,
+					left: r,
+					right: r,
+					top: i,
+					bottom: i,
+					width: 0,
+					height: 0
+				};
+			}
+		} : n, g = t.align === "center" || !t.align ? t.side ?? "top" : `${t.side ?? "top"}-${t.align}`, _ = await R(f, r, {
+			strategy: "fixed",
+			placement: l ? m ?? g : g,
+			middleware: [
+				V(t.sideOffset ?? (l ? 12 : 8)),
+				z({ padding: 8 }),
+				H({ padding: 8 }),
+				...o.value ? [I({
+					element: o.value,
+					padding: 10
+				})] : [],
+				...d ? [] : [B({ strategy: "referenceHidden" })]
+			]
+		});
+		if (p || c !== u || !e.open.value || a.value !== r || !r.isConnected) return;
+		m = l ? _.placement : void 0, s.value = _.placement.split("-")[0];
+		let v = window.devicePixelRatio || 1, y = (e) => Math.round(e * v) / v;
+		r.style.transform = `translate3d(${y(_.x)}px,${y(_.y)}px,0)`, r.style.setProperty("--tooltip-origin", h[s.value]), r.dataset.placement = _.placement;
+		let b = n.getBoundingClientRect();
+		r.style.visibility = _.middlewareData.hide?.referenceHidden && (b.width || b.height) ? "hidden" : "visible";
+		let x = o.value, S = x?.parentElement;
+		if (x && S) {
+			let e = _.middlewareData.arrow;
+			e?.x !== void 0 && (x.style.left = `${e.x - S.clientLeft}px`), e?.y !== void 0 && (x.style.top = `${e.y - S.clientTop}px`);
+			let t = getComputedStyle(S);
+			x.style.setProperty("--tooltip-arrow-fill", t.backgroundColor), x.style.setProperty("--tooltip-arrow-stroke", t.borderTopColor);
+		}
+		i.value = !0;
+	}
+	function _() {
+		++u, l === void 0 && !p && e.open.value && (l = requestAnimationFrame(() => {
+			l = void 0, g();
+		}));
+	}
+	async function v() {
+		let t = ++f;
+		++u, c?.(), c = void 0, !r.value || !e.open.value ? (i.value = !1, m = void 0) : (await x(), !p && t === f && e.open.value && (e.floating.value = a.value, e.anchor.value && a.value && (c = L(e.anchor.value, a.value, _)), _()));
+	}
+	return M(() => [
+		e.open.value,
+		e.anchor.value,
+		t.side,
+		t.align,
+		t.sideOffset,
+		t.arrow,
+		t.anchorPoint
+	], v, { flush: "post" }), M(e.cursor, _), w(() => {
+		r.value = !0, e.setEmpty(!n()), v();
+	}), C(() => {
+		p = !0, ++f, ++u, c?.(), l !== void 0 && cancelAnimationFrame(l), e.floating.value = null;
+	}), {
+		mounted: r,
+		ready: i,
+		positioner: a,
+		arrow: o,
+		arrowPath: d(() => ({
+			top: "M0 6L6 12L12 6",
+			bottom: "M0 6L6 0L12 6",
+			left: "M6 0L12 6L6 12",
+			right: "M6 0L0 6L6 12"
+		})[s.value]),
+		arrowStyle: d(() => ({
+			top: { top: "calc(100% - 6px)" },
+			bottom: { bottom: "calc(100% - 6px)" },
+			left: { left: "calc(100% - 6px)" },
+			right: { right: "calc(100% - 6px)" }
+		})[s.value])
+	};
+}
+// src/motion/tooltip/src/TooltipContent.vue?vue&type=script&setup=true&lang.ts
+var ae = ["id"], oe = ["d"], se = ["d"], $ = /* @__PURE__ */ _({
+	inheritAttrs: !1,
+	__name: "TooltipContent",
+	props: {
+		side: { default: "top" },
+		align: { default: "center" },
+		sideOffset: {},
+		arrow: {
+			type: Boolean,
+			default: !1
+		},
+		anchorPoint: {}
+	},
+	setup(e) {
+		let t = e, r = Y(), o = j(), s = n(), { mounted: l, ready: u, positioner: d, arrow: _, arrowPath: v, arrowStyle: y } = ie(r, t, () => !!o.default);
+		return (e, n) => k(l) ? (T(), f(c, {
+			key: 0,
+			to: "body"
+		}, [k(r).props.asLabel && !k(r).empty.value ? (T(), m("span", {
+			key: 0,
+			id: k(r).labelId,
+			hidden: ""
+		}, [O(e.$slots, "default")], 8, ae)) : p("", !0), g(k(P), null, {
+			default: N(() => [k(r).open.value && !k(r).empty.value ? (T(), m("span", {
+				key: 0,
+				ref_key: "positioner",
+				ref: d,
+				class: "pointer-events-none fixed left-0 top-0 z-[9999] w-max",
+				style: {
+					visibility: "hidden",
+					maxWidth: "calc(100vw - 16px)"
+				}
+			}, [g(k(F).span, b(e.$attrs, {
+				id: k(r).props.asLabel ? void 0 : k(r).id,
+				role: "tooltip",
+				"aria-hidden": k(r).props.asLabel || void 0,
+				initial: {
+					opacity: 0,
+					scale: k(s) ? 1 : .94
+				},
+				animate: {
+					opacity: +!!k(u),
+					scale: k(u) || k(s) ? 1 : .94
+				},
+				exit: {
+					opacity: 0,
+					scale: k(s) ? 1 : .94,
+					transition: {
+						duration: .12,
+						ease: k(i)
+					}
+				},
+				transition: {
+					duration: .18,
+					ease: k(i)
+				},
+				style: {
+					transformOrigin: "var(--tooltip-origin,center)",
+					pointerEvents: k(r).props.followCursor ? "none" : "auto"
+				},
+				class: k(a)("relative block max-w-[min(20rem,calc(100vw-16px))] whitespace-normal break-words rounded-lg border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-md", e.$attrs.class),
+				onPointerenter: k(r).enterContent,
+				onPointerleave: k(r).leaveContent
+			}), {
+				default: N(() => [O(e.$slots, "default"), t.arrow ? (T(), m("svg", {
+					key: 0,
+					ref_key: "arrow",
+					ref: _,
+					"aria-hidden": "true",
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					class: "pointer-events-none absolute overflow-visible",
+					style: S(k(y))
+				}, [h("path", {
+					d: k(v) + "Z",
+					style: { fill: "var(--tooltip-arrow-fill, transparent)" }
+				}, null, 8, oe), h("path", {
+					d: k(v),
+					fill: "none",
+					"stroke-width": "1",
+					style: { stroke: "var(--tooltip-arrow-stroke, transparent)" }
+				}, null, 8, se)], 4)) : p("", !0)]),
+				_: 3
+			}, 16, [
+				"id",
+				"aria-hidden",
+				"initial",
+				"animate",
+				"exit",
+				"transition",
+				"style",
+				"class",
+				"onPointerenter",
+				"onPointerleave"
+			])], 512)) : p("", !0)]),
+			_: 3
+		})])) : p("", !0);
+	}
+}), ce = /* @__PURE__ */ _({
+	inheritAttrs: !1,
+	__name: "Tooltip",
+	props: {
+		content: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		delay: {},
+		closeDelay: {},
+		disabled: { type: Boolean },
+		asLabel: { type: Boolean },
+		followCursor: { type: Boolean },
+		anchorRef: {},
+		id: {},
+		side: {},
+		align: {},
+		sideOffset: {},
+		arrow: { type: Boolean },
+		anchorPoint: {}
+	},
+	emits: ["update:open", "openChange"],
+	setup(e, { emit: t }) {
+		let n = e, r = ne(n, t, n.id ?? A(), n.content === null || n.content === "");
+		E(J, r), M(() => n.content, (e) => {
+			e !== void 0 && r.setEmpty(e === null || e === !1 || e === "");
+		}, { immediate: !0 });
+		let i = _({
+			props: ["value"],
+			setup: (e) => () => e.value
+		});
+		return (t, n) => e.content === void 0 ? O(t.$slots, "default", {}, void 0, void 0, 1) : (T(), m(s, { key: 0 }, [t.$slots.default ? (T(), f(Q, {
+			key: 0,
+			"as-child": ""
+		}, {
+			default: N(() => [O(t.$slots, "default")]),
+			_: 3
+		})) : p("", !0), g($, b(t.$attrs, {
+			side: e.side,
+			align: e.align,
+			"side-offset": e.sideOffset,
+			arrow: e.arrow,
+			"anchor-point": e.anchorPoint
+		}), {
+			default: N(() => [g(k(i), { value: e.content }, null, 8, ["value"])]),
+			_: 1
+		}, 16, [
+			"side",
+			"align",
+			"side-offset",
+			"arrow",
+			"anchor-point"
+		])], 64));
+	}
+});
+export { re as i, $ as n, Q as r, ce as t };
+
+//# sourceMappingURL=tooltip-DWqJD6DG.js.map