@mkbabb/glass-ui 0.3.0 → 2.1.0

package/dist/dock.js

@@ -0,0 +1,548 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./chevron-down-DILQA1t6.js";
+import { i as n, n as r, r as i, t as a } from "./dockContext-BDGSrwsV.js";
+import { t as o } from "./useTouchGate-BhhEMlwJ.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, nextTick as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, onMounted as S, onUnmounted as C, openBlock as w, provide as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as k, toDisplayString as A, unref as j, useAttrs as M, useModel as N, useTemplateRef as P, watch as F, withCtx as I } from "vue";
+import { DropdownMenuTrigger as L, Primitive as R, SelectIcon as z, SelectTrigger as B, useForwardProps as V } from "reka-ui";
+//#region src/components/custom/dock/composables/isTeleportedTarget.ts
+function H(e, t) {
+	if (!(e instanceof Element)) return !1;
+	let n = e.closest("[data-glass-dock-portal]");
+	return n ? t ? n.getAttribute("data-glass-dock-owner") === t : !0 : !1;
+}
+//#endregion
+//#region src/components/custom/dock/composables/useDockState.ts
+function ee(e) {
+	let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, l = s(), u = E(l ? "pinned" : "collapsed"), d = E(l), f = E(l), p = null, m = E(0), h = c(() => m.value > 0), g = null, _ = null, v = !1, y = u.value;
+	function b() {
+		s() && (u.value = "pinned"), d.value = u.value !== "collapsed", f.value = u.value === "pinned", o && y !== u.value && o(u.value, y), y = u.value;
+	}
+	function x() {
+		p &&= (clearTimeout(p), null);
+	}
+	function S() {
+		_ !== null && (cancelAnimationFrame(_), _ = null);
+	}
+	function w() {
+		S(), g?.();
+	}
+	function T() {
+		s() || m.value > 0 || (x(), p = setTimeout(() => {
+			D(), u.value = "collapsed", b();
+		}, t));
+	}
+	function D() {
+		typeof document > "u" || typeof PointerEvent > "u" || document.body.dispatchEvent(new PointerEvent("pointerdown", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	function O() {
+		if (s()) {
+			u.value = "pinned", b();
+			return;
+		}
+		v ||= (v = !0, x(), D(), u.value = "collapsed", b(), !1);
+	}
+	function k() {
+		if (s()) {
+			u.value = "pinned", b();
+			return;
+		}
+		x(), u.value = "hover", b();
+	}
+	function A() {
+		s() || (x(), u.value === "collapsed" && (u.value = "hover", b()));
+	}
+	function j(e) {
+		if (!s() && u.value === "hover") {
+			if (m.value > 0) return;
+			if (e) {
+				let t = n.value;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || H(e.relatedTarget, a)) return;
+			}
+			T();
+		}
+	}
+	function M() {
+		s() || (x(), u.value === "collapsed" && (u.value = "hover", b()));
+	}
+	function N(e) {
+		if (s() || u.value !== "hover" || m.value > 0) return;
+		let t = e.currentTarget;
+		e.relatedTarget && t.contains(e.relatedTarget) || H(e.relatedTarget, a) || T();
+	}
+	function P() {
+		if (s()) {
+			u.value = "pinned", b();
+			return;
+		}
+		x(), u.value = "pinned", b();
+	}
+	function I() {
+		m.value++, x();
+	}
+	function L() {
+		m.value = Math.max(0, m.value - 1), m.value === 0 && u.value === "hover" && (x(), p = setTimeout(() => {
+			m.value === 0 && u.value === "hover" && T();
+		}, Math.min(t, 800)));
+	}
+	function R(e) {
+		if (s() || i?.value) return;
+		let t = n.value;
+		!t || t.contains(e.target) || H(e.target, a) || O();
+	}
+	return F(d, (e) => {
+		e ? (w(), _ = requestAnimationFrame(() => {
+			_ = null, d.value && (document.addEventListener("pointerdown", R, !0), g = () => {
+				document.removeEventListener("pointerdown", R, !0), g = null;
+			});
+		})) : w();
+	}), typeof r == "boolean" ? r && (u.value = "pinned", b()) : F(r, (e) => {
+		if (e) {
+			x(), u.value = "pinned", b();
+			return;
+		}
+		u.value = "collapsed", b();
+	}, { immediate: !0 }), C(() => {
+		x(), w();
+	}), {
+		state: u,
+		expanded: d,
+		isPinned: f,
+		isHeld: h,
+		onMouseEnter: A,
+		onMouseLeave: j,
+		onFocusIn: M,
+		onFocusOut: N,
+		onClickCollapsed: P,
+		keepOpen: I,
+		release: L,
+		expand: k,
+		collapse: O
+	};
+}
+//#endregion
+//#region src/components/custom/dock/composables/useLayerTransition.ts
+function U(e) {
+	let { containerEl: t, activeLayer: n, axis: r } = e, i = c(() => r?.value === "vertical" ? "height" : "width"), a = (e) => e.getBoundingClientRect()[i.value], o = E(n.value), s = E(null), l = 0, u = null;
+	function d(e) {
+		let t = e.trim();
+		return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
+	}
+	function f(e) {
+		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(d), a = t.transitionDelay.split(",").map(d), o = r.map((e, t) => {
+			let r = n[t] ?? n[0] ?? "all";
+			return r !== "all" && r !== i.value ? 0 : e + (a[t] ?? a[0] ?? 0);
+		});
+		return Math.max(0, ...o) + 50;
+	}
+	function p() {
+		u &&= (clearTimeout(u), null);
+	}
+	function m(e, t) {
+		e.style.setProperty(i.value, t);
+	}
+	function h(e) {
+		e.style.removeProperty(i.value);
+	}
+	F(n, (e, n) => {
+		if (e === n) return;
+		let r = t.value;
+		if (!r) {
+			o.value = e, s.value = null;
+			return;
+		}
+		p();
+		let i = ++l, c = a(r);
+		m(r, `${c}px`), s.value = n, o.value = e, v(() => {
+			if (i !== l || !r) return;
+			r.style.transition = "none", h(r);
+			let e = a(r);
+			if (m(r, `${c}px`), r.offsetWidth, r.style.transition = "", requestAnimationFrame(() => {
+				i === l && m(r, `${e}px`);
+			}), Math.abs(e - c) < .5) {
+				h(r), s.value = null;
+				return;
+			}
+			u = setTimeout(() => {
+				i === l && (h(r), s.value = null);
+			}, f(r));
+		});
+	});
+	function g(e) {
+		let n = t.value;
+		n && e.target === n && e.propertyName === i.value && (p(), h(n), s.value = null);
+	}
+	return C(p), {
+		onTransitionEnd: g,
+		currentLayer: o,
+		leavingLayer: s
+	};
+}
+//#endregion
+//#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
+var te = [
+	"data-density",
+	"data-held",
+	"data-container-name"
+], ne = ["inert"], re = ["inert"], W = /* @__PURE__ */ m({
+	__name: "GlassDock",
+	props: {
+		collapseDelay: { default: 2e3 },
+		startCollapsed: {
+			type: Boolean,
+			default: !0
+		},
+		fitContent: {
+			type: Boolean,
+			default: !1
+		},
+		position: { default: "inline" },
+		alwaysExpanded: {
+			type: Boolean,
+			default: !1
+		},
+		wrap: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: "dock" },
+		shape: { default: "pill" },
+		orientation: { default: "horizontal" },
+		density: { default: "comfortable" },
+		containerName: {}
+	},
+	setup(e, { expose: t }) {
+		let n = 0, i = e, a = c(() => {
+			if (i.containerName) return {
+				"container-type": "inline-size",
+				"container-name": i.containerName,
+				overflow: "visible"
+			};
+		}), s = P("dockEl"), l = P("layersEl"), u = c(() => i.variant), p = c(() => i.shape), m = c(() => i.variant === "rail" || i.variant === "instrument-strip" ? "vertical" : i.orientation), h = c(() => i.density), g = c(() => i.alwaysExpanded || m.value === "vertical"), _ = c(() => i.fitContent || i.variant === "rail" || i.variant === "instrument-strip"), v = E(!1), C = o(i.collapseDelay), T = `glass-dock-${++n}`, D = null, { expanded: k, isPinned: A, isHeld: M, onMouseEnter: N, onMouseLeave: I, onFocusIn: L, onFocusOut: R, onClickCollapsed: z, keepOpen: B, release: V, expand: H, collapse: W } = ee({
+			collapseDelay: i.collapseDelay,
+			rootEl: s,
+			alwaysExpanded: g,
+			isTransitioning: v,
+			dockId: T
+		});
+		r({
+			id: T,
+			orientation: m,
+			keepOpen: B,
+			release: V,
+			held: M
+		});
+		let G = c(() => g.value || k.value), { onTransitionEnd: K } = U({
+			containerEl: l,
+			activeLayer: c(() => G.value ? "full" : "summary"),
+			axis: c(() => "horizontal")
+		});
+		function q(e) {
+			let t = e.trim();
+			return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
+		}
+		function J(e) {
+			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(q), r = t.transitionDelay.split(",").map(q);
+			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
+		}
+		function Y() {
+			D &&= (clearTimeout(D), null);
+		}
+		function X() {
+			let e = s.value;
+			e && (Y(), v.value = !0, D = setTimeout(() => {
+				v.value = !1, D = null;
+			}, J(e) + 50));
+		}
+		function Z(e) {
+			e.target === s.value && (Y(), v.value = !1);
+		}
+		S(() => {
+			(i.alwaysExpanded || !i.startCollapsed) && H();
+		});
+		function Q() {
+			return m.value === "horizontal" && !g.value;
+		}
+		function ie(e) {
+			if (!Q() || G.value) return;
+			let t = s.value, n = e.touches[0];
+			!t || !n || C.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
+		}
+		function $(e) {
+			Q() && C.handleScrollCheck(e);
+		}
+		function ae(e) {
+			if (!Q()) return;
+			let t = C.isActive.value;
+			C.handleTouchEnd(), !t && C.isActive.value && !G.value && (e.preventDefault(), e.stopPropagation(), H());
+		}
+		return F(C.isActive, (e) => {
+			!e && k.value && !A.value && !g.value && W();
+		}), F(G, (e) => {
+			X(), e || C.deactivate();
+		}), x(Y), t({
+			expanded: k,
+			isPinned: A,
+			isHeld: M,
+			isTransitioning: v,
+			expand: H,
+			collapse: W,
+			keepOpen: B,
+			release: V
+		}), (t, n) => (w(), d("div", {
+			ref_key: "dockEl",
+			ref: s,
+			class: y(["glass-dock", [
+				m.value,
+				`variant-${u.value}`,
+				`shape-${p.value}`,
+				{
+					expanded: G.value,
+					collapsed: !G.value,
+					pinned: j(A),
+					"fit-content": _.value,
+					"always-expanded": g.value,
+					"dock-wrap": e.wrap
+				},
+				e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
+			]]),
+			"data-density": h.value,
+			"data-held": j(M) || void 0,
+			"data-container-name": e.containerName || void 0,
+			style: b(a.value),
+			onMouseenter: n[2] ||= (...e) => j(N) && j(N)(...e),
+			onMouseleave: n[3] ||= (e) => j(I)(e),
+			onFocusin: n[4] ||= (...e) => j(L) && j(L)(...e),
+			onFocusout: n[5] ||= (...e) => j(R) && j(R)(...e),
+			onTouchstart: ie,
+			onTouchmove: $,
+			onTouchend: ae,
+			onTransitionend: Z,
+			onTransitioncancel: Z
+		}, [m.value === "horizontal" ? (w(), d("div", {
+			key: 0,
+			ref_key: "layersEl",
+			ref: l,
+			class: "dock-layers",
+			onTransitionend: n[1] ||= (...e) => j(K) && j(K)(...e)
+		}, [f("div", {
+			class: y(["dock-layer dock-layer--full", { "layer-active": G.value }]),
+			inert: !j(k) || void 0
+		}, [O(t.$slots, "default")], 10, ne), f("div", {
+			class: y(["dock-layer dock-layer--summary", { "layer-active": !G.value }]),
+			inert: j(k) || void 0,
+			onClick: n[0] ||= (...e) => j(z) && j(z)(...e)
+		}, [O(t.$slots, "collapsed")], 10, re)], 544)) : O(t.$slots, "default", { key: 1 })], 46, te));
+	}
+}), G = Symbol("glass-ui:dock-layer-group");
+function K(e) {
+	T(G, e);
+}
+function q() {
+	let e = h(G);
+	if (!e) throw Error("[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
+	return e;
+}
+//#endregion
+//#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
+var J = [
+	"title",
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], Y = { key: 1 }, X = { key: 2 }, Z = /* @__PURE__ */ m({
+	__name: "DockLayerGroup",
+	props: /* @__PURE__ */ g({
+		orientation: {},
+		showRail: {
+			type: Boolean,
+			default: !0
+		},
+		railPosition: { default: "start" }
+	}, {
+		active: { required: !0 },
+		activeModifiers: {}
+	}),
+	emits: ["update:active"],
+	setup(e) {
+		let t = e, r = N(e, "active"), i = n(), a = E([]), o = P("containerEl");
+		function p(e) {
+			a.value.find((t) => t.id === e.id) || a.value.push(e);
+		}
+		function m(e) {
+			a.value = a.value.filter((t) => t.id !== e);
+		}
+		let h = c(() => t.orientation ?? i?.orientation.value ?? "horizontal"), { onTransitionEnd: g, currentLayer: _, leavingLayer: v } = U({
+			containerEl: o,
+			activeLayer: r,
+			axis: h
+		});
+		K({
+			register: p,
+			unregister: m,
+			currentLayerId: _,
+			leavingLayerId: v
+		});
+		function b(e) {
+			return typeof e == "object" && !!e;
+		}
+		return (t, n) => (w(), d("div", { class: y(["dock-layer-group", [h.value, `rail-${e.railPosition}`]]) }, [e.showRail && a.value.length > 1 ? (w(), d("nav", {
+			key: 0,
+			class: y(["dock-layer-rail", e.railPosition])
+		}, [(w(!0), d(s, null, D(a.value, (e) => (w(), d("button", {
+			key: e.id,
+			type: "button",
+			class: y(["dock-layer-tab", { "is-active": r.value === e.id }]),
+			title: e.label,
+			"aria-label": e.label ?? e.id,
+			"aria-pressed": r.value === e.id,
+			onClick: (t) => r.value = e.id
+		}, [b(e.icon) ? (w(), l(k(e.icon), {
+			key: 0,
+			class: "size-4"
+		})) : typeof e.icon == "string" ? (w(), d("span", Y, A(e.icon), 1)) : (w(), d("span", X, A((e.label ?? e.id).charAt(0)), 1))], 10, J))), 128))], 2)) : u("", !0), f("div", {
+			ref_key: "containerEl",
+			ref: o,
+			class: "dock-layer-stack",
+			onTransitionend: n[0] ||= (...e) => j(g) && j(g)(...e)
+		}, [O(t.$slots, "default")], 544)], 2));
+	}
+}), Q = ["inert"], ie = /* @__PURE__ */ m({
+	__name: "DockLayer",
+	props: {
+		id: {},
+		label: {},
+		icon: {}
+	},
+	setup(e) {
+		let t = e, n = q();
+		S(() => {
+			n.register({
+				id: t.id,
+				label: t.label,
+				icon: t.icon
+			});
+		}), x(() => {
+			n.unregister(t.id);
+		});
+		let r = c(() => n.currentLayerId.value === t.id), i = c(() => n.leavingLayerId.value === t.id);
+		return (e, t) => (w(), d("div", {
+			class: y(["dock-layer-item-host", {
+				"is-active": r.value,
+				"is-leaving": i.value
+			}]),
+			inert: r.value ? void 0 : !0
+		}, [O(e.$slots, "default")], 10, Q));
+	}
+}), $ = ["type"], ae = /* @__PURE__ */ m({
+	__name: "DockIconButton",
+	props: {
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		type: { default: "button" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = c(() => e("dock-icon-button", { "dock-icon-button--compact": n.compact }, n.class));
+		return (e, n) => (w(), d("button", {
+			type: t.type,
+			class: y(r.value)
+		}, [O(e.$slots, "default")], 10, $));
+	}
+}), oe = /* @__PURE__ */ m({
+	__name: "DockTabButton",
+	props: {
+		as: { default: "button" },
+		asChild: {
+			type: Boolean,
+			default: !1
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = M(), i = c(() => r["data-tier"] === "primary"), a = c(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
+		return (e, n) => (w(), l(j(R), {
+			as: t.as,
+			"as-child": t.asChild,
+			class: y(a.value)
+		}, {
+			default: I(() => [O(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"class"
+		]));
+	}
+}), se = /* @__PURE__ */ m({
+	__name: "DockSelectTrigger",
+	props: {
+		disabled: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let r = n, i = V(c(() => {
+			let { class: e, ...t } = r;
+			return t;
+		}));
+		return (n, a) => (w(), l(j(B), _(j(i), { class: j(e)("dock-select-trigger", r.class) }), {
+			default: I(() => [O(n.$slots, "default"), p(j(z), { "as-child": "" }, {
+				default: I(() => [O(n.$slots, "icon", {}, () => [p(j(t), { class: "dock-select-trigger__chevron" })])]),
+				_: 3
+			})]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), ce = /* @__PURE__ */ m({
+	__name: "DockDropdownTrigger",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		type: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = V(c(() => {
+			let { class: e, ...t } = n;
+			return t;
+		}));
+		return (t, i) => (w(), l(j(L), _(j(r), { class: j(e)("dock-dropdown-trigger", n.class) }), {
+			default: I(() => [O(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { a as DOCK_CONTEXT_KEY, ce as DockDropdownTrigger, ae as DockIconButton, ie as DockLayer, Z as DockLayerGroup, se as DockSelectTrigger, oe as DockTabButton, W as GlassDock, r as provideDockContext, i as useDockContext, n as useOptionalDockContext };

package/dist/dockContext-BDGSrwsV.js

@@ -0,0 +1,16 @@
+import { inject as e, provide as t } from "vue";
+//#region src/components/custom/dock/composables/dockContext.ts
+var n = Symbol("glass-ui:dock-context");
+function r(e) {
+	t(n, e);
+}
+function i() {
+	let t = e(n);
+	if (!t) throw Error("[glass-ui:dock] useDockContext() called outside <GlassDock>; use useOptionalDockContext() if the primitive may render outside a dock.");
+	return t;
+}
+function a() {
+	return e(n, null);
+}
+//#endregion
+export { a as i, r as n, i as r, n as t };

package/dist/dom.d.ts

@@ -0,0 +1 @@
+export * from "./composables/dom";

package/dist/dom.js

@@ -0,0 +1,4 @@
+import { t as e } from "./useTouchGate-BhhEMlwJ.js";
+import { t } from "./useResizeObserver-F4aRR4Cj.js";
+import { a as n, i as r, n as i, r as a, t as o } from "./useBreakpoint-BHlX-MhR.js";
+export { a as copyToClipboard, o as useBreakpoint, r as useClipboard, t as useResizeObserver, n as useTokenColor, e as useTouchGate, i as useViewportReady };