@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/slider-gsc8jDIo.js

@@ -0,0 +1,227 @@
+import { t as e } from "./useMotionAxis-D-rtIhca.js";
+import { n as t, o as n } from "./participation-B0hdsIRo.js";
+import { t as r } from "./useDragVelocity-C5BkKiNf.js";
+import { n as i } from "./valueDomain-DXRzfc8l.js";
+import { Fragment as a, Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, nextTick as ee, normalizeClass as te, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, unref as x, useAttrs as ne, useTemplateRef as S, watch as C, withCtx as w } from "vue";
+import { SliderRange as T, SliderRoot as E, SliderThumb as D, SliderTrack as O, useForwardPropsEmits as k } from "reka-ui";
+//#region src/components/dock/composables/useDockHold.ts
+function A(e, r = {}) {
+	let i = n(), a = r.enabled ?? (() => !0), o = t(() => i, "grasp"), s = o.isHeld;
+	function c() {
+		a() && o.acquire();
+	}
+	let l = o.release;
+	function u() {
+		l(), !(typeof window > "u") && (window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u), window.removeEventListener("blur", u));
+	}
+	function d() {
+		c(), !(typeof window > "u") && (window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u), window.removeEventListener("blur", u), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u), window.addEventListener("blur", u));
+	}
+	let f = null;
+	return _(() => {
+		f = e(), f && (f.addEventListener("pointerdown", d), f.addEventListener("touchstart", d, { passive: !0 }));
+	}), g(() => {
+		f && (f.removeEventListener("pointerdown", d), f.removeEventListener("touchstart", d)), typeof window < "u" && (window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u), window.removeEventListener("blur", u)), l();
+	}), { isHeld: s };
+}
+//#endregion
+//#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
+var j = ["data-engaged"], M = ["data-engaged"], N = ["data-orientation", "data-inverted"], P = /* @__PURE__ */ p({
+	__name: "Slider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		inverted: { type: Boolean },
+		min: {},
+		max: {},
+		step: {},
+		minStepsBetweenThumbs: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: { default: "scrubber" },
+		size: { default: "md" },
+		marks: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		motion: {},
+		valueText: {},
+		name: {},
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue", "valueCommit"],
+	setup(t, { emit: n }) {
+		let p = t, P = n, F = s(() => p.variant), re = s(() => p.size), I = s(() => i(p.marks, p.min ?? 0, p.max ?? 100)), L = k(s(() => {
+			let { class: e, variant: t, size: n, marks: r, invalid: i, motion: a, valueText: o, ...s } = p;
+			return {
+				...s,
+				thumbAlignment: "contain"
+			};
+		}), P), R = S("sliderRootRef");
+		function z() {
+			let e = R.value;
+			return e ? e instanceof HTMLElement ? e : e.$el ?? null : null;
+		}
+		let { isHeld: B } = A(z), V = S("loupeRef"), H = e(() => p.motion);
+		r({
+			host: () => H.armed.value ? z() : null,
+			mirror: () => V.value,
+			axis: () => p.orientation === "vertical" ? "y" : "x"
+		});
+		let U = s(() => F.value !== "spectrum"), W = y(!1);
+		C(B, (e) => {
+			e && U.value && (W.value = !0);
+		});
+		function G(e) {
+			e.propertyName === "opacity" && !B.value && (W.value = !1);
+		}
+		let K = S("focusVeilRef");
+		function q() {
+			let e = z(), t = K.value;
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect();
+			t.style.setProperty("--veil-x", `${(n.left + n.width / 2) / window.innerWidth * 100}%`), t.style.setProperty("--veil-y", `${(n.top + n.height / 2) / window.innerHeight * 100}%`), t.style.setProperty("--glass-focus-veil-core-x", `${n.width / 2}px`), t.style.setProperty("--glass-focus-veil-core-y", `${n.height / 2}px`);
+		}
+		let J = y(0), Y = s(() => W.value && p.orientation !== "vertical");
+		function ie() {
+			let e = p.min ?? 0, t = p.max ?? 100, n = p.modelValue ?? p.defaultValue ?? [e], r = n[n.length - 1] ?? e;
+			return t === e ? 0 : Math.min(1, Math.max(0, (r - e) / (t - e)));
+		}
+		function X() {
+			let e = z(), t = V.value;
+			if (!e || !t) return;
+			let n = e.querySelector(".slider-track");
+			if (!n) return;
+			let r = n.getBoundingClientRect();
+			J.value = r.width, t.style.setProperty("--loupe-track-w", `${r.width}px`), t.style.setProperty("--loupe-left", `${r.left + r.width / 2}px`), t.style.setProperty("--loupe-top", `${r.top}px`);
+		}
+		function Z() {
+			let e = V.value;
+			if (!e || !J.value) return;
+			let t = ie() * J.value;
+			e.style.setProperty("--loupe-x", `${t}px`), e.style.setProperty("--loupe-fill-w", `${t * 3}px`);
+		}
+		function Q(e) {
+			typeof window > "u" || (window.removeEventListener("scroll", $, !0), e && window.addEventListener("scroll", $, {
+				passive: !0,
+				capture: !0
+			}));
+		}
+		function $() {
+			q(), X();
+		}
+		C(W, async (e) => {
+			if (!e) {
+				Q(!1);
+				return;
+			}
+			await ee(), q(), X(), Z(), Q(!0);
+		}), C(() => p.modelValue, () => {
+			W.value && Z();
+		}, { deep: !0 }), g(() => Q(!1));
+		let ae = s(() => W.value && U.value ? {
+			...H.hostStyle.value ?? {},
+			zIndex: "var(--z-overlay)"
+		} : H.hostStyle.value);
+		return ne(), _(() => {}), (e, t) => (v(), c(x(E), m({
+			"data-slot": "slider",
+			ref_key: "sliderRootRef",
+			ref: R,
+			class: ["glass-slider", p.class],
+			"data-control-target": "",
+			"data-variant": F.value,
+			"data-size": re.value,
+			"data-invalid": p.invalid || void 0,
+			"data-held": x(B) || void 0,
+			"data-inverted": p.inverted || void 0,
+			"data-focus-veil": W.value && U.value || void 0,
+			"data-motion": x(H).dataMotion.value,
+			style: ae.value
+		}, x(L)), {
+			default: w(({ modelValue: n }) => [
+				(v(), c(o, { to: "body" }, [W.value && U.value ? (v(), u("span", {
+					key: 0,
+					ref_key: "focusVeilRef",
+					ref: K,
+					class: "glass-focus-veil",
+					"data-engaged": x(B) || void 0,
+					"aria-hidden": "true"
+				}, null, 8, j)) : l("", !0)])),
+				(v(), c(o, { to: "body" }, [Y.value ? (v(), u("span", {
+					key: 0,
+					ref_key: "loupeRef",
+					ref: V,
+					class: "glass-loupe glass-plate",
+					"data-engaged": x(B) || void 0,
+					"aria-hidden": "true"
+				}, [...t[0] ||= [d("span", { class: "glass-loupe-clone" }, [d("span", { class: "glass-loupe-fill" })], -1), d("span", { class: "glass-loupe-mark" }, null, -1)]], 8, M)) : l("", !0)])),
+				f(x(O), { class: "slider-track track-well" }, {
+					default: w(() => [I.value.length ? (v(), u("span", {
+						key: 0,
+						class: "glass-value-marks",
+						"aria-hidden": "true",
+						"data-orientation": p.orientation === "vertical" ? "vertical" : void 0,
+						"data-inverted": p.inverted || void 0
+					}, [(v(!0), u(a, null, b(I.value, (e) => (v(), u("span", {
+						key: e.value,
+						class: "glass-value-mark",
+						style: h({ "--value-mark-position": `${e.position * 100}%` })
+					}, null, 4))), 128))], 8, N)) : l("", !0), f(x(T), {
+						class: te(["slider-range", F.value !== "spectrum" && "glass-liquid-fill"]),
+						"data-held": x(B) || void 0
+					}, {
+						default: w(() => [W.value && U.value ? (v(), u(a, { key: 0 }, [t[1] ||= d("span", {
+							class: "glass-grasp-carrier",
+							"data-grasp": "rest"
+						}, null, -1), d("span", {
+							class: "glass-grasp-carrier",
+							"data-grasp": "grasp",
+							onTransitionend: G
+						}, null, 32)], 64)) : l("", !0)]),
+						_: 1
+					}, 8, ["class", "data-held"])]),
+					_: 1
+				}),
+				(v(!0), u(a, null, b(n, (t, n) => (v(), c(x(D), {
+					key: n,
+					"aria-label": e.$attrs["aria-label"] ?? void 0,
+					"aria-labelledby": e.$attrs["aria-labelledby"] ?? void 0,
+					"aria-describedby": e.$attrs["aria-describedby"] ?? void 0,
+					"aria-errormessage": e.$attrs["aria-errormessage"] ?? void 0,
+					"aria-invalid": p.invalid || void 0,
+					"aria-valuetext": p.valueText?.(t, n) ?? void 0,
+					class: "slider-thumb glass-specular-track"
+				}, null, 8, [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-errormessage",
+					"aria-invalid",
+					"aria-valuetext"
+				]))), 128))
+			]),
+			_: 1
+		}, 16, [
+			"class",
+			"data-variant",
+			"data-size",
+			"data-invalid",
+			"data-held",
+			"data-inverted",
+			"data-focus-veil",
+			"data-motion",
+			"style"
+		]));
+	}
+});
+//#endregion
+export { P as t };

package/dist/slider.d.ts

@@ -1 +1 @@
-export * from "./components/slider";
+export * from "./components/slider/index.js";

package/dist/slider.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./slider-Cc_qw6GA.js";
-export { e as Slider, t as sliderVariants };
+import { t as e } from "./slider-gsc8jDIo.js";
+export { e as Slider };

package/dist/sortable-list.d.ts

@@ -1 +1 @@
-export * from "./components/sortable-list";
+export * from "./components/sortable-list/index.js";