@aithe/aithe-ui 26.2.3 → 26.3.1

package/dist/components/display/desc.js

@@ -0,0 +1,363 @@
+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 AitheDesc — description list component / AitheDesc — 描述列表组件
+ * @description A description list component that displays key-value pairs in a structured table-like layout.
+ *              Supports border mode, column count, title, extra actions, direction control, and rowspan.
+ *              AitheDesc 描述列表组件，以结构化的类表格布局展示键值对。
+ *              支持边框模式、列数、标题、额外操作、方向控制和跨行合并。
+ *
+ * @slot title - Custom title content. 自定义标题内容。
+ * @slot extra - Extra action content in the header. 头部额外操作内容。
+ * @slot (default) - Description items (`<aithe-desc-item>`). 描述条目（`<aithe-desc-item>`）。
+ *
+ * @csspart header - The header container. 头部容器。
+ * @csspart body - The body container. 主体容器。
+ *
+ * @fires aithe-desc-click - Fired when the description list is clicked. 点击描述列表时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-desc title="User Info" border>
+ *   <aithe-desc-item label="Name">John Doe</aithe-desc-item>
+ *   <aithe-desc-item label="Age">30</aithe-desc-item>
+ *   <aithe-desc-item label="Email">john@example.com</aithe-desc-item>
+ * </aithe-desc>
+ * ```
+ */
+import { css, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { customElement, property } from 'lit/decorators.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheElement } from '../../core/aithe-element';
+import { filterFactory } from '../../core/filter';
+let AitheDesc = class AitheDesc extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Title text displayed in the header. 头部标题文本。 */
+        this.title = '';
+        /** Number of columns for the description layout. 描述布局的列数。 */
+        this.column = 1;
+        /** Whether to show border. 是否显示边框。 */
+        this.border = false;
+        /** Layout direction: horizontal (label left of content) or vertical (label above content). 布局方向：horizontal（标签在内容左侧）或 vertical（标签在内容上方）。 */
+        this.direction = 'horizontal';
+        /** Size of the description list. 描述列表的尺寸。 */
+        this.size = 'md';
+        /** Global label width for all items. 全局标签宽度。 */
+        this.labelWidth = '150px';
+        /** Whether to show the title header. When false, the header row is hidden even if title or extra slot is set. 是否显示标题头。为 false 时隐藏标题行。 */
+        this.showTitle = true;
+        /** Maximum number of visible rows. Items beyond this limit are hidden. 0 means no limit. 最大可见行数。超出部分隐藏。0 表示不限制。 */
+        this.maxRows = 0;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        font-family: var(--aithe-font-family);
+        color: var(--aithe-color-text);
+        border-radius: var(--aithe-radius-md, 6px);
+        overflow: hidden;
+      }
+
+      .desc-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--aithe-space-3, 12px) 0;
+        font-size: var(--aithe-font-size-base);
+        font-weight: var(--aithe-font-weight-medium, 500);
+      }
+
+      .desc-header-title {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .desc-header-extra {
+        flex-shrink: 0;
+        margin-left: var(--aithe-space-3, 12px);
+      }
+
+      .desc-body {
+        display: grid;
+        border: 1px solid var(--aithe-color-border, #e5e6eb);
+        border-radius: var(--aithe-radius-md, 6px);
+        overflow: hidden;
+      }
+
+      .desc-body.no-border {
+        border: none;
+      }
+
+      .desc-cell.vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .desc-cell.vertical .desc-cell-content {
+        flex: 1;
+      }
+
+      .desc-cell-label {
+        display: flex;
+        align-items: center;
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text-secondary);
+        line-height: 1.5;
+        box-sizing: border-box;
+        background: var(--aithe-fill-2, #f0f1f3);
+        font-weight: 500;
+        min-width: 80px;
+        border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
+        border-right: 1px solid var(--aithe-color-border, #e5e6eb);
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .desc-cell-label.no-border {
+        border: none;
+      }
+
+      .desc-cell-label.is-bordered {
+        background: var(--aithe-fill-2, #f0f1f3);
+      }
+
+      .desc-cell-content {
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text);
+        padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
+        line-height: 1.5;
+        min-width: 0;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
+        width: 100%;
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .desc-cell-content.is-bordered:hover {
+        background: var(--aithe-color-surface-hover);
+      }
+
+      .desc-cell-content.no-border {
+        border: none;
+      }
+
+      /* Vertical direction */
+      .desc-cell.vertical .desc-cell-label {
+        border-right: none;
+      }
+
+      /* Size variants */
+      :host([size='sm']) .desc-cell-label,
+      :host([size='sm']) .desc-cell-content {
+        padding: var(--aithe-space-1, 4px) var(--aithe-space-2, 8px);
+        font-size: var(--aithe-font-size-xs);
+      }
+
+      :host([size='lg']) .desc-cell-label,
+      :host([size='lg']) .desc-cell-content {
+        padding: var(--aithe-space-3, 12px) var(--aithe-space-4, 16px);
+        font-size: var(--aithe-font-size-base);
+      }
+    `,
+    ]; }
+    _getItems() {
+        return Array.from(this.children).filter((child) => child.tagName === 'AITHE-DESC-ITEM');
+    }
+    /**
+     * Layout items into a grid, resolving colspan and rowspan.
+     * Uses a 2D grid approach: place items left-to-right, top-to-bottom,
+     * skipping cells occupied by rowspan from previous rows.
+     */
+    _layoutCells(items) {
+        const column = Math.max(1, this.column);
+        const isVertical = this.direction === 'vertical';
+        const cells = [];
+        const gridCols = isVertical ? column : column * 2;
+        const occupied = new Set();
+        let currentRow = 0;
+        let currentCol = 0;
+        for (const item of items) {
+            const colspan = Math.min(Math.max(1, item.span), column);
+            const rowspan = Math.max(1, item.rowspan);
+            const gridColspan = isVertical ? colspan : colspan * 2;
+            [currentRow, currentCol] = this._findNextPosition(occupied, gridCols, currentRow, currentCol);
+            const col = currentCol;
+            const row = currentRow;
+            this._markOccupied(occupied, row, col, rowspan, gridColspan);
+            cells.push({ item, col, row, colspan, rowspan });
+            currentCol += gridColspan;
+            if (currentCol >= gridCols) {
+                currentCol = 0;
+                currentRow++;
+            }
+        }
+        return cells;
+    }
+    _findNextPosition(occupied, gridCols, row, col) {
+        while (occupied.has(`${row},${col}`)) {
+            col++;
+            if (col >= gridCols) {
+                col = 0;
+                row++;
+            }
+        }
+        return [row, col];
+    }
+    _markOccupied(occupied, row, col, rowspan, gridColspan) {
+        for (let r = 0; r < rowspan; r++) {
+            for (let c = 0; c < gridColspan; c++) {
+                occupied.add(`${row + r},${col + c}`);
+            }
+        }
+    }
+    _getTotalRows(cells) {
+        let maxRow = 0;
+        for (const cell of cells) {
+            maxRow = Math.max(maxRow, cell.row + cell.rowspan);
+        }
+        return maxRow;
+    }
+    _getItemContent(item) {
+        if (!item.content) {
+            return Array.from(item.childNodes)
+                .filter((n) => n.nodeType !== Node.COMMENT_NODE && !(n instanceof HTMLElement && n.hasAttribute('slot')))
+                .map((n) => {
+                if (n instanceof HTMLElement)
+                    return n.outerHTML;
+                return n.textContent ?? '';
+            })
+                .join('');
+        }
+        return String(item.filter ? filterFactory.format(item.content, item.filter) : item.content);
+    }
+    render() {
+        const column = Math.max(1, this.column);
+        const isBordered = this.border;
+        const isVertical = this.direction === 'vertical';
+        const items = this._getItems();
+        const cells = this._layoutCells(items);
+        const gridTemplateColumns = isVertical
+            ? `repeat(${column}, 1fr)`
+            : `repeat(${column}, ${this.labelWidth || '150px'} 1fr)`;
+        // Apply maxRows: hide rows beyond the limit
+        const maxRowLimit = Math.max(0, this.maxRows);
+        const totalRows = this._getTotalRows(cells);
+        const cellElements = cells
+            .filter((cell) => maxRowLimit === 0 || cell.row < maxRowLimit)
+            .map((cell) => {
+            const item = cell.item;
+            const labelStyle = [
+                !isVertical && this.labelWidth ? `width:${this.labelWidth}` : '',
+                `text-align:${item.labelAlign}`,
+            ].filter(Boolean).join(';');
+            const contentStyle = [
+                item.width ? `width:${item.width}` : '',
+                item.minWidth ? `min-width:${item.minWidth}` : '',
+                `text-align:${item.align}`,
+            ].filter(Boolean).join(';');
+            const isLastRow = cell.row + cell.rowspan >= totalRows;
+            const labelClasses = classMap({
+                'desc-cell-label': true,
+                'no-border': !isBordered || isLastRow,
+                'is-bordered': isBordered && isLastRow,
+            });
+            const contentClasses = classMap({
+                'desc-cell-content': true,
+                'no-border': !isBordered || isLastRow,
+                'is-bordered': isBordered,
+            });
+            const contentHtml = this._getItemContent(item);
+            if (isVertical) {
+                const gridColumn = `${cell.col + 1} / span ${cell.colspan}`;
+                const gridRow = `${cell.row + 1} / span ${cell.rowspan}`;
+                return html `
+          <div
+            class="desc-cell vertical ${isBordered ? '' : 'no-border'}"
+            style="grid-column:${gridColumn};grid-row:${gridRow};"
+            part="cell"
+          >
+            <div class="${labelClasses}" part="label" style=${labelStyle || nothing}>
+              ${item.label}
+            </div>
+            <div class="${contentClasses}" part="content" style=${contentStyle || nothing}>
+              ${contentHtml ? unsafeHTML(contentHtml) : nothing}
+            </div>
+          </div>
+        `;
+            }
+            const labelCol = `${cell.col + 1}`;
+            const contentColStart = cell.col + 2;
+            const contentColSpan = cell.colspan * 2 - 1;
+            const gridRow = `${cell.row + 1} / span ${cell.rowspan}`;
+            return html `
+        <div class="${labelClasses}" part="label"
+          style="grid-column:${labelCol};grid-row:${gridRow};${labelStyle || ''}"
+        >${item.label}</div>
+        <div class="${contentClasses}" part="content"
+          style="grid-column:${contentColStart} / span ${contentColSpan};grid-row:${gridRow};${contentStyle || ''}"
+        >${contentHtml ? unsafeHTML(contentHtml) : nothing}</div>
+      `;
+        });
+        return html `
+      ${this.showTitle && (this.title || this.querySelector('[slot="extra"]'))
+            ? html `
+            <div class="desc-header" part="header">
+              <div class="desc-header-title">
+                <slot name="title">${this.title}</slot>
+              </div>
+              <div class="desc-header-extra">
+                <slot name="extra"></slot>
+              </div>
+            </div>
+          `
+            : nothing}
+      <div
+        class="desc-body ${isBordered ? '' : 'no-border'}"
+        part="body"
+        style="grid-template-columns:${gridTemplateColumns};"
+        @slotchange=${() => this.requestUpdate()}
+      >
+        ${cellElements}
+      </div>
+      <slot style="display:none;" @slotchange=${() => this.requestUpdate()}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheDesc.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], AitheDesc.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDesc.prototype, "border", void 0);
+__decorate([
+    property({ type: String })
+], AitheDesc.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], AitheDesc.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'label-width', type: String })
+], AitheDesc.prototype, "labelWidth", void 0);
+__decorate([
+    property({ attribute: 'show-title', type: Boolean })
+], AitheDesc.prototype, "showTitle", void 0);
+__decorate([
+    property({ attribute: 'max-rows', type: Number })
+], AitheDesc.prototype, "maxRows", void 0);
+AitheDesc = __decorate([
+    customElement('aithe-desc')
+], AitheDesc);
+export { AitheDesc };

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

@@ -0,0 +1,51 @@
+/**
+ * @file AitheDetailBox — detail card display / AitheDetailBox — 详情卡片展示
+ * @description AitheDetailBox renders a card with name, tags, status, content
+ *              and actions at the bottom with a separator.
+ *              AitheDetailBox 渲染卡片：上方 name/tags/status/content，底部 actions（有分割线）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region at the bottom. 底部操作按钮区域。
+ * @slot content - Content region. 内容区域。
+ * @slot - Default slot, rendered inside the content region. 默认插槽，渲染在内容区域内。
+ *
+ * @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 actions region container. 操作区域容器。
+ * @csspart content - The content 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-detail-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="status">Active</span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ *   <span slot="content">Detailed description goes here.</span>
+ * </aithe-detail-box>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheMiniBox } from './mini-box';
+export declare class AitheDetailBox extends AitheMiniBox {
+    private _hasContent;
+    private _hasActions;
+    private _checkSlot;
+    firstUpdated(): void;
+    private _onSlotChange;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-detail-box': AitheDetailBox;
+    }
+}
+//# sourceMappingURL=detail-box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"detail-box.d.ts","sourceRoot":"","sources":["../../../src/components/display/detail-box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,qBACa,cAAe,SAAQ,YAAY;IACrC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,UAAU;IAQT,YAAY,IAAI,IAAI;IAK7B,OAAO,CAAC,aAAa;IAIrB,gBAAyB,MAAM,0DA0D7B;IAEO,MAAM,IAAI,cAAc;CAwBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,157 @@
+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 AitheDetailBox — detail card display / AitheDetailBox — 详情卡片展示
+ * @description AitheDetailBox renders a card with name, tags, status, content
+ *              and actions at the bottom with a separator.
+ *              AitheDetailBox 渲染卡片：上方 name/tags/status/content，底部 actions（有分割线）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region at the bottom. 底部操作按钮区域。
+ * @slot content - Content region. 内容区域。
+ * @slot - Default slot, rendered inside the content region. 默认插槽，渲染在内容区域内。
+ *
+ * @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 actions region container. 操作区域容器。
+ * @csspart content - The content 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-detail-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="status">Active</span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ *   <span slot="content">Detailed description goes here.</span>
+ * </aithe-detail-box>
+ * ```
+ */
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { AitheMiniBox } from './mini-box';
+let AitheDetailBox = class AitheDetailBox extends AitheMiniBox {
+    constructor() {
+        super(...arguments);
+        this._hasContent = false;
+        this._hasActions = false;
+    }
+    _checkSlot(name) {
+        const slot = this.renderRoot.querySelector(`slot[name="${name}"]`);
+        if (!slot)
+            return false;
+        return slot.assignedNodes().some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent ?? '').trim().length > 0);
+    }
+    firstUpdated() {
+        this._hasContent = this._checkSlot('content');
+        this._hasActions = this._checkSlot('actions');
+    }
+    _onSlotChange() {
+        this._hasContent = this._checkSlot('content');
+        this._hasActions = this._checkSlot('actions');
+    }
+    static { this.styles = [
+        ...AitheMiniBox.styles,
+        css `
+      .box-inner {
+        align-items: stretch;
+      }
+
+      .detail-body {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-2, 8px);
+        padding: var(--aithe-space-1, 4px) 0;
+      }
+
+      .detail-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .detail-status {
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .detail-tags {
+        display: flex;
+        gap: var(--aithe-space-1, 4px);
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
+
+      .detail-content {
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text-secondary);
+        word-break: break-word;
+      }
+
+      .detail-content[hidden] {
+        display: none;
+      }
+
+      .detail-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+        flex-wrap: wrap;
+        padding-top: var(--aithe-space-2, 8px);
+        border-top: 1px solid var(--aithe-color-border);
+      }
+
+      .detail-actions[hidden] {
+        display: none;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="box-inner" @click=${this.handleBoxClick}>
+        ${this.renderCheckbox()}
+        <div class="detail-body">
+          <div class="detail-top">
+            <slot name="name"></slot>
+            <div class="detail-status" part="status">
+              <slot name="status"></slot>
+            </div>
+          </div>
+          <div class="detail-tags">
+            <slot name="tags"></slot>
+          </div>
+          <div class="detail-content" part="content" ?hidden=${!this._hasContent}>
+            <slot name="content" @slotchange=${this._onSlotChange}></slot>
+          </div>
+          <div class="detail-actions" part="actions" ?hidden=${!this._hasActions}>
+            <slot name="actions" @slotchange=${this._onSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], AitheDetailBox.prototype, "_hasContent", void 0);
+__decorate([
+    state()
+], AitheDetailBox.prototype, "_hasActions", void 0);
+AitheDetailBox = __decorate([
+    customElement('aithe-detail-box')
+], AitheDetailBox);
+export { AitheDetailBox };