@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/theme/theme-switch.js

@@ -0,0 +1,318 @@
+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;
+};
+/**
+ * aithe-theme-switch 组件
+ * Theme switch dropdown that integrates theme, shadow, and typo selection in a single submenu.
+ *
+ * 基于 floating overlay 模式实现，在单个下拉菜单中整合主题、阴影和排版切换。
+ * Built on the floating overlay pattern, integrates theme, shadow, and typo switching in one dropdown.
+ *
+ * @fires aithe-theme-change - Emitted when any option is selected. 选择选项时发出，detail 包含 `{ category: string, value: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { themeMenu } from '../../styles/theme';
+import { shadowMenu } from '../../styles/shadow';
+import { shapeMenu } from '../../styles/shape';
+import { typoMenu } from '../../styles/typo';
+import { t } from '../../styles/i18n';
+/**
+ * Build a grouped tree menu structure for theme selection.
+ * Groups: Theme → Shadow → Shape → Typo, each with their respective items.
+ */
+function buildThemeMenu() {
+    return [
+        {
+            id: 'theme-group',
+            label: 'Theme',
+            i18n: 'appearance.group.theme',
+            children: themeMenu.map((group) => ({
+                ...group,
+                children: (group.children ?? []).map((c) => ({ ...c, category: 'theme' })),
+            })),
+        },
+        {
+            id: 'shadow-group',
+            label: 'Shadow',
+            i18n: 'appearance.group.shadow',
+            children: shadowMenu.map((s) => ({ ...s, category: 'shadow' })),
+        },
+        {
+            id: 'shape-group',
+            label: 'Shape',
+            i18n: 'appearance.group.shape',
+            children: shapeMenu.map((s) => ({ ...s, category: 'shape' })),
+        },
+        {
+            id: 'typo-group',
+            label: 'Typo',
+            i18n: 'appearance.group.typo',
+            children: typoMenu.map((t) => ({ ...t, category: 'typo' })),
+        },
+    ];
+}
+let AitheThemeSwitch = class AitheThemeSwitch extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.currentTheme = aitheUI.getTheme();
+        this.currentShadow = aitheUI.getShadow();
+        this.currentShape = aitheUI.getShape();
+        this.currentTypo = aitheUI.getTypo();
+        this.themeMenu = buildThemeMenu();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const { value, item } = event.detail;
+            if (!value || !item)
+                return;
+            const category = item.category;
+            if (!category)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-theme-change', { category, value });
+            if (!notPrevented)
+                return;
+            switch (category) {
+                case 'theme':
+                    aitheUI.setTheme(value);
+                    break;
+                case 'shadow':
+                    aitheUI.setShadow(value);
+                    break;
+                case 'shape':
+                    aitheUI.setShape(value);
+                    break;
+                case 'typo':
+                    aitheUI.setTypo(value);
+                    break;
+            }
+        };
+        this.renderThemeItem = (item) => {
+            if (item.color) {
+                return html `<span
+        style="display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;background:${item.color}"
+      ></span>`;
+            }
+            if (item.preview) {
+                return html `<span
+        style="display:inline-block;width:24px;height:24px;border:1px solid var(--aithe-color-border);flex-shrink:0;background:var(--aithe-color-surface-elevated);border-radius:${item.preview}"
+      ></span>`;
+            }
+            if (item.icon) {
+                return html `<span
+        style="display:inline-block;width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--aithe-color-text-muted)"
+      >${item.icon}</span>`;
+            }
+            return nothing;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 200px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    getActiveId() {
+        return this.currentTheme;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribeTheme = aitheUI.onThemeChange(() => {
+            this.currentTheme = aitheUI.getTheme();
+        });
+        this.unsubscribeShadow = aitheUI.onShadowChange(() => {
+            this.currentShadow = aitheUI.getShadow();
+        });
+        this.unsubscribeShape = aitheUI.onShapeChange(() => {
+            this.currentShape = aitheUI.getShape();
+        });
+        this.unsubscribeTypo = aitheUI.onTypoChange(() => {
+            this.currentTypo = aitheUI.getTypo();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribeTheme?.();
+        this.unsubscribeShadow?.();
+        this.unsubscribeShape?.();
+        this.unsubscribeTypo?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        globalThis.addEventListener('resize', this.handleViewportChange);
+        globalThis.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        globalThis.removeEventListener('resize', this.handleViewportChange);
+        globalThis.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const displayLabel = t('appearance.label', 'Appearance');
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">✦</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${this.themeMenu}
+                .active=${this.getActiveId()}
+                .itemRenderer=${this.renderThemeItem}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheThemeSwitch.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheThemeSwitch.prototype, "iconOnly", void 0);
+__decorate([
+    state()
+], AitheThemeSwitch.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheThemeSwitch.prototype, "currentTheme", void 0);
+__decorate([
+    state()
+], AitheThemeSwitch.prototype, "currentShadow", void 0);
+__decorate([
+    state()
+], AitheThemeSwitch.prototype, "currentShape", void 0);
+__decorate([
+    state()
+], AitheThemeSwitch.prototype, "currentTypo", void 0);
+__decorate([
+    query('.trigger')
+], AitheThemeSwitch.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheThemeSwitch.prototype, "overlayEl", void 0);
+AitheThemeSwitch = __decorate([
+    customElement('aithe-theme-switch')
+], AitheThemeSwitch);
+export { AitheThemeSwitch };

package/dist/components/theme/typo-picker.js

@@ -0,0 +1,219 @@
+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, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { typoMenu } from '../../styles/typo';
+import { t } from '../../styles/i18n';
+let AitheTypoPicker = class AitheTypoPicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.currentTypo = aitheUI.getTypo();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const typo = event.detail.value;
+            if (!typo)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-typo-change', { typo });
+            if (notPrevented) {
+                aitheUI.setTypo(typo);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 200px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    getEffectiveTypo() {
+        return this.value ?? this.currentTypo;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onTypoChange(() => {
+            this.currentTypo = aitheUI.getTypo();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribe?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const effectiveTypo = this.getEffectiveTypo();
+        const displayLabel = t(`typoPicker.${effectiveTypo}`, effectiveTypo.charAt(0).toUpperCase() + effectiveTypo.slice(1));
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">✦</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${typoMenu}
+                .active=${effectiveTypo}
+                .itemRenderer=${(item) => item.icon
+                ? html `<span
+                        style="display:inline-block;width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--aithe-color-text-muted)"
+                      >${item.icon}</span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTypoPicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheTypoPicker.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheTypoPicker.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheTypoPicker.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheTypoPicker.prototype, "currentTypo", void 0);
+__decorate([
+    query('.trigger')
+], AitheTypoPicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheTypoPicker.prototype, "overlayEl", void 0);
+AitheTypoPicker = __decorate([
+    customElement('aithe-typo-picker')
+], AitheTypoPicker);
+export { AitheTypoPicker };

package/dist/core/AGENTS.md

@@ -10,7 +10,7 @@
 | ---------- | --------------------- | ------------------------------------------------------------------------------------------- |
 | 基类       | `aithe-element.ts`    | 所有组件的基类，继承 LitElement，提供 theme/disabled/log 等公共属性和 `emit()` 事件发射方法 |
 | 浮层       | `floating.ts`         | 浮层定位引擎，用于 tooltip/popover/dropdown 等弹出层                                        |
-| 锚定覆盖   | `anchored-overlay.ts` | 锚定覆盖层组件，提供定位 + 点击外部关闭 + 焦点管理                                          |
+| 锚定覆盖   | `anchored-overlay.ts` | 锚定覆盖层组件，提供定位（含含入块偏移修正）+ 点击外部关闭 + 焦点管理 |
 | 样式       | `styles.ts`           | 基础样式集合，导出 `aitheBaseStyles` 供所有组件使用                                         |
 | 类型       | `types.ts`            | 核心类型定义                                                                                |
 | 路由       | `router/index.ts`     | 轻量前端路由，支持 hash/history 模式、动态路由、路由守卫                                    |
@@ -19,6 +19,7 @@
 | Markdown   | `markdown/`           | Markdown 解析渲染模块，支持插件架构                                                         |
 | 日志       | `logger/`             | 日志系统，支持 console 劫持、级别过滤、远程上报                                             |
 | 自动表单   | `autoform/`           | 表单控件类型注册表和规则引擎                                                                |
+| 过滤器     | `filter/`             | 数据格式化框架，内置 amount/date/empty/bytes/timeAgo 过滤器，支持链式表达式                  |
 
 ## 编码规范
 
@@ -36,3 +37,7 @@
 - DataHub 适配器通过 `registerAdapter` 注册，可扩展
 - 高亮引擎语言通过 `import './lang-xxx'` 副作用导入注册
 - 路由守卫返回 `false` 阻止导航
+- Filter 接口设计为无状态，参数通过 `apply(value, ...args)` 变参传入，工厂注册时 `new ctor()` 一次缓存复用
+- Filter 表达式语法：`"filterName arg1 arg2 | filter2"`，管道符 `|` 分隔多个过滤器，从左到右依次执行
+- MockAdapter 的 `mockData` 支持 `mockDelay` 模拟网络延迟，`mockPath` 加载本地 JSON 文件（无延迟）
+- 测试文件统一放在模块下的 `__tests__/` 目录，利用 `package.json` 的 `files` 字段排除 src 发布

package/dist/core/aithe-element.d.ts

@@ -2,8 +2,8 @@ import { LitElement } from 'lit';
 import type { AitheVariant } from "../styles/types";
 /**
  * Base class for all Aithe UI components. Extends LitElement with theme awareness,
- * accessibility helpers, and a unified event emission API.
- * 所有 Aithe UI 组件的基类。继承 LitElement，提供主题感知、无障碍辅助和统一事件发射 API。
+ * accessibility helpers, a unified event emission API, and browser environment detection.
+ * 所有 Aithe UI 组件的基类。继承 LitElement，提供主题感知、无障碍辅助、统一事件发射 API 和浏览器环境检测。
  *
  * @example
  * ```ts