@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/layout/index.js

@@ -1,52 +1,90 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/radix-icons-panel-left-minimized.js";
+import glass_default from "../../classes/glass.js";
+import radix_icons_panel_left_minimized_default from "../../icons/generated/radix-icons-panel-left-minimized.js";
 import "../button/index.js";
-import r from "../../classes/glow.js";
-import { attachDragGesture as i } from "../../shared/gesture/drag-gesture.js";
-import { clamp as a } from "../../shared/gesture/physics.js";
+import { resolveBuiltinLabelSet } from "../../shared/locale/builtin-labels.js";
+import glow_default from "../../classes/glow.js";
+import { attachDragGesture } from "../../shared/gesture/drag-gesture.js";
+import { clamp } from "../../shared/gesture/physics.js";
 import "../drawer/index.js";
-import { VisibleAreaController as o, defineVisibleAreaTracker as s } from "../../shared/visible-area/index.js";
-import c from "./style.js";
-import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
-import { customElement as p, property as m, state as h } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
-import { styleMap as _ } from "lit/directives/style-map.js";
-//#region src/components/layout/index.ts
-var v = "(width <= 640px)", y = class extends l {
-	constructor(...e) {
-		super(...e), this.sidebarCollapsed = !1, this.sidebarWidth = "240px", this.collapsedWidth = "68px", this.sidebarResizable = !1, this.sidebarMinWidth = "", this.sidebarMaxWidth = "", this.sidebarOpen = !1, this.headerGlow = !1, this._mobile = !1, this._mobileQuery = null, this._onMobileQueryChange = (e) => {
-			this._syncMobile(e.matches);
-		}, this._visibleBanner = s({ onVisibleAreaChange: (e) => {
-			this.style.setProperty("--wui-layout-visible-banner-height", `${e.height}px`);
-		} }).make(), this._visibleBannerController = new o(this, this._visibleBanner), this._resizeGesture = null, this._resizeStartWidth = 0, this._resizeWidth = null;
+import { VisibleAreaController, defineVisibleAreaTracker } from "../../shared/visible-area/index.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/components/layout/index.ts
+/**
+* 移动端断点的媒体查询。
+*
+* 必须与 `style.css` 里那份 `@media (width <= 640px)` 是同一条条件：CSS 用它在窄视口隐藏桌面
+* aside，TS 用同一条件决定渲染哪一套树，两者错开就会出现「树还在桌面、aside 已经被藏起来」
+* 的空档。两份字面量的相等由 `components/drawer/__tests__/breakpoint-parity.spec.ts` 守着。
+*/
+const MOBILE_VIEWPORT_QUERY = "(width <= 640px)";
+let WebUiLayout = class WebUiLayout extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.noSidebar = false;
+		this.sidebarCollapsed = false;
+		this.sidebarWidth = "240px";
+		this.collapsedWidth = "68px";
+		this.sidebarResizable = false;
+		this.sidebarMinWidth = "";
+		this.sidebarMaxWidth = "";
+		this.sidebarOpen = false;
+		this.headerGlow = false;
+		this._mobile = false;
+		this._mobileQuery = null;
+		this._onMobileQueryChange = (event) => {
+			this._syncMobile(event.matches);
+		};
+		this._visibleBanner = defineVisibleAreaTracker({ onVisibleAreaChange: (area) => {
+			this.style.setProperty("--wui-layout-visible-banner-height", `${area.height}px`);
+		} }).make();
+		this._visibleBannerController = new VisibleAreaController(this, this._visibleBanner);
+		this._resizeGesture = null;
+		this._resizeStartWidth = 0;
+		this._resizeWidth = null;
 	}
 	static {
 		this.styles = [
-			f(t),
-			f(r),
-			f(c)
+			unsafeCSS(glass_default),
+			unsafeCSS(glow_default),
+			unsafeCSS(style_default)
 		];
 	}
+	/**
+	* 当前视口是否落在移动端分支（即 `MOBILE_VIEWPORT_QUERY` 命中）。
+	*
+	* 与组件渲染哪一套树、以及 `mobile-change` 的派发是同一个值：翻转瞬间三者一起变，
+	* Consumer 不必自己写断点判断，也不会与 layout 内部的树切换错开半拍。派生状态只读。
+	*/
 	get mobile() {
 		return this._mobile;
 	}
-	_syncMobile(e) {
-		e !== this._mobile && (this._mobile = e, this._isResizing() && this._resetActiveResize(), this.toggleAttribute("mobile", e), this.dispatchEvent(new CustomEvent("mobile-change", {
-			detail: { mobile: e },
-			bubbles: !0,
-			composed: !0
-		})));
+	_syncMobile(next) {
+		if (next === this._mobile) return;
+		this._mobile = next;
+		if (this._isResizing()) this._resetActiveResize();
+		this.toggleAttribute("mobile", next);
+		this.dispatchEvent(new CustomEvent("mobile-change", {
+			detail: { mobile: next },
+			bubbles: true,
+			composed: true
+		}));
 	}
-	attributeChangedCallback(e, t, n) {
-		if (super.attributeChangedCallback(e, t, n), e !== "mobile") return;
-		let r = this._mobileQuery?.matches ?? !1;
-		if (this._mobile !== r && (this._mobile = r), r) {
-			this.getAttribute("mobile") !== "" && this.setAttribute("mobile", "");
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		if (name !== "mobile") return;
+		const derived = this._mobileQuery?.matches ?? false;
+		if (this._mobile !== derived) this._mobile = derived;
+		if (derived) {
+			if (this.getAttribute("mobile") !== "") this.setAttribute("mobile", "");
 			return;
 		}
-		this.hasAttribute("mobile") && this.removeAttribute("mobile");
+		if (this.hasAttribute("mobile")) this.removeAttribute("mobile");
 	}
 	_toggleSidebar() {
 		if (this._mobile) {
@@ -55,110 +93,138 @@ var v = "(width <= 640px)", y = class extends l {
 		}
 		this._emitSidebarCollapsedChange(!this.sidebarCollapsed);
 	}
-	_emitSidebarCollapsedChange(e) {
+	_emitSidebarCollapsedChange(collapsed) {
 		this.dispatchEvent(new CustomEvent("sidebar-collapsed-change", {
-			detail: { collapsed: e },
-			bubbles: !0,
-			composed: !0
+			detail: { collapsed },
+			bubbles: true,
+			composed: true
 		}));
 	}
-	_emitSidebarOpenChange(e) {
+	_emitSidebarOpenChange(open) {
 		this.dispatchEvent(new CustomEvent("sidebar-open-change", {
-			detail: { open: e },
-			bubbles: !0,
-			composed: !0
+			detail: { open },
+			bubbles: true,
+			composed: true
 		}));
 	}
 	_onDrawerChange(e) {
-		e.stopPropagation(), this._emitSidebarOpenChange(e.detail.open);
+		e.stopPropagation();
+		this._emitSidebarOpenChange(e.detail.open);
 	}
-	_parsePx(e, t) {
-		let n = Number.parseFloat(e);
-		return Number.isFinite(n) ? n : t;
+	_parsePx(value, fallback) {
+		const parsed = Number.parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : fallback;
 	}
 	_resolveSidebarMinWidth() {
 		return this.sidebarMinWidth ? this._parsePx(this.sidebarMinWidth, this._parsePx(this.collapsedWidth, 68)) : this._parsePx(this.collapsedWidth, 68);
 	}
 	_resolveSidebarMaxWidth() {
-		let e = Math.floor(window.innerWidth / 2), t = this.sidebarMaxWidth ? this._parsePx(this.sidebarMaxWidth, e) : e;
-		return Math.max(Math.min(t, e), this._resolveSidebarMinWidth());
+		const halfViewport = Math.floor(window.innerWidth / 2);
+		const configured = this.sidebarMaxWidth ? this._parsePx(this.sidebarMaxWidth, halfViewport) : halfViewport;
+		return Math.max(Math.min(configured, halfViewport), this._resolveSidebarMinWidth());
 	}
 	_isResizing() {
-		return this._resizeGesture?.isDragging() ?? !1;
+		return this._resizeGesture?.isDragging() ?? false;
 	}
 	_handleResizePointerDown(e) {
-		if (!this.sidebarResizable || this.sidebarCollapsed || this._mobile || this._isResizing() || e.isPrimary === !1) return;
-		let t = this.renderRoot.querySelector("aside");
-		t && (this._resizeStartWidth = this._parsePx(window.getComputedStyle(t).width, this._parsePx(this.sidebarWidth, 240)), this._resizeWidth = null, t.classList.add("is-resizing"), this._resizeGesture = i(e, {
+		if (!this.sidebarResizable || this.sidebarCollapsed || this._mobile || this._isResizing()) return;
+		if (e.isPrimary === false) return;
+		const aside = this.renderRoot.querySelector("aside");
+		if (!aside) return;
+		this._resizeStartWidth = this._parsePx(window.getComputedStyle(aside).width, this._parsePx(this.sidebarWidth, 240));
+		this._resizeWidth = null;
+		aside.classList.add("is-resizing");
+		this._resizeGesture = attachDragGesture(e, {
 			axis: "x",
-			onMove: (e) => {
-				let t = this._resizeStartWidth + e.deltaX, n = a(t, this._resolveSidebarMinWidth(), this._resolveSidebarMaxWidth());
-				this._resizeWidth = `${Math.round(n)}px`;
+			onMove: (info) => {
+				const next = this._resizeStartWidth + info.deltaX;
+				const clamped = clamp(next, this._resolveSidebarMinWidth(), this._resolveSidebarMaxWidth());
+				this._resizeWidth = `${Math.round(clamped)}px`;
 			},
 			onEnd: () => {
 				if (this._resizeWidth === null) {
 					this._resetActiveResize();
 					return;
 				}
-				let e = this._resizeWidth;
-				this._resetActiveResize(), this.dispatchEvent(new CustomEvent("sidebar-width-change", {
-					detail: { width: e },
-					bubbles: !0,
-					composed: !0
+				const width = this._resizeWidth;
+				this._resetActiveResize();
+				this.dispatchEvent(new CustomEvent("sidebar-width-change", {
+					detail: { width },
+					bubbles: true,
+					composed: true
 				}));
 			},
 			onCancel: () => {
 				this._resetActiveResize();
 			}
-		}));
+		});
 	}
 	_resetActiveResize() {
-		this._resizeGesture?.destroy(), this._resizeGesture = null, this.renderRoot.querySelector("aside")?.classList.remove("is-resizing"), this._resizeWidth = null;
+		this._resizeGesture?.destroy();
+		this._resizeGesture = null;
+		this.renderRoot.querySelector("aside")?.classList.remove("is-resizing");
+		this._resizeWidth = null;
 	}
 	_handleResizeKeydown(e) {
 		if (!this.sidebarResizable || this.sidebarCollapsed || this._mobile || this._isResizing()) return;
-		let t = this._resolveSidebarMinWidth(), n = this._resolveSidebarMaxWidth(), r = this.renderRoot.querySelector("aside"), i = this._resizeWidth ? this._parsePx(this._resizeWidth, t) : this._parsePx(r ? window.getComputedStyle(r).width : this.sidebarWidth, t), a = e.shiftKey ? 64 : 16, o = null;
+		const min = this._resolveSidebarMinWidth();
+		const max = this._resolveSidebarMaxWidth();
+		const aside = this.renderRoot.querySelector("aside");
+		const current = this._resizeWidth ? this._parsePx(this._resizeWidth, min) : this._parsePx(aside ? window.getComputedStyle(aside).width : this.sidebarWidth, min);
+		const step = e.shiftKey ? 64 : 16;
+		let next = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				o = Math.max(t, i - a);
+				next = Math.max(min, current - step);
 				break;
 			case "ArrowRight":
-				o = Math.min(n, i + a);
+				next = Math.min(max, current + step);
 				break;
 			case "Home":
-				o = t;
+				next = min;
 				break;
 			case "End":
-				o = n;
+				next = max;
 				break;
 			case "Enter":
 				if (this._resizeWidth !== null) {
-					let e = this._resizeWidth;
-					this._resizeWidth = null, this.dispatchEvent(new CustomEvent("sidebar-width-change", {
-						detail: { width: e },
-						bubbles: !0,
-						composed: !0
+					const width = this._resizeWidth;
+					this._resizeWidth = null;
+					this.dispatchEvent(new CustomEvent("sidebar-width-change", {
+						detail: { width },
+						bubbles: true,
+						composed: true
 					}));
 				}
 				e.preventDefault();
 				return;
 			case "Escape":
-				this._resizeWidth = null, e.preventDefault();
+				this._resizeWidth = null;
+				e.preventDefault();
 				return;
 			default: return;
 		}
-		e.preventDefault(), this._resizeWidth = `${Math.round(o)}px`;
+		e.preventDefault();
+		this._resizeWidth = `${Math.round(next)}px`;
 	}
 	_syncMobileViewportSubscription() {
-		this._mobileQuery?.removeEventListener("change", this._onMobileQueryChange), this._mobileQuery = typeof window.matchMedia == "function" ? window.matchMedia(v) : null, this._mobileQuery?.addEventListener("change", this._onMobileQueryChange), this._syncMobile(this._mobileQuery?.matches ?? !1);
+		this._mobileQuery?.removeEventListener("change", this._onMobileQueryChange);
+		this._mobileQuery = typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_VIEWPORT_QUERY) : null;
+		this._mobileQuery?.addEventListener("change", this._onMobileQueryChange);
+		this._syncMobile(this._mobileQuery?.matches ?? false);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._syncMobileViewportSubscription(), this.updateComplete.then(() => {
-			this.isConnected && this._syncBannerPresence();
+		super.connectedCallback();
+		this._syncMobileViewportSubscription();
+		this.updateComplete.then(() => {
+			if (this.isConnected) this._syncBannerPresence();
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._resetActiveResize(), this._mobileQuery?.removeEventListener("change", this._onMobileQueryChange), this._mobileQuery = null;
+		super.disconnectedCallback();
+		this._resetActiveResize();
+		this._mobileQuery?.removeEventListener("change", this._onMobileQueryChange);
+		this._mobileQuery = null;
 	}
 	firstUpdated() {
 		this._syncBannerPresence();
@@ -167,137 +233,165 @@ var v = "(width <= 640px)", y = class extends l {
 		this._syncBannerPresence();
 	}
 	_syncBannerPresence() {
-		let e = this.renderRoot.querySelector("slot[name=\"banner\"]")?.assignedNodes().some((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && !!e.textContent?.trim()) ?? !1, t = this.shadowRoot?.querySelector(".layout-banner") ?? null;
-		this._visibleBanner.setTarget(e ? t : null);
+		const hasBanner = this.renderRoot.querySelector("slot[name=\"banner\"]")?.assignedNodes().some((node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()) ?? false;
+		const banner = this.shadowRoot?.querySelector(".layout-banner") ?? null;
+		this._visibleBanner.setTarget(hasBanner ? banner : null);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("noSidebar") && this.noSidebar) this._resetActiveResize();
 	}
 	render() {
-		let e = !this.sidebarCollapsed, t = this._mobile ? {} : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }, r = e ? "Collapse sidebar" : "Expand sidebar", i = u`
+		const showSidebar = !this.noSidebar;
+		const isSidebarOpen = !this.sidebarCollapsed;
+		const sidebarStyle = this._mobile ? {} : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) };
+		const toggleLabel = resolveBuiltinLabelSet(this.ariaLabels, isSidebarOpen ? "collapseSidebar" : "expandSidebar");
+		const desktopToggle = html`
       <web-ui-button
         class="sidebar-toggle"
         icon
         variant="secondary"
         @click="${this._toggleSidebar}"
-        aria-label="${r}"
+        aria-label=${toggleLabel}
       >
-        <web-ui-icon .icon=${n}></web-ui-icon>
+        <web-ui-icon .icon=${radix_icons_panel_left_minimized_default}></web-ui-icon>
       </web-ui-button>
-    `, a = u`
+    `;
+		const sidebarViewport = html`
       <div class="sidebar-viewport">
         <slot name="sidebar"></slot>
       </div>
-    `, o = u`
+    `;
+		const header = html`
+      <header class="${classMap({ "wui-glow": this.headerGlow })}">
+        ${this._mobile && showSidebar ? html`
+                <web-ui-button
+                  class="mobile-toggle"
+                  icon
+                  variant="glass"
+                  @click="${this._toggleSidebar}"
+                  aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "openNavigationMenu")}
+                >
+                  <web-ui-icon .icon=${radix_icons_panel_left_minimized_default}></web-ui-icon>
+                </web-ui-button>
+              ` : nothing}
+        <slot name="header"></slot>
+      </header>
+    `;
+		const contentLayout = html`
+      <div class="layout-content">
+        ${header}
+        <main><slot></slot></main>
+        <footer><slot name="tabbar"></slot></footer>
+      </div>
+    `;
+		const desktopLayout = html`
       <div class="layout-body">
         <div class="sidebar-wrapper">
           <aside
-            class="${g({ collapsed: !e })}"
-            style="${_(t)}"
+            class="${classMap({ collapsed: !isSidebarOpen })}"
+            style="${styleMap(sidebarStyle)}"
           >
             <div class="aside-panel wui-glass">
-              ${a}
-              <div class="sidebar-toggle-area">${i}</div>
+              ${sidebarViewport}
+              <div class="sidebar-toggle-area">${desktopToggle}</div>
             </div>
-            ${this.sidebarResizable && !this.sidebarCollapsed ? u`
+            ${this.sidebarResizable && !this.sidebarCollapsed ? html`
                     <div
                       class="sidebar-resize-handle"
                       role="separator"
                       tabindex="0"
                       aria-orientation="vertical"
-                      aria-label="Resize sidebar"
+                      aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "resizeSidebar")}
                       @pointerdown=${this._handleResizePointerDown}
                       @keydown=${this._handleResizeKeydown}
                     ></div>
-                  ` : d}
+                  ` : nothing}
           </aside>
         </div>
-        <div class="layout-content">
-          <header class="${g({ "wui-glow": this.headerGlow })}">
-            <slot name="header"></slot>
-          </header>
-          <main><slot></slot></main>
-          <footer><slot name="tabbar"></slot></footer>
-        </div>
-      </div>
-    `, s = u`
-      <div class="layout-content">
-        <header class="${g({ "wui-glow": this.headerGlow })}">
-          <web-ui-button
-            class="mobile-toggle"
-            icon
-            variant="glass"
-            @click="${this._toggleSidebar}"
-            aria-label="Open navigation menu"
-          >
-            <web-ui-icon .icon=${n}></web-ui-icon>
-          </web-ui-button>
-          <slot name="header"></slot>
-        </header>
-        <main><slot></slot></main>
-        <footer><slot name="tabbar"></slot></footer>
+        ${contentLayout}
       </div>
-
+    `;
+		const mobileDrawer = html`
       <web-ui-drawer
         placement="left"
         ?open="${this.sidebarOpen}"
         controlled
         draggable
-        dialog-label="Main navigation"
+        aria-dialog-label=${resolveBuiltinLabelSet(this.ariaLabels, "mainNavigation")}
         @open-change="${this._onDrawerChange}"
-        style="${_({
+        style="${styleMap({
 			"--wui-drawer-width": this.sidebarWidth,
 			"--wui-drawer-radius": "var(--wui-layout-sidebar-radius, 24px)"
 		})}"
       >
-        ${a}
+        ${sidebarViewport}
       </web-ui-drawer>
     `;
-		return u`
+		const layoutBody = showSidebar ? this._mobile ? html`${contentLayout}${mobileDrawer}` : desktopLayout : contentLayout;
+		return html`
       <div class="layout-page">
         <div class="layout-banner">
           <slot name="banner" @slotchange="${this._onBannerSlotChange}"></slot>
         </div>
-        ${this._mobile ? s : o}
+        ${layoutBody}
       </div>
     `;
 	}
 };
-e([m({
+__decorate([property({
+	type: Boolean,
+	attribute: "no-sidebar",
+	reflect: true
+})], WebUiLayout.prototype, "noSidebar", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: "sidebar-collapsed",
-	reflect: !0
-})], y.prototype, "sidebarCollapsed", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarCollapsed", void 0);
+__decorate([property({
 	type: String,
 	attribute: "sidebar-width",
-	reflect: !0
-})], y.prototype, "sidebarWidth", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarWidth", void 0);
+__decorate([property({
 	type: String,
 	attribute: "collapsed-width",
-	reflect: !0
-})], y.prototype, "collapsedWidth", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "collapsedWidth", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: "sidebar-resizable",
-	reflect: !0
-})], y.prototype, "sidebarResizable", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarResizable", void 0);
+__decorate([property({
 	type: String,
 	attribute: "sidebar-min-width",
-	reflect: !0
-})], y.prototype, "sidebarMinWidth", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarMinWidth", void 0);
+__decorate([property({
 	type: String,
 	attribute: "sidebar-max-width",
-	reflect: !0
-})], y.prototype, "sidebarMaxWidth", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarMaxWidth", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: "sidebar-open",
-	reflect: !0
-})], y.prototype, "sidebarOpen", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "sidebarOpen", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: "header-glow",
-	reflect: !0
-})], y.prototype, "headerGlow", void 0), e([m({
+	reflect: true
+})], WebUiLayout.prototype, "headerGlow", void 0);
+__decorate([property({ attribute: false })], WebUiLayout.prototype, "ariaLabels", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: "mobile",
-	reflect: !0
-})], y.prototype, "_mobile", void 0), e([h()], y.prototype, "_resizeWidth", void 0), y = e([p("web-ui-layout")], y);
-//#endregion
-export { y as WebUiLayout };
+	reflect: true
+})], WebUiLayout.prototype, "_mobile", void 0);
+__decorate([state()], WebUiLayout.prototype, "_resizeWidth", void 0);
+WebUiLayout = __decorate([customElement("web-ui-layout")], WebUiLayout);
+export { WebUiLayout };
 
 //# sourceMappingURL=index.js.map