@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/basic/button.js

@@ -0,0 +1,315 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Button component with multiple visual types, sizes, and states.
+ * 按钮组件，支持多种视觉类型、尺寸和状态。
+ *
+ * When `href` is set, the button renders as an `<a>` element for native link behavior.
+ * Navigation occurs by default; call `event.preventDefault()` on `aithe-click` to suppress it.
+ * 设置 `href` 后，按钮渲染为 `<a>` 元素以获得原生链接行为。
+ * 默认执行导航；在 `aithe-click` 事件中调用 `preventDefault()` 可阻止导航。
+ *
+ * @slot        - Default slot for button label. 默认插槽，用于按钮标签。
+ * @slot prefix - Icon or content before the label. 标签前的图标或内容。
+ * @slot suffix - Icon or content after the label. 标签后的图标或内容。
+ *
+ * @fires aithe-click - Emitted when the button is clicked (not when disabled/loading). 按钮被点击时发出（禁用/加载时不发出）。
+ *   When `href` is set, navigation runs by default. Call `preventDefault()` to suppress. 设置 `href` 后默认执行导航，调用 `preventDefault()` 可阻止。
+ *
+ * @example
+ * ```html
+ * <aithe-button type="primary" size="medium">Submit</aithe-button>
+ * <aithe-button variant="danger" loading>Deleting...</aithe-button>
+ * <aithe-button type="primary" href="/dashboard">Go to Dashboard</aithe-button>
+ * ```
+ */
+let AitheButton = class AitheButton extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Visual type of the button. 按钮的视觉类型。 */
+        this.type = 'default';
+        /** Size scale of the button. 按钮的尺寸规格。 */
+        this.size = 'medium';
+        /** Display title for the button (shown as tooltip). 按钮的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the label. 在标签前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the button is disabled. 按钮是否禁用。 */
+        this.disabled = false;
+        /** Whether the button shows a loading spinner. 按钮是否显示加载旋转器。 */
+        this.loading = false;
+        /** Whether the button spans the full width of its container. 按钮是否占满容器宽度。 */
+        this.block = false;
+        /** Link URL. When set, the button renders as an `<a>` element. 链接地址。设置后按钮渲染为 `<a>` 元素。 */
+        this.href = '';
+        /** Link target attribute (e.g. `_blank`). Only applies when `href` is set. 链接 target 属性（如 `_blank`）。仅在设置 `href` 时生效。 */
+        this.target = '';
+        /**
+         * Handle click: prevent interaction when disabled or loading,
+         * then emit `aithe-click` with the original mouse event.
+         * 处理点击：在禁用或加载时阻止交互，然后附带原始鼠标事件发出 `aithe-click`。
+         */
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+            if (this.href) {
+                event.preventDefault();
+            }
+            const notPrevented = this.emit('aithe-click', { originalEvent: event });
+            if (notPrevented && this.href) {
+                if (this.target) {
+                    globalThis.open(this.href, this.target);
+                }
+                else {
+                    globalThis.location.href = this.href;
+                }
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        flex: 0 0 auto;
+        max-width: 100%;
+      }
+
+      :host([block]) {
+        display: flex;
+        width: 100%;
+      }
+
+      button,
+      a {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--aithe-space-2);
+        width: auto;
+        max-width: 100%;
+        border: 1px solid transparent;
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        transition:
+          transform var(--aithe-duration-fast) var(--aithe-ease-standard),
+          background var(--aithe-duration-fast) var(--aithe-ease-standard),
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          box-shadow var(--aithe-duration-fast) var(--aithe-ease-standard);
+        white-space: nowrap;
+        text-decoration: none;
+      }
+
+      button:hover:not(:disabled),
+      a:hover:not([aria-disabled='true']) {
+        transform: translateY(-1px);
+        border-color: var(--aithe-color-border-strong);
+        box-shadow: var(--aithe-shadow-1);
+      }
+
+      button:active:not(:disabled),
+      a:active:not([aria-disabled='true']) {
+        transform: translateY(0);
+      }
+
+      button:disabled,
+      a[aria-disabled='true'] {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      :host([block]) button {
+        width: 100%;
+      }
+
+      .small {
+        min-height: var(--aithe-control-height-sm);
+        min-width: 72px;
+        padding: 0 var(--aithe-space-3);
+        font-size: var(--aithe-font-size-sm);
+      }
+
+      .medium {
+        min-height: var(--aithe-control-height-md);
+        min-width: 96px;
+        padding: 0 var(--aithe-space-4);
+      }
+
+      .large {
+        min-height: var(--aithe-control-height-lg);
+        min-width: 112px;
+        padding: 0 var(--aithe-space-5);
+        font-size: var(--aithe-font-size-lg);
+      }
+
+      .text,
+      .link {
+        min-width: 0;
+      }
+
+      .primary {
+        background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        box-shadow: 0 10px 24px rgba(50, 111, 225, 0.22);
+      }
+
+      :host([variant='danger']) .primary {
+        background: linear-gradient(180deg, var(--aithe-danger-6), var(--aithe-danger-7));
+        box-shadow: 0 10px 24px rgba(207, 57, 80, 0.24);
+      }
+
+      :host([variant='danger']) .default,
+      :host([variant='danger']) .dashed,
+      :host([variant='danger']) .text,
+      :host([variant='danger']) .link {
+        color: var(--aithe-danger-7);
+      }
+
+      .default {
+        border-color: var(--aithe-color-border);
+      }
+
+      .dashed {
+        border-style: dashed;
+        border-color: var(--aithe-color-border-strong);
+      }
+
+      .text,
+      .link {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      .link {
+        color: var(--aithe-primary-6);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .spinner {
+        width: 1em;
+        height: 1em;
+        border: 2px solid currentColor;
+        border-right-color: transparent;
+        border-radius: 50%;
+        animation: aithe-spin 0.85s linear infinite;
+      }
+
+      @keyframes aithe-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const classes = {
+            [this.type]: true,
+            [this.size]: true,
+            [this.variant]: true,
+        };
+        let prefixSlot;
+        if (this.loading) {
+            prefixSlot = html `
+        <span class="spinner" aria-hidden="true"></span>
+      `;
+        }
+        else if (this.icon) {
+            prefixSlot = html `
+        <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+      `;
+        }
+        else {
+            prefixSlot = html `
+        <slot name="prefix"></slot>
+      `;
+        }
+        const inner = html `
+      <span class="icon">${prefixSlot}</span>
+      <slot></slot>
+      <span class="icon"><slot name="suffix"></slot></span>
+    `;
+        const isDisabled = this.disabled || this.loading;
+        if (this.href && !isDisabled) {
+            return html `
+        <a
+          class=${classMap(classes)}
+          href=${this.href}
+          target=${this.target || undefined}
+          title=${this.title}
+          @click=${this.handleClick}
+        >
+          ${inner}
+        </a>
+      `;
+        }
+        return html `
+      <button
+        class=${classMap(classes)}
+        ?disabled=${isDisabled}
+        title=${this.title}
+        type="button"
+        @click=${this.handleClick}
+      >
+        ${inner}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheButton.prototype, "block", void 0);
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], AitheButton.prototype, "target", void 0);
+AitheButton = __decorate([
+    customElement('aithe-button')
+], AitheButton);
+export { AitheButton };

package/dist/components/basic/card.js

@@ -0,0 +1,186 @@
+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, queryAssignedElements, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Card container with header, body, and footer sections.
+ * 卡片容器，包含标题、正文和底部区域。
+ *
+ * @slot - Default slot for card body content. 卡片正文内容。
+ * @slot header - Custom header content (overrides title). 自定义头部内容。
+ * @slot footer - Footer action area. 底部操作区域。
+ * @example
+ * ```html
+ * <aithe-card title="Settings" icon="settings" shadow="2">
+ *   <p>Card body content here.</p>
+ *   <slot name="footer"><button>Save</button></slot>
+ * </aithe-card>
+ * ```
+ */
+let AitheCard = class AitheCard extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Card title text. 卡片标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Shadow elevation level (0–4). 阴影层级（0–4）。 */
+        this.shadow = 2;
+        /** Padding for the card body section. 卡片正文区域内边距。 */
+        this.bodyPadding = 'var(--aithe-space-lg)';
+        /** Whether to show a border around the card. 是否显示卡片边框。 */
+        this.bordered = true;
+        /** Divider style between sections: 'border' | 'none'. 区域间分割线样式：'border' | 'none'。 */
+        this.divider = 'border';
+        this.hasHeaderSlot = false;
+        this.hasFooterSlot = false;
+        this.syncSlots = () => {
+            this.hasHeaderSlot = this.headerSlotNodes.length > 0;
+            this.hasFooterSlot = this.footerSlotNodes.length > 0;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        min-width: 0;
+      }
+
+      .card {
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+        backdrop-filter: blur(16px);
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1);
+        min-width: 0;
+        padding: var(--aithe-space-lg) var(--aithe-space-lg) 0;
+      }
+
+      .header-divider {
+        border-bottom: 1px solid var(--aithe-color-border);
+        margin: var(--aithe-space-sm) var(--aithe-space-lg) 0;
+      }
+
+      .title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .body {
+        min-width: 0;
+      }
+
+      .footer-divider {
+        border-top: 1px solid var(--aithe-color-border);
+        margin: 0 var(--aithe-space-lg);
+      }
+
+      .footer {
+        min-width: 0;
+        padding: var(--aithe-space-sm) var(--aithe-space-lg) var(--aithe-space-lg);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        const showHeader = this.title || this.hasHeaderSlot;
+        const showDivider = this.divider !== 'none';
+        const titleIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="18"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <article
+        class="card"
+        style=${styleMap({
+            border: this.bordered ? '1px solid var(--aithe-color-border)' : 'none',
+            boxShadow: this.shadow > 0 ? `var(--aithe-shadow-${this.shadow})` : 'none',
+        })}
+      >
+        <header class="header" ?hidden=${!showHeader}>
+          <slot name="header" @slotchange=${this.syncSlots}></slot>
+          ${this.title
+            ? html `
+                <div class="title">${titleIcon}${this.title}</div>
+              `
+            : null}
+        </header>
+        ${showHeader && showDivider
+            ? html `
+              <div class="header-divider"></div>
+            `
+            : nothing}
+        <section class="body" style=${styleMap({ padding: this.bodyPadding })}>
+          <slot></slot>
+        </section>
+        ${this.hasFooterSlot && showDivider
+            ? html `
+              <div class="footer-divider"></div>
+            `
+            : nothing}
+        <footer class="footer" ?hidden=${!this.hasFooterSlot}>
+          <slot name="footer" @slotchange=${this.syncSlots}></slot>
+        </footer>
+      </article>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCard.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'body-padding' })
+], AitheCard.prototype, "bodyPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCard.prototype, "bordered", void 0);
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "divider", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'header' })
+], AitheCard.prototype, "headerSlotNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], AitheCard.prototype, "footerSlotNodes", void 0);
+__decorate([
+    state()
+], AitheCard.prototype, "hasHeaderSlot", void 0);
+__decorate([
+    state()
+], AitheCard.prototype, "hasFooterSlot", void 0);
+AitheCard = __decorate([
+    customElement('aithe-card')
+], AitheCard);
+export { AitheCard };

package/dist/components/basic/chip.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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Compact selectable chip with optional close button.
+ * 紧凑的可选中芯片，支持可选关闭按钮。
+ *
+ * @slot - Default slot for chip label content. 芯片标签内容。
+ * @fires aithe-select - Emitted when chip selection state changes. 选中状态变更时触发。
+ * @fires aithe-close - Emitted when the close button is clicked. 关闭按钮点击时触发。
+ * @example
+ * ```html
+ * <aithe-chip closable>Filter Tag</aithe-chip>
+ * ```
+ */
+let AitheChip = class AitheChip extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the chip is selected. 是否选中。 */
+        this.selected = false;
+        /** Whether the chip shows a close button. 是否显示关闭按钮。 */
+        this.closable = false;
+        /** Toggles the selected state and emits select event. 切换选中状态并触发 select 事件。 */
+        this.toggleSelect = () => {
+            this.selected = !this.selected;
+            this.emit('aithe-select', { selected: this.selected });
+        };
+        /** Handles close button click: emits event, then removes the chip from DOM. 处理关闭按钮点击：触发事件、然后从 DOM 移除芯片。 */
+        this.handleClose = (event) => {
+            event.stopPropagation();
+            this.emit('aithe-close');
+            this.remove();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 28px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      button.selected {
+        border-color: var(--aithe-primary-5);
+        background: var(--aithe-primary-1);
+        color: var(--aithe-primary-8);
+      }
+
+      .close {
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <button
+        class=${classMap({ selected: this.selected })}
+        type="button"
+        @click=${this.toggleSelect}
+      >
+        <slot></slot>
+        ${this.closable
+            ? html `
+              <span class="close" role="button" @click=${this.handleClose}>×</span>
+            `
+            : null}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheChip.prototype, "closable", void 0);
+AitheChip = __decorate([
+    customElement('aithe-chip')
+], AitheChip);
+export { AitheChip };