@vielzeug/refine 1.1.1 → 1.3.0

package/dist/sidebar.js

@@ -2,44 +2,44 @@ import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixin
 import { computeSafeRel as n } from "./utils/link.js";
 import { resizeObserver as r } from "./ore/dist/observers/resize-observe.js";
 import "./ore/dist/observers.js";
-import i from "./layout/sidebar/sidebar-group.css?inline.js";
-import a from "./layout/sidebar/sidebar-item.css?inline.js";
-import o from "./layout/sidebar/sidebar.css?inline.js";
-import { createContext as s, define as c, html as l, inject as u, prop as d } from "@vielzeug/ore";
-import { computed as f, signal as p, watch as m } from "@vielzeug/ripple";
+import i from "./layout/sidebar/sidebar-group.css.js";
+import a from "./layout/sidebar/sidebar-item.css.js";
+import o from "./layout/sidebar/sidebar.css.js";
+import { bind as s, createContext as c, define as l, getHost as u, html as d, inject as f, onMounted as p, prop as m, provide as h, useEmit as g, useSlots as _ } from "@vielzeug/ore";
+import { computed as v, signal as y, watch as b } from "@vielzeug/ripple";
 //#region src/layout/sidebar/sidebar.ts
-var h = (e) => {
+var x = (e) => {
 	let t = String(e ?? "").trim();
 	if (!t) return;
 	let n = /max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);
 	if (!n) return;
 	let r = Number.parseFloat(n[1]);
 	return Number.isFinite(r) ? r : void 0;
-}, g = (e) => {
+}, S = (e) => {
 	let t = e.parentElement;
 	for (; t?.tagName.toLowerCase() === "ore-grid-item";) t = t.parentElement;
 	return t;
-}, _ = (e) => {
-	let t = g(e)?.clientWidth ?? 0;
+}, C = (e) => {
+	let t = S(e)?.clientWidth ?? 0;
 	return t > 0 ? t : e.offsetWidth;
-}, v = s("SidebarContext"), y = "ore-sidebar";
-c(y, {
+}, w = c("SidebarContext"), T = "ore-sidebar";
+l(T, {
 	props: {
-		"bottom-nav-at": d.string(),
-		collapsed: d.bool(!1),
-		collapsible: d.bool(!1),
-		"container-breakpoints": d.bool(!1),
-		"default-collapsed": d.bool(!1),
-		label: d.string("Sidebar navigation"),
-		responsive: d.string(),
-		variant: d.string()
+		"bottom-nav-at": m.string(),
+		collapsed: m.bool(!1),
+		collapsible: m.bool(!1),
+		"container-breakpoints": m.bool(!1),
+		"default-collapsed": m.bool(!1),
+		label: m.string("Sidebar navigation"),
+		responsive: m.string(),
+		variant: m.string()
 	},
-	setup(e, { bind: t, el: n, emit: i, onMounted: a, provide: o, slots: s }) {
-		let c = () => s.has("header").value, u = () => s.has("footer").value, d = () => s.has("logo").value, y = p(n.hasAttribute("collapsed")), b = p(y.value ? n.hasAttribute("collapsed") : e["default-collapsed"].value), x = p(!1), S = p(!1), C = p([]), w = p(!1), T = p(!1), E = p(h(e.responsive.value)), D = p(!!String(e.responsive.value ?? "").trim()), O = p(!1), k = p(!1), A = p(h(e["bottom-nav-at"].value)), j = p(!1), M = () => b.value, N = f(() => x.value ? "bottom-nav" : b.value ? "collapsed" : "default"), P = () => {
-			let t = e["container-breakpoints"].value, n = t ? T.value : w.value || T.value, r = t ? k.value : O.value || k.value;
-			S.value || (x.value = r), !r && !S.value && L(!1, "responsive"), D.value && I(n, "responsive");
-		}, F = () => {
-			let e = s.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item").map((e, t) => {
+	setup(e) {
+		let t = u(), n = g(), i = _(), a = () => i.has("header").value, o = () => i.has("footer").value, c = () => i.has("logo").value, l = y(t.hasAttribute("collapsed")), f = y(l.value ? t.hasAttribute("collapsed") : e["default-collapsed"].value), m = y(!1), T = y(!1), E = y([]), D = y(!1), O = y(!1), k = y(x(e.responsive.value)), A = y(!!String(e.responsive.value ?? "").trim()), j = y(!1), M = y(!1), N = y(x(e["bottom-nav-at"].value)), P = y(!1), F = () => f.value, I = v(() => m.value ? "bottom-nav" : f.value ? "collapsed" : "default"), L = () => {
+			let t = e["container-breakpoints"].value, n = t ? O.value : D.value || O.value, r = t ? M.value : j.value || M.value;
+			T.value || (m.value = r), !r && !T.value && B(!1, "responsive"), A.value && z(n, "responsive");
+		}, R = () => {
+			let e = i.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item").map((e, t) => {
 				let n = e.querySelector(":scope > [slot=\"icon\"]") ?? e.querySelector("[slot=\"icon\"]"), r = n?.tagName.toLowerCase() === "ore-icon" ? n.getAttribute("name") : null, i = n?.querySelector("ore-icon")?.getAttribute("name") ?? null, a = (e.textContent ?? "").trim();
 				return {
 					active: e.hasAttribute("active"),
@@ -50,77 +50,77 @@ c(y, {
 					source: e
 				};
 			});
-			C.value = e;
+			E.value = e;
 		};
-		o(v, {
-			collapsed: f(() => !x.value && b.value),
-			mobileOpen: f(() => x.value && S.value),
-			mode: N,
+		h(w, {
+			collapsed: v(() => !m.value && f.value),
+			mobileOpen: v(() => m.value && T.value),
+			mode: I,
 			variant: e.variant
 		});
-		let I = (e, t) => {
-			M() !== e && (y.value || (b.value = e), i("collapsed-change", {
+		let z = (e, t) => {
+			F() !== e && (l.value || (f.value = e), n("collapsed-change", {
 				collapsed: e,
 				source: t
 			}));
-		}, L = (e, t) => {
-			let n = !!e;
-			if (n && !x.value && (x.value = !0), !x.value && !n) {
-				S.value &&= !1;
+		}, B = (e, t) => {
+			let r = !!e;
+			if (r && !m.value && (m.value = !0), !m.value && !r) {
+				T.value &&= !1;
 				return;
 			}
-			S.value !== n && (S.value = n, n || P(), i("mobile-open-change", {
-				open: n,
+			T.value !== r && (T.value = r, r || L(), n("mobile-open-change", {
+				open: r,
 				source: t
 			}));
-		}, R = () => {
-			I(!M(), "toggle");
-		}, z = n;
-		return z.setCollapsed = (e) => I(!!e, "api"), z.toggle = R, z.openMobile = () => L(!0, "api"), z.closeMobile = () => L(!1, "api"), z.toggleMobile = () => L(!S.value, "toggle"), t({ attr: {
-			"data-bottom-nav": () => x.value ? !0 : void 0,
-			"data-collapsed": () => M() && !x.value ? !0 : void 0,
-			"data-mobile-open": () => x.value && S.value ? !0 : void 0,
-			"data-preview-mode": () => j.value ? !0 : void 0
-		} }), a(() => {
-			n.setAttribute("data-no-transition", "");
-			let t = !1, i = () => {
-				t || (t = !0, n.removeAttribute("data-no-transition"));
+		}, V = () => {
+			z(!F(), "toggle");
+		}, H = t;
+		return H.setCollapsed = (e) => z(!!e, "api"), H.toggle = V, H.openMobile = () => B(!0, "api"), H.closeMobile = () => B(!1, "api"), H.toggleMobile = () => B(!T.value, "toggle"), s({ attr: {
+			"data-bottom-nav": () => m.value ? !0 : void 0,
+			"data-collapsed": () => F() && !m.value ? !0 : void 0,
+			"data-mobile-open": () => m.value && T.value ? !0 : void 0,
+			"data-preview-mode": () => P.value ? !0 : void 0
+		} }), p(() => {
+			t.setAttribute("data-no-transition", "");
+			let n = !1, a = () => {
+				n || (n = !0, t.removeAttribute("data-no-transition"));
 			};
-			requestAnimationFrame(() => requestAnimationFrame(i));
-			let a, o, c = /* @__PURE__ */ new Map(), l = new MutationObserver(() => {
-				!n.hasAttribute("collapsed") && !y.value || (y.value = !0, b.value = n.hasAttribute("collapsed"));
+			requestAnimationFrame(() => requestAnimationFrame(a));
+			let o, s, c = /* @__PURE__ */ new Map(), u = new MutationObserver(() => {
+				!t.hasAttribute("collapsed") && !l.value || (l.value = !0, f.value = t.hasAttribute("collapsed"));
 			});
-			l.observe(n, {
+			u.observe(t, {
 				attributeFilter: ["collapsed"],
 				attributes: !0
-			}), m(e.responsive, (t) => {
-				a?.(), a = void 0;
-				let r = String(t ?? "").trim();
-				D.value = !!r, E.value = h(r), w.value = !1;
-				let i = _(n);
-				if (T.value = i > 0 && E.value != null ? i <= E.value : !1, P(), e["container-breakpoints"].value && E.value != null || !r || typeof window.matchMedia != "function") return;
-				let o = window.matchMedia(r), s = (e) => {
-					w.value = e.matches, P();
-				};
-				w.value = o.matches, P(), o.addEventListener("change", s), a = () => {
-					o.removeEventListener("change", s);
-				};
-			}, { immediate: !0 }), m(e["bottom-nav-at"], (t) => {
+			}), b(e.responsive, (n) => {
 				o?.(), o = void 0;
-				let r = String(t ?? "").trim();
-				A.value = h(r), O.value = !1;
-				let i = _(n);
-				if (k.value = i > 0 && A.value != null ? i <= A.value : !1, P(), e["container-breakpoints"].value && A.value != null || !r || typeof window.matchMedia != "function") return;
+				let r = String(n ?? "").trim();
+				A.value = !!r, k.value = x(r), D.value = !1;
+				let i = C(t);
+				if (O.value = i > 0 && k.value != null ? i <= k.value : !1, L(), e["container-breakpoints"].value && k.value != null || !r || typeof window.matchMedia != "function") return;
 				let a = window.matchMedia(r), s = (e) => {
-					O.value = e.matches, P();
+					D.value = e.matches, L();
 				};
-				O.value = a.matches, P(), a.addEventListener("change", s), o = () => {
+				D.value = a.matches, L(), a.addEventListener("change", s), o = () => {
 					a.removeEventListener("change", s);
 				};
+			}, { immediate: !0 }), b(e["bottom-nav-at"], (n) => {
+				s?.(), s = void 0;
+				let r = String(n ?? "").trim();
+				N.value = x(r), j.value = !1;
+				let i = C(t);
+				if (M.value = i > 0 && N.value != null ? i <= N.value : !1, L(), e["container-breakpoints"].value && N.value != null || !r || typeof window.matchMedia != "function") return;
+				let a = window.matchMedia(r), o = (e) => {
+					j.value = e.matches, L();
+				};
+				j.value = a.matches, L(), a.addEventListener("change", o), s = () => {
+					a.removeEventListener("change", o);
+				};
 			}, { immediate: !0 });
-			let u = typeof ResizeObserver == "function" ? (() => {
-				let e = r(n), t = n.parentElement, a = g(n), o = t ? r(t) : void 0, s = a && a !== t ? r(a) : void 0, c;
-				return m(f(() => [
+			let d = typeof ResizeObserver == "function" ? (() => {
+				let e = r(t), n = t.parentElement, i = S(t), o = n ? r(n) : void 0, s = i && i !== n ? r(i) : void 0, c;
+				return b(v(() => [
 					e.value.width,
 					e.value.height,
 					o?.value.width,
@@ -129,17 +129,17 @@ c(y, {
 					s?.value.height
 				]), () => {
 					c !== void 0 && cancelAnimationFrame(c), c = requestAnimationFrame(() => {
-						let e = g(n), t = _(n), r = T.value, a = k.value, o = e?.clientWidth ?? 0;
-						j.value = o > 0 && o < window.innerWidth, T.value = t > 0 && E.value != null ? t <= E.value : !1, k.value = t > 0 && A.value != null ? t <= A.value : !1, (r !== T.value || a !== k.value) && P(), i();
+						let e = S(t), n = C(t), r = O.value, i = M.value, o = e?.clientWidth ?? 0;
+						P.value = o > 0 && o < window.innerWidth, O.value = n > 0 && k.value != null ? n <= k.value : !1, M.value = n > 0 && N.value != null ? n <= N.value : !1, (r !== O.value || i !== M.value) && L(), a();
 					});
 				});
-			})() : void 0, d = (e) => {
+			})() : void 0, p = (e) => {
 				let t = new Set(e);
 				for (let [e, n] of c) t.has(e) || (n.disconnect(), c.delete(e));
 				for (let t of e) {
 					if (c.has(t)) continue;
 					let e = new MutationObserver(() => {
-						x.value && F();
+						m.value && R();
 					});
 					e.observe(t, {
 						attributeFilter: [
@@ -151,25 +151,25 @@ c(y, {
 					}), c.set(t, e);
 				}
 			};
-			return m(s.elements(), (e) => {
+			return b(i.elements(), (e) => {
 				let t = e.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item");
-				d(t), F();
+				p(t), R();
 			}, { immediate: !0 }), () => {
-				l.disconnect(), a?.(), o?.(), u?.dispose();
+				u.disconnect(), o?.(), s?.(), d?.dispose();
 				for (let e of c.values()) e.disconnect();
 				c.clear();
 			};
-		}), l`
+		}), d`
       <button
         class="mobile-backdrop"
         part="mobile-backdrop"
         type="button"
         aria-label="Close sidebar"
-        ?hidden=${() => !x.value || !S.value}
-        @click=${() => L(!1, "toggle")}></button>
+        ?hidden=${() => !m.value || !T.value}
+        @click=${() => B(!1, "toggle")}></button>
       <nav aria-label="${e.label}" part="nav">
-        <div class="sidebar-header" part="header" ?hidden=${() => !c() && !e.collapsible.value}>
-          <span class="sidebar-logo" ?hidden=${() => !d()}>
+        <div class="sidebar-header" part="header" ?hidden=${() => !a() && !e.collapsible.value}>
+          <span class="sidebar-logo" ?hidden=${() => !c()}>
             <slot name="logo"></slot>
           </span>
           <span class="sidebar-header-content">
@@ -180,9 +180,9 @@ c(y, {
             part="toggle-btn"
             type="button"
             ?hidden=${() => !e.collapsible.value}
-            aria-label="${() => M() ? "Expand sidebar" : "Collapse sidebar"}"
-            aria-expanded="${() => !M()}"
-            @click="${R}">
+            aria-label="${() => F() ? "Expand sidebar" : "Collapse sidebar"}"
+            aria-expanded="${() => !F()}"
+            @click="${V}">
             <span class="toggle-icon" aria-hidden="true">
               <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
             </span>
@@ -191,15 +191,15 @@ c(y, {
         <div class="sidebar-content" part="content">
           <slot></slot>
         </div>
-        <div class="sidebar-footer" part="footer" ?hidden=${() => !u()}>
+        <div class="sidebar-footer" part="footer" ?hidden=${() => !o()}>
           <slot name="footer"></slot>
         </div>
       </nav>
 
-      <div class="bottom-bar" part="bottom-bar" ?hidden=${() => !x.value}>
-        ${() => C.value.map((e) => {
+      <div class="bottom-bar" part="bottom-bar" ?hidden=${() => !m.value}>
+        ${() => E.value.map((e) => {
 			let t = `bottom-tab${e.active ? " bottom-tab-active" : ""}`;
-			return e.href && !e.disabled ? l`
+			return e.href && !e.disabled ? d`
                 <a
                   class="${t}"
                   href="${e.href}"
@@ -210,7 +210,7 @@ c(y, {
                   </span>
                   <span class="bottom-tab-label">${e.label}</span>
                 </a>
-              ` : l`
+              ` : d`
               <button
                 class="${t}"
                 type="button"
@@ -234,29 +234,29 @@ c(y, {
 		o
 	]
 });
-var b = "ore-sidebar-group";
-c(b, {
+var E = "ore-sidebar-group";
+l(E, {
 	props: {
-		collapsible: d.bool(!1),
-		"default-open": d.bool(!0),
-		label: d.string(),
+		collapsible: m.bool(!1),
+		"default-open": m.bool(!0),
+		label: m.string(),
 		open: {
 			default: void 0,
 			parse: (e) => e == null ? void 0 : e === "" || e === "true",
 			reflect: !1
 		}
 	},
-	setup(e, { bind: t, slots: n }) {
-		let r = () => n.has("icon").value, i = u(v);
-		t({ attr: {
-			"sidebar-bottom-nav": () => i?.mode.value === "bottom-nav" && !i?.mobileOpen.value ? !0 : void 0,
-			"sidebar-collapsed": () => i?.collapsed.value ? !0 : void 0
+	setup(e) {
+		let t = _(), n = () => t.has("icon").value, r = f(w);
+		s({ attr: {
+			"sidebar-bottom-nav": () => r?.mode.value === "bottom-nav" && !r?.mobileOpen.value ? !0 : void 0,
+			"sidebar-collapsed": () => r?.collapsed.value ? !0 : void 0
 		} });
-		let a = () => e.open.value !== void 0, o = p(e["default-open"].value), s = f(() => e.collapsible.value ? a() ? e.open.value ?? !1 : o.value : !0);
-		return m(e.open, (e) => {
-			e !== void 0 && (o.value = e);
-		}), t({ attr: { open: () => s.value ? !0 : void 0 } }), l`
-      <details class="group" part="group" ?open=${s}>
+		let i = () => e.open.value !== void 0, a = y(e["default-open"].value), o = v(() => e.collapsible.value ? i() ? e.open.value ?? !1 : a.value : !0);
+		return b(e.open, (e) => {
+			e !== void 0 && (a.value = e);
+		}), s({ attr: { open: () => o.value ? !0 : void 0 } }), d`
+      <details class="group" part="group" ?open=${o}>
         <summary
           class="group-header"
           part="group-header"
@@ -264,7 +264,7 @@ c(b, {
           @click=${(t) => {
 			e.collapsible.value || t.preventDefault();
 		}}>
-          <span class="group-icon" part="group-icon" ?hidden=${() => !r()} aria-hidden="true">
+          <span class="group-icon" part="group-icon" ?hidden=${() => !n()} aria-hidden="true">
             <slot name="icon"></slot>
           </span>
           <span class="group-label" part="group-label">${e.label}</span>
@@ -280,32 +280,32 @@ c(b, {
 	},
 	styles: [t, i]
 });
-var x = "ore-sidebar-item";
-c(x, {
+var D = "ore-sidebar-item";
+l(D, {
 	props: {
-		active: d.bool(!1),
-		disabled: d.bool(!1),
-		href: d.string(),
-		rel: d.string(),
-		target: d.string()
+		active: m.bool(!1),
+		disabled: m.bool(!1),
+		href: m.string(),
+		rel: m.string(),
+		target: m.string()
 	},
-	setup(e, { bind: t, slots: r }) {
-		let i = () => r.has("icon").value, a = () => r.has("end").value, o = u(v);
-		t({ attr: {
-			"sidebar-bottom-nav": () => o?.mode.value === "bottom-nav" && !o?.mobileOpen.value ? !0 : void 0,
-			"sidebar-collapsed": () => o?.collapsed.value ? !0 : void 0
+	setup(e) {
+		let t = _(), r = () => t.has("icon").value, i = () => t.has("end").value, a = f(w);
+		s({ attr: {
+			"sidebar-bottom-nav": () => a?.mode.value === "bottom-nav" && !a?.mobileOpen.value ? !0 : void 0,
+			"sidebar-collapsed": () => a?.collapsed.value ? !0 : void 0
 		} });
-		let s = () => !!e.href.value && !e.disabled.value, c = f(() => n(e.rel.value, e.target.value)), d = () => l`
-      <span class="item-icon" part="item-icon" ?hidden=${() => !i()} aria-hidden="true">
+		let o = () => !!e.href.value && !e.disabled.value, c = v(() => n(e.rel.value, e.target.value)), l = () => d`
+      <span class="item-icon" part="item-icon" ?hidden=${() => !r()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
       <span class="item-label" part="item-label"><slot></slot></span>
-      <span class="item-end" part="item-end" ?hidden=${() => !a()}>
+      <span class="item-end" part="item-end" ?hidden=${() => !i()}>
         <slot name="end"></slot>
       </span>
     `;
-		return l`
-      ${() => s() ? l`
+		return d`
+      ${() => o() ? d`
             <a
               class="item"
               part="item"
@@ -313,25 +313,25 @@ c(x, {
               :rel="${c}"
               :target="${e.target}"
               aria-current="${() => e.active.value ? "page" : null}">
-              ${d()}
+              ${l()}
             </a>
-          ` : e.disabled.value ? l`
+          ` : e.disabled.value ? d`
             <div
               class="item"
               part="item"
               aria-disabled="true"
               tabindex="-1"
               aria-current="${() => e.active.value ? "page" : null}">
-              ${d()}
+              ${l()}
             </div>
-          ` : l`
+          ` : d`
           <button
             class="item"
             part="item"
             type="button"
             ?disabled="${e.disabled}"
             aria-current="${() => e.active.value ? "page" : null}">
-            ${d()}
+            ${l()}
           </button>
         `}
     `;
@@ -339,6 +339,6 @@ c(x, {
 	styles: [e, a]
 });
 //#endregion
-export { v as SIDEBAR_CTX, b as SIDEBAR_GROUP_TAG, x as SIDEBAR_ITEM_TAG, y as SIDEBAR_TAG };
+export { w as SIDEBAR_CTX, E as SIDEBAR_GROUP_TAG, D as SIDEBAR_ITEM_TAG, T as SIDEBAR_TAG };
 
 //# sourceMappingURL=sidebar.js.map