@rebilly/revel 13.6.9 → 13.7.0

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

@@ -2,9 +2,22 @@ import { capitalizeFirstLetter as e } from "../../common/helpers/capitalize-firs
 import { debounce as t } from "../../vendor/es-toolkit/dist/compat/function/debounce.mjs";
 import { isKebabCase as n } from "../../common/helpers/is-kebab-case.mjs";
 import { RTooltipDirective as r } from "../../directives/r-tooltip/r-tooltip.mjs";
-import { computed as i, defineComponent as a, onBeforeUnmount as o, onMounted as s, ref as c } from "vue";
+import { computed as i, defineComponent as a, nextTick as o, onBeforeUnmount as s, onMounted as c, ref as l, watch as u } from "vue";
 //#region src/components/r-tabs/r-tabs.vue?vue&type=script&lang.ts
-var l = a({
+function d(e) {
+	let t = e?.parentElement ?? null;
+	for (; t;) {
+		let { overflowY: e } = window.getComputedStyle(t);
+		if (e === "auto" || e === "scroll" || e === "overlay") return t;
+		t = t.parentElement;
+	}
+	return null;
+}
+function f(e) {
+	let t = Array.from(e.children).find((e) => e instanceof HTMLElement && e.tagName === "HEADER");
+	return t instanceof HTMLElement ? t : null;
+}
+var p = a({
 	name: "RTabs",
 	components: {},
 	directives: { tooltip: r },
@@ -40,22 +53,59 @@ var l = a({
 		lazy: {
 			type: Boolean,
 			default: !0
+		},
+		sticky: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	emits: ["tab-selected"],
-	setup() {
-		let e = c([]), n = c(null), r = c(0), i = () => {
-			r.value += 1;
-		}, a = t(i, 100);
-		return s(() => {
-			window.addEventListener("resize", a);
-		}), o(() => {
-			window.removeEventListener("resize", a), a.cancel?.();
+	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 = () => {
+			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");
+		}
+		function x(e, t) {
+			g?.disconnect(), g = 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;
+				let t = e?.rootBounds?.top;
+				m.value = !!(e && !e.isIntersecting && t != null && e.boundingClientRect.bottom <= t);
+			}, {
+				root: r,
+				rootMargin: `-${Math.round(t)}px 0px 0px 0px`,
+				threshold: 0
+			});
+			g = i, i.observe(n);
+		}
+		function S() {
+			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);
+			};
+			a(), r && typeof ResizeObserver < "u" && (h = new ResizeObserver(() => a()), h.observe(r));
+		}
+		return c(() => {
+			window.addEventListener("resize", y), _ = !0, S();
+		}), s(() => {
+			window.removeEventListener("resize", y), y.cancel?.(), _ = !1, b();
+		}), u(() => e.sticky, () => {
+			_ && o(() => S());
 		}), {
-			tabItemLinkRefs: e,
-			tablistRef: n,
-			layoutVersion: r,
-			recomputeIndicator: i
+			tabItemLinkRefs: n,
+			tablistRef: r,
+			stickyHostRef: i,
+			stickySentinelRef: a,
+			layoutVersion: p,
+			recomputeIndicator: v,
+			isStuck: m
 		};
 	},
 	data: () => ({
@@ -137,4 +187,4 @@ var l = a({
 	}
 });
 //#endregion
-export { l as default };
+export { p as default };