@aithe/aithe-ui 26.2.3 → 26.3.2

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.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

@@ -26,6 +26,17 @@ export interface MetricsData {
     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

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

@@ -1 +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;AAE3C,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;CACtB;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;CAwClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"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"}