@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/data/box-table.js

@@ -0,0 +1,220 @@
+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;
+};
+/**
+ * @file AitheBoxTable — table/box dual-mode data display / AitheBoxTable — 表格/盒子双模式数据展示
+ * @description AitheBoxTable extends AitheTable with a `mode` property.
+ *              When `mode="table"`, it behaves like a standard table.
+ *              When `mode="box"`, it renders records as a grid of boxes using `aithe-brief-box`.
+ *              Column definitions with a `box` property map data to the corresponding slot.
+ *              AitheBoxTable 扩展 AitheTable，增加 `mode` 属性。
+ *              当 `mode="table"` 时，行为与标准表格一致。
+ *              当 `mode="box"` 时，使用 `aithe-brief-box` 将记录渲染为盒子网格。
+ *              带有 `box` 属性的列定义将数据映射到对应的 slot。
+ *
+ * @fires aithe-sort-change - Emitted when a sortable column header is clicked with `{ sortKey, sortOrder }`. 可排序列头被点击时发出 `{ sortKey, sortOrder }`。
+ * @fires aithe-selection-change - Emitted when row selection changes with `{ selectionSet }`. 行选择变更时发出 `{ selectionSet }`。
+ * @fires aithe-row-click - Emitted when a box is clicked with `{ record, rowIndex }`. 点击 box 时发出 `{ record, rowIndex }`。
+ *
+ * @example Data-driven mode with box view / 数据驱动模式 + 盒子视图
+ * ```html
+ * <aithe-box-table
+ *   mode="box"
+ *   columns-json='[{"id":"name","title":"Name","box":"name"},{"id":"status","title":"Status","box":"status"},{"id":"owner","title":"Owner","box":"tags"}]'
+ *   data-json='[{"name":"Alice","status":"Active","owner":"Team A"},{"name":"Bob","status":"Inactive","owner":"Team B"}]'
+ *   box-cols="3"
+ * ></aithe-box-table>
+ * ```
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheTable } from './table';
+import { getValueByPath, safeStringify } from '../../utils/utils';
+import { t } from '../../styles/i18n';
+import '../display/brief-box';
+let AitheBoxTable = class AitheBoxTable extends AitheTable {
+    constructor() {
+        super(...arguments);
+        /**
+         * Display mode: "table" for standard table view, "box" for box grid view.
+         * 显示模式："table" 为标准表格视图，"box" 为盒子网格视图。
+         */
+        this.mode = 'table';
+        /**
+         * Number of box columns in box mode (1–12). 盒子模式下每行显示的盒子数（1–12）。
+         */
+        this.boxCols = 0;
+    }
+    static { this.styles = [
+        ...AitheTable.styles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .box-grid {
+        display: block;
+      }
+
+      .box-grid-row {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: var(--aithe-space-3, 12px);
+        margin-bottom: var(--aithe-space-3, 12px);
+      }
+
+      :host([box-cols]) .box-grid-row {
+        grid-template-columns: repeat(var(--box-cols), 1fr);
+      }
+
+      .box-grid-col {
+        min-width: 0;
+        box-sizing: border-box;
+      }
+
+      .box-empty {
+        padding: var(--aithe-space-8, 32px);
+        text-align: center;
+        color: var(--aithe-color-text-muted, #c9cdd4);
+      }
+    `,
+    ]; }
+    get boxColumns() {
+        return this.resolvedColumns.filter((col) => col.box);
+    }
+    getBoxRecordKey(record, index) {
+        const value = getValueByPath(record, this.rowKey);
+        if (value == null)
+            return String(index);
+        return safeStringify(value);
+    }
+    handleBoxClick(record, rowIndex) {
+        this.emit('aithe-row-click', { record, rowIndex });
+    }
+    renderBoxValue(column, record) {
+        const value = getValueByPath(record, column.dataIndex ? String(column.dataIndex) : column.id);
+        if (column.render)
+            return column.render(column.id, value, record);
+        if (value == null)
+            return nothing;
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return value;
+    }
+    renderBoxCard(record, rowIndex) {
+        const key = this.getBoxRecordKey(record, rowIndex);
+        const checked = this.selectionSet.has(key);
+        let nameSlot = nothing;
+        let statusSlot = nothing;
+        let tagsSlot = nothing;
+        let actionsSlot = nothing;
+        for (const col of this.boxColumns) {
+            const value = this.renderBoxValue(col, record);
+            switch (col.box) {
+                case 'name':
+                    nameSlot = value;
+                    break;
+                case 'status':
+                    statusSlot = value;
+                    break;
+                case 'tags':
+                    tagsSlot = value;
+                    break;
+                case 'actions':
+                    actionsSlot = value;
+                    break;
+            }
+        }
+        return html `
+      <aithe-brief-box
+        selectable=${this.selectable}
+        ?selected=${checked}
+        @click=${() => this.handleBoxClick(record, rowIndex)}
+        @selected-change=${(e) => this.handleBriefBoxSelect(e, record, rowIndex)}
+      >
+        <span slot="name">${nameSlot}</span>
+        ${statusSlot === nothing ? nothing : html `<span slot="status">${statusSlot}</span>`}
+        ${tagsSlot === nothing ? nothing : html `<span slot="tags">${tagsSlot}</span>`}
+        ${actionsSlot === nothing ? nothing : html `<span slot="actions">${actionsSlot}</span>`}
+      </aithe-brief-box>
+    `;
+    }
+    render() {
+        if (this.mode === 'table') {
+            return super.render();
+        }
+        const rows = this.rowData;
+        const cols = Math.max(1, Math.min(12, this.boxCols));
+        if (rows.length === 0) {
+            return html `
+        <div class="box-empty">
+          <slot name="empty">${t('data.table.emptyText')}</slot>
+        </div>
+      `;
+        }
+        const cards = [];
+        const isFixedCols = this.boxCols > 0;
+        if (isFixedCols) {
+            for (let i = 0; i < rows.length; i += cols) {
+                const chunk = rows.slice(i, i + cols);
+                cards.push(html `
+          <div class="box-grid-row" style=${styleMap({ '--box-cols': String(cols) })}>
+            ${chunk.map((record, j) => html `
+                <div class="box-grid-col">
+                  ${this.renderBoxCard(record, i + j)}
+                </div>
+              `)}
+          </div>
+        `);
+            }
+        }
+        else {
+            cards.push(html `
+        <div class="box-grid-row">
+          ${rows.map((record, i) => html `
+              <div class="box-grid-col">
+                ${this.renderBoxCard(record, i)}
+              </div>
+            `)}
+        </div>
+      `);
+        }
+        return html `
+      <slot @slotchange=${() => this.syncSlotColumns()}></slot>
+      <div class="box-grid">${cards}</div>
+    `;
+    }
+    handleBriefBoxSelect(e, record, rowIndex) {
+        e.stopPropagation();
+        const { selected } = e.detail;
+        const key = this.getBoxRecordKey(record, rowIndex);
+        if (this.selectable === 'single') {
+            this.selectionSet.clear();
+            if (selected) {
+                this.selectionSet.add(key);
+            }
+        }
+        else if (selected) {
+            this.selectionSet.add(key);
+        }
+        else {
+            this.selectionSet.delete(key);
+        }
+        this.requestUpdate();
+        this.emit('aithe-selection-change', { selectionSet: this.selectionSet });
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBoxTable.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'box-cols' })
+], AitheBoxTable.prototype, "boxCols", void 0);
+AitheBoxTable = __decorate([
+    customElement('aithe-box-table')
+], AitheBoxTable);
+export { AitheBoxTable };

package/dist/components/data/dropdown.d.ts

@@ -0,0 +1,59 @@
+import type { PropertyValues } from 'lit';
+import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
+import type { AitheTreeNodeMeta, AitheTreeNodeFilter } from '../../core/types';
+/**
+ * Dropdown menu with nested submenus, keyboard navigation, and hover/click triggers.
+ * Internally uses `<aithe-tree-menu>` for menu rendering.
+ * 下拉菜单，支持嵌套子菜单、键盘导航和悬停/点击触发。内部使用 `<aithe-tree-menu>` 渲染菜单。
+ *
+ * @slot - Default slot for the trigger element. 触发元素内容。
+ * @fires aithe-select - Emitted when a menu item is selected, with `{ item, path, id }`. 菜单项选中时触发。
+ * @fires aithe-dropdown-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-dropdown trigger="click" items='[{"id":"a","label":"Action"},{"id":"b","label":"Another"}]'>
+ *   <button>Menu</button>
+ * </aithe-dropdown>
+ * ```
+ */
+export declare class AitheDropdown extends AitheAnchoredOverlayElement {
+    /** Trigger mode: click or hover. 触发方式：点击或悬停。 */
+    trigger: 'click' | 'hover';
+    /** Display title for the dropdown trigger (shown as tooltip). 下拉菜单触发器的显示标题（作为工具提示）。 */
+    title: string;
+    /** Icon name to display before the trigger slot content. 在触发器插槽内容前显示的图标名称。 */
+    icon: string;
+    /** JSON string of dropdown menu items. 下拉菜单项的 JSON 字符串。 */
+    itemsJson: string;
+    /** Array of dropdown menu item objects. 下拉菜单项对象数组。 */
+    items: readonly AitheTreeNodeMeta[];
+    /** Dropdown panel placement. 下拉面板位置。 */
+    placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /**
+     * 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;
+    private readonly panel?;
+    private activeId;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    protected get panelElement(): HTMLElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Closes dropdown on outside pointer events. 点击外部时关闭下拉菜单。 */
+    private readonly handleOutsidePointer;
+    /** Closes dropdown on Escape key. 按 Escape 键关闭下拉菜单。 */
+    private readonly handleDocumentKeydown;
+    /** Toggles dropdown open state (click trigger only). 切换下拉菜单开关状态（仅点击触发）。 */
+    private readonly toggleOpen;
+    /** Opens dropdown on hover (hover trigger only). 悬停时打开下拉菜单（仅悬停触发）。 */
+    private readonly openOnHover;
+    /** Closes dropdown on hover end (hover trigger only). 悬停结束时关闭下拉菜单（仅悬停触发）。 */
+    private readonly closeOnHoverEnd;
+    private readonly handleTreeSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/data/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/data/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAG1E;;;;;;;;;;;;;;GAcG;AACH,qBACa,aAAc,SAAQ,2BAA2B;IAC5D,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IACjE,uFAAuF;IAC3D,KAAK,SAAM;IACvC,8EAA8E;IAClD,IAAI,SAAM;IACtC,2DAA2D;IACX,SAAS,SAAM;IAC/D,sDAAsD;IACtB,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAM;IACzE,wCAAwC;IACZ,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAC7E;IAEjB;;;;OAIG;IAC6B,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAE7D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAE7C,OAAO,CAAC,QAAQ,CAAM;IAE/B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+BpB;IAEF,SAAS,KAAK,YAAY,IAAI,WAAW,GAAG,IAAI,CAE/C;IAED,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAYtD,8DAA8D;IAC9D,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAYnC;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,2EAA2E;IAC3E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIzB;IAEF,sEAAsE;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAC,eAAe,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAE/B;IAEF,MAAM;CAmCP"}

package/dist/components/data/dropdown.js

@@ -0,0 +1,219 @@
+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, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
+import { aitheBaseStyles, aithePanelStyles } from '../../core/styles';
+/**
+ * Dropdown menu with nested submenus, keyboard navigation, and hover/click triggers.
+ * Internally uses `<aithe-tree-menu>` for menu rendering.
+ * 下拉菜单，支持嵌套子菜单、键盘导航和悬停/点击触发。内部使用 `<aithe-tree-menu>` 渲染菜单。
+ *
+ * @slot - Default slot for the trigger element. 触发元素内容。
+ * @fires aithe-select - Emitted when a menu item is selected, with `{ item, path, id }`. 菜单项选中时触发。
+ * @fires aithe-dropdown-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-dropdown trigger="click" items='[{"id":"a","label":"Action"},{"id":"b","label":"Another"}]'>
+ *   <button>Menu</button>
+ * </aithe-dropdown>
+ * ```
+ */
+let AitheDropdown = class AitheDropdown extends AitheAnchoredOverlayElement {
+    constructor() {
+        super(...arguments);
+        /** Trigger mode: click or hover. 触发方式：点击或悬停。 */
+        this.trigger = 'click';
+        /** Display title for the dropdown trigger (shown as tooltip). 下拉菜单触发器的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the trigger slot content. 在触发器插槽内容前显示的图标名称。 */
+        this.icon = '';
+        /** JSON string of dropdown menu items. 下拉菜单项的 JSON 字符串。 */
+        this.itemsJson = '';
+        /** Array of dropdown menu item objects. 下拉菜单项对象数组。 */
+        this.items = [];
+        /** Dropdown panel placement. 下拉面板位置。 */
+        this.placement = 'bottom-start';
+        /**
+         * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
+         * Useful for permission-based access control.
+         * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
+         */
+        this.itemFilter = null;
+        this.activeId = '';
+        /** Closes dropdown on outside pointer events. 点击外部时关闭下拉菜单。 */
+        this.handleOutsidePointer = (event) => {
+            if (!this.open) {
+                return;
+            }
+            if (!event.composedPath().includes(this)) {
+                const path = event.composedPath();
+                const inThemePicker = path.some((el) => el instanceof HTMLElement && el.tagName === 'AITHE-THEME-PICKER');
+                if (!inThemePicker) {
+                    this.open = false;
+                }
+            }
+        };
+        /** Closes dropdown on Escape key. 按 Escape 键关闭下拉菜单。 */
+        this.handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this.open) {
+                this.open = false;
+            }
+        };
+        /** Toggles dropdown open state (click trigger only). 切换下拉菜单开关状态（仅点击触发）。 */
+        this.toggleOpen = () => {
+            if (this.trigger === 'click') {
+                this.open = !this.open;
+            }
+        };
+        /** Opens dropdown on hover (hover trigger only). 悬停时打开下拉菜单（仅悬停触发）。 */
+        this.openOnHover = () => {
+            if (this.trigger === 'hover') {
+                this.open = true;
+            }
+        };
+        /** Closes dropdown on hover end (hover trigger only). 悬停结束时关闭下拉菜单（仅悬停触发）。 */
+        this.closeOnHoverEnd = () => {
+            if (this.trigger === 'hover') {
+                this.open = false;
+            }
+        };
+        this.handleTreeSelect = () => {
+            this.open = false;
+        };
+    }
+    willUpdate(changed) {
+        if (changed.has('itemsJson') && this.itemsJson) {
+            try {
+                this.items = JSON.parse(this.itemsJson);
+            }
+            catch {
+                this.items = [];
+            }
+        }
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .trigger-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+      }
+
+      .panel {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        min-width: 220px;
+        max-width: min(320px, calc(100vw - 24px));
+        padding: var(--aithe-space-2);
+      }
+
+      aithe-tree-menu {
+        display: block;
+      }
+    `,
+    ]; }
+    get panelElement() {
+        return this.panel ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsidePointer);
+        document.addEventListener('keydown', this.handleDocumentKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsidePointer);
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            this.emit('aithe-dropdown-change', { open: this.open });
+            if (!this.open) {
+                this.activeId = '';
+            }
+        }
+    }
+    render() {
+        return html `
+      <span
+        class="trigger"
+        title=${this.title}
+        @click=${this.toggleOpen}
+        @mouseenter=${this.openOnHover}
+        @mouseleave=${this.closeOnHoverEnd}
+      >
+        ${this.icon
+            ? html `
+              <aithe-icon class="trigger-icon" name=${this.icon} size="16"></aithe-icon>
+            `
+            : nothing}
+        <slot></slot>
+      </span>
+      ${this.open
+            ? html `
+            <div
+              class="panel"
+              @mouseenter=${this.openOnHover}
+              @mouseleave=${this.closeOnHoverEnd}
+            >
+              <aithe-tree-menu
+                .items=${this.items}
+                .active=${this.activeId}
+                .itemFilter=${this.itemFilter}
+                expand-all
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheDropdown.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String })
+], AitheDropdown.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheDropdown.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'items' })
+], AitheDropdown.prototype, "itemsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheDropdown.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], AitheDropdown.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheDropdown.prototype, "itemFilter", void 0);
+__decorate([
+    query('.panel')
+], AitheDropdown.prototype, "panel", void 0);
+__decorate([
+    state()
+], AitheDropdown.prototype, "activeId", void 0);
+AitheDropdown = __decorate([
+    customElement('aithe-dropdown')
+], AitheDropdown);
+export { AitheDropdown };

package/dist/components/data/metrics-group.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @file Metrics group container component / 业务指标组容器组件
+ * @description Container that lays out multiple `<aithe-metrics>` children with configurable
+ *              direction (horizontal/vertical) and gap. Supports data-driven mode via the
+ *              inherited `params` and `data` properties from AitheWidget.
+ *              `params` takes precedence over individual properties for overlapping fields.
+ *              容器组件，以水平或垂直方向排列多个 `<aithe-metrics>` 子元素，支持自定义间距。
+ *              通过 AitheWidget 继承的 `params` 和 `data` 属性支持数据驱动模式，
+ *              `params` 中同名字段优先级高于独立属性。
+ */
+import { type TemplateResult } from 'lit';
+import { AitheWidget } from '../../core/aithe-widget';
+import type { MetricsData } from './metrics';
+export type MetricsGroupDirection = 'horizontal' | 'vertical';
+export type MetricsGroupAlign = 'left' | 'center' | 'right';
+export interface MetricsGroupParams {
+    /** Layout direction of the metrics group. 指标组的排列方向。 */
+    direction?: MetricsGroupDirection;
+    /** Gap between metrics items, in pixels. 指标项之间的间距，单位为像素。 */
+    gap?: number;
+    /** Alignment of metrics items within the group. Only takes effect when direction is vertical. 指标项在组内的对齐方式。仅在垂直布局时生效。 */
+    align?: MetricsGroupAlign;
+}
+/**
+ * A container component that groups multiple `<aithe-metrics>` children with
+ * configurable layout direction and gap. Useful for dashboard panel content areas
+ * where several metrics need to be displayed side by side or stacked.
+ *
+ * Inherits from AitheWidget, using `params` for layout configuration (direction, gap, align)
+ * and `data` for metric items. `params` fields take precedence over individual properties.
+ * `data` accepts both a single MetricsData object and an array; a single object is
+ * automatically wrapped into a one-element array.
+ *
+ * 业务指标组容器组件。以水平或垂直方向排列多个 `<aithe-metrics>` 子元素，支持自定义间距。
+ * 适用于仪表盘面板内容区，需要并排或堆叠展示多个指标的场景。
+ *
+ * 继承自 AitheWidget，`params` 用于布局配置（direction, gap, align），
+ * `data` 用于指标数据。`params` 同名字段优先级高于独立属性。
+ * `data` 支持单个 MetricsData 对象或数组，传入对象时自动转为单元素数组。
+ *
+ * @slot - One or more `<aithe-metrics>` elements. 一个或多个 `<aithe-metrics>` 元素。
+ *
+ * @csspart container - The flex container wrapping the metrics. 包裹指标的 flex 容器。
+ *
+ * @example
+ * ```html
+ * <!-- Slot mode -->
+ * <aithe-metrics-group direction="horizontal" gap="32">
+ *   <aithe-metrics label="Users" value="1,024" variant="primary"></aithe-metrics>
+ *   <aithe-metrics label="Revenue" value="$42.5K" variant="success"></aithe-metrics>
+ * </aithe-metrics-group>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Data-driven mode
+ * const el = document.querySelector('aithe-metrics-group');
+ * el.params = { direction: 'horizontal', gap: 24 };
+ * el.data = [
+ *   { label: 'Users', value: '1,024', variant: 'primary' },
+ *   { label: 'Revenue', value: '$42.5K', variant: 'success' },
+ * ];
+ * ```
+ */
+export declare class AitheMetricsGroup extends AitheWidget {
+    /**
+     * Layout direction of the metrics group.
+     * 指标组的排列方向。
+     *
+     * @default 'horizontal'
+     */
+    direction: MetricsGroupDirection;
+    /**
+     * Gap between metrics items, in pixels.
+     * 指标项之间的间距，单位为像素。
+     *
+     * @default 16
+     */
+    gap: number;
+    /**
+     * Alignment of metrics items within the group. Only takes effect when direction is vertical.
+     * 指标项在组内的对齐方式。仅在垂直布局时生效。
+     *
+     * @default 'left'
+     */
+    align: MetricsGroupAlign;
+    /**
+     * Generic configuration object. Fields with the same name as the component's
+     * individual properties take precedence when both are set.
+     * 通用配置对象。与组件独立属性同名的字段优先级更高。
+     */
+    params: MetricsGroupParams;
+    /**
+     * Generic data object or array. When set to MetricsData or MetricsData[],
+     * the component automatically renders `<aithe-metrics>` children.
+     * A single MetricsData object is wrapped into a one-element array.
+     * 通用数据对象或数组。设置为 MetricsData 或 MetricsData[] 时，
+     * 组件自动渲染 `<aithe-metrics>` 子元素。单个对象自动转为单元素数组。
+     */
+    data: MetricsData | MetricsData[] | null;
+    private readonly _containerRef;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-metrics-group': AitheMetricsGroup;
+    }
+}
+//# sourceMappingURL=metrics-group.d.ts.map

package/dist/components/data/metrics-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-group.d.ts","sourceRoot":"","sources":["../../../src/components/data/metrics-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,uDAAuD;IACvD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wHAAwH;IACxH,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,iBAAkB,SAAQ,WAAW;IAChD;;;;;OAKG;IACyB,SAAS,EAAE,qBAAqB,CAAgB;IAE5E;;;;;OAKG;IACyB,GAAG,SAAM;IAErC;;;;;OAKG;IACyB,KAAK,EAAE,iBAAiB,CAAU;IAE9D;;;;OAIG;IACkC,MAAM,EAAE,kBAAkB,CAAM;IAErE;;;;;;OAMG;IACkC,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAQ;IAErF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoC;IAElE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAkBpB;IAEO,MAAM,IAAI,cAAc;CA6ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}