@aithe/aithe-ui 26.2.2 → 26.3.1

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

@@ -0,0 +1,241 @@
+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-locale-switch 组件
+ * Locale switcher dropdown for toggling between supported locales.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * Use the `locales` property to limit which locales appear in the dropdown.
+ * When `locales` is empty (default), all registered locales are shown.
+ * 使用 `locales` 属性可限定下拉菜单中显示的语言。
+ * 当 `locales` 为空（默认）时，显示所有已注册的语言。
+ *
+ * @fires aithe-locale-change - Emitted when a locale is selected. 选择语言时发出，detail 包含 `{ locale: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in locale 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 { localeMenu } from '../../styles/i18n';
+let AitheLocaleSwitch = class AitheLocaleSwitch extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        /**
+         * JSON string of locale identifiers to show in the dropdown.
+         * When empty or unset, all registered locales are displayed.
+         * 下拉菜单中显示的语言标识 JSON 字符串。为空时显示所有已注册语言。
+         *
+         * @example
+         * ```html
+         * <aithe-locale-switch locales='["en-US","zh-CN","ja-JP"]'></aithe-locale-switch>
+         * ```
+         */
+        this.locales = '';
+        this.open = false;
+        this.currentLocale = aitheUI.getLocale();
+        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 locale = event.detail.value;
+            if (!locale)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-locale-change', { locale });
+            if (notPrevented) {
+                aitheUI.setLocale(locale);
+            }
+        };
+    }
+    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: 140px;
+        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%;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onLocaleChange(() => {
+            this.currentLocale = aitheUI.getLocale();
+        });
+    }
+    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`;
+    }
+    getFilteredMenu() {
+        if (!this.locales)
+            return localeMenu;
+        const allowed = JSON.parse(this.locales);
+        return localeMenu.filter((item) => allowed.includes(item.id));
+    }
+    render() {
+        const displayLabel = this.currentLocale;
+        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.getFilteredMenu()}
+                .active=${this.currentLocale}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheLocaleSwitch.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheLocaleSwitch.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheLocaleSwitch.prototype, "locales", void 0);
+__decorate([
+    state()
+], AitheLocaleSwitch.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheLocaleSwitch.prototype, "currentLocale", void 0);
+__decorate([
+    query('.trigger')
+], AitheLocaleSwitch.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheLocaleSwitch.prototype, "overlayEl", void 0);
+AitheLocaleSwitch = __decorate([
+    customElement('aithe-locale-switch')
+], AitheLocaleSwitch);
+export { AitheLocaleSwitch };

package/dist/components/theme/shadow-picker.d.ts

@@ -0,0 +1,28 @@
+import { AitheElement } from '../../core/aithe-element';
+import { type AithePlacement } from '../../core/floating';
+import type { AitheShadowName } from '../../types';
+export declare class AitheShadowPicker extends AitheElement {
+    placement: AithePlacement;
+    /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+    iconOnly: boolean;
+    value?: AitheShadowName;
+    private open;
+    private currentShadow;
+    private readonly triggerEl?;
+    private readonly overlayEl?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private getEffectiveShadow;
+    private readonly handleViewportChange;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private bindViewport;
+    private unbindViewport;
+    private updatePosition;
+    private readonly handleOutsideClick;
+    private readonly toggleOpen;
+    private readonly handleTreeSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=shadow-picker.d.ts.map

package/dist/components/theme/shadow-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-picker.d.ts","sourceRoot":"","sources":["../../../src/components/theme/shadow-picker.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAI9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAG9C,qBACa,iBAAkB,SAAQ,YAAY;IACrB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE1C,KAAK,CAAC,EAAE,eAAe,CAAC;IAE3C,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,aAAa,CAAwC;IAEnD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,WAAW,CAAC,CAAa;IAEjC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAU/B;IAEF,MAAM;CA8BP"}

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

@@ -0,0 +1,233 @@
+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-shadow-picker 组件
+ * Shadow style picker dropdown for toggling between built-in shadow styles.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * 阴影风格与颜色主题、形状相互独立，可自由组合（Theme × Shape × Shadow）。
+ * Shadow style is orthogonal to color themes and shapes and can be freely combined (Theme × Shape × Shadow).
+ *
+ * @fires aithe-shadow-change - Emitted when a shadow is selected. 选择阴影风格时发出，detail 包含 `{ shadow: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in shadow 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 { shadowMenu } from '../../styles/shadow';
+import { t } from '../../styles/i18n';
+let AitheShadowPicker = class AitheShadowPicker 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.currentShadow = aitheUI.getShadow();
+        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 shadow = event.detail.value;
+            if (!shadow)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-shadow-change', { shadow });
+            if (notPrevented) {
+                aitheUI.setShadow(shadow);
+            }
+        };
+    }
+    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: 220px;
+        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%;
+      }
+    `,
+    ]; }
+    getEffectiveShadow() {
+        return this.value ?? this.currentShadow;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onShadowChange(() => {
+            this.currentShadow = aitheUI.getShadow();
+        });
+    }
+    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 effectiveShadow = this.getEffectiveShadow();
+        const shadowKey = effectiveShadow === 'sharp-business' ? 'sharpBusiness' : effectiveShadow;
+        const displayLabel = t(`shadowPicker.${shadowKey}`, effectiveShadow === 'sharp-business' ? 'Sharp Business' : effectiveShadow.charAt(0).toUpperCase() + effectiveShadow.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=${shadowMenu}
+                .active=${effectiveShadow}
+                .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 })
+], AitheShadowPicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheShadowPicker.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheShadowPicker.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheShadowPicker.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheShadowPicker.prototype, "currentShadow", void 0);
+__decorate([
+    query('.trigger')
+], AitheShadowPicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheShadowPicker.prototype, "overlayEl", void 0);
+AitheShadowPicker = __decorate([
+    customElement('aithe-shadow-picker')
+], AitheShadowPicker);
+export { AitheShadowPicker };

package/dist/components/theme/shape-picker.d.ts

@@ -0,0 +1,28 @@
+import { AitheElement } from '../../core/aithe-element';
+import { type AithePlacement } from '../../core/floating';
+import type { AitheShapeName } from '../../types';
+export declare class AitheShapePicker extends AitheElement {
+    placement: AithePlacement;
+    /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+    iconOnly: boolean;
+    value?: AitheShapeName;
+    private open;
+    private currentShape;
+    private readonly triggerEl?;
+    private readonly overlayEl?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private getEffectiveShape;
+    private readonly handleViewportChange;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private bindViewport;
+    private unbindViewport;
+    private updatePosition;
+    private readonly handleOutsideClick;
+    private readonly toggleOpen;
+    private readonly handleTreeSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=shape-picker.d.ts.map

package/dist/components/theme/shape-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-picker.d.ts","sourceRoot":"","sources":["../../../src/components/theme/shape-picker.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAI9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG7C,qBACa,gBAAiB,SAAQ,YAAY;IACpB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE1C,KAAK,CAAC,EAAE,cAAc,CAAC;IAE1C,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAsC;IAEhD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,WAAW,CAAC,CAAa;IAEjC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAU/B;IAEF,MAAM;CA6BP"}