@illinois-grad/grad-vue 3.0.6 → 3.0.7

package/dist/grad-vue-elements.js

@@ -5999,40 +5999,43 @@ function Cd() {
 	let e = globalThis;
 	return e.__GRAD_VUE_WC_SIDEBAR_CHANNELS__ ||= /* @__PURE__ */ new Map(), e.__GRAD_VUE_WC_SIDEBAR_CHANNELS__;
 }
-function wd(e = "default", t = "(max-width: 800px)") {
-	let n = Cd(), r = e || "default";
+function wd(e = "default", t) {
+	let n = Cd(), r = e || "default", i = typeof t == "string" ? t : t?.value, a = i && i.trim() ? i : "(max-width: 800px)";
 	if (!n.has(r)) {
-		let e = Sd(r);
+		let e = Sd(r), t = /* @__PURE__ */ N(a);
 		n.set(r, {
 			id: `g-wc-sidebar-${e}`,
 			open: /* @__PURE__ */ N(!1),
+			breakpoint: t,
 			isCollapsible: Oc(t, { ssrWidth: 1e3 }),
 			toggle: () => void 0
 		});
 	}
-	let i = n.get(r);
-	i.toggle = () => i.open.value = !i.open.value;
-	function a(e) {
-		if (!i.isCollapsible.value || !i.open.value) return;
-		let t = e.target, n = document.getElementById(`${i.id}-sidebar`);
+	let o = n.get(r);
+	o.toggle = () => o.open.value = !o.open.value, typeof t == "string" ? t.trim() && (o.breakpoint.value = t) : t && L(t, (e) => {
+		e && e.trim() && (o.breakpoint.value = e);
+	}, { immediate: !0 });
+	function s(e) {
+		if (!o.isCollapsible.value || !o.open.value) return;
+		let t = e.target, n = document.getElementById(`${o.id}-sidebar`);
 		n && (n.contains(t) || setTimeout(() => {
-			i.open.value = !1;
+			o.open.value = !1;
 		}, 5));
 	}
-	function o(e) {
-		if (!i.isCollapsible.value || !i.open.value) return;
-		let t = e.target, n = document.getElementById(`${i.id}-sidebar`), r = document.getElementById(`${i.id}-hamburger`);
+	function c(e) {
+		if (!o.isCollapsible.value || !o.open.value) return;
+		let t = e.target, n = document.getElementById(`${o.id}-sidebar`), r = document.getElementById(`${o.id}-hamburger`);
 		n && (n.contains(t) || r?.contains(t) || setTimeout(() => {
-			i.open.value = !1;
+			o.open.value = !1;
 		}, 5));
 	}
 	return Gr(() => {
-		L(i.isCollapsible, (e) => {
-			e ? (document.addEventListener("mousedown", a), document.addEventListener("focusin", o)) : (document.removeEventListener("mousedown", a), document.removeEventListener("focusin", o));
+		L(o.isCollapsible, (e) => {
+			e ? (document.addEventListener("mousedown", s), document.addEventListener("focusin", c)) : (document.removeEventListener("mousedown", s), document.removeEventListener("focusin", c));
 		}, { immediate: !0 });
 	}), Jr(() => {
-		document.removeEventListener("mousedown", a), document.removeEventListener("focusin", o);
-	}), i;
+		document.removeEventListener("mousedown", s), document.removeEventListener("focusin", c);
+	}), o;
 }
 //#endregion
 //#region src/components/GHamburgerMenu.vue?vue&type=script&setup=true&lang.ts
@@ -6051,11 +6054,12 @@ var Td = [
 		sidebarKey: {
 			default: "default",
 			type: String
-		}
+		},
+		mediaQuery: { type: String }
 	},
 	emits: ["toggle"],
 	setup(e, { emit: t }) {
-		let n = e, r = qn("sidebar") ?? (Ql() ? wd(n.sidebarKey) : void 0), i = t;
+		let n = e, r = qn("sidebar") ?? (Ql() ? wd(n.sidebarKey, /* @__PURE__ */ fn(n, "mediaQuery")) : void 0), i = t;
 		function a() {
 			i("toggle"), r?.toggle();
 		}
@@ -7456,10 +7460,11 @@ var Bd = ["id", "for"], Vd = {
 		sidebarKey: {
 			default: "default",
 			type: String
-		}
+		},
+		mediaQuery: { type: String }
 	},
 	setup(e) {
-		let t = e, n = qn("sidebar", () => void 0, !0) ?? (Ql() ? wd(t.sidebarKey) : void 0), r = Q(() => t.backgroundImage ? t.backgroundImage : t.theme === "light" ? "none" : "url('https://gradcdn.blob.core.windows.net/public/sidebar-bg2.jpg')"), i = Q(() => t.backgroundColor ? t.backgroundColor : t.theme === "light" ? "#f9f9f9" : "#030913"), a = Q(() => t.topOffsetVar ? `var(${t.topOffsetVar})` : t.topOffset ? t.topOffset : "var(--g-toolbar-height)"), o = z();
+		let t = e, n = qn("sidebar", () => void 0, !0) ?? (Ql() ? wd(t.sidebarKey, /* @__PURE__ */ fn(t, "mediaQuery")) : void 0), r = Q(() => t.backgroundImage ? t.backgroundImage : t.theme === "light" ? "none" : "url('https://gradcdn.blob.core.windows.net/public/sidebar-bg2.jpg')"), i = Q(() => t.backgroundColor ? t.backgroundColor : t.theme === "light" ? "#f9f9f9" : "#030913"), a = Q(() => t.topOffsetVar ? `var(${t.topOffsetVar})` : t.topOffset ? t.topOffset : "var(--g-toolbar-height)"), o = z();
 		function s(e) {
 			e.key === "Escape" && n?.isCollapsible?.value && n?.open?.value && (n.open.value = !1, document.getElementById(`${n.id}-hamburger`)?.focus());
 		}
@@ -8686,42 +8691,66 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 			}
 			return null;
 		}
-		let o = null;
-		function s() {
+		let o = null, s = null, c = null, l = !1;
+		function u() {
 			i && o && (i.value = o.scrollTop);
 		}
+		function d() {
+			s &&= (s.disconnect(), null), c &&= (c.disconnect(), null);
+		}
+		function f() {
+			!i || !o || l || i.value <= 0 || (o.scrollTop = i.value, l = o.scrollTop > 0, l && d());
+		}
+		function p(e) {
+			if (typeof MutationObserver > "u") return;
+			c = new MutationObserver(() => {
+				f();
+			});
+			let t = e;
+			for (; t;) c.observe(t, {
+				attributes: !0,
+				attributeFilter: [
+					"class",
+					"style",
+					"hidden",
+					"open"
+				]
+			}), t = t.parentElement;
+		}
 		Gr(() => {
-			!i || !r.value || (o = a(r.value), o && (i.value > 0 && F(() => {
-				o && (o.scrollTop = i.value);
-			}), o.addEventListener("scroll", s)));
+			!i || !r.value || (o = a(r.value), o && (F(() => {
+				f();
+			}), typeof ResizeObserver < "u" && (s = new ResizeObserver(() => {
+				f();
+			}), s.observe(r.value), s.observe(o)), p(r.value), o.addEventListener("scroll", u)));
 		}), Yr(() => {
-			o &&= (o.removeEventListener("scroll", s), null);
+			d(), o &&= (o.removeEventListener("scroll", u), null), l = !1;
 		});
-		let c = /* @__PURE__ */ Ht(/* @__PURE__ */ new Map());
-		Kn("g-tree-menu-expandable-items", c);
-		let l = /* @__PURE__ */ N({
+		let m = /* @__PURE__ */ Ht(/* @__PURE__ */ new Map());
+		Kn("g-tree-menu-expandable-items", m);
+		let h = /* @__PURE__ */ N({
 			expanded: !0,
 			version: 0
 		});
-		Kn("g-tree-menu-expand-all-signal", l);
-		let u = Q(() => {
-			if (c.size === 0) return !1;
-			for (let e of c.values()) if (!e) return !1;
+		Kn("g-tree-menu-expand-all-signal", h);
+		let g = Q(() => {
+			if (m.size === 0) return !1;
+			for (let e of m.values()) if (!e) return !1;
 			return !0;
 		});
-		function d() {
-			l.value = {
-				expanded: !u.value,
-				version: l.value.version + 1
+		function _() {
+			h.value = {
+				expanded: !g.value,
+				version: h.value.version + 1
 			};
 		}
-		function f(e) {
+		function v(e) {
 			return e.querySelector("a, button, [tabindex='0']") || e;
 		}
-		function p(e) {
+		function y(e) {
 			return Array.from(e.querySelectorAll("[data-tree-primary]"));
 		}
-		function m(e) {
+		function b(e) {
 			let t = e.currentTarget, n = document.activeElement;
 			if (!t.contains(n) || ![
 				"ArrowUp",
@@ -8731,16 +8760,16 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 				"Home",
 				"End"
 			].includes(e.key)) return;
-			let r = n.closest(".g-tree-menu__item"), i = r?.querySelector("[data-tree-primary]") ?? null, a = p(t), o = i ? a.indexOf(i) : -1;
+			let r = n.closest(".g-tree-menu__item"), i = r?.querySelector("[data-tree-primary]") ?? null, a = y(t), o = i ? a.indexOf(i) : -1;
 			switch (e.key) {
 				case "ArrowDown": {
 					let e = a[o + 1];
-					e && f(e).focus();
+					e && v(e).focus();
 					break;
 				}
 				case "ArrowUp": {
 					let e = a[o - 1];
-					e && f(e).focus();
+					e && v(e).focus();
 					break;
 				}
 				case "ArrowRight":
@@ -8750,27 +8779,27 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 						e && e.click();
 					} else {
 						let e = a[o + 1];
-						e && f(e).focus();
+						e && v(e).focus();
 					}
 					break;
 				case "ArrowLeft":
 					if (!r) break;
 					if (r.querySelector("[aria-expanded='true']") !== null) {
 						let e = r.querySelector(".g-tree-menu__toggle-btn");
-						e && e.click(), i && F(() => f(i).focus());
+						e && e.click(), i && F(() => v(i).focus());
 					} else {
 						let e = r.parentElement?.closest(".g-tree-menu__item");
 						if (e) {
 							let t = e.querySelector("[data-tree-primary]");
-							t && f(t).focus();
+							t && v(t).focus();
 						}
 					}
 					break;
 				case "Home":
-					a.length > 0 && f(a[0]).focus();
+					a.length > 0 && v(a[0]).focus();
 					break;
 				case "End":
-					a.length > 0 && f(a[a.length - 1]).focus();
+					a.length > 0 && v(a[a.length - 1]).focus();
 					break;
 			}
 			e.preventDefault();
@@ -8781,7 +8810,7 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 		}, {
 			"aria-labelledby": e.heading ? P(n) : void 0,
 			"aria-label": e.heading ? void 0 : "Tree Menu"
-		}, { onKeydown: m }), [
+		}, { onKeydown: b }), [
 			e.heading ? (G(), K("h2", {
 				key: 0,
 				id: P(n),
@@ -8789,9 +8818,9 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 			}, A(e.heading), 9, Cm)) : Z("", !0),
 			J("div", wm, [i[1] ||= J("div", { class: "g-tree-menu__divider-line" }, null, -1), e.showExpandAll ? (G(), K("div", Tm, [J("button", {
 				class: "g-tree-menu__expand-all-btn",
-				onClick: d
+				onClick: _
 			}, [(G(), K("svg", {
-				class: k(["g-tree-menu__expand-all-icon", { "g-tree-menu__expand-all-icon--collapse": u.value }]),
+				class: k(["g-tree-menu__expand-all-icon", { "g-tree-menu__expand-all-icon--collapse": g.value }]),
 				role: "none",
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -8799,7 +8828,7 @@ var up = { class: "g-table-outer-wrap" }, dp = {
 				"stroke-width": "2.5",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [...i[0] ||= [J("polyline", { points: "7 8 12 13 17 8" }, null, -1), J("polyline", { points: "7 13 12 18 17 13" }, null, -1)]], 2)), X(" " + A(u.value ? "Collapse all" : "Expand all"), 1)])])) : Z("", !0)]),
+			}, [...i[0] ||= [J("polyline", { points: "7 8 12 13 17 8" }, null, -1), J("polyline", { points: "7 13 12 18 17 13" }, null, -1)]], 2)), X(" " + A(g.value ? "Collapse all" : "Expand all"), 1)])])) : Z("", !0)]),
 			J("div", Em, [V(r.$slots, "default")])
 		], 16));
 	}