@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/data/metrics-group.js

@@ -0,0 +1,180 @@
+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 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 { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheWidget } from '../../core/aithe-widget';
+/**
+ * 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' },
+ * ];
+ * ```
+ */
+let AitheMetricsGroup = class AitheMetricsGroup extends AitheWidget {
+    constructor() {
+        super(...arguments);
+        /**
+         * Layout direction of the metrics group.
+         * 指标组的排列方向。
+         *
+         * @default 'horizontal'
+         */
+        this.direction = 'horizontal';
+        /**
+         * Gap between metrics items, in pixels.
+         * 指标项之间的间距，单位为像素。
+         *
+         * @default 16
+         */
+        this.gap = 16;
+        /**
+         * Alignment of metrics items within the group. Only takes effect when direction is vertical.
+         * 指标项在组内的对齐方式。仅在垂直布局时生效。
+         *
+         * @default 'left'
+         */
+        this.align = 'left';
+        /**
+         * Generic configuration object. Fields with the same name as the component's
+         * individual properties take precedence when both are set.
+         * 通用配置对象。与组件独立属性同名的字段优先级更高。
+         */
+        this.params = {};
+        /**
+         * 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>` 子元素。单个对象自动转为单元素数组。
+         */
+        this.data = null;
+        this._containerRef = createRef();
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .group {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+
+      .group > ::slotted(aithe-metrics),
+      .group > aithe-metrics {
+        flex: 1;
+      }
+    `,
+    ]; }
+    render() {
+        const resolvedDirection = this.params.direction ?? this.direction;
+        const resolvedGap = this.params.gap ?? this.gap;
+        const resolvedAlign = this.params.align ?? this.align;
+        const flexDirection = resolvedDirection === 'vertical' ? 'column' : 'row';
+        const alignMap = {
+            left: 'flex-start',
+            center: 'center',
+            right: 'flex-end',
+        };
+        const alignItems = resolvedDirection === 'vertical' ? alignMap[resolvedAlign] : 'center';
+        const raw = this.data;
+        let items = null;
+        if (raw) {
+            items = Array.isArray(raw) ? raw : [raw];
+        }
+        const children = items
+            ? items.map((item) => html `
+            <aithe-metrics
+              label=${item.label ?? ''}
+              value=${item.value ?? ''}
+              variant=${item.variant ?? 'default'}
+              ?show-divider=${item.showDivider ?? false}
+              align=${item.align ?? 'left'}
+              scale=${item.scale ?? 'normal'}
+            ></aithe-metrics>
+          `)
+            : html `<slot></slot>`;
+        return html `
+      <div
+        class="group"
+        part="container"
+        style="flex-direction: ${flexDirection}; gap: ${resolvedGap}px; align-items: ${alignItems};"
+        ${ref(this._containerRef)}
+      >
+        ${children}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMetricsGroup.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number })
+], AitheMetricsGroup.prototype, "gap", void 0);
+__decorate([
+    property({ type: String })
+], AitheMetricsGroup.prototype, "align", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetricsGroup.prototype, "params", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetricsGroup.prototype, "data", void 0);
+AitheMetricsGroup = __decorate([
+    customElement('aithe-metrics-group')
+], AitheMetricsGroup);
+export { AitheMetricsGroup };

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

@@ -0,0 +1,131 @@
+/**
+ * @file Metrics display component / 业务指标展示组件
+ * @description Displays a business metric with label, value, and an optional slot for custom content.
+ *              Supports variant-based color styling for the value, an optional divider,
+ *              and data-driven mode via the inherited `params` and `data` properties from AitheWidget.
+ *              `params` takes precedence over `data` for overlapping fields.
+ *              展示业务指标，含标签、数值和可选的自定义内容插槽。数值支持基于 variant 的颜色样式，
+ *              支持可选分割线。通过 AitheWidget 继承的 `params` 和 `data` 属性支持数据驱动模式，
+ *              `params` 中同名字段优先级高于 `data`。
+ */
+import { type TemplateResult } from 'lit';
+import { AitheWidget } from '../../core/aithe-widget';
+import type { AitheVariant } from '../../types';
+export type MetricsAlign = 'left' | 'center' | 'right';
+export type MetricsScale = 'small' | 'normal' | 'large';
+export interface MetricsData {
+    /** Metric label text. 指标标签文本。 */
+    label?: string;
+    /** Metric value text. 指标数值文本。 */
+    value?: string;
+    /** Visual variant / semantic color for the value text. 数值文本的视觉变体/语义色。 */
+    variant?: AitheVariant;
+    /** Whether to show a divider. 是否显示分割线。 */
+    showDivider?: boolean;
+    /** Text alignment of the metric content. 指标内容的对齐方式。 */
+    align?: MetricsAlign;
+    /** Size scale of the metric. 指标的尺寸规格。 */
+    scale?: MetricsScale;
+    /**
+     * Filter expression to format the value.
+     * Supports chained expressions like "amount" or "date yyyy/MM/dd | empty".
+     * Applied when both `data.filter` and `params.filter` are set; `data.filter` takes precedence.
+     * 用于格式化数值的过滤器表达式。
+     * 支持链式表达式，如 "amount" 或 "date yyyy/MM/dd | empty"。
+     * `data.filter` 和 `params.filter` 均可设置，`data.filter` 优先级更高。
+     *
+     * @see /docs/filter.md
+     */
+    filter?: string;
+}
+/**
+ * A business metrics display component. Renders a value with optional slot content
+ * on top and a label below, suitable for dashboard panels and statistic cards.
+ *
+ * Inherits from AitheWidget, using `params` for layout configuration (align, scale, showDivider)
+ * and `data` for content (label, value, variant). `params` only overrides layout fields
+ * (align, scale, showDivider); content fields (label, value, variant) are always read from
+ * `data` first, falling back to the component's own properties. `data` accepts both a single
+ * MetricsData object and an array; when an array is provided, only the first item is used.
+ *
+ * 业务指标展示组件。上方渲染数值和可选的插槽内容，下方渲染标签，适用于仪表盘面板和统计卡片。
+ *
+ * 继承自 AitheWidget，`params` 用于布局配置（align, scale, showDivider），
+ * `data` 用于内容数据（label, value, variant）。`params` 仅覆盖布局字段
+ * （align, scale, showDivider）；内容字段（label, value, variant）始终优先从 `data` 读取，
+ * 再回退到组件自身属性。`data` 支持单个 MetricsData 对象或数组，传入数组时仅取第一个元素。
+ *
+ * @slot - Custom content displayed next to the value. 显示在数值旁边的自定义内容。
+ *
+ * @csspart value - The metric value element. 指标数值元素。
+ * @csspart label - The metric label element. 指标标签元素。
+ * @csspart divider - The divider element (shown when showDivider is true). 分割线元素。
+ *
+ * @example
+ * ```html
+ * <!-- Attribute mode -->
+ * <aithe-metrics label="Active Users" value="1,024" variant="primary"></aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Data-driven mode with slot content -->
+ * <aithe-metrics label="Revenue" value="$42.5K" variant="success">
+ *   <aithe-icon name="arrowUp" size="16"></aithe-icon>
+ * </aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Programmatic mode with params and data
+ * const el = document.querySelector('aithe-metrics');
+ * el.params = { align: 'center', scale: 'large', showDivider: true };
+ * el.data = { label: 'Users', value: '1,024', variant: 'primary' };
+ * ```
+ */
+export declare class AitheMetrics extends AitheWidget {
+    /** Metric label text displayed below the value. 显示在数值下方的标签文本。 */
+    label: string;
+    /** Metric value text displayed prominently. 突出显示的数值文本。 */
+    value: string;
+    /**
+     * Whether to show a divider on the left side.
+     * 是否在左侧显示分割线。由 params / data 驱动，仅用于 CSS 反射。
+     *
+     * @internal
+     */
+    showDivider: boolean;
+    /**
+     * Text alignment of the metric content. Reflected for CSS selectors.
+     * 指标内容的对齐方式。由 params / data 驱动，仅用于 CSS 反射。
+     *
+     * @internal
+     */
+    align: MetricsAlign;
+    /**
+     * Size scale of the metric. Reflected for CSS selectors.
+     * 指标的尺寸规格。由 params / data 驱动，仅用于 CSS 反射。
+     *
+     * @internal
+     */
+    scale: MetricsScale;
+    /**
+     * Generic configuration object. Fields with the same name as MetricsData
+     * take precedence over `data` when both are set.
+     * 通用配置对象。与 MetricsData 同名的字段优先级高于 `data`。
+     */
+    params: MetricsData;
+    /**
+     * Generic data object. Fields with the same name in `params` take precedence.
+     * 通用数据对象。同名时 `params` 中的值优先。
+     */
+    data: MetricsData | MetricsData[] | null;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-metrics': AitheMetrics;
+    }
+}
+//# sourceMappingURL=metrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics.d.ts","sourceRoot":"","sources":["../../../src/components/data/metrics.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,YAAY,EAAE,MAAM,QAAQ,CAAC;AAG3C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC3C,iEAAiE;IACrC,KAAK,SAAM;IAEvC,0DAA0D;IAC9B,KAAK,SAAM;IAEvC;;;;;OAKG;IACoE,WAAW,UAAS;IAE3F;;;;;OAKG;IACwC,KAAK,EAAE,YAAY,CAAY;IAE1E;;;;;OAKG;IACwC,KAAK,EAAE,YAAY,CAAW;IAEzE;;;;OAIG;IACkC,MAAM,EAAE,WAAW,CAAM;IAE9D;;;OAGG;IACkC,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAQ;IAErF,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAwIpB;IAEO,MAAM,IAAI,cAAc;CA6ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/data/metrics.js

@@ -0,0 +1,309 @@
+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 Metrics display component / 业务指标展示组件
+ * @description Displays a business metric with label, value, and an optional slot for custom content.
+ *              Supports variant-based color styling for the value, an optional divider,
+ *              and data-driven mode via the inherited `params` and `data` properties from AitheWidget.
+ *              `params` takes precedence over `data` for overlapping fields.
+ *              展示业务指标，含标签、数值和可选的自定义内容插槽。数值支持基于 variant 的颜色样式，
+ *              支持可选分割线。通过 AitheWidget 继承的 `params` 和 `data` 属性支持数据驱动模式，
+ *              `params` 中同名字段优先级高于 `data`。
+ */
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheWidget } from '../../core/aithe-widget';
+import { filterFactory } from '../../core/filter';
+/**
+ * A business metrics display component. Renders a value with optional slot content
+ * on top and a label below, suitable for dashboard panels and statistic cards.
+ *
+ * Inherits from AitheWidget, using `params` for layout configuration (align, scale, showDivider)
+ * and `data` for content (label, value, variant). `params` only overrides layout fields
+ * (align, scale, showDivider); content fields (label, value, variant) are always read from
+ * `data` first, falling back to the component's own properties. `data` accepts both a single
+ * MetricsData object and an array; when an array is provided, only the first item is used.
+ *
+ * 业务指标展示组件。上方渲染数值和可选的插槽内容，下方渲染标签，适用于仪表盘面板和统计卡片。
+ *
+ * 继承自 AitheWidget，`params` 用于布局配置（align, scale, showDivider），
+ * `data` 用于内容数据（label, value, variant）。`params` 仅覆盖布局字段
+ * （align, scale, showDivider）；内容字段（label, value, variant）始终优先从 `data` 读取，
+ * 再回退到组件自身属性。`data` 支持单个 MetricsData 对象或数组，传入数组时仅取第一个元素。
+ *
+ * @slot - Custom content displayed next to the value. 显示在数值旁边的自定义内容。
+ *
+ * @csspart value - The metric value element. 指标数值元素。
+ * @csspart label - The metric label element. 指标标签元素。
+ * @csspart divider - The divider element (shown when showDivider is true). 分割线元素。
+ *
+ * @example
+ * ```html
+ * <!-- Attribute mode -->
+ * <aithe-metrics label="Active Users" value="1,024" variant="primary"></aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Data-driven mode with slot content -->
+ * <aithe-metrics label="Revenue" value="$42.5K" variant="success">
+ *   <aithe-icon name="arrowUp" size="16"></aithe-icon>
+ * </aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Programmatic mode with params and data
+ * const el = document.querySelector('aithe-metrics');
+ * el.params = { align: 'center', scale: 'large', showDivider: true };
+ * el.data = { label: 'Users', value: '1,024', variant: 'primary' };
+ * ```
+ */
+let AitheMetrics = class AitheMetrics extends AitheWidget {
+    constructor() {
+        super(...arguments);
+        /** Metric label text displayed below the value. 显示在数值下方的标签文本。 */
+        this.label = '';
+        /** Metric value text displayed prominently. 突出显示的数值文本。 */
+        this.value = '';
+        /**
+         * Whether to show a divider on the left side.
+         * 是否在左侧显示分割线。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.showDivider = false;
+        /**
+         * Text alignment of the metric content. Reflected for CSS selectors.
+         * 指标内容的对齐方式。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.align = 'center';
+        /**
+         * Size scale of the metric. Reflected for CSS selectors.
+         * 指标的尺寸规格。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.scale = 'small';
+        /**
+         * Generic configuration object. Fields with the same name as MetricsData
+         * take precedence over `data` when both are set.
+         * 通用配置对象。与 MetricsData 同名的字段优先级高于 `data`。
+         */
+        this.params = {};
+        /**
+         * Generic data object. Fields with the same name in `params` take precedence.
+         * 通用数据对象。同名时 `params` 中的值优先。
+         */
+        this.data = null;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      :host([align="center"]) {
+        align-items: center;
+        text-align: center;
+      }
+
+      :host([align="right"]) {
+        align-items: flex-end;
+        text-align: right;
+      }
+
+      :host([align="left"]) {
+        align-items: flex-start;
+        text-align: left;
+      }
+
+      /* Scale: small */
+      :host([scale="small"]) .metrics-value {
+        font-size: var(--aithe-font-size-3xl, 32px);
+      }
+
+      :host([scale="small"]) .metrics-label {
+        font-size: var(--aithe-font-size-md, 16px);
+      }
+
+      :host([scale="small"]) {
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      /* Scale: normal (default) */
+      :host([scale="normal"]) .metrics-value {
+        font-size: var(--aithe-font-size-4xl, 48px);
+      }
+
+      :host([scale="normal"]) .metrics-label {
+        font-size: var(--aithe-font-size-lg, 18px);
+      }
+
+      /* Scale: large */
+      :host([scale="large"]) .metrics-value {
+        font-size: var(--aithe-font-size-5xl, 64px);
+      }
+
+      :host([scale="large"]) .metrics-label {
+        font-size: var(--aithe-font-size-xl, 20px);
+      }
+
+      :host([scale="large"]) {
+        gap: var(--aithe-space-3, 16px);
+      }
+
+      .metrics-top {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .metrics-value {
+        font-weight: var(--aithe-font-weight-bold, 700);
+        line-height: 1.2;
+        color: var(--aithe-color-text, #1a1a1a);
+        transition: color var(--aithe-duration-fast, 0.15s) var(--aithe-ease-standard, ease);
+      }
+
+      .metrics-slot {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .metrics-label {
+        color: var(--aithe-color-text-muted, #6b7280);
+        line-height: 1.4;
+      }
+
+      /* Variant styles — applied to .metrics-value */
+      .default {
+        color: var(--aithe-color-text, #1a1a1a);
+      }
+
+      .primary {
+        color: var(--aithe-primary-8);
+      }
+
+      .success {
+        color: var(--aithe-success-8);
+      }
+
+      .warning {
+        color: var(--aithe-warning-8);
+      }
+
+      .danger {
+        color: var(--aithe-danger-8);
+      }
+
+      .neutral {
+        color: var(--aithe-color-text-muted, #6b7280);
+      }
+
+      /* Divider */
+      .divider {
+        flex-shrink: 0;
+        background: var(--aithe-primary-8);
+      }
+
+      :host([show-divider]) .divider {
+        display: block;
+      }
+
+      :host(:not([show-divider])) .divider {
+        display: none;
+      }
+
+      :host([show-divider]) {
+        padding-left: 12px;
+        position: relative;
+      }
+
+      :host([show-divider]) .divider {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        border-radius: 1px;
+      }
+    `,
+    ]; }
+    render() {
+        const raw = this.data;
+        const data = Array.isArray(raw) ? raw[0] : raw;
+        const resolvedLabel = data?.label ?? this.label;
+        const resolvedValue = data?.value ?? this.value;
+        const resolvedVariant = data?.variant ?? this.variant;
+        const resolvedFilter = data?.filter ?? this.params.filter;
+        const resolvedShowDivider = this.params.showDivider ?? data?.showDivider ?? this.showDivider;
+        const resolvedAlign = this.params.align ?? data?.align ?? this.align;
+        const resolvedScale = this.params.scale ?? data?.scale ?? this.scale;
+        if (resolvedAlign !== this.align) {
+            this.align = resolvedAlign;
+        }
+        if (resolvedScale !== this.scale) {
+            this.scale = resolvedScale;
+        }
+        if (resolvedShowDivider !== this.showDivider) {
+            this.showDivider = resolvedShowDivider;
+        }
+        const displayValue = resolvedFilter && resolvedValue != null
+            ? filterFactory.format(resolvedValue, resolvedFilter)
+            : resolvedValue;
+        const valueClasses = classMap({
+            'metrics-value': true,
+            [resolvedVariant]: true,
+        });
+        return html `
+      <span class="divider" part="divider" ?hidden=${!resolvedShowDivider}></span>
+      <div class="metrics-top">
+        <span class=${valueClasses} part="value">${displayValue}</span>
+        <span class="metrics-slot">
+          <slot></slot>
+        </span>
+      </div>
+      ${resolvedLabel
+            ? html ` <span class="metrics-label" part="label">${resolvedLabel}</span> `
+            : ''}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMetrics.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], AitheMetrics.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-divider', reflect: true })
+], AitheMetrics.prototype, "showDivider", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AitheMetrics.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AitheMetrics.prototype, "scale", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetrics.prototype, "params", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetrics.prototype, "data", void 0);
+AitheMetrics = __decorate([
+    customElement('aithe-metrics')
+], AitheMetrics);
+export { AitheMetrics };

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

@@ -1,11 +1,23 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Pagination controller.
+ * Pagination controller for navigating through paged data.
+ * 分页控制器，用于浏览分页数据。
+ *
+ * @fires aithe-page-change - Emitted when the current page changes with `{ currentPage, pageSize }`. 当前页变更时发出 `{ currentPage, pageSize }`。
+ *
+ * @example
+ * ```html
+ * <aithe-pagination total="100" page-size="10" current-page="1"></aithe-pagination>
+ * ```
  */
 export declare class AithePagination extends AitheElement {
+    /** Total number of data items. 数据项总数。 */
     total: number;
+    /** Number of items per page. 每页的数据项数。 */
     pageSize: number;
+    /** Currently active page number. 当前活动页码。 */
     currentPage: number;
+    /** Size scale of the pagination buttons. 分页按钮的尺寸规格。 */
     size: 'sm' | 'md' | 'lg';
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private get pageCount();

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/data/pagination.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,eAAgB,SAAQ,YAAY;IACnB,KAAK,SAAK;IACc,QAAQ,SAAM;IACX,WAAW,SAAK;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+BpB;IAEF,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,CAAC,MAAM;IAKd,MAAM;CA2BP"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/data/pagination.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,yCAAyC;IACb,KAAK,SAAK;IACtC,yCAAyC;IACW,QAAQ,SAAM;IAClE,4CAA4C;IACW,WAAW,SAAK;IACvE,uDAAuD;IAC3B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+BpB;IAEF,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,CAAC,MAAM;IAKd,MAAM;CA+BP"}