@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/layout/affix.js

@@ -0,0 +1,137 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Sticky / affix wrapper that pins content to a fixed position on scroll.
+ * 固定/吸顶包装器，滚动时将内容固定到指定位置。
+ *
+ * @slot - Default slot for content to be affixed. 需要固定的内容。
+ * @fires aithe-affix - Emitted when affix state changes. 固定状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-affix offset-top="64">
+ *   <aithe-button>Sticky Button</aithe-button>
+ * </aithe-affix>
+ * ```
+ */
+let AitheAffix = class AitheAffix extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Top offset in pixels before affixing. 吸顶前的顶部偏移量（像素）。 */
+        this.offsetTop = 0;
+        /** CSS selector for the scroll container target (defaults to window). 滚动容器目标的 CSS 选择器（默认为 window）。 */
+        this.target = '';
+        this.affixed = false;
+        this.width = 0;
+        this.height = 0;
+        this.left = 0;
+        this.scrollTarget = null;
+        this.handleScroll = () => {
+            const rect = this.getBoundingClientRect();
+            this.width = rect.width;
+            this.height = rect.height;
+            this.left = rect.left;
+            this.affixed = rect.top <= this.offsetTop;
+            this.style.setProperty('--aithe-affix-width', `${this.width}px`);
+            this.style.setProperty('--aithe-affix-left', `${this.left}px`);
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .placeholder {
+        width: 100%;
+      }
+
+      .content.affixed {
+        position: fixed;
+        top: var(--aithe-affix-offset, 0px);
+        left: var(--aithe-affix-left, 0px);
+        z-index: var(--aithe-z-dropdown);
+        width: var(--aithe-affix-width, auto);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.bindTarget();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindTarget();
+    }
+    updated(changed) {
+        if (changed.has('target')) {
+            this.unbindTarget();
+            this.bindTarget();
+        }
+        if (changed.has('offsetTop')) {
+            this.style.setProperty('--aithe-affix-offset', `${this.offsetTop}px`);
+        }
+    }
+    resolveTarget() {
+        const root = this.getRootNode();
+        const shadowTarget = root instanceof ShadowRoot && this.target
+            ? root.querySelector(this.target)
+            : null;
+        const target = shadowTarget ?? (this.target ? document.querySelector(this.target) : null);
+        return target ?? globalThis.window;
+    }
+    bindTarget() {
+        if (typeof globalThis === 'undefined') {
+            return;
+        }
+        this.scrollTarget = this.resolveTarget();
+        this.scrollTarget.addEventListener('scroll', this.handleScroll, { passive: true });
+        globalThis.addEventListener('resize', this.handleScroll, { passive: true });
+        queueMicrotask(() => this.handleScroll());
+    }
+    unbindTarget() {
+        this.scrollTarget?.removeEventListener('scroll', this.handleScroll);
+        globalThis.removeEventListener('resize', this.handleScroll);
+        this.scrollTarget = null;
+    }
+    render() {
+        const placeholderHeight = this.affixed ? `${this.height}px` : 'auto';
+        return html `
+      <div class="placeholder" style=${`height:${placeholderHeight};`}>
+        <div class=${this.affixed ? 'content affixed' : 'content'}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'offset-top' })
+], AitheAffix.prototype, "offsetTop", void 0);
+__decorate([
+    property({ type: String })
+], AitheAffix.prototype, "target", void 0);
+__decorate([
+    state()
+], AitheAffix.prototype, "affixed", void 0);
+__decorate([
+    state()
+], AitheAffix.prototype, "width", void 0);
+__decorate([
+    state()
+], AitheAffix.prototype, "height", void 0);
+__decorate([
+    state()
+], AitheAffix.prototype, "left", void 0);
+AitheAffix = __decorate([
+    customElement('aithe-affix')
+], AitheAffix);
+export { AitheAffix };

package/dist/components/layout/col.js

@@ -0,0 +1,103 @@
+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';
+/**
+ * 24-grid column item for use inside `aithe-row`.
+ * 24栅格列元素，用于 aithe-row 内部。
+ *
+ * @slot - Default slot for column content. 列内容。
+ * @example
+ * ```html
+ * <aithe-row gutter="16">
+ *   <aithe-col span="8" offset="4">Content</aithe-col>
+ *   <aithe-col span="12" flex="1 1 auto">Flexible</aithe-col>
+ * </aithe-row>
+ * ```
+ */
+let AitheCol = class AitheCol extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Number of grid columns to occupy (1–24). 占据的栅格数（1–24）。 */
+        this.span = 24;
+        /** Number of grid columns to offset from the left. 左侧偏移的栅格数。 */
+        this.offset = 0;
+        /** Number of grid columns to push right. 向右推的栅格数。 */
+        this.push = 0;
+        /** Number of grid columns to pull left. 向左拉的栅格数。 */
+        this.pull = 0;
+        /** Custom flex value (overrides span-based width). 自定义 flex 值（覆盖基于 span 的宽度）。 */
+        this.flex = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        min-width: 0;
+        width: var(--aithe-col-width, 100%);
+        max-width: var(--aithe-col-max-width, 100%);
+        flex: var(--aithe-col-flex, 0 0 100%);
+        margin-inline-start: var(--aithe-col-offset, 0%);
+        inset-inline-start: var(--aithe-col-push, 0%);
+        inset-inline-end: var(--aithe-col-pull, 0%);
+      }
+
+      ::slotted(*) {
+        min-width: 0;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.applyLayoutStyles();
+    }
+    updated() {
+        this.applyLayoutStyles();
+    }
+    applyLayoutStyles() {
+        const width = this.span <= 0 ? '0%' : `${(this.span / 24) * 100}%`;
+        const marginLeft = this.offset <= 0 ? '0%' : `${(this.offset / 24) * 100}%`;
+        const push = this.push <= 0 ? '0%' : `${(this.push / 24) * 100}%`;
+        const pull = this.pull <= 0 ? '0%' : `${(this.pull / 24) * 100}%`;
+        const flexValue = this.flex || `0 0 ${width}`;
+        this.hidden = this.span <= 0;
+        this.style.setProperty('--aithe-col-width', this.flex ? 'auto' : width);
+        this.style.setProperty('--aithe-col-max-width', this.flex ? 'none' : width);
+        this.style.setProperty('--aithe-col-flex', flexValue);
+        this.style.setProperty('--aithe-col-offset', marginLeft);
+        this.style.setProperty('--aithe-col-push', push);
+        this.style.setProperty('--aithe-col-pull', pull);
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "span", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "push", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "pull", void 0);
+__decorate([
+    property({ type: String })
+], AitheCol.prototype, "flex", void 0);
+AitheCol = __decorate([
+    customElement('aithe-col')
+], AitheCol);
+export { AitheCol };

package/dist/components/layout/collapse-item.js

@@ -0,0 +1,165 @@
+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 } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Single collapsible panel for use inside `aithe-collapse`.
+ * 单个可折叠面板，用于 aithe-collapse 内部。
+ *
+ * @slot - Default slot for panel body content. 面板正文内容。
+ * @fires aithe-collapse-toggle - Emitted when the panel is toggled. 面板切换时触发。
+ * @example
+ * ```html
+ * <aithe-collapse-item title="Details" name="detail-1" icon="info">
+ *   <p>Expanded content here.</p>
+ * </aithe-collapse-item>
+ * ```
+ */
+let AitheCollapseItem = class AitheCollapseItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Panel header title text. 面板标题文本。 */
+        this.title = '';
+        /** Unique key identifying this panel. 面板唯一标识键。 */
+        this.name = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the panel is disabled and cannot be toggled. 是否禁用面板切换。 */
+        this.disabled = false;
+        /** Whether the panel is currently expanded. 是否当前展开。 */
+        this.open = false;
+        this.toggle = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.emit('aithe-collapse-toggle', {
+                name: this.name,
+                open: !this.open,
+            });
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            this.toggle();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        overflow: hidden;
+      }
+
+      .trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-4);
+        width: 100%;
+        min-height: 52px;
+        padding: var(--aithe-space-4) var(--aithe-space-5);
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .trigger.disabled {
+        cursor: not-allowed;
+        opacity: 0.56;
+      }
+
+      .trigger:hover:not(.disabled) {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .title-group {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .title {
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .icon {
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .icon.open {
+        transform: rotate(180deg);
+      }
+
+      .content {
+        padding: 0 var(--aithe-space-5) var(--aithe-space-5);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <button
+        class=${classMap({ trigger: true, disabled: this.disabled })}
+        type="button"
+        aria-expanded=${String(this.open)}
+        ?disabled=${this.disabled}
+        @click=${this.toggle}
+        @keydown=${this.handleKeydown}
+      >
+        <span class="title-group">
+          ${this.icon
+            ? html `
+                <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}
+          <span class="title">${this.title}</span>
+        </span>
+        <span class=${classMap({ icon: true, open: this.open })} aria-hidden="true">⌄</span>
+      </button>
+      <div class="content" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCollapseItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCollapseItem.prototype, "open", void 0);
+AitheCollapseItem = __decorate([
+    customElement('aithe-collapse-item')
+], AitheCollapseItem);
+export { AitheCollapseItem };

package/dist/components/layout/collapse.js

@@ -0,0 +1,108 @@
+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';
+/**
+ * Accordion / multi-expand collapse container for collapsible panels.
+ * 手风琴/多展开折叠容器，用于可折叠面板。
+ *
+ * @slot - Default slot for `aithe-collapse-item` elements. aithe-collapse-item 面板元素。
+ * @fires aithe-change - Emitted when the active panel changes. 活动面板变更时触发。
+ * @example
+ * ```html
+ * <aithe-collapse active-key="panel-1" accordion>
+ *   <aithe-collapse-item title="Section A" name="panel-1">Content A</aithe-collapse-item>
+ *   <aithe-collapse-item title="Section B" name="panel-2">Content B</aithe-collapse-item>
+ * </aithe-collapse>
+ * ```
+ */
+let AitheCollapse = class AitheCollapse extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Comma-separated keys of active (expanded) panels. 活动（展开）面板的键，逗号分隔。 */
+        this.activeKey = '';
+        /** Whether only one panel can be open at a time (accordion mode). 是否只允许同时打开一个面板（手风琴模式）。 */
+        this.accordion = false;
+        this.syncItems = () => {
+            const activeKeys = this.activeKeys;
+            for (const [index, item] of this.items.entries()) {
+                const name = item.name || `item-${index + 1}`;
+                item.name = name;
+                item.open = activeKeys.has(name);
+            }
+        };
+        this.handleToggle = (event) => {
+            event.stopPropagation();
+            const name = event.detail.name;
+            if (!name) {
+                return;
+            }
+            const activeKeys = this.activeKeys;
+            if (this.accordion) {
+                this.activeKey = activeKeys.has(name) ? '' : name;
+            }
+            else if (activeKeys.has(name)) {
+                activeKeys.delete(name);
+                this.activeKey = Array.from(activeKeys).join(',');
+            }
+            else {
+                activeKeys.add(name);
+                this.activeKey = Array.from(activeKeys).join(',');
+            }
+            this.syncItems();
+            this.emit('aithe-change', { activeKey: this.activeKey });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-collapse-toggle', this.handleToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-collapse-toggle', this.handleToggle);
+    }
+    updated(changed) {
+        if (changed.has('activeKey') || changed.has('accordion')) {
+            this.syncItems();
+        }
+    }
+    get items() {
+        return Array.from(this.querySelectorAll('aithe-collapse-item'));
+    }
+    get activeKeys() {
+        return new Set(this.activeKey
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean));
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.syncItems}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'active-key' })
+], AitheCollapse.prototype, "activeKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCollapse.prototype, "accordion", void 0);
+AitheCollapse = __decorate([
+    customElement('aithe-collapse')
+], AitheCollapse);
+export { AitheCollapse };

package/dist/components/layout/container.js

@@ -0,0 +1,92 @@
+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 { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { normalizeCssUnit } from '../../utils';
+/**
+ * Top-level page layout container with configurable width, padding, and direction.
+ * 顶层页面布局容器，支持配置宽度、内边距和方向。
+ *
+ * @slot - Default slot for container content. 容器内容。
+ * @example
+ * ```html
+ * <aithe-container max-width="960px" padding="var(--aithe-space-lg)" direction="column">
+ *   <p>Centered content</p>
+ * </aithe-container>
+ * ```
+ */
+let AitheContainer = class AitheContainer extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Maximum width of the container (CSS value). 容器最大宽度（CSS 值）。 */
+        this.maxWidth = '1280px';
+        /** Horizontal padding of the container (CSS value). 容器水平内边距（CSS 值）。 */
+        this.padding = 'var(--aithe-space-lg)';
+        /** Gap between child elements (CSS value). 子元素间距（CSS 值）。 */
+        this.gap = '0';
+        /** Whether the container fills the full width without max-width constraint. 是否填满全宽，不受最大宽度限制。 */
+        this.fluid = false;
+        /** Whether the container fills the full viewport height. 是否填满整个视口高度。 */
+        this.full = false;
+        /** Flex direction for child layout. 子元素排列方向。 */
+        this.direction = 'column';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        const gap = normalizeCssUnit(this.gap, '0');
+        const padding = normalizeCssUnit(this.padding, 'var(--aithe-space-lg)');
+        return html `
+      <div
+        style=${styleMap({
+            display: 'flex',
+            flexDirection: this.direction,
+            gap,
+            marginInline: 'auto',
+            maxWidth: this.full || this.fluid ? '100%' : this.maxWidth,
+            minHeight: this.full ? '100vh' : undefined,
+            paddingInline: padding,
+            width: '100%',
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "padding", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheContainer.prototype, "fluid", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheContainer.prototype, "full", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "direction", void 0);
+AitheContainer = __decorate([
+    customElement('aithe-container')
+], AitheContainer);
+export { AitheContainer };