@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/display/comparison.js

@@ -0,0 +1,132 @@
+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';
+import { t } from '../../styles/i18n';
+/**
+ * Before/after image comparison slider with adjustable split ratio.
+ * 前后对比图片滑块组件，支持可调节的分割比例。
+ *
+ * @slot before - Content for the "before" pane (falls back to `beforeSrc` image). "之前"面板内容（回退到 `beforeSrc` 图片）。
+ * @slot after  - Content for the "after" pane (falls back to `afterSrc` image). "之后"面板内容（回退到 `afterSrc` 图片）。
+ *
+ * @example
+ * ```html
+ * <aithe-comparison before="old.jpg" after="new.jpg" ratio="60"></aithe-comparison>
+ * ```
+ */
+let AitheComparison = class AitheComparison extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** URL of the "before" image. "之前"图片的 URL。 */
+        this.beforeSrc = '';
+        /** URL of the "after" image. "之后"图片的 URL。 */
+        this.afterSrc = '';
+        /** Split ratio percentage (0–100). 分割比例百分比（0–100）。 */
+        this.ratio = 50;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+        overflow: hidden;
+        border-radius: var(--aithe-container-radius-xl);
+      }
+
+      .wrap {
+        position: relative;
+        min-height: 280px;
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .pane,
+      .pane img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .pane {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      .pane img {
+        object-fit: cover;
+        display: block;
+      }
+
+      .before {
+        clip-path: inset(0 calc(100% - var(--aithe-ratio, 50%)) 0 0);
+      }
+
+      .after {
+        clip-path: inset(0 0 0 var(--aithe-ratio, 50%));
+      }
+
+      .slider {
+        position: absolute;
+        inset-inline: 0;
+        bottom: var(--aithe-space-4);
+        width: calc(100% - var(--aithe-space-8));
+        margin: 0 auto;
+      }
+    `,
+    ]; }
+    render() {
+        this.style.setProperty('--aithe-ratio', `${this.ratio}%`);
+        return html `
+      <div class="wrap">
+        <div class="pane before">
+          <slot name="before">
+            ${this.beforeSrc
+            ? html `
+                  <img src=${this.beforeSrc} alt=${t('display.comparison.beforeAlt')} />
+                `
+            : null}
+          </slot>
+        </div>
+        <div class="pane after">
+          <slot name="after">
+            ${this.afterSrc
+            ? html `
+                  <img src=${this.afterSrc} alt=${t('display.comparison.afterAlt')} />
+                `
+            : null}
+          </slot>
+        </div>
+        <input
+          class="slider"
+          type="range"
+          min="0"
+          max="100"
+          .value=${String(this.ratio)}
+          @input=${(event) => {
+            this.ratio = Number(event.currentTarget.value);
+        }}
+        />
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'before' })
+], AitheComparison.prototype, "beforeSrc", void 0);
+__decorate([
+    property({ type: String, attribute: 'after' })
+], AitheComparison.prototype, "afterSrc", void 0);
+__decorate([
+    property({ type: Number })
+], AitheComparison.prototype, "ratio", void 0);
+AitheComparison = __decorate([
+    customElement('aithe-comparison')
+], AitheComparison);
+export { AitheComparison };

package/dist/components/display/desc-item.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file AitheDescItem — description list item component / AitheDescItem — 描述列表项组件
+ * @description A single item in a description list, containing a label and a value.
+ *              AitheDescItem 描述列表中的单个条目，包含标签和值。
+ *
+ * @slot label - Custom label content. 自定义标签内容。
+ * @slot (default) - Value content. 值内容。
+ *
+ * @csspart label - The label cell container. 标签单元格容器。
+ * @csspart content - The content cell container. 内容单元格容器。
+ *
+ * @example
+ * ```html
+ * <aithe-desc-item label="Name">John Doe</aithe-desc-item>
+ * <aithe-desc-item label="Amount" content="1234.5" filter="amount"></aithe-desc-item>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheElement } from '../../core/aithe-element';
+export declare class AitheDescItem extends AitheElement {
+    /** Label text for the item. 条目标签文本。 */
+    label: string;
+    /** Column span for this item. 该条目占用的列数。 */
+    span: number;
+    /** Row span for this item. 该条目占用的行数。 */
+    rowspan: number;
+    /** Width of the content cell. 内容单元格宽度。 */
+    width: string;
+    /** Text alignment of the label. 标签文本对齐方式。 */
+    labelAlign: 'left' | 'center' | 'right';
+    /** Text alignment of the content. 内容文本对齐方式。 */
+    align: 'left' | 'center' | 'right';
+    /** Minimum width of the content cell. 内容单元格最小宽度。 */
+    minWidth: string;
+    /** Content value. When set, used instead of slot content. 内容值。设置后优先于 slot 内容使用。 */
+    content: string;
+    /** Filter expression for formatting the content value. 内容值的过滤器表达式。 */
+    filter: string;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+    private renderContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-desc-item': AitheDescItem;
+    }
+}
+//# sourceMappingURL=desc-item.d.ts.map

package/dist/components/display/desc-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desc-item.d.ts","sourceRoot":"","sources":["../../../src/components/display/desc-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,qBACa,aAAc,SAAQ,YAAY;IAC7C,uCAAuC;IACX,KAAK,SAAM;IAEvC,2CAA2C;IACf,IAAI,SAAK;IAErC,wCAAwC;IACZ,OAAO,SAAK;IAExC,0CAA0C;IACd,KAAK,SAAM;IAEvC,6CAA6C;IACjB,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAU;IAE7E,+CAA+C;IACnB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAU;IAExE,oDAAoD;IACA,QAAQ,SAAM;IAElE,mFAAmF;IACvD,OAAO,SAAM;IAEzC,sEAAsE;IAC1C,MAAM,SAAM;IAExC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAuCpB;IAEO,MAAM,IAAI,cAAc;IAuBjC,OAAO,CAAC,aAAa;CAQtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/display/desc-item.js

@@ -0,0 +1,150 @@
+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 AitheDescItem — description list item component / AitheDescItem — 描述列表项组件
+ * @description A single item in a description list, containing a label and a value.
+ *              AitheDescItem 描述列表中的单个条目，包含标签和值。
+ *
+ * @slot label - Custom label content. 自定义标签内容。
+ * @slot (default) - Value content. 值内容。
+ *
+ * @csspart label - The label cell container. 标签单元格容器。
+ * @csspart content - The content cell container. 内容单元格容器。
+ *
+ * @example
+ * ```html
+ * <aithe-desc-item label="Name">John Doe</aithe-desc-item>
+ * <aithe-desc-item label="Amount" content="1234.5" filter="amount"></aithe-desc-item>
+ * ```
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheElement } from '../../core/aithe-element';
+import { filterFactory } from '../../core/filter';
+let AitheDescItem = class AitheDescItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Label text for the item. 条目标签文本。 */
+        this.label = '';
+        /** Column span for this item. 该条目占用的列数。 */
+        this.span = 1;
+        /** Row span for this item. 该条目占用的行数。 */
+        this.rowspan = 1;
+        /** Width of the content cell. 内容单元格宽度。 */
+        this.width = '';
+        /** Text alignment of the label. 标签文本对齐方式。 */
+        this.labelAlign = 'left';
+        /** Text alignment of the content. 内容文本对齐方式。 */
+        this.align = 'left';
+        /** Minimum width of the content cell. 内容单元格最小宽度。 */
+        this.minWidth = '';
+        /** Content value. When set, used instead of slot content. 内容值。设置后优先于 slot 内容使用。 */
+        this.content = '';
+        /** Filter expression for formatting the content value. 内容值的过滤器表达式。 */
+        this.filter = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: contents;
+      }
+
+      .desc-item {
+        display: flex;
+        box-sizing: border-box;
+      }
+
+      .desc-item-label {
+        flex-shrink: 0;
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text-secondary);
+        line-height: 1.5;
+        box-sizing: border-box;
+      }
+
+      .desc-item-content {
+        flex: 1;
+        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;
+      }
+
+      .desc-item.bordered {
+        border-bottom: 1px solid var(--aithe-color-border, #e5e6eb);
+      }
+
+      .desc-item-label.bordered {
+        background: var(--aithe-fill-1, #f7f8fa);
+        border-right: 1px solid var(--aithe-color-border, #e5e6eb);
+      }
+    `,
+    ]; }
+    render() {
+        const labelStyle = [
+            `text-align:${this.labelAlign}`,
+        ].filter(Boolean).join(';');
+        const contentStyle = [
+            `text-align:${this.align}`,
+            this.width ? `width:${this.width}` : '',
+            this.minWidth ? `min-width:${this.minWidth}` : '',
+        ].filter(Boolean).join(';');
+        return html `
+      <div class="desc-item" part="item">
+        <div class="desc-item-label" part="label" style=${labelStyle || nothing}>
+          <slot name="label">${this.label}</slot>
+        </div>
+        <div class="desc-item-content" part="content" style=${contentStyle || nothing}>
+          ${this.renderContent()}
+        </div>
+      </div>
+    `;
+    }
+    renderContent() {
+        if (!this.content) {
+            return html `<slot></slot>`;
+        }
+        return html `
+      ${this.filter ? filterFactory.format(this.content, this.filter) : this.content}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], AitheDescItem.prototype, "span", void 0);
+__decorate([
+    property({ type: Number })
+], AitheDescItem.prototype, "rowspan", void 0);
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "labelAlign", void 0);
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "align", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-width' })
+], AitheDescItem.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], AitheDescItem.prototype, "filter", void 0);
+AitheDescItem = __decorate([
+    customElement('aithe-desc-item')
+], AitheDescItem);
+export { AitheDescItem };

package/dist/components/display/desc.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @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 { type TemplateResult } from 'lit';
+import { AitheElement } from '../../core/aithe-element';
+export declare class AitheDesc extends AitheElement {
+    /** Title text displayed in the header. 头部标题文本。 */
+    title: string;
+    /** Number of columns for the description layout. 描述布局的列数。 */
+    column: number;
+    /** Whether to show border. 是否显示边框。 */
+    border: boolean;
+    /** Border style: 'none' (no borders), 'full' (outer + all cell separators), 'row' (row separators only, no outer frame or column separators). 边框样式：'none'（无边框）、'full'（外框+所有单元格分隔线）、'row'（仅行分隔线，无外框和列分隔线）。 */
+    borderStyle: 'none' | 'full' | 'row';
+    /** Label background style: 'filled' (default gray), 'none' (transparent). 标签背景样式：'filled'（默认灰底）或 'none'（无背景）。 */
+    labelBackground: 'filled' | 'none';
+    /** Layout direction: horizontal (label left of content) or vertical (label above content). 布局方向：horizontal（标签在内容左侧）或 vertical（标签在内容上方）。 */
+    direction: 'horizontal' | 'vertical';
+    /** Size of the description list. 描述列表的尺寸。 */
+    size: 'sm' | 'md' | 'lg';
+    /** Global label width for all items. 全局标签宽度。 */
+    labelWidth: string;
+    /** Whether to show the title header. When false, the header row is hidden even if title or extra slot is set. 是否显示标题头。为 false 时隐藏标题行。 */
+    showTitle: boolean;
+    /** Maximum number of visible rows. Items beyond this limit are hidden. 0 means no limit. 最大可见行数。超出部分隐藏。0 表示不限制。 */
+    maxRows: number;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private _getItems;
+    /**
+     * 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.
+     */
+    private _layoutCells;
+    private _findNextPosition;
+    private _markOccupied;
+    private _getTotalRows;
+    private _getItemContent;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-desc': AitheDesc;
+    }
+}
+//# sourceMappingURL=desc.d.ts.map

package/dist/components/display/desc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desc.d.ts","sourceRoot":"","sources":["../../../src/components/display/desc.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,qBACa,SAAU,SAAQ,YAAY;IACzC,kDAAkD;IACtB,KAAK,SAAM;IAEvC,6DAA6D;IACjC,MAAM,SAAK;IAEvC,sCAAsC;IACT,MAAM,UAAS;IAE5C,6MAA6M;IACtJ,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAU;IAErG,iHAAiH;IACtD,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEzG,2IAA2I;IAC/G,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEhF,6CAA6C;IACR,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAErE,gDAAgD;IACM,UAAU,SAAW;IAE3E,yIAAyI;IACnF,SAAS,UAAQ;IAEvE,mHAAmH;IAChE,OAAO,SAAK;IAE/D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiJpB;IAEF,OAAO,CAAC,SAAS;IAMjB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IAad,MAAM,IAAI,cAAc;CAoGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}