@aithe/aithe-ui 26.2.3 → 26.3.1

package/dist/components/data/tree.js

@@ -0,0 +1,269 @@
+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 { translateNodeLabel, onAitheLocaleChange } from '../../styles/i18n';
+/**
+ * Recursive tree view with expand/collapse and optional checkbox support.
+ * 递归树形视图，支持展开/折叠和可选的复选框功能。
+ *
+ * @fires aithe-check      - Emitted when a checkbox is toggled with `{ checked }`. 复选框切换时发出 `{ checked }`。
+ * @fires aithe-node-click - Emitted when a node label is clicked with `{ node }`. 节点标签被点击时发出 `{ node }`。
+ *
+ * @example
+ * ```html
+ * <aithe-tree
+ *   data='[{"label":"Root","id":"root","children":[{"label":"Child","id":"child"}]}]'
+ *   checkable
+ *   expand-all
+ * ></aithe-tree>
+ * ```
+ */
+let AitheTree = class AitheTree extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of tree node data. 树节点数据的 JSON 字符串。 */
+        this.data = '[]';
+        /** Display title for the tree (shown as tooltip). 树形视图的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the tree title. 在树标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether nodes show checkboxes for selection. 节点是否显示复选框以供选择。 */
+        this.checkable = false;
+        /** Whether all nodes are expanded by default. 是否默认展开所有节点。 */
+        this.expandAll = false;
+        this.expanded = new Set();
+        this.checked = new Set();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unsubscribeLocale = onAitheLocaleChange(() => this.requestUpdate());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribeLocale?.();
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .tree-header {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        margin-bottom: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .tree-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .tree,
+      .branch {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .branch {
+        margin-left: var(--aithe-space-5);
+        padding-left: var(--aithe-space-3);
+        border-left: 1px solid var(--aithe-color-border);
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+      }
+
+      .toggle,
+      .label {
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      .label {
+        min-height: 32px;
+        padding: 0 var(--aithe-space-2);
+        border-radius: var(--aithe-radius-md);
+      }
+
+      .label:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .label.primary {
+        color: var(--aithe-primary-7);
+      }
+      .label.success {
+        color: var(--aithe-success-7);
+      }
+      .label.warning {
+        color: var(--aithe-warning-7);
+      }
+      .label.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      .node-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    updated(changed) {
+        if (changed.has('expandAll') && this.expandAll) {
+            this.expanded = new Set(this.collectValues(this.parsedData));
+        }
+    }
+    get parsedData() {
+        try {
+            return JSON.parse(this.data);
+        }
+        catch {
+            return [];
+        }
+    }
+    collectValues(nodes) {
+        return nodes.flatMap((node) => [
+            node.id,
+            ...(node.children ? this.collectValues(node.children) : []),
+        ]);
+    }
+    toggleExpand(value) {
+        const next = new Set(this.expanded);
+        if (next.has(value)) {
+            next.delete(value);
+        }
+        else {
+            next.add(value);
+        }
+        this.expanded = next;
+    }
+    toggleCheck(value, checked) {
+        const next = new Set(this.checked);
+        if (checked) {
+            next.add(value);
+        }
+        else {
+            next.delete(value);
+        }
+        this.checked = next;
+        this.emit('aithe-check', { checked: Array.from(this.checked) });
+    }
+    renderNodes(nodes) {
+        return nodes.map((node) => {
+            const hasChildren = Boolean(node.children?.length);
+            const expanded = this.expanded.has(node.id);
+            const toggleSymbol = expanded ? '⌄' : '›';
+            const intentClass = node.variant && node.variant !== 'default' ? node.variant : '';
+            const nodeIcon = node.icon
+                ? html `
+            <aithe-icon class="node-icon" name=${node.icon} size="16"></aithe-icon>
+          `
+                : nothing;
+            const nodeContent = this.renderer
+                ? this.renderer(node)
+                : html `
+            <span style="display:inline-flex;align-items:center;gap:var(--aithe-space-2);">
+              ${nodeIcon}${translateNodeLabel(node)}
+            </span>
+          `;
+            const toggleBtn = hasChildren
+                ? html `
+            <button class="toggle" type="button" @click=${() => this.toggleExpand(node.id)}>
+              ${toggleSymbol}
+            </button>
+          `
+                : html `
+            <span style="width:18px;">${nothing}</span>
+          `;
+            const checkbox = this.checkable
+                ? html `
+            <input
+              type="checkbox"
+              ?checked=${this.checked.has(node.id)}
+              ?disabled=${node.disabled}
+              @change=${(event) => this.toggleCheck(node.id, event.currentTarget.checked)}
+            />
+          `
+                : null;
+            return html `
+        <div class="tree">
+          <div class="row">
+            ${toggleBtn} ${checkbox}
+            <button
+              class="label ${intentClass}"
+              type="button"
+              ?disabled=${node.disabled}
+              @click=${() => this.emit('aithe-node-click', { node })}
+            >
+              ${nodeContent}
+            </button>
+          </div>
+          ${hasChildren && expanded
+                ? html `
+                <div class="branch">${this.renderNodes(node.children ?? [])}</div>
+              `
+                : null}
+        </div>
+      `;
+        });
+    }
+    render() {
+        const headerIcon = this.icon
+            ? html `
+          <aithe-icon class="tree-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        const header = this.icon || this.title
+            ? html `
+            <div class="tree-header">${headerIcon}${this.title}</div>
+          `
+            : nothing;
+        return html `
+      <div class="tree">${header}${this.renderNodes(this.parsedData)}</div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTree.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], AitheTree.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheTree.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTree.prototype, "checkable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'expand-all' })
+], AitheTree.prototype, "expandAll", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTree.prototype, "renderer", void 0);
+__decorate([
+    state()
+], AitheTree.prototype, "expanded", void 0);
+__decorate([
+    state()
+], AitheTree.prototype, "checked", void 0);
+AitheTree = __decorate([
+    customElement('aithe-tree')
+], AitheTree);
+export { AitheTree };

package/dist/components/display/AGENTS.md

@@ -1,4 +1,4 @@
-# src/components/display/ — 展示组件（7个）
+# src/components/display/ — 展示组件（14个）
 
 ## 组件列表
 
@@ -11,6 +11,9 @@
 | `code-editor.ts`     | `<aithe-code-editor>`     | 代码编辑器，语法高亮         |
 | `markdown-editor.ts` | `<aithe-markdown-editor>` | Markdown 编辑器，实时预览    |
 | `label.ts`           | `<aithe-label>`           | 标签文本，支持尺寸和颜色变体 |
+| `profile.ts`         | `<aithe-profile>`         | 档案展示组件                 |
+| `desc.ts`            | `<aithe-desc>`            | 描述列表容器                 |
+| `desc-item.ts`       | `<aithe-desc-item>`       | 描述列表条目                 |
 
 ## 编码规范
 
@@ -23,6 +26,6 @@
 ## 关键约定
 
 - `aithe-markdown` 支持通过 `src` 属性加载外部 Markdown 文件
-- `aithe-code-editor` 通过 `language` 属性指定高亮语言
+- `aithe-code-editor` 通过 `language` 属性指定高亮语言，在原生 textarea 的 input 事件中调用 `event.stopPropagation()`
 - `aithe-carousel` 支持自动轮播（`autoplay` 属性）和指示器
 - 新增组件需同步更新 `src/index.ts` 和 `docs/api/display/`

package/dist/components/display/animated-image.js

@@ -0,0 +1,98 @@
+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 } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Animated image display with pan/zoom motion effect.
+ * 带平移/缩放动效的动画图片展示组件。
+ *
+ * @slot - Default slot for fallback content when `src` is empty. `src` 为空时的回退内容插槽。
+ *
+ * @example
+ * ```html
+ * <aithe-animated-image src="hero.jpg" loop speed="2" play></aithe-animated-image>
+ * ```
+ */
+let AitheAnimatedImage = class AitheAnimatedImage extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Image source URL. 图片源 URL。 */
+        this.src = '';
+        /** Whether the animation loops infinitely. 动画是否无限循环。 */
+        this.loop = true;
+        /** Animation speed multiplier (higher = faster). 动画速度倍数（越高越快）。 */
+        this.speed = 1;
+        /** Whether the animation is currently playing. 动画是否正在播放。 */
+        this.play = true;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        overflow: hidden;
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        display: block;
+        transform-origin: center;
+        animation-name: aithe-pan-zoom;
+        animation-timing-function: ease-in-out;
+        animation-direction: alternate;
+        animation-fill-mode: both;
+      }
+
+      @keyframes aithe-pan-zoom {
+        from {
+          transform: scale(1) translate3d(0, 0, 0);
+        }
+        to {
+          transform: scale(1.08) translate3d(1.5%, -1.5%, 0);
+        }
+      }
+    `,
+    ]; }
+    render() {
+        if (!this.src) {
+            return html `
+        <slot></slot>
+      `;
+        }
+        const duration = `${6 / Math.max(0.25, this.speed)}s`;
+        const iterationCount = this.loop ? 'infinite' : '1';
+        const playState = this.play ? 'running' : 'paused';
+        return html `
+      <img
+        src=${this.src}
+        alt=""
+        style=${`animation-duration:${duration};animation-iteration-count:${iterationCount};animation-play-state:${playState};`}
+      />
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAnimatedImage.prototype, "src", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAnimatedImage.prototype, "loop", void 0);
+__decorate([
+    property({ type: Number })
+], AitheAnimatedImage.prototype, "speed", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAnimatedImage.prototype, "play", void 0);
+AitheAnimatedImage = __decorate([
+    customElement('aithe-animated-image')
+], AitheAnimatedImage);
+export { AitheAnimatedImage };

package/dist/components/display/brief-box.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file AitheBriefBox — brief card display / AitheBriefBox — 简要卡片展示
+ * @description AitheBriefBox renders a compact card with name, tags, status on the left
+ *              and actions on the right (visible on hover/focus).
+ *              AitheBriefBox 渲染紧凑卡片：左侧 name/tags/status，右侧 actions（hover 显示）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region (visible on hover/focus). 操作按钮区域（hover/focus 时显示）。
+ *
+ * @csspart select - The select region container. 选择区域容器。
+ * @csspart name - The name region container. 名称区域容器。
+ * @csspart tags - The tags region container. 标签区域容器。
+ * @csspart status - The status region container. 状态区域容器。
+ * @csspart actions - The action buttons region container. 操作按钮区域容器。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-brief-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="status">Active</span>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ * </aithe-brief-box>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheMiniBox } from './mini-box';
+export declare class AitheBriefBox extends AitheMiniBox {
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-brief-box': AitheBriefBox;
+    }
+}
+//# sourceMappingURL=brief-box.d.ts.map

package/dist/components/display/brief-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brief-box.d.ts","sourceRoot":"","sources":["../../../src/components/display/brief-box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,qBACa,aAAc,SAAQ,YAAY;IAC7C,gBAAyB,MAAM,0DAkD7B;IAEO,MAAM,IAAI,cAAc;CAqBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/display/brief-box.js

@@ -0,0 +1,117 @@
+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 AitheBriefBox — brief card display / AitheBriefBox — 简要卡片展示
+ * @description AitheBriefBox renders a compact card with name, tags, status on the left
+ *              and actions on the right (visible on hover/focus).
+ *              AitheBriefBox 渲染紧凑卡片：左侧 name/tags/status，右侧 actions（hover 显示）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region (visible on hover/focus). 操作按钮区域（hover/focus 时显示）。
+ *
+ * @csspart select - The select region container. 选择区域容器。
+ * @csspart name - The name region container. 名称区域容器。
+ * @csspart tags - The tags region container. 标签区域容器。
+ * @csspart status - The status region container. 状态区域容器。
+ * @csspart actions - The action buttons region container. 操作按钮区域容器。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-brief-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="status">Active</span>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ * </aithe-brief-box>
+ * ```
+ */
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AitheMiniBox } from './mini-box';
+let AitheBriefBox = class AitheBriefBox extends AitheMiniBox {
+    static { this.styles = [
+        ...AitheMiniBox.styles,
+        css `
+      .brief-left {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      .brief-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .brief-tags {
+        display: flex;
+        gap: var(--aithe-space-1, 4px);
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
+
+      .brief-status-row {
+        display: flex;
+        align-items: center;
+      }
+
+      .brief-actions {
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--aithe-space-1, 4px);
+        flex-shrink: 0;
+        padding-left: var(--aithe-space-2, 8px);
+      }
+
+      .brief-actions ::slotted(*) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      :host(:hover) .brief-actions,
+      :host(:focus-within) .brief-actions {
+        display: flex;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="box-inner" @click=${this.handleBoxClick}>
+        ${this.renderCheckbox()}
+        <div class="brief-left">
+          <div class="brief-top">
+            <slot name="name"></slot>
+          </div>
+          <div class="brief-tags">
+            <slot name="tags"></slot>
+          </div>
+          <div class="brief-status-row">
+            <slot name="status"></slot>
+          </div>
+        </div>
+        <div class="brief-actions" part="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+AitheBriefBox = __decorate([
+    customElement('aithe-brief-box')
+], AitheBriefBox);
+export { AitheBriefBox };