@illinois-grad/grad-vue 3.0.6 → 3.0.7

package/custom-elements.json

@@ -1065,6 +1065,15 @@
               "optional": true,
               "description": "Sidebar channel key for custom elements mode",
               "default": "\"default\""
+            },
+            {
+              "kind": "field",
+              "name": "mediaQuery",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar media query for custom elements mode"
             }
           ],
           "events": [
@@ -1852,6 +1861,15 @@
               "optional": true,
               "description": "Sidebar channel key for custom elements mode",
               "default": "\"default\""
+            },
+            {
+              "kind": "field",
+              "name": "mediaQuery",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar media query for custom elements mode"
             }
           ],
           "events": []

package/dist/components/GHamburgerMenu.vue.d.ts

@@ -26,7 +26,7 @@
  * > [!NOTE]
  * > This button hides itself automatically according to the useSidebar media query.
  * > In web components mode, use the `sidebar-key` prop to pair this menu with a
- * > matching GSidebar instance.
+ * > matching GSidebar instance and `media-query` to set the collapsible breakpoint.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -41,6 +41,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -54,6 +59,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {

package/dist/components/GSidebar.vue.d.ts

@@ -13,7 +13,8 @@
  * for details.
  *
  * In web components mode, use the `sidebar-key` prop to pair this sidebar
- * with a matching GHamburgerMenu instance.
+ * with a matching GHamburgerMenu instance and `media-query` to set the
+ * collapsible breakpoint.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -53,6 +54,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Custom background color
@@ -89,6 +95,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }> & Readonly<{}>, {
     width: string;
     theme: "light" | "dark";

package/dist/compose/useWebComponentSidebar.d.ts

@@ -2,8 +2,9 @@ import { Ref } from "vue";
 type SidebarChannel = {
     id: string;
     open: Ref<boolean>;
+    breakpoint: Ref<string>;
     isCollapsible: Ref<boolean>;
     toggle: () => void;
 };
-export declare function useWebComponentSidebar(key?: string, breakpoint?: Ref<string> | string): SidebarChannel;
+export declare function useWebComponentSidebar(key?: string, breakpoint?: Ref<string | undefined> | string): SidebarChannel;
 export {};

package/dist/{grad-vue-CAmKhHhp.js → grad-vue-DmUhI4Ja.js}

@@ -119,42 +119,66 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 			}
 			return null;
 		}
-		let d = null;
-		function f() {
+		let d = null, f = null, p = null, m = !1;
+		function v() {
 			l && d && (l.value = d.scrollTop);
 		}
+		function y() {
+			f &&= (f.disconnect(), null), p &&= (p.disconnect(), null);
+		}
+		function b() {
+			!l || !d || m || l.value <= 0 || (d.scrollTop = l.value, m = d.scrollTop > 0, m && y());
+		}
+		function x(e) {
+			if (typeof MutationObserver > "u") return;
+			p = new MutationObserver(() => {
+				b();
+			});
+			let t = e;
+			for (; t;) p.observe(t, {
+				attributes: !0,
+				attributeFilter: [
+					"class",
+					"style",
+					"hidden",
+					"open"
+				]
+			}), t = t.parentElement;
+		}
 		S(() => {
-			!l || !i.value || (d = u(i.value), d && (l.value > 0 && g(() => {
-				d && (d.scrollTop = l.value);
-			}), d.addEventListener("scroll", f)));
+			!l || !i.value || (d = u(i.value), d && (g(() => {
+				b();
+			}), typeof ResizeObserver < "u" && (f = new ResizeObserver(() => {
+				b();
+			}), f.observe(i.value), f.observe(d)), x(i.value), d.addEventListener("scroll", v)));
 		}), C(() => {
-			d &&= (d.removeEventListener("scroll", f), null);
+			y(), d &&= (d.removeEventListener("scroll", v), null), m = !1;
 		});
-		let p = D(/* @__PURE__ */ new Map());
-		E("g-tree-menu-expandable-items", p);
-		let m = O({
+		let w = D(/* @__PURE__ */ new Map());
+		E("g-tree-menu-expandable-items", w);
+		let k = O({
 			expanded: !0,
 			version: 0
 		});
-		E("g-tree-menu-expand-all-signal", m);
-		let v = r(() => {
-			if (p.size === 0) return !1;
-			for (let e of p.values()) if (!e) return !1;
+		E("g-tree-menu-expand-all-signal", k);
+		let j = r(() => {
+			if (w.size === 0) return !1;
+			for (let e of w.values()) if (!e) return !1;
 			return !0;
 		});
-		function y() {
-			m.value = {
-				expanded: !v.value,
-				version: m.value.version + 1
+		function M() {
+			k.value = {
+				expanded: !j.value,
+				version: k.value.version + 1
 			};
 		}
-		function b(e) {
+		function N(e) {
 			return e.querySelector("a, button, [tabindex='0']") || e;
 		}
-		function x(e) {
+		function F(e) {
 			return Array.from(e.querySelectorAll("[data-tree-primary]"));
 		}
-		function w(e) {
+		function I(e) {
 			let t = e.currentTarget, n = document.activeElement;
 			if (!t.contains(n) || ![
 				"ArrowUp",
@@ -164,16 +188,16 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 				"Home",
 				"End"
 			].includes(e.key)) return;
-			let r = n.closest(".g-tree-menu__item"), i = r?.querySelector("[data-tree-primary]") ?? null, a = x(t), o = i ? a.indexOf(i) : -1;
+			let r = n.closest(".g-tree-menu__item"), i = r?.querySelector("[data-tree-primary]") ?? null, a = F(t), o = i ? a.indexOf(i) : -1;
 			switch (e.key) {
 				case "ArrowDown": {
 					let e = a[o + 1];
-					e && b(e).focus();
+					e && N(e).focus();
 					break;
 				}
 				case "ArrowUp": {
 					let e = a[o - 1];
-					e && b(e).focus();
+					e && N(e).focus();
 					break;
 				}
 				case "ArrowRight":
@@ -183,27 +207,27 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 						e && e.click();
 					} else {
 						let e = a[o + 1];
-						e && b(e).focus();
+						e && N(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 && g(() => b(i).focus());
+						e && e.click(), i && g(() => N(i).focus());
 					} else {
 						let e = r.parentElement?.closest(".g-tree-menu__item");
 						if (e) {
 							let t = e.querySelector("[data-tree-primary]");
-							t && b(t).focus();
+							t && N(t).focus();
 						}
 					}
 					break;
 				case "Home":
-					a.length > 0 && b(a[0]).focus();
+					a.length > 0 && N(a[0]).focus();
 					break;
 				case "End":
-					a.length > 0 && b(a[a.length - 1]).focus();
+					a.length > 0 && N(a[a.length - 1]).focus();
 					break;
 			}
 			e.preventDefault();
@@ -214,7 +238,7 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 		}, {
 			"aria-labelledby": e.heading ? R(n) : void 0,
 			"aria-label": e.heading ? void 0 : "Tree Menu"
-		}, { onKeydown: w }), [
+		}, { onKeydown: I }), [
 			e.heading ? (T(), o("h2", {
 				key: 0,
 				id: R(n),
@@ -222,9 +246,9 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 			}, P(e.heading), 9, ge)) : a("", !0),
 			s("div", _e, [i[1] ||= s("div", { class: "g-tree-menu__divider-line" }, null, -1), e.showExpandAll ? (T(), o("div", ve, [s("button", {
 				class: "g-tree-menu__expand-all-btn",
-				onClick: y
+				onClick: M
 			}, [(T(), o("svg", {
-				class: _(["g-tree-menu__expand-all-icon", { "g-tree-menu__expand-all-icon--collapse": v.value }]),
+				class: _(["g-tree-menu__expand-all-icon", { "g-tree-menu__expand-all-icon--collapse": j.value }]),
 				role: "none",
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -232,7 +256,7 @@ var me = { class: "g-btn--icon" }, he = { class: "g-btn--label" }, Q = /* @__PUR
 				"stroke-width": "2.5",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [...i[0] ||= [s("polyline", { points: "7 8 12 13 17 8" }, null, -1), s("polyline", { points: "7 13 12 18 17 13" }, null, -1)]], 2)), c(" " + P(v.value ? "Collapse all" : "Expand all"), 1)])])) : a("", !0)]),
+			}, [...i[0] ||= [s("polyline", { points: "7 8 12 13 17 8" }, null, -1), s("polyline", { points: "7 13 12 18 17 13" }, null, -1)]], 2)), c(" " + P(j.value ? "Collapse all" : "Expand all"), 1)])])) : a("", !0)]),
 			s("div", ye, [A(r.$slots, "default")])
 		], 16));
 	}
@@ -1769,40 +1793,43 @@ function cn() {
 	let e = globalThis;
 	return e.__GRAD_VUE_WC_SIDEBAR_CHANNELS__ ||= /* @__PURE__ */ new Map(), e.__GRAD_VUE_WC_SIDEBAR_CHANNELS__;
 }
-function ln(e = "default", t = "(max-width: 800px)") {
-	let n = cn(), r = e || "default";
+function ln(e = "default", t) {
+	let n = cn(), r = e || "default", i = typeof t == "string" ? t : t?.value, a = i && i.trim() ? i : "(max-width: 800px)";
 	if (!n.has(r)) {
-		let e = sn(r);
+		let e = sn(r), t = O(a);
 		n.set(r, {
 			id: `g-wc-sidebar-${e}`,
 			open: O(!1),
+			breakpoint: t,
 			isCollapsible: se(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 && K(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 S(() => {
-		K(i.isCollapsible, (e) => {
-			e ? (document.addEventListener("mousedown", a), document.addEventListener("focusin", o)) : (document.removeEventListener("mousedown", a), document.removeEventListener("focusin", o));
+		K(o.isCollapsible, (e) => {
+			e ? (document.addEventListener("mousedown", s), document.addEventListener("focusin", c)) : (document.removeEventListener("mousedown", s), document.removeEventListener("focusin", c));
 		}, { immediate: !0 });
 	}), x(() => {
-		document.removeEventListener("mousedown", a), document.removeEventListener("focusin", o);
-	}), i;
+		document.removeEventListener("mousedown", s), document.removeEventListener("focusin", c);
+	}), o;
 }
 //#endregion
 //#region src/components/GSidebar.vue?vue&type=script&setup=true&lang.ts
@@ -1815,10 +1842,11 @@ var un = ["id"], dn = /* @__PURE__ */ u({
 		topOffset: { default: "" },
 		topOffsetVar: { default: "" },
 		width: { default: "300px" },
-		sidebarKey: { default: "default" }
+		sidebarKey: { default: "default" },
+		mediaQuery: {}
 	},
 	setup(e) {
-		let t = e, n = p("sidebar", () => void 0, !0) ?? (fe() ? ln(t.sidebarKey) : void 0), i = r(() => t.backgroundImage ? t.backgroundImage : t.theme === "light" ? "none" : "url('https://gradcdn.blob.core.windows.net/public/sidebar-bg2.jpg')"), a = r(() => t.backgroundColor ? t.backgroundColor : t.theme === "light" ? "#f9f9f9" : "#030913"), s = r(() => t.topOffsetVar ? `var(${t.topOffsetVar})` : t.topOffset ? t.topOffset : "var(--g-toolbar-height)"), c = B();
+		let t = e, n = p("sidebar", () => void 0, !0) ?? (fe() ? ln(t.sidebarKey, I(t, "mediaQuery")) : void 0), i = r(() => t.backgroundImage ? t.backgroundImage : t.theme === "light" ? "none" : "url('https://gradcdn.blob.core.windows.net/public/sidebar-bg2.jpg')"), a = r(() => t.backgroundColor ? t.backgroundColor : t.theme === "light" ? "#f9f9f9" : "#030913"), s = r(() => t.topOffsetVar ? `var(${t.topOffsetVar})` : t.topOffset ? t.topOffset : "var(--g-toolbar-height)"), c = B();
 		function l(e) {
 			e.key === "Escape" && n?.isCollapsible?.value && n?.open?.value && (n.open.value = !1, document.getElementById(`${n.id}-hamburger`)?.focus());
 		}
@@ -3223,11 +3251,12 @@ var yr = { class: "g-table-outer-wrap" }, br = {
 	__name: "GHamburgerMenu",
 	props: {
 		label: { default: "Main Navigation" },
-		sidebarKey: { default: "default" }
+		sidebarKey: { default: "default" },
+		mediaQuery: {}
 	},
 	emits: ["toggle"],
 	setup(e, { emit: t }) {
-		let n = e, r = p("sidebar") ?? (fe() ? ln(n.sidebarKey) : void 0), i = t;
+		let n = e, r = p("sidebar") ?? (fe() ? ln(n.sidebarKey, I(n, "mediaQuery")) : void 0), i = t;
 		function a() {
 			i("toggle"), r?.toggle();
 		}
@@ -4231,4 +4260,4 @@ function ga() {
 //#endregion
 export { ke as $, $n as A, Ht as B, hr as C, _r as D, mr as E, hn as F, it as G, wt as H, dn as I, Qe as J, et as K, ln as L, Cn as M, vn as N, vr as O, gn as P, $ as Q, on as R, qr as S, gr as T, yt as U, At as V, ft as W, qe as X, Ke as Y, Re as Z, hi as _, sa as a, ci as b, qi as c, Mi as d, De as et, ji as f, _i as g, xi as h, pa as i, Q as it, Rn as j, fr as k, Bi as l, Ti as m, ha as n, xe as nt, Xi as o, Ai as p, $e as q, ma as r, be as rt, Yi as s, ga as t, Ee as tt, zi as u, di as v, pr as w, ni as x, ui as y, Qt as z };
 
-//# sourceMappingURL=grad-vue-CAmKhHhp.js.map
+//# sourceMappingURL=grad-vue-DmUhI4Ja.js.map