@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/framework/page.js

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Framework-level route container that renders the matched page component.
+ * 框架级路由容器，渲染匹配到的页面组件。
+ *
+ * Connects to a `Router` instance, listens for route changes, and dynamically renders
+ * the component specified by the matched route's `component` field.
+ * 连接到 `Router` 实例，监听路由变更，动态渲染匹配路由的 `component` 字段指定的组件。
+ *
+ * Route params and query are passed to the rendered component as properties:
+ * 路由参数和查询参数会作为属性传递给渲染的组件：
+ * - `.params` — path parameters (e.g. `{ id: '42' }` for `/user/:id`)
+ * - `.query` — query parameters (e.g. `{ a: '1' }` for `?a=1`)
+ * - `.route` — the matched `RouteConfig` object
+ * - `.location` — the full `RouteLocation` object
+ *
+ * @slot - Fallback content when no route matches. 无匹配路由时的回退内容。
+ *
+ * @csspart container - The container element. 容器元素。
+ *
+ * @fires aithe-route-change - Emitted when the route changes with `{ location }`. 路由变更时发出 `{ location }`。
+ *
+ * @example
+ * ```html
+ * <aithe-page
+ *   .router=${myRouter}
+ * ></aithe-page>
+ * ```
+ */
+let AithePage = class AithePage extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Router instance to connect to. 要连接的 Router 实例。 */
+        this.router = null;
+        /** Fallback component tag name when no route matches (404). 无匹配路由时的回退组件标签名。 */
+        this.notFoundComponent = '';
+        this.location = null;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .page-container {
+        width: 100%;
+        height: 100%;
+      }
+
+      .not-found {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 400px;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.subscribeRouter();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribeRouter();
+    }
+    updated(changed) {
+        if (changed.has('router')) {
+            this.unsubscribeRouter();
+            this.subscribeRouter();
+        }
+    }
+    subscribeRouter() {
+        if (!this.router)
+            return;
+        this.unsubscribe = this.router.onChange((loc) => {
+            this.location = loc;
+            this.emit('aithe-route-change', { location: loc });
+        });
+    }
+    unsubscribeRouter() {
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    render() {
+        if (!this.location || !this.router) {
+            return html `
+        <div class="page-container" part="container"><slot></slot></div>
+      `;
+        }
+        const route = this.location.route;
+        if (!route) {
+            if (this.notFoundComponent) {
+                const Tag = unsafeStatic(this.notFoundComponent);
+                return staticHtml `
+          <div class="page-container" part="container">
+            <${Tag}
+              .params=${this.location.params}
+              .query=${this.location.query}
+              .route=${null}
+              .location=${this.location}
+            ></${Tag}>
+          </div>
+        `;
+            }
+            return html `
+        <div class="page-container" part="container">
+          <div class="not-found">
+            <aithe-empty></aithe-empty>
+          </div>
+        </div>
+      `;
+        }
+        const Tag = unsafeStatic(route.component);
+        return staticHtml `
+      <div class="page-container" part="container">
+        <${Tag}
+          .params=${this.location.params}
+          .query=${this.location.query}
+          .route=${route}
+          .location=${this.location}
+        ></${Tag}>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AithePage.prototype, "router", void 0);
+__decorate([
+    property({ type: String, attribute: 'not-found-component' })
+], AithePage.prototype, "notFoundComponent", void 0);
+__decorate([
+    state()
+], AithePage.prototype, "location", void 0);
+AithePage = __decorate([
+    customElement('aithe-page')
+], AithePage);
+export { AithePage };

package/dist/components/framework/sidebar.d.ts

@@ -0,0 +1,92 @@
+import type { TemplateResult } from 'lit';
+import { AitheElement } from '../../core/aithe-element';
+import type { AitheTreeNodeMeta, AitheTreeNodeFilter } from '../../core/types';
+/**
+ * Framework-level sidebar with three zones: top (brand), center (menu tree), bottom (action buttons).
+ * 框架级侧边栏，包含三个区域：顶部（品牌）、中间（菜单树）、底部（操作按钮）。
+ *
+ * Supports collapsible mode: when collapsed, only icons are shown; when expanded, icons and labels are shown.
+ * 支持菜单伸缩：收起时仅显示图标，展开时显示图标和标签。
+ *
+ * The center zone supports data-driven menu trees via `AitheTreeNodeMeta[]` (same type as `aithe-tree-menu`).
+ * 中间区域支持通过 `AitheTreeNodeMeta[]` 数据驱动的菜单树（与 `aithe-tree-menu` 相同类型）。
+ *
+ * @slot top - Custom top area content (overrides `brand` and `icon` properties). 自定义顶部区域内容。
+ * @slot center - Custom center menu content (overrides data-driven menu). 自定义中间菜单内容。
+ * @slot bottom - Extra action buttons in the bottom bar (before built-in buttons). 底部栏中的额外操作按钮。
+ *
+ * @csspart top - The top container. 顶部容器。
+ * @csspart center - The center container. 中间容器。
+ * @csspart bottom - The bottom container. 底部容器。
+ *
+ * @fires aithe-select - Emitted when a menu item is selected with `{ value }`. 菜单项选中时发出 `{ value }`。
+ * @fires aithe-collapse-change - Emitted when sidebar collapse state changes with `{ collapsed }`.
+ *   侧边栏伸缩状态变更时发出 `{ collapsed }`。Call `preventDefault()` to suppress the built-in toggle.
+ *   调用 `preventDefault()` 可阻止内置伸缩切换。
+ *
+ * @example
+ * ```html
+ * <aithe-sidebar
+ *   brand="My App"
+ *   icon="home"
+ *   items='[{"label":"Dashboard","id":"dashboard","icon":"home"},{"label":"Settings","id":"settings","icon":"settings","children":[{"label":"Profile","id":"profile"},{"label":"Security","id":"security"}]}]'
+ *   active="dashboard"
+ *   collapsible
+ * ></aithe-sidebar>
+ * ```
+ */
+export declare class AitheSidebar extends AitheElement {
+    /** Brand name displayed in the top zone. 顶部区域显示的品牌名称。 */
+    brand: string;
+    /** Icon name displayed before the brand in the top zone. 顶部区域品牌前的图标名称。 */
+    icon: string;
+    /** JSON string of menu items (parsed into `items`). 菜单项的 JSON 字符串（解析为 `items`）。 */
+    itemsJson: string;
+    /** Array of menu items (prefer this over `itemsJson` in JS). 菜单项数组（在 JS 中优先使用此属性）。 */
+    items: AitheTreeNodeMeta[];
+    /** Active (selected) menu item value. 当前选中的菜单项值。 */
+    active: string;
+    /** Whether all menu groups are expanded by default. 是否默认展开所有菜单分组。 */
+    expandAll: boolean;
+    /** Whether the sidebar supports collapse/expand toggle. 侧边栏是否支持伸缩切换。 */
+    collapsible: boolean;
+    /** Whether the sidebar is currently collapsed. 侧边栏当前是否收起。 */
+    collapsed: boolean;
+    /**
+     * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
+     * Useful for permission-based access control.
+     * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
+     */
+    itemFilter: AitheTreeNodeFilter | null;
+    /** Whether the sidebar uses overlay mode (floats above content instead of pushing it).
+     * 侧边栏是否使用覆盖模式（浮在内容上方而非挤压内容）。 */
+    overlay: boolean;
+    /** Header height in CSS value, used to offset overlay sidebar below the header.
+     * Header 高度（CSS 值），用于让 overlay 侧边栏从 header 下方开始。 */
+    headerHeight: string;
+    /** Mobile breakpoint in pixels; when viewport width ≤ this value, overlay mode is auto-enabled.
+     * 移动端断点（像素）；视口宽度 ≤ 此值时自动启用 overlay 模式。 */
+    mobileBreakpoint: number;
+    /** Sidebar width when expanded (CSS value). 展开时的侧边栏宽度。 */
+    expandedWidth: string;
+    /** Sidebar width when collapsed (CSS value). 收起时的侧边栏宽度。 */
+    collapsedWidth: string;
+    private isMobile;
+    private mql?;
+    private unsubscribeLocale?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupMobileListener;
+    private readonly handleMobileChange;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private applyWidth;
+    private renderTopIcon;
+    private readonly handleCollapseToggle;
+    private readonly handleOverlayClose;
+    private readonly handleFloatToggle;
+    private readonly handleTreeSelect;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/framework/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/framework/sidebar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,yDAAyD;IAC7B,KAAK,SAAM;IAEvC,0EAA0E;IAC9C,IAAI,SAAM;IAEtC,mFAAmF;IACnC,SAAS,SAAM;IAE/D,sFAAsF;IACtD,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAEhE,oDAAoD;IACxB,MAAM,SAAM;IAExC,qEAAqE;IACf,SAAS,UAAS;IAExE,wEAAwE;IAC3C,WAAW,UAAS;IAEjD,6DAA6D;IACjB,SAAS,UAAS;IAE9D;;;;OAIG;IAC6B,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAE9E;oCACgC;IACY,OAAO,UAAS;IAE5D;wDACoD;IACI,YAAY,SAAU;IAE9E;8CAC0C;IACkB,gBAAgB,SAAO;IAEnF,0DAA0D;IACD,aAAa,SAAW;IAEjF,2DAA2D;IACD,cAAc,SAAU;IAEzE,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,GAAG,CAAC,CAAiB;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA0LpB;IAEF,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CASjC;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYtD,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAMnC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAE/B;IAEF,MAAM;CAoEP"}