@aithe/aithe-ui 26.2.3 → 26.3.1

package/dist/components/feedback/toast.js

@@ -0,0 +1,142 @@
+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';
+/**
+ * Auto-dismiss toast message displayed at the top of the viewport.
+ * 自动消失的轻提示消息，显示在视口顶部。
+ *
+ * @slot - Default slot (unused; content driven by `content` property). 默认插槽（未使用，内容由 content 属性控制）。
+ * @fires aithe-close - Emitted when the toast auto-dismisses after duration. 自动消失后触发。
+ * @example
+ * ```html
+ * <aithe-toast content="Saved successfully" type="success" duration="2400"></aithe-toast>
+ * ```
+ */
+let AitheToast = class AitheToast extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Toast message text. 提示消息文本。 */
+        this.content = '';
+        /** Display title for the toast (shown as tooltip). 提示消息的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the content. 在内容前显示的图标名称。 */
+        this.icon = '';
+        /** Toast color variant. 提示颜色类型。 */
+        this.type = 'default';
+        /** Auto-dismiss duration in milliseconds. 自动消失时长（毫秒）。 */
+        this.duration = 2400;
+        /** Whether the toast is currently visible. 是否当前可见。 */
+        this.visible = true;
+        this.timer = 0;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: fixed;
+        top: 24px;
+        left: 50%;
+        z-index: var(--aithe-z-popover);
+        transform: translateX(-50%);
+      }
+
+      .toast {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-width: 220px;
+        padding: var(--aithe-space-3) var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+        color: var(--aithe-color-text);
+      }
+
+      .toast-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .success {
+        border-color: rgba(53, 166, 111, 0.28);
+      }
+
+      .warning {
+        border-color: rgba(209, 143, 41, 0.28);
+      }
+
+      .danger {
+        border-color: rgba(223, 82, 107, 0.28);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startTimer();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.clearTimeout(this.timer);
+    }
+    updated(changed) {
+        if (changed.has('content') || changed.has('duration') || changed.has('visible')) {
+            this.startTimer();
+        }
+    }
+    /** Starts the auto-dismiss timer. 启动自动消失计时器。 */
+    startTimer() {
+        globalThis.clearTimeout(this.timer);
+        if (!this.visible || !this.duration) {
+            return;
+        }
+        this.timer = globalThis.setTimeout(() => {
+            this.visible = false;
+            this.emit('aithe-close');
+        }, this.duration);
+    }
+    render() {
+        if (!this.visible || !this.content)
+            return html ``;
+        const toastIcon = this.icon
+            ? html `
+          <aithe-icon class="toast-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <div class=${classMap({ toast: true, [this.type]: true })} title=${this.title}>
+        ${toastIcon}${this.content}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheToast.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], AitheToast.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheToast.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheToast.prototype, "type", void 0);
+__decorate([
+    property({ type: Number })
+], AitheToast.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheToast.prototype, "visible", void 0);
+AitheToast = __decorate([
+    customElement('aithe-toast')
+], AitheToast);
+export { AitheToast };

package/dist/components/feedback/tooltip.d.ts

@@ -6,7 +6,7 @@ import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
  *
  * @slot - Default slot for the anchor element. 锚点元素内容。
  * @slot content - Custom tooltip content (overrides `content` property). 自定义工具提示内容。
- * @fires aithe-open-change - Inherited from AnchoredOverlay; emitted on open state change. 开关状态变更时触发。
+ * @fires aithe-dropdown-change - Inherited from AnchoredOverlay; emitted on open state change. 开关状态变更时触发。
  * @example
  * ```html
  * <aithe-tooltip content="Help text here" placement="top">

package/dist/components/feedback/tooltip.js

@@ -0,0 +1,153 @@
+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, query } from 'lit/decorators.js';
+import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
+import { aitheBaseStyles, aithePanelStyles } from '../../core/styles';
+import { uid } from '../../utils/utils';
+const ARIA_DESCRIBED_BY = 'aria-describedby';
+/**
+ * Tooltip overlay that appears on hover/focus over an anchor element.
+ * 工具提示浮层，在悬停/聚焦锚点元素时显示。
+ *
+ * @slot - Default slot for the anchor element. 锚点元素内容。
+ * @slot content - Custom tooltip content (overrides `content` property). 自定义工具提示内容。
+ * @fires aithe-dropdown-change - Inherited from AnchoredOverlay; emitted on open state change. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-tooltip content="Help text here" placement="top">
+ *   <button>Hover me</button>
+ * </aithe-tooltip>
+ * ```
+ */
+let AitheTooltip = class AitheTooltip extends AitheAnchoredOverlayElement {
+    constructor() {
+        super(...arguments);
+        /** Tooltip text content. 工具提示文本内容。 */
+        this.content = '';
+        /** Display title for the tooltip anchor (shown as native tooltip). 工具提示锚点的显示标题（作为原生工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the tooltip content. 在工具提示内容前显示的图标名称。 */
+        this.icon = '';
+        /** Tooltip placement relative to anchor. 工具提示相对于锚点的位置。 */
+        this.placement = 'top';
+        this.tooltipId = uid('aithe-tooltip');
+        /** Shows the tooltip on hover/focus. 悬停/聚焦时显示工具提示。 */
+        this.showTooltip = () => {
+            this.open = true;
+        };
+        /** Hides the tooltip on unhover/unfocus. 取消悬停/聚焦时隐藏工具提示。 */
+        this.hideTooltip = () => {
+            this.open = false;
+        };
+        /** Hides tooltip on Escape key. 按 Escape 键隐藏工具提示。 */
+        this.handleKeydown = (event) => {
+            if (event.key === 'Escape') {
+                this.open = false;
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.tooltip'),
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .tooltip-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .tooltip {
+        position: fixed;
+        z-index: var(--aithe-z-tooltip);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        max-width: min(280px, calc(100vw - 24px));
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        border-radius: var(--aithe-container-radius-md);
+        background: color-mix(in srgb, var(--aithe-color-surface-elevated) 84%, transparent);
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        line-height: var(--aithe-line-height-base);
+        box-shadow: var(--aithe-shadow-2);
+        pointer-events: none;
+      }
+    `,
+    ]; }
+    get panelElement() {
+        return this.tooltip ?? null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            const anchor = this.anchorElement;
+            if (this.open) {
+                anchor.setAttribute(ARIA_DESCRIBED_BY, this.tooltipId);
+            }
+            else if (anchor.getAttribute(ARIA_DESCRIBED_BY) === this.tooltipId) {
+                anchor.removeAttribute(ARIA_DESCRIBED_BY);
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('mouseenter', this.showTooltip);
+        this.addEventListener('mouseleave', this.hideTooltip);
+        this.addEventListener('focusin', this.showTooltip);
+        this.addEventListener('focusout', this.hideTooltip);
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mouseenter', this.showTooltip);
+        this.removeEventListener('mouseleave', this.hideTooltip);
+        this.removeEventListener('focusin', this.showTooltip);
+        this.removeEventListener('focusout', this.hideTooltip);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    render() {
+        const tooltipIcon = this.icon
+            ? html `
+          <aithe-icon class="tooltip-icon" name=${this.icon} size="14"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <slot></slot>
+      ${this.open
+            ? html `
+            <div id=${this.tooltipId} class="tooltip" role="tooltip">
+              ${tooltipIcon}
+              <slot name="content">${this.content}</slot>
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], AitheTooltip.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheTooltip.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheTooltip.prototype, "placement", void 0);
+__decorate([
+    query('.tooltip')
+], AitheTooltip.prototype, "tooltip", void 0);
+AitheTooltip = __decorate([
+    customElement('aithe-tooltip')
+], AitheTooltip);
+export { AitheTooltip };

package/dist/components/form/AGENTS.md

@@ -35,5 +35,9 @@
 
 - `aithe-form` 通过 `ref` 获取表单实例，调用 `validate()` / `reset()` 方法
 - `aithe-autoform` 的 JSON Schema 定义在 `docs/autoform.md` 中详细说明
+- `aithe-autoform` 支持 `initial-values` 属性设置初始值（覆盖 `dft`），`show-submit` 控制内置提交按钮显隐，`submit()` 方法编程触发提交
+- `aithe-autoform` 操作区使用 `<aithe-button-group>` 包裹 slot 和内置提交按钮
+- `aithe-select` 开关状态变更事件名为 `aithe-dropdown-change`（替代已废弃的 `aithe-open-change`）
+- `aithe-combobox` 在原生 input 事件中调用 `event.stopPropagation()`
 - 日期/时间选择器内部依赖 `floating` 模块做面板定位
 - 新增组件需同步更新 `src/index.ts` 和 `docs/api/form/`