@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/data/timeline.js

@@ -0,0 +1,204 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import './timeline-item';
+/**
+ * Timeline container for displaying process and audit records.
+ * 时间线容器，用于展示流程和审计记录。
+ *
+ * Supports two item definition modes:
+ * 支持两种节点定义模式：
+ * - **Data-driven**: Set `items` / `items-json` attribute.
+ *   **数据驱动**：设置 `items` / `items-json` 属性。
+ * - **DOM-defined**: Place `<aithe-timeline-item>` children in the default slot.
+ *   **DOM 定义**：在默认插槽中放置 `<aithe-timeline-item>` 子元素。
+ *
+ * @slot - Default slot for `aithe-timeline-item` elements (DOM-defined mode). aithe-timeline-item 时间线节点元素（DOM 定义模式）。
+ *
+ * @example Data-driven mode / 数据驱动模式
+ * ```html
+ * <aithe-timeline
+ *   items='[{"content":"Step 1","timestamp":"09:00","type":"primary"},{"content":"Step 2","timestamp":"11:30","type":"success"}]'
+ * ></aithe-timeline>
+ * ```
+ *
+ * @example DOM-defined mode / DOM 定义模式
+ * ```html
+ * <aithe-timeline reverse>
+ *   <aithe-timeline-item timestamp="2024-01-01" type="primary">Step 1</aithe-timeline-item>
+ *   <aithe-timeline-item timestamp="2024-01-02" type="success">Step 2</aithe-timeline-item>
+ * </aithe-timeline>
+ * ```
+ */
+let AitheTimeline = class AitheTimeline extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of timeline items (parsed into `items`). 时间线节点的 JSON 字符串（解析为 `items`）。 */
+        this.itemsJson = '';
+        /** Array of timeline items (prefer this over `itemsJson` in JS). 时间线节点数组（在 JS 中优先使用此属性而非 `itemsJson`）。 */
+        this.items = [];
+        /** Whether to reverse the order of timeline items. 是否反转时间线节点顺序。 */
+        this.reverse = false;
+        this.hasSlotItems = false;
+        this.onSlotChange = () => {
+            const slotItems = this.querySelectorAll('aithe-timeline-item');
+            this.hasSlotItems = slotItems.length > 0;
+            this.syncOrder();
+        };
+        this.syncOrder = () => {
+            const items = Array.from(this.querySelectorAll('aithe-timeline-item'));
+            let index = 0;
+            for (const item of items) {
+                item.style.order = this.reverse ? String(items.length - index) : String(index + 1);
+                index++;
+            }
+        };
+    }
+    willUpdate(changed) {
+        if (changed.has('itemsJson') && this.itemsJson) {
+            try {
+                this.items = JSON.parse(this.itemsJson);
+            }
+            catch {
+                this.items = [];
+            }
+        }
+    }
+    get resolvedItems() {
+        const list = this.items ?? [];
+        return this.reverse ? [...list].reverse() : list;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .timeline-item {
+        position: relative;
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr);
+        gap: var(--aithe-space-4);
+      }
+
+      .timeline-item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        top: 18px;
+        left: 9px;
+        bottom: -18px;
+        width: 2px;
+        background: var(--aithe-color-border);
+      }
+
+      .dot {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--aithe-color-surface-elevated);
+        border: 2px solid var(--aithe-color-border-strong);
+        color: var(--aithe-color-text-muted);
+        font-size: 10px;
+        box-shadow: 0 0 0 4px var(--aithe-color-bg);
+      }
+
+      .dot.primary {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+      }
+
+      .dot.success {
+        border-color: var(--aithe-success-6);
+        color: var(--aithe-success-6);
+      }
+
+      .dot.warning {
+        border-color: var(--aithe-warning-6);
+        color: var(--aithe-warning-6);
+      }
+
+      .dot.danger {
+        border-color: var(--aithe-danger-6);
+        color: var(--aithe-danger-6);
+      }
+
+      .content {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-bottom: var(--aithe-space-6);
+      }
+
+      .timestamp {
+        color: var(--aithe-color-text-subtle);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    updated(changed) {
+        if (changed.has('reverse')) {
+            this.syncOrder();
+        }
+    }
+    renderItem(item) {
+        const typeClass = item.type && item.type !== 'default' ? item.type : '';
+        return html `
+      <div class="timeline-item">
+        <span class="dot ${typeClass}">${item.dot || ''}</span>
+        <div class="content">
+          ${item.content}
+          ${item.timestamp
+            ? html `
+                <span class="timestamp">${item.timestamp}</span>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        if (this.hasSlotItems) {
+            return html `
+        <slot @slotchange=${this.onSlotChange}></slot>
+      `;
+        }
+        if (this.items.length > 0) {
+            return html `
+        ${this.resolvedItems.map((item) => this.renderItem(item))}
+      `;
+        }
+        return html `
+      <slot @slotchange=${this.onSlotChange}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'items' })
+], AitheTimeline.prototype, "itemsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTimeline.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTimeline.prototype, "reverse", void 0);
+__decorate([
+    state()
+], AitheTimeline.prototype, "hasSlotItems", void 0);
+AitheTimeline = __decorate([
+    customElement('aithe-timeline')
+], AitheTimeline);
+export { AitheTimeline };

package/dist/components/data/tree-menu.d.ts

@@ -1,7 +1,7 @@
 import { nothing } from 'lit';
 import type { TemplateResult } from 'lit';
 import { AitheElement } from '../../core/aithe-element';
-import type { AitheTreeNodeMeta, AitheSidebarItemFilter } from '../../core/types';
+import type { AitheTreeNodeMeta, AitheTreeNodeFilter } from '../../core/types';
 /**
  * Data-driven tree menu with menu-style active highlighting and expand/collapse.
  * 数据驱动的树形菜单，支持菜单样式高亮和展开/折叠。
@@ -27,12 +27,20 @@ export declare class AitheTreeMenu extends AitheElement {
     expandAll: boolean;
     /** Layout direction: vertical (stacked) or horizontal (inline). 布局方向：垂直（堆叠）或水平（行内）。 */
     direction: 'vertical' | 'horizontal';
+    /** Whether the tree menu supports collapse/expand toggle. 树菜单是否支持伸缩切换。 */
+    collapsible: boolean;
+    /** Whether the tree menu is currently collapsed. 树菜单当前是否收起。 */
+    collapsed: boolean;
+    /** Width when collapsed (CSS value). 收起时的宽度。 */
+    collapsedWidth: string;
+    /** Width when expanded (CSS value). 展开时的宽度。 */
+    expandedWidth: string;
     /**
      * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
      * Useful for permission-based access control.
      * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
      */
-    itemFilter: AitheSidebarItemFilter | null;
+    itemFilter: AitheTreeNodeFilter | null;
     /**
      * Custom item renderer. When provided, this function is called for each leaf item
      * and its return value is rendered inside the `<button>` element, replacing the
@@ -53,10 +61,12 @@ export declare class AitheTreeMenu extends AitheElement {
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
+    private applyWidth;
     private collectKeys;
     private isGroupActive;
     private toggleExpand;
     private selectItem;
+    private renderIcon;
     private renderItems;
     render(): TemplateResult<1>;
 }

package/dist/components/data/tree-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-menu.d.ts","sourceRoot":"","sources":["../../../src/components/data/tree-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAI7E;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,yFAAyF;IACzC,SAAS,SAAM;IAC/D,0GAA0G;IAC1E,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAChE,oDAAoD;IACxB,MAAM,SAAM;IACxC,6DAA6D;IACP,SAAS,UAAS;IACxE,uFAAuF;IAC3D,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAE9E;;;;OAIG;IAC6B,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAEjF;;;;;;;;;;OAUG;IAC6B,YAAY,EACxC,CAAC,CAAC,IAAI,EAAE,iBAAiB,KAAK,cAAc,GAAG,OAAO,OAAO,CAAC,GAC9D,IAAI,CAAQ;IAEP,OAAO,CAAC,QAAQ,CAAqB;IAE9C,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAKpC;IAEO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyKpB;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;IAMtD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAgFnB,MAAM;CAQP"}
+{"version":3,"file":"tree-menu.d.ts","sourceRoot":"","sources":["../../../src/components/data/tree-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAI1E;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,yFAAyF;IACzC,SAAS,SAAM;IAC/D,0GAA0G;IAC1E,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAChE,oDAAoD;IACxB,MAAM,SAAM;IACxC,6DAA6D;IACP,SAAS,UAAS;IACxE,uFAAuF;IAC3D,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAC9E,0EAA0E;IAC7C,WAAW,UAAS;IACjD,+DAA+D;IACnB,SAAS,UAAS;IAC9D,gDAAgD;IACU,cAAc,SAAU;IAClF,+CAA+C;IACU,aAAa,SAAW;IAEjF;;;;OAIG;IAC6B,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAE9E;;;;;;;;;;OAUG;IAC6B,YAAY,EACxC,CAAC,CAAC,IAAI,EAAE,iBAAiB,KAAK,cAAc,GAAG,OAAO,OAAO,CAAC,GAC9D,IAAI,CAAQ;IAEP,OAAO,CAAC,QAAQ,CAAqB;IAE9C,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAkOpB;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;IAStD,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,WAAW;IAsEnB,MAAM;CAQP"}