@mkbabb/glass-ui 7.0.0 → 9.0.0

package/dist/drawer.js

@@ -1,496 +0,0 @@
-import { t as e } from "./class-names-Cpy5eaBk.js";
-import { t } from "./motionTempo-tscp92Nm.js";
-import { t as n } from "./createContext-BhkE9mLH.js";
-import { t as r } from "./useMotionAxis-D-rtIhca.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toRef as v, unref as y, watch as b, withCtx as x } from "vue";
-import { DialogContent as S, DialogDescription as C, DialogOverlay as w, DialogPortal as T, DialogRoot as E, DialogTitle as D, injectDialogRootContext as O, useForwardPropsEmits as k } from "reka-ui";
-import { SpringProgress as A } from "@mkbabb/keyframes.js";
-//#region src/components/drawer/constants.ts
-var j = {
-	response: .32,
-	dampingFraction: .8
-}, M = [
-	.12,
-	.5,
-	1
-];
-function N(e) {
-	return e === "left" || e === "right" ? [] : M;
-}
-//#endregion
-//#region src/components/drawer/composables/drawerSnapContext.ts
-var P = n("glass-ui:drawer-snap-context"), { KEY: F } = P;
-function I(e) {
-	P.provide(e);
-}
-var L = P.use, R = /* @__PURE__ */ u({
-	__name: "Drawer",
-	props: {
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: !1
-		},
-		modal: {
-			type: Boolean,
-			default: void 0
-		},
-		mode: { default: "modal" },
-		snapPoints: { default: void 0 },
-		activeSnapPoint: { default: void 0 },
-		direction: { default: "bottom" },
-		stage: { default: void 0 }
-	},
-	emits: ["update:open", "update:activeSnapPoint"],
-	setup(e, { emit: t }) {
-		let n = e, o = t, s = i(() => n.open !== void 0), l = g(n.open ?? n.defaultOpen);
-		b(() => n.open, (e) => {
-			e !== void 0 && (l.value = e);
-		});
-		function u(e) {
-			l.value = e, o("update:open", e);
-		}
-		let d = i(() => s.value ? n.open : l.value), f = i(() => n.mode === "live-behind"), m = i(() => n.modal ?? !f.value), S = r(), C = i(() => {
-			let e = n.stage ?? (f.value ? "none" : "scale");
-			return S.prefersReducedMotion.value && (e === "scale" || e === "immersive") ? "dim" : e;
-		}), w = i(() => n.snapPoints === void 0 ? f.value ? N(n.direction) : [] : n.snapPoints.map((e) => typeof e == "number" ? e : Number.parseFloat(e))), T = g(n.activeSnapPoint ?? null);
-		b(() => n.activeSnapPoint, (e) => {
-			e !== void 0 && (T.value = e);
-		}), b(T, (e) => o("update:activeSnapPoint", e));
-		let D = g(d.value);
-		b(d, (e) => D.value = e), b(D, (e) => {
-			e !== d.value && u(e);
-		});
-		let O = g(null), k = g(null), A = g(null);
-		return b(O, (e) => {
-			k.value = e?.closest("[data-stage-wrapper]") ?? null;
-		}, {
-			immediate: !0,
-			flush: "post"
-		}), p(() => {
-			k.value = null, A.value = null;
-		}), I({
-			open: D,
-			snapPoints: w,
-			direction: v(n, "direction"),
-			mode: v(n, "mode"),
-			stage: C,
-			wrapperEl: k,
-			scrimEl: A,
-			activeSnapPoint: T
-		}), (e, t) => (h(), a(y(E), {
-			"data-slot": "drawer",
-			open: d.value,
-			modal: m.value,
-			"onUpdate:open": u
-		}, {
-			default: x(() => [c("span", {
-				ref_key: "stageAnchorEl",
-				ref: O,
-				hidden: ""
-			}, null, 512), _(e.$slots, "default")]),
-			_: 3
-		}, 8, ["open", "modal"]));
-	}
-}), z = /* @__PURE__ */ u({
-	__name: "DrawerOverlay",
-	props: {
-		forceMount: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t, r = L(), i = g(null), o = null;
-		return b(i, (e) => {
-			r && (o = e?.parentElement ?? null, r.scrimEl.value = o);
-		}, {
-			immediate: !0,
-			flush: "post"
-		}), p(() => {
-			r?.scrimEl.value === o && (r.scrimEl.value = null);
-		}), (t, o) => (h(), a(y(w), d({
-			forceMount: n.forceMount,
-			inert: y(r) && !y(r).open.value ? "" : void 0
-		}, {
-			"data-stage-scrim": "",
-			class: y(e)("fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", n.class)
-		}), {
-			default: x(() => [c("span", {
-				ref_key: "overlayAnchorEl",
-				ref: i,
-				hidden: ""
-			}, null, 512)]),
-			_: 1
-		}, 16, ["class"]));
-	}
-});
-//#endregion
-//#region src/components/drawer/composables/useDrawerSnap.ts
-function B(e) {
-	return e === "left" || e === "right";
-}
-function V(e, t) {
-	return e.length > 0 ? [...e].sort((e, t) => e - t) : B(t) ? [0, 1] : [1];
-}
-function H(e, t) {
-	let n = t[0], r = Math.abs(e - n);
-	for (let i of t) {
-		let t = Math.abs(e - i);
-		t < r && (n = i, r = t);
-	}
-	return n;
-}
-function U(e, t, n) {
-	let r = n.indexOf(e);
-	if (r === -1) return H(e, n);
-	let i = r + t;
-	return i < 0 || i >= n.length ? e : n[i];
-}
-function W(e) {
-	let { contentEl: n, handleEl: r, ctx: i } = e, a = g(!1), o = g(i.open.value), s = null, c = null, l = null;
-	function u(e, t, n) {
-		let r = i.stage.value;
-		e?.toggleAttribute("data-stage-scale", n && (r === "scale" || r === "immersive")), t?.toggleAttribute("data-stage-immersive", n && r === "immersive");
-	}
-	function d(e) {
-		f(), u(l, c, e);
-	}
-	function f() {
-		let e = i.scrimEl.value, t = i.wrapperEl.value;
-		e?.isConnected ? c = e : c && !c.isConnected && (c = null), t?.isConnected ? l = t : l && !l.isConnected && (l = null);
-	}
-	function p() {
-		let e = c, t = l;
-		f(), o.value && (c !== e || l !== t) && u(l, c, !0);
-		let n = [];
-		return c && n.push(c), l && n.push(l), n;
-	}
-	function h(e) {
-		let t = n();
-		t && (t.style.setProperty("--glass-drawer-t", `${e}`), t.style.setProperty("--stage-t", `${e}`));
-		for (let t of p()) t.style.setProperty("--stage-t", `${e}`);
-	}
-	function _() {
-		let e = n();
-		e && e.style.removeProperty("--stage-t"), c && c.style.removeProperty("--stage-t"), l && l.style.removeProperty("--stage-t"), c = null, l = null;
-	}
-	function v() {
-		s?.dispose(), s = null, _();
-	}
-	function y() {
-		i.open.value || !s || s.target !== 0 || !s.settled || (h(0), o.value = !1, d(!1), _());
-	}
-	function x(e) {
-		h(e), y();
-	}
-	function S(e) {
-		return s || (s = new A({
-			response: j.response * t(n()),
-			dampingFraction: j.dampingFraction,
-			initial: e ?? C(),
-			respectReducedMotion: !0
-		}), s);
-	}
-	function C() {
-		let e = i.activeSnapPoint.value;
-		if (typeof e == "number") return e;
-		if (typeof e == "string") {
-			let t = Number.parseFloat(e);
-			if (!Number.isNaN(t)) return t;
-		}
-		let t = V(i.snapPoints.value, i.direction.value);
-		return t[t.length - 1] ?? 1;
-	}
-	function w(e) {
-		let t = S();
-		t.target = e, t.play(x), i.activeSnapPoint.value = e;
-	}
-	function T(e) {
-		w(H(e, V(i.snapPoints.value, i.direction.value)));
-	}
-	let E = null, D = 0, O = 0, k = 0, M = 0, N = 0;
-	function P(e) {
-		let t = i.direction.value;
-		return t === "bottom" ? -e.clientY : t === "top" ? e.clientY : t === "left" ? e.clientX : -e.clientX;
-	}
-	let F = 1;
-	function I() {
-		let e = n();
-		if (!e) return 1;
-		let t = e.getBoundingClientRect();
-		return B(i.direction.value) ? t.width || 1 : t.height || 1;
-	}
-	function L(e) {
-		let t = r.value;
-		t && (s && s.stop(), a.value = !0, E = e.pointerId, D = P(e), k = D, M = e.timeStamp, O = W(), N = 0, F = I(), t.setPointerCapture?.(e.pointerId));
-	}
-	function R(e) {
-		if (E === null || e.pointerId !== E) return;
-		let t = P(e), n = (e.timeStamp - M) / 1e3;
-		n > 0 && (N = (t - k) / n), k = t, M = e.timeStamp;
-		let r = (t - D) / F, a = V(i.snapPoints.value, i.direction.value), o = a[0], s = a[a.length - 1];
-		h(Math.min(s, Math.max(o, O + r)));
-	}
-	function z(e) {
-		if (E === null || e.pointerId !== E) return;
-		r.value?.releasePointerCapture?.(e.pointerId), E = null, a.value = !1;
-		let t = V(i.snapPoints.value, i.direction.value), n = W();
-		S().reset(n, N / F);
-		let o;
-		if (Math.abs(N) >= 450 && t.length > 1) {
-			let e = N > 0 ? 1 : -1;
-			o = U(H(n, t), e, t);
-		} else o = H(n, t);
-		if (o <= 0) {
-			i.open.value = !1;
-			return;
-		}
-		w(o);
-	}
-	function W() {
-		let e = n();
-		if (!e) return C();
-		let t = e.style.getPropertyValue("--glass-drawer-t"), r = Number.parseFloat(t);
-		return Number.isNaN(r) ? C() : r;
-	}
-	let G = null;
-	function K(e) {
-		e.addEventListener("pointerdown", L), e.addEventListener("pointermove", R), e.addEventListener("pointerup", z), e.addEventListener("pointercancel", z), G = () => {
-			e.removeEventListener("pointerdown", L), e.removeEventListener("pointermove", R), e.removeEventListener("pointerup", z), e.removeEventListener("pointercancel", z), G = null;
-		};
-	}
-	return b(r, (e) => {
-		G?.(), e && K(e);
-	}, { immediate: !0 }), b(i.open, (e) => {
-		if (e) o.value = !0, d(!0), queueMicrotask(() => {
-			i.open.value && (s || (h(0), S(0)), w(C()));
-		});
-		else {
-			if (!o.value) return;
-			if (!s) {
-				h(0), o.value = !1, d(!1), _();
-				return;
-			}
-			a.value &&= (s.reset(W(), N / F), E !== null && (r.value?.releasePointerCapture?.(E), E = null), !1), s.target = 0, s.play(x), y();
-		}
-	}, {
-		immediate: !0,
-		flush: "sync"
-	}), b([
-		i.stage,
-		i.wrapperEl,
-		i.scrimEl
-	], () => {
-		o.value && d(!0);
-	}), b(i.activeSnapPoint, (e) => {
-		if (!i.open.value || a.value) return;
-		let t = typeof e == "number" ? e : typeof e == "string" ? Number.parseFloat(e) : NaN;
-		if (!Number.isNaN(t) && (!s || Math.abs(s.target - t) > .001)) {
-			let e = V(i.snapPoints.value, i.direction.value), n = S();
-			n.target = H(t, e), n.play(x);
-		}
-	}), m(() => {
-		G?.(), d(!1), v();
-	}), {
-		present: o,
-		dragging: a,
-		snapTo: T
-	};
-}
-//#endregion
-//#region src/components/drawer/DrawerContent.vue?vue&type=script&setup=true&lang.ts
-var G = [
-	"data-dragging",
-	"aria-orientation",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-valuetext"
-], K = /* @__PURE__ */ u({
-	inheritAttrs: !1,
-	__name: "DrawerContent",
-	props: {
-		forceMount: { type: Boolean },
-		disableOutsidePointerEvents: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		showOverlay: {
-			type: Boolean,
-			default: !0
-		},
-		surface: { default: "glass" }
-	},
-	emits: [
-		"escapeKeyDown",
-		"pointerDownOutside",
-		"focusOutside",
-		"interactOutside",
-		"openAutoFocus",
-		"closeAutoFocus"
-	],
-	setup(t, { emit: n }) {
-		let r = t, u = n, f = k(i(() => {
-			let { class: e, showOverlay: t, surface: n, forceMount: i, ...a } = r;
-			return a;
-		}), u), p = g(null), m = g(null), v = () => (p.value ?? m.value)?.closest("[data-glass-drawer]") ?? null, C = L(), w = C ? W({
-			contentEl: v,
-			handleEl: p,
-			ctx: C
-		}) : null, E = O();
-		b(() => C?.open.value, (e) => {
-			let t = document.activeElement;
-			e === !1 && t && v()?.contains(t) && E.triggerElement.value?.focus({ preventScroll: !0 });
-		}, { flush: "sync" });
-		let D = i(() => r.forceMount === !0 || w?.present.value === !0), A = i(() => (C?.snapPoints.value.length ?? 0) > 1), j = i(() => [...C?.snapPoints.value ?? []].sort((e, t) => e - t)), M = i(() => {
-			let e = C?.activeSnapPoint.value, t = typeof e == "number" ? e : Number.parseFloat(String(e));
-			return Number.isNaN(t) ? Math.max(0, j.value.length - 1) : j.value.reduce((e, n, r) => Math.abs(n - t) < Math.abs(j.value[e] - t) ? r : e, 0);
-		}), N = i(() => j.value[M.value] ?? 1), P = i(() => `${Math.round(N.value * 100)}%, position ${M.value + 1} of ${j.value.length}`), F = i(() => C?.direction.value ?? "bottom"), I = i(() => C?.mode.value ?? "modal");
-		function R(e) {
-			if (!w || !A.value) return;
-			let t = j.value.length - 1, n = M.value;
-			if (e.key === "Home") n = 0;
-			else if (e.key === "End") n = t;
-			else if (e.key === "ArrowUp" || e.key === "ArrowRight") n = Math.min(t, n + 1);
-			else if (e.key === "ArrowDown" || e.key === "ArrowLeft") n = Math.max(0, n - 1);
-			else return;
-			e.preventDefault(), w.snapTo(j.value[n]);
-		}
-		let B = i(() => {
-			if (!C) return;
-			let e = F.value;
-			return e === "bottom" ? { transform: "translateY(calc((1 - var(--glass-drawer-t, 0)) * 100%))" } : e === "top" ? { transform: "translateY(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : e === "left" ? { transform: "translateX(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : { transform: "translateX(calc((1 - var(--glass-drawer-t, 0)) * 100%))" };
-		});
-		return (t, n) => (h(), a(y(T), { "force-mount": D.value }, {
-			default: x(() => [r.showOverlay ? (h(), a(z, {
-				key: 0,
-				"force-mount": D.value
-			}, null, 8, ["force-mount"])) : o("", !0), l(y(S), d({
-				...y(f),
-				...t.$attrs,
-				inert: y(C) && !y(C).open.value ? "" : void 0
-			}, {
-				"force-mount": D.value,
-				"data-glass-drawer": "",
-				"data-mode": I.value,
-				"data-glass-drawer-snap-points": A.value ? "true" : void 0,
-				"data-glass-drawer-direction": F.value,
-				"data-surface": r.surface,
-				class: y(e)("glass-drawer glass-overlay", r.class),
-				"data-material": "overlay",
-				style: B.value
-			}), {
-				default: x(() => [
-					c("span", {
-						ref_key: "contentAnchorEl",
-						ref: m,
-						hidden: ""
-					}, null, 512),
-					A.value ? (h(), s("div", {
-						key: 0,
-						ref_key: "handleEl",
-						ref: p,
-						class: "glass-drawer-handle",
-						"data-glass-drawer-handle": "",
-						"data-dragging": y(w)?.dragging.value ? "" : void 0,
-						role: "slider",
-						tabindex: "0",
-						"aria-label": "Drawer position",
-						"aria-orientation": F.value === "left" || F.value === "right" ? "horizontal" : "vertical",
-						"aria-valuemin": j.value[0],
-						"aria-valuemax": j.value[j.value.length - 1],
-						"aria-valuenow": N.value,
-						"aria-valuetext": P.value,
-						onKeydown: R
-					}, [...n[0] ||= [c("span", {
-						class: "glass-drawer-grip",
-						"aria-hidden": "true"
-					}, null, -1)]], 40, G)) : o("", !0),
-					_(t.$slots, "default")
-				]),
-				_: 3
-			}, 16, [
-				"force-mount",
-				"data-mode",
-				"data-glass-drawer-snap-points",
-				"data-glass-drawer-direction",
-				"data-surface",
-				"class",
-				"style"
-			])]),
-			_: 3
-		}, 8, ["force-mount"]));
-	}
-}), q = /* @__PURE__ */ u({
-	__name: "DrawerHeader",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-title-gap:calc(var(--overlay-pad-inline)/2.618)]", "grid gap-(--card-pad-title-gap) px-(--overlay-pad-inline) pt-(--overlay-pad-block) pb-0 text-center sm:text-left", n.class)) }, [_(t.$slots, "default")], 2));
-	}
-}), J = /* @__PURE__ */ u({
-	__name: "DrawerFooter",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-footer:calc(var(--overlay-pad-block)/1.618)]", "mt-auto flex flex-col gap-2 px-(--overlay-pad-inline) pt-(--card-pad-footer) pb-(--overlay-pad-block)", n.class)) }, [_(t.$slots, "default")], 2));
-	}
-}), Y = /* @__PURE__ */ u({
-	__name: "DrawerTitle",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), a(y(D), { class: f(y(e)("text-subheading leading-none tracking-tight", n.class)) }, {
-			default: x(() => [_(t.$slots, "default")]),
-			_: 3
-		}, 8, ["class"]));
-	}
-}), X = /* @__PURE__ */ u({
-	__name: "DrawerDescription",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), a(y(C), { class: f(y(e)("text-sm text-muted-foreground", n.class)) }, {
-			default: x(() => [_(t.$slots, "default")]),
-			_: 3
-		}, 8, ["class"]));
-	}
-});
-//#endregion
-export { R as Drawer, K as DrawerContent, X as DrawerDescription, J as DrawerFooter, q as DrawerHeader, Y as DrawerTitle };