@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/tabs.js

@@ -1,21 +1,19 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { n as t } from "./springPresets-h5VKJQqG.js";
-import { n, r } from "./writeVelocityWeight-D_AcvTsE.js";
-import { t as i } from "./useMotionAxis-DCCXMC-i.js";
-import { a, c as o, o as s, r as c, s as l } from "./select-BIv4R3Ir.js";
-import { i as u, n as d, r as f, t as p } from "./tooltip-BmOQJzh0.js";
-import { t as m } from "./useLeadTrail-BYu8dq4G.js";
-import { t as h } from "./useDragMorph-7ygF9O0m.js";
-import { a as ee, r as g, t as te } from "./useTabRovingFocus-DkLYwo4L.js";
-import { Fragment as _, computed as v, createBlock as y, createCommentVNode as ne, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeModels as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onMounted as j, onScopeDispose as M, openBlock as N, ref as P, renderList as F, renderSlot as I, toDisplayString as L, unref as R, useModel as re, watch as z, withCtx as B } from "vue";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { n as t, r as n } from "./writeVelocityWeight-DoGOCW3e.js";
+import { t as r } from "./useMotionAxis-D-rtIhca.js";
+import { a as i, c as a, o, r as s, s as c } from "./select-BcBAyLXA.js";
+import { i as l, n as u, r as d, t as f } from "./tooltip-Drx5qnw_.js";
+import { t as p } from "./useDragMorph-BogSV_nv.js";
+import { a as m, r as h, t as g } from "./useTabRovingFocus-YnWh-Ytr.js";
+import { Fragment as _, computed as v, createBlock as y, createCommentVNode as ee, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeModels as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onBeforeUpdate as j, onMounted as M, openBlock as N, ref as P, renderList as F, renderSlot as I, toDisplayString as L, unref as R, useModel as z, watch as B, withCtx as V } from "vue";
 //#region src/components/tabs/composables/useTabDragMorph.ts
-function ie(e) {
-	let { indicatorRef: t, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: l } = e, u = v(() => o() && !a.value);
+function H(e) {
+	let { indicatorRef: r, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: l } = e, u = v(() => o() && !a.value);
 	function d() {
-		let e = t.value;
-		if (!e) return g;
-		let r = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
-		return n(e, Number(r) || 1.11);
+		let e = r.value;
+		if (!e) return h;
+		let n = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
+		return t(e, Number(n) || 1.11);
 	}
 	function f() {
 		return s.value.map((e, t) => {
@@ -26,8 +24,8 @@ function ie(e) {
 			};
 		});
 	}
-	let p = h({
-		el: t,
+	let m = p({
+		handle: r,
 		axis: () => i.value ? "y" : "x",
 		snapTargets: f,
 		maxStretch: d,
@@ -35,44 +33,51 @@ function ie(e) {
 			l.value !== e && (l.value = e);
 		}
 	});
-	return z(() => [p.dragging.value, p.stretch.value], ([e, n]) => {
-		let i = t.value;
+	return B(() => [m.dragging.value, m.stretch.value], ([e, t]) => {
+		let i = r.value;
 		if (!(!i || !u.value)) if (e) {
-			i.style.setProperty("--stretch", String(n));
+			i.style.setProperty("--stretch", String(t));
 			let e = d();
-			r(i, e > 1 ? (n - 1) / (e - 1) : 0);
-		} else i.style.removeProperty("--stretch"), r(i, 0);
-	}), z(() => [
-		t.value,
+			n(i, e > 1 ? (t - 1) / (e - 1) : 0);
+		} else i.style.removeProperty("--stretch"), n(i, 0);
+	}), B(() => [
+		r.value,
 		s.value.length,
 		i.value,
 		u.value
 	], () => {
-		u.value && t.value && D(() => p.refresh());
+		u.value && r.value && D(() => m.refresh());
 	}, { immediate: !0 }), {
 		dragEnabled: u,
-		drag: p
+		drag: m
 	};
 }
 //#endregion
 //#region src/components/tabs/composables/useTabResponsive.ts
-function ae(e) {
+function U(e) {
 	let { responsive: t, options: n, model: r } = e, i = v(() => {
 		let e = t();
 		return e === !1 ? null : e === !0 ? {} : e;
 	}), a = v(() => i.value?.breakpoint ?? "640px"), o = v(() => i.value?.desktopOptions ?? n.value), s = P(!0), c = null;
 	function l(e) {
-		s.value = e.matches;
+		"currentTarget" in e && e.currentTarget && e.currentTarget !== c || (s.value = e.matches);
 	}
 	let u = v(() => {
 		if (!i.value) return r.value;
 		let e = o.value;
-		return e.some((e) => e.value === r.value) ? r.value : e[0]?.value ?? r.value;
-	}), d = v(() => i.value ? o.value : n.value), f = v(() => i.value?.ariaLabel ?? n.value.find((e) => e.value === r.value)?.label ?? "Select"), p = v(() => !!i.value && !s.value);
-	return j(() => {
-		i.value && typeof window < "u" && window.matchMedia && (c = window.matchMedia(`(min-width: ${a.value})`), s.value = c.matches, c.addEventListener("change", l));
+		return e.some((e) => e.value === r.value) ? r.value : e.find((e) => !e.disabled)?.value;
+	}), d = v(() => i.value ? o.value : n.value), f = v(() => i.value?.ariaLabel ?? n.value.find((e) => e.value === r.value)?.label ?? "Select"), p = v(() => !!i.value && !s.value), m = !1;
+	function h() {
+		if (c?.removeEventListener("change", l), c = null, !m || !i.value || typeof window > "u" || !window.matchMedia) {
+			s.value = !0;
+			return;
+		}
+		c = window.matchMedia(`(min-width: ${a.value})`), s.value = c.matches, c.addEventListener("change", l);
+	}
+	return B([i, a], h), M(() => {
+		m = !0, h();
 	}), A(() => {
-		c?.removeEventListener("change", l), c = null;
+		m = !1, c?.removeEventListener("change", l), c = null;
 	}), {
 		responsiveCfg: i,
 		breakpoint: a,
@@ -85,63 +90,30 @@ function ae(e) {
 	};
 }
 //#endregion
-//#region src/components/tabs/composables/useEyeglassLive.ts
-var V = t("eyeglass"), H = 320, U = .27, W = 1, G = 0;
-function oe(e) {
-	let { indicatorRef: t, enabled: n } = e, r = null, i = m({
-		response: V.response,
-		damping: V.dampingFraction,
-		trailTau: U,
-		onFrame({ hi: e }) {
-			let n = t.value;
-			n && n.style.setProperty("--eyeglass-live-t", String(e));
-		}
-	});
-	function a() {
-		r &&= (clearTimeout(r), null);
-	}
-	function o() {
-		n.value && (a(), i.drive(W), r = setTimeout(() => {
-			i.drive(G), r = null;
-		}, H));
-	}
-	function s() {
-		a(), i.seat(G);
-	}
-	return j(() => s()), z(n, (e) => {
-		e || s();
-	}), M(() => {
-		a(), i.dispose();
-	}), {
-		energize: o,
-		settle: s
-	};
-}
-//#endregion
 //#region src/components/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
-var se = [
+var te = [
 	"role",
 	"aria-label",
 	"aria-orientation",
-	"data-motion",
-	"data-eyeglass"
-], ce = [
+	"data-motion"
+], ne = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], le = [
+], re = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], K = /* @__PURE__ */ w({
+], W = /* @__PURE__ */ w({
 	__name: "SegmentedTabs",
-	props: /* @__PURE__ */ T({
+	props: /*@__PURE__*/ T({
 		options: {},
 		ariaLabel: {},
 		variant: { default: "pill" },
 		semantics: {},
+		activation: { default: "automatic" },
 		orientation: { default: "horizontal" },
 		responsive: {
 			type: [Boolean, Object],
@@ -164,35 +136,36 @@ var se = [
 		function n(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let r = t, m = i(() => r.motion), h = re(t, "modelValue"), g = P(null), w = P(null), T = P([]), D = v(() => r.variant === "underline"), A = v(() => r.orientation === "vertical"), j = v(() => r.semantics === "tabs" || !r.semantics && D.value), M = v(() => !D.value), z = v(() => h.value == null ? [] : [h.value]), V = (e) => z.value.includes(e);
-		function H(e) {
-			return !D.value && !V(e.value) && !e.disabled && "glass-capsule-hover";
+		let p = t, h = r(() => p.motion), w = z(t, "modelValue"), T = P(null), D = P(null), A = P([]), M = v(() => p.variant === "underline"), B = v(() => p.orientation === "vertical"), W = v(() => p.semantics === "tabs" || !p.semantics && M.value);
+		function G(e) {
+			return !M.value && !Y(e.value) && !e.disabled && "glass-capsule-hover";
 		}
-		let { responsiveCfg: U, stripValue: W, stripOptions: G, mobileAriaLabel: K, showMobileSelect: ue } = ae({
-			responsive: () => r.responsive,
-			options: v(() => r.options),
-			model: h
-		}), { singleSliderStyle: q, squishOnTravel: de } = ee({
-			containerRef: g,
-			indicatorRef: w,
-			buttonRefs: T,
-			options: G,
-			model: v(() => W.value),
-			activeValues: z,
-			vertical: A
-		}), J = oe({
-			indicatorRef: w,
-			enabled: M
-		}), { dragEnabled: Y, drag: X } = ie({
-			indicatorRef: w,
-			isVertical: A,
-			isUnderline: D,
-			draggable: () => m.armed.value,
-			stripOptions: G,
-			buttonRefs: T,
-			model: h
+		let { responsiveCfg: ie, stripValue: K, stripOptions: q, mobileAriaLabel: ae, showMobileSelect: oe } = U({
+			responsive: () => p.responsive,
+			options: v(() => p.options),
+			model: w
+		}), J = v(() => K.value == null ? [] : [K.value]), Y = (e) => J.value.includes(e);
+		j(() => {
+			A.value = [];
+		});
+		let { singleSliderStyle: se, squishOnTravel: ce } = m({
+			containerRef: T,
+			indicatorRef: D,
+			buttonRefs: A,
+			options: q,
+			model: v(() => K.value),
+			activeValues: J,
+			vertical: B
+		}), { dragEnabled: X, drag: le } = H({
+			indicatorRef: D,
+			isVertical: B,
+			isUnderline: M,
+			draggable: () => h.armed.value,
+			stripOptions: q,
+			buttonRefs: A,
+			model: w
 		});
-		function fe(e) {
+		function ue(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
 			let t = n("--spring-snappy", "ease"), r = n("--scale-press-btn", "0.97");
@@ -209,107 +182,103 @@ var se = [
 			});
 		}
 		function Z(e, t) {
-			if (G.value[t]?.disabled) return;
-			let n = T.value[t];
-			n && fe(n), de(t), J.energize(), h.value = e;
-		}
-		function pe() {
-			J.energize();
+			if (q.value[t]?.disabled) return;
+			let n = A.value[t];
+			n && ue(n), ce(t), w.value = e;
 		}
-		function me(e) {
-			typeof e == "string" && (h.value = e);
+		function de(e) {
+			typeof e == "string" && (w.value = e);
 		}
-		let { rovingTabindex: Q, onStripKeydown: $ } = te({
-			stripOptions: G,
-			stripValue: W,
-			isVertical: A,
-			buttonRefs: T,
+		let { rovingTabindex: Q, onStripKeydown: $ } = g({
+			stripOptions: q,
+			stripValue: K,
+			isVertical: B,
+			activation: v(() => p.activation),
+			buttonRefs: A,
 			select: Z
 		});
-		return (n, i) => R(ue) ? (N(), b("div", {
+		return (n, r) => R(oe) ? (N(), b("div", {
 			key: 0,
-			class: O(R(e)("segmented-tabs__mobile w-fit", r.class))
-		}, [C(R(o), {
-			"model-value": h.value,
-			"onUpdate:modelValue": me
+			class: O(R(e)("segmented-tabs__mobile w-fit", p.class))
+		}, [C(R(a), {
+			"model-value": w.value,
+			"onUpdate:modelValue": de
 		}, {
-			default: B(() => [C(R(s), {
-				"aria-label": r.ariaLabel ?? R(K),
-				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(U)?.triggerClass))
+			default: V(() => [C(R(o), {
+				"aria-label": p.ariaLabel ?? R(ae),
+				"data-control-target": "",
+				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(ie)?.triggerClass))
 			}, {
-				default: B(() => [C(R(l))]),
+				default: V(() => [C(R(c))]),
 				_: 1
-			}, 8, ["aria-label", "class"]), C(R(a), null, {
-				default: B(() => [(N(!0), b(_, null, F(t.options, (e) => (N(), y(R(c), {
+			}, 8, ["aria-label", "class"]), C(R(i), null, {
+				default: V(() => [(N(!0), b(_, null, F(t.options, (e) => (N(), y(R(s), {
 					key: e.value,
-					value: e.value
+					value: e.value,
+					disabled: e.disabled
 				}, {
-					default: B(() => [S(L(e.label), 1)]),
+					default: V(() => [S(L(e.label), 1)]),
 					_: 2
-				}, 1032, ["value"]))), 128))]),
+				}, 1032, ["value", "disabled"]))), 128))]),
 				_: 1
 			})]),
 			_: 1
 		}, 8, ["model-value"])], 2)) : (N(), b("div", {
 			key: 1,
 			ref_key: "containerRef",
-			ref: g,
-			role: j.value ? "tablist" : "group",
-			"aria-label": r.ariaLabel,
-			"aria-orientation": j.value ? A.value ? "vertical" : "horizontal" : void 0,
-			"data-motion": R(m).dataMotion.value,
-			"data-eyeglass": M.value ? "" : void 0,
-			style: k(R(m).hostStyle.value),
-			class: O(R(e)("segmented-tabs", `segmented-tabs--${t.variant}`, A.value && "segmented-tabs--vertical", !D.value && "glass-capsule-track", r.class)),
-			onKeydown: i[0] ||= (...e) => R($) && R($)(...e),
-			onPointerdown: pe
-		}, [D.value ? ne("", !0) : (N(), b("div", {
+			ref: T,
+			role: W.value ? "tablist" : "group",
+			"aria-label": p.ariaLabel,
+			"aria-orientation": W.value ? B.value ? "vertical" : "horizontal" : void 0,
+			"data-motion": R(h).dataMotion.value,
+			style: k(R(h).hostStyle.value),
+			class: O(R(e)("segmented-tabs", `segmented-tabs--${t.variant}`, B.value && "segmented-tabs--vertical", !M.value && "glass-capsule-track", p.class)),
+			onKeydown: r[0] ||= (...e) => R($) && R($)(...e)
+		}, [M.value ? ee("", !0) : (N(), b("div", {
 			key: 0,
 			ref_key: "indicatorRef",
-			ref: w,
+			ref: D,
 			class: O([
 				"segmented-indicator",
 				"segmented-indicator--js",
-				R(Y) && "glass-drag-grabbable",
-				R(Y) && R(X).dragging.value && "glass-drag-lift"
+				"glass-capsule",
+				"glass-lens",
+				R(X) && "glass-drag-grabbable",
+				R(X) && R(le).dragging.value && "glass-drag-lift"
 			]),
-			style: k(R(Y) ? {
-				...R(q),
-				...R(X).dragStyle.value
-			} : R(q))
-		}, [x("div", { class: O([
-			"segmented-indicator__plate",
-			"glass-capsule",
-			M.value && "glass-lens"
-		]) }, null, 2)], 6)), (N(!0), b(_, null, F(R(G), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(p), {
+			style: k(R(se))
+		}, null, 6)), (N(!0), b(_, null, F(R(q), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(f), {
 			key: 0,
 			"delay-duration": 200
 		}, {
-			default: B(() => [C(R(u), null, {
-				default: B(() => [C(R(d), { "as-child": "" }, {
-					default: B(() => [x("button", E({
+			default: V(() => [C(R(l), null, {
+				default: V(() => [C(R(u), { "as-child": "" }, {
+					default: V(() => [x("button", E({
 						type: "button",
 						ref_for: !0,
 						ref: (e) => {
-							e && (T.value[t] = e);
+							e && (A.value[t] = e);
 						},
 						class: "segmented-tab",
-						role: j.value ? "tab" : void 0,
+						role: W.value ? "tab" : void 0,
 						tabindex: R(Q)(t)
-					}, { ref_for: !0 }, j.value ? { "aria-selected": V(e.value) ? "true" : "false" } : { "aria-pressed": V(e.value) ? "true" : "false" }, {
+					}, { ref_for: !0 }, W.value ? {
+						"aria-selected": Y(e.value) ? "true" : "false",
+						"aria-controls": e.controls || void 0
+					} : { "aria-pressed": Y(e.value) ? "true" : "false" }, {
 						disabled: e.disabled,
-						class: [e.disabled && "is-disabled", H(e)],
+						class: [e.disabled && "is-disabled", G(e)],
 						onClick: (n) => Z(e.value, t)
 					}), [I(n.$slots, "option", {
 						option: e,
-						active: V(e.value)
-					}, () => [S(L(e.label), 1)])], 16, ce)]),
+						active: Y(e.value)
+					}, () => [S(L(e.label), 1)])], 16, ne)]),
 					_: 2
-				}, 1024), C(R(f), {
+				}, 1024), C(R(d), {
 					side: "bottom",
 					"side-offset": 8
 				}, {
-					default: B(() => [S(L(e.tooltip), 1)]),
+					default: V(() => [S(L(e.tooltip), 1)]),
 					_: 2
 				}, 1024)]),
 				_: 2
@@ -320,20 +289,23 @@ var se = [
 			type: "button",
 			ref_for: !0,
 			ref: (e) => {
-				e && (T.value[t] = e);
+				e && (A.value[t] = e);
 			},
 			class: "segmented-tab",
-			role: j.value ? "tab" : void 0,
+			role: W.value ? "tab" : void 0,
 			tabindex: R(Q)(t)
-		}, { ref_for: !0 }, j.value ? { "aria-selected": V(e.value) ? "true" : "false" } : { "aria-pressed": V(e.value) ? "true" : "false" }, {
+		}, { ref_for: !0 }, W.value ? {
+			"aria-selected": Y(e.value) ? "true" : "false",
+			"aria-controls": e.controls || void 0
+		} : { "aria-pressed": Y(e.value) ? "true" : "false" }, {
 			disabled: e.disabled,
-			class: [e.disabled && "is-disabled", H(e)],
+			class: [e.disabled && "is-disabled", G(e)],
 			onClick: (n) => Z(e.value, t)
 		}), [I(n.$slots, "option", {
 			option: e,
-			active: V(e.value)
-		}, () => [S(L(e.label), 1)])], 16, le))], 64))), 128))], 46, se));
+			active: Y(e.value)
+		}, () => [S(L(e.label), 1)])], 16, re))], 64))), 128))], 46, te));
 	}
 });
 //#endregion
-export { K as SegmentedTabs };
+export { W as SegmentedTabs };