@rebilly/revel 13.10.0 → 13.10.2

package/CHANGELOG.md

@@ -1,5 +1,5 @@
-## 13.10.0 (2026-11-04)
+## 13.10.2 (2026-11-06)
 
-### Features
+### Bug Fixes
 
-- **recomm:** hide optional tournament form sections behind toggles ([#31324](https://github.com/Rebilly/rebilly/pull/31324))
+- **revel:** scroll tab labels instead of wrapping them ([#31290](https://github.com/Rebilly/rebilly/pull/31290))

package/dist/components/r-tabs/r-tabs.vue.d.ts

@@ -67,6 +67,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     layoutVersion: import("vue").Ref<number, number>;
     recomputeIndicator: () => void;
     isStuck: import("vue").Ref<boolean, boolean>;
+    canScrollStart: import("vue").Ref<boolean, boolean>;
+    canScrollEnd: import("vue").Ref<boolean, boolean>;
+    isDraggingTabs: import("vue").Ref<boolean, boolean>;
+    measureScrollEdges: () => void;
+    scrollActiveTabIntoView: () => void;
+    observeTablistSize: () => void;
+    onTablistPointerDown: (event: PointerEvent) => void;
+    onTablistPointerMove: (event: PointerEvent) => void;
+    endTablistDrag: (event: PointerEvent) => void;
+    onTablistClickCapture: (event: MouseEvent) => void;
 }, State, {
     visibleTabs(): {
         tabId: string;

package/dist/components/r-tabs/r-tabs.vue.mjs

@@ -3,27 +3,27 @@ import t from "./r-tabs.vue_vue_type_script_lang.mjs";
 /* empty css                                                       */
 import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDirective as f, toDisplayString as p, vShow as m, withDirectives as h } from "vue";
 //#region src/components/r-tabs/r-tabs.vue
-var g = {
+var g = { class: "r-tabs" }, _ = {
 	key: 0,
 	ref: "stickySentinelRef",
 	class: "r-tab-sticky-sentinel",
 	"aria-hidden": "true"
-}, _ = [
+}, v = [
 	"id",
 	"to",
 	"aria-selected",
 	"aria-controls",
 	"onClick"
-], v = [
+], y = [
 	"id",
 	"aria-selected",
 	"aria-controls",
 	"onClick"
 ];
-function y(e, t, y, b, x, S) {
-	let C = f("tooltip");
-	return l(), i("div", null, [
-		e.sticky ? (l(), i("div", g, null, 512)) : r("", !0),
+function b(e, t, b, x, S, C) {
+	let w = f("tooltip");
+	return l(), i("div", g, [
+		e.sticky ? (l(), i("div", _, null, 512)) : r("", !0),
 		a("div", {
 			ref: "stickyHostRef",
 			class: s(["r-tab-sticky-host", {
@@ -34,9 +34,18 @@ function y(e, t, y, b, x, S) {
 			ref: "tablistRef",
 			class: s(["r-tab", [{
 				"r-tab-divided": e.divided,
-				"r-is-sticky": e.sticky
+				"r-is-sticky": e.sticky,
+				"r-can-scroll-start": e.canScrollStart,
+				"r-can-scroll-end": e.canScrollEnd,
+				"r-is-dragging": e.isDraggingTabs
 			}, e.menuClass]]),
-			role: "tablist"
+			role: "tablist",
+			onScroll: t[0] ||= (...t) => e.measureScrollEdges && e.measureScrollEdges(...t),
+			onPointerdown: t[1] ||= (...t) => e.onTablistPointerDown && e.onTablistPointerDown(...t),
+			onPointermove: t[2] ||= (...t) => e.onTablistPointerMove && e.onTablistPointerMove(...t),
+			onPointerup: t[3] ||= (...t) => e.endTablistDrag && e.endTablistDrag(...t),
+			onPointercancel: t[4] ||= (...t) => e.endTablistDrag && e.endTablistDrag(...t),
+			onClickCapture: t[5] ||= (...t) => e.onTablistClickCapture && e.onTablistClickCapture(...t)
 		}, [(l(!0), i(n, null, u(e.visibleTabs, (t, n) => h((l(), i("div", {
 			key: t.tabId,
 			class: "r-tab-item"
@@ -58,7 +67,7 @@ function y(e, t, y, b, x, S) {
 		}, [d(e.$slots, "label", {
 			tab: t,
 			index: n
-		}, () => [o(p(e.getTabName(t, n)), 1)])], 10, _)) : (l(), i("button", {
+		}, () => [o(p(e.getTabName(t, n)), 1)])], 10, v)) : (l(), i("button", {
 			key: 1,
 			id: t.tabId,
 			ref_for: !0,
@@ -75,16 +84,16 @@ function y(e, t, y, b, x, S) {
 		}, [d(e.$slots, "label", {
 			tab: t,
 			index: n
-		}, () => [o(p(e.getTabName(t, n)), 1)])], 10, v))])), [[C, { text: t.isInvalid && e.showValidateMessages ? t.validateErrorMessages.join("\n") : null }]])), 128)), h(a("div", {
+		}, () => [o(p(e.getTabName(t, n)), 1)])], 10, y))])), [[w, { text: t.isInvalid && e.showValidateMessages ? t.validateErrorMessages.join("\n") : null }]])), 128)), h(a("div", {
 			class: s(["r-tab-item-indicator", { "r-is-error": e.isInvalidTab }]),
 			style: c({
 				width: e.visibleTabIndicatorWidth + "px",
 				left: e.visibleTabIndicatorPosition + "px"
 			})
-		}, null, 6), [[m, e.isIndicatorReady]])], 2)], 2),
+		}, null, 6), [[m, e.isIndicatorReady]])], 34)], 2),
 		a("div", { class: s(["r-tab-content", e.contentClass]) }, [d(e.$slots, "default")], 2)
 	]);
 }
-var b = /*#__PURE__*/ e(t, [["render", y]]);
+var x = /*#__PURE__*/ e(t, [["render", b]]);
 //#endregion
-export { b as default };
+export { x as default };

package/dist/components/r-tabs/r-tabs.vue_vue_type_script_lang.mjs

@@ -61,18 +61,99 @@ var p = a({
 	},
 	emits: ["tab-selected"],
 	setup(e) {
-		let n = l([]), r = l(null), i = l(null), a = l(null), p = l(0), m = l(!1), h = null, g = null, _ = !1, v = () => {
+		let n = l([]), r = l(null), i = l(null), a = l(null), p = l(0), m = l(!1), h = l(!1), g = l(!1), _ = l(!1), v = null, y = null, b = null, x = !1, S = null, C = 0, w = 0, T = !1, E = !1, D = () => {
 			p.value += 1;
-		}, y = t(v, 100);
-		function b() {
-			h?.disconnect(), h = null, g?.disconnect(), g = null, m.value = !1, i.value?.style.removeProperty("--r-tabs-sticky-offset");
+		}, O = t(D, 100);
+		function k() {
+			let e = r.value;
+			if (!e) {
+				h.value = !1, g.value = !1;
+				return;
+			}
+			let t = e.scrollWidth - e.clientWidth;
+			h.value = e.scrollLeft > 1, g.value = t > 1 && e.scrollLeft < t - 1;
 		}
-		function x(e, t) {
-			g?.disconnect(), g = null;
+		function A(e) {
+			let t = window.getComputedStyle(e).getPropertyValue("--r-tab-fade").trim();
+			if (!t) return 0;
+			if (t.endsWith("px")) {
+				let e = Number.parseFloat(t);
+				return Number.isFinite(e) ? e : 0;
+			}
+			let n = document.createElement("div");
+			n.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;width:${t}`, e.appendChild(n);
+			let r = n.getBoundingClientRect().width;
+			return n.remove(), Number.isFinite(r) ? r : 0;
+		}
+		function j() {
+			let e = r.value;
+			if (!e) return;
+			let t = e.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+			if (!t) return;
+			let n = A(e), i = t.getBoundingClientRect(), a = e.getBoundingClientRect(), o = a.left + n, s = a.right - n;
+			i.left < o ? e.scrollLeft -= o - i.left : i.right > s && (e.scrollLeft += i.right - s), k();
+		}
+		function M() {
+			b?.disconnect(), b = null;
+			let e = r.value;
+			if (!e || typeof ResizeObserver > "u") return;
+			let t = new ResizeObserver(() => k());
+			b = t, t.observe(e), e.querySelectorAll(".r-tab-item").forEach((e) => {
+				t.observe(e);
+			});
+		}
+		function N(e) {
+			return e.scrollWidth - e.clientWidth > 1;
+		}
+		function P(e) {
+			if (e.pointerType !== "mouse" || e.button !== 0) return;
+			let t = r.value;
+			t && N(t) && (S = e.pointerId, C = e.clientX, w = t.scrollLeft, T = !1, F(), window.addEventListener("pointerup", L), window.addEventListener("pointercancel", L));
+		}
+		function F() {
+			window.removeEventListener("pointerup", L), window.removeEventListener("pointercancel", L);
+		}
+		function I(e) {
+			if (e.pointerId !== S) return;
+			let t = r.value;
+			if (!t || e.buttons !== 1) {
+				L(e);
+				return;
+			}
+			let n = e.clientX - C;
+			if (!(!T && Math.abs(n) < 5)) {
+				if (!T) try {
+					t.setPointerCapture(e.pointerId);
+				} catch {}
+				T = !0, _.value = !0, t.scrollLeft = w - n, e.preventDefault();
+			}
+		}
+		function L(e) {
+			if (e.pointerId !== S) return;
+			let t = r.value, n = T;
+			S = null, T = !1, _.value = !1, F();
+			try {
+				t?.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId);
+			} catch {}
+			n && (E = !0, window.setTimeout(() => {
+				E = !1;
+			}, 0));
+		}
+		function R(e) {
+			E && (E = !1, e.preventDefault(), e.stopPropagation());
+		}
+		let z = () => {
+			O(), k();
+		};
+		function B() {
+			v?.disconnect(), v = null, y?.disconnect(), y = null, m.value = !1, i.value?.style.removeProperty("--r-tabs-sticky-offset");
+		}
+		function V(e, t) {
+			y?.disconnect(), y = null;
 			let n = a.value;
 			if (!n || typeof IntersectionObserver > "u") return;
 			let r = e === document.documentElement ? null : e, i = new IntersectionObserver(([e]) => {
-				if (g !== i) return;
+				if (y !== i) return;
 				let t = e?.rootBounds?.top;
 				m.value = !!(e && !e.isIntersecting && t != null && e.boundingClientRect.bottom <= t);
 			}, {
@@ -80,32 +161,42 @@ var p = a({
 				rootMargin: `-${Math.round(t)}px 0px 0px 0px`,
 				threshold: 0
 			});
-			g = i, i.observe(n);
+			y = i, i.observe(n);
 		}
-		function S() {
-			if (b(), !e.sticky) return;
+		function H() {
+			if (B(), !e.sticky) return;
 			let t = i.value;
 			if (!t) return;
 			let n = d(t) ?? document.documentElement, r = f(n), a = () => {
 				let e = r ? r.getBoundingClientRect().height : 0;
-				t.style.setProperty("--r-tabs-sticky-offset", `${e}px`), x(n, e);
+				t.style.setProperty("--r-tabs-sticky-offset", `${e}px`), V(n, e);
 			};
-			a(), r && typeof ResizeObserver < "u" && (h = new ResizeObserver(() => a()), h.observe(r));
+			a(), r && typeof ResizeObserver < "u" && (v = new ResizeObserver(() => a()), v.observe(r));
 		}
 		return c(() => {
-			window.addEventListener("resize", y), _ = !0, S();
+			window.addEventListener("resize", z), x = !0, H(), M(), k();
 		}), s(() => {
-			window.removeEventListener("resize", y), y.cancel?.(), _ = !1, b();
+			window.removeEventListener("resize", z), O.cancel?.(), b?.disconnect(), b = null, F(), x = !1, B();
 		}), u(() => e.sticky, () => {
-			_ && o(() => S());
+			x && o(() => H());
 		}), {
 			tabItemLinkRefs: n,
 			tablistRef: r,
 			stickyHostRef: i,
 			stickySentinelRef: a,
 			layoutVersion: p,
-			recomputeIndicator: v,
-			isStuck: m
+			recomputeIndicator: D,
+			isStuck: m,
+			canScrollStart: h,
+			canScrollEnd: g,
+			isDraggingTabs: _,
+			measureScrollEdges: k,
+			scrollActiveTabIntoView: j,
+			observeTablistSize: M,
+			onTablistPointerDown: P,
+			onTablistPointerMove: I,
+			endTablistDrag: L,
+			onTablistClickCapture: R
 		};
 	},
 	data: () => ({
@@ -137,15 +228,22 @@ var p = a({
 			return this.visibleTabs[this.visibleTabIndicatorIndex]?.isInvalid;
 		}
 	},
-	watch: { $route(e, t) {
-		if (e.name === t.name) {
-			let e = this.getRouteTab();
-			e && this.selectTab(e);
+	watch: {
+		visibleTabs() {
+			this.$nextTick(() => {
+				this.observeTablistSize(), this.measureScrollEdges(), this.scrollActiveTabIntoView();
+			});
+		},
+		$route(e, t) {
+			if (e.name === t.name) {
+				let e = this.getRouteTab();
+				e && this.selectTab(e);
+			}
 		}
-	} },
+	},
 	mounted() {
 		this.bootstrap(), this.$nextTick(() => {
-			this.isIndicatorReady = !0;
+			this.isIndicatorReady = !0, this.observeTablistSize(), this.measureScrollEdges(), this.scrollActiveTabIntoView();
 		});
 	},
 	methods: {
@@ -162,7 +260,9 @@ var p = a({
 				e.isActive = r === e.tabId;
 			}) : this.tabs.forEach((t) => {
 				t.isActive = t.name === e;
-			}), this.$nextTick(() => this.recomputeIndicator()));
+			}), this.$nextTick(() => {
+				this.recomputeIndicator(), this.scrollActiveTabIntoView();
+			}));
 		},
 		getRouteTab() {
 			return this.tabs.filter((e) => e.to).find((e) => this.goingToSameRoute(e.to));