@aithe/aithe-ui 26.2.2 → 26.3.1

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

@@ -0,0 +1,376 @@
+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, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheScrollbarStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { aitheThemeText } from '../../styles/theme';
+import { t } from '../../styles/i18n';
+/**
+ * Live theme preview panel with an embedded theme picker and sample components.
+ * 实时主题预览面板，内嵌主题选择器和示例组件。
+ *
+ * Renders a mini application layout (sidebar + content area) themed with the
+ * selected preview theme, allowing users to evaluate themes before applying.
+ * 渲染一个迷你应用布局（侧边栏 + 内容区），使用所选预览主题，
+ * 允许用户在应用前评估主题效果。
+ *
+ * @fires aithe-theme-apply - Emitted when the "Apply Theme" button is clicked. 点击"应用主题"按钮时发出，detail 包含 `{ theme: string }`。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-preview value="dark"></aithe-theme-preview>
+ * ```
+ */
+let AitheThemePreview = class AitheThemePreview extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Currently applied theme name. 当前应用的主题名称。 */
+        this.value = 'light';
+        this.previewTheme = this.value;
+        this.previewShape = aitheUI.getShape();
+        this.previewShadow = aitheUI.getShadow();
+        this.previewTypo = aitheUI.getTypo();
+        this.handleThemeChange = (event) => {
+            event.preventDefault();
+            this.previewTheme = event.detail.theme;
+        };
+        this.handleShapeChange = (event) => {
+            event.preventDefault();
+            this.previewShape = event.detail.shape;
+            this.applyShapeTokensLocally();
+        };
+        this.handleShadowChange = (event) => {
+            event.preventDefault();
+            this.previewShadow = event.detail.shadow;
+            this.applyShadowTokensLocally();
+        };
+        this.handleTypoChange = (event) => {
+            event.preventDefault();
+            this.previewTypo = event.detail.typo;
+            this.applyTypoTokensLocally();
+        };
+        this.handleConfirm = () => {
+            this.value = this.previewTheme;
+            aitheUI.setTheme(this.previewTheme);
+            aitheUI.setShape(this.previewShape);
+            aitheUI.setShadow(this.previewShadow);
+            aitheUI.setTypo(this.previewTypo);
+            this.emit('aithe-theme-apply', { theme: this.previewTheme });
+        };
+        this.sidebarItems = [
+            { icon: '🏠', labelKey: 'theme.preview.dashboard' },
+            { icon: '📦', labelKey: 'theme.preview.components' },
+            { icon: '🎨', labelKey: 'theme.preview.themes' },
+            { icon: '⚙️', labelKey: 'theme.preview.settings' },
+        ];
+    }
+    static { this.styles = [
+        unsafeCSS(aitheThemeText),
+        aitheBaseStyles,
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        overflow: hidden;
+        background: var(--aithe-color-surface);
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-3) var(--aithe-space-4);
+        border-bottom: 1px solid var(--aithe-color-border);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+      }
+
+      .toolbar-label {
+        font-size: var(--aithe-font-size-sm);
+        font-weight: var(--aithe-font-weight-semibold);
+        color: var(--aithe-color-text);
+      }
+
+      .confirm-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 32px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-primary-6);
+        color: var(--aithe-color-text-on-primary, #ffffff);
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          opacity 0.15s;
+      }
+
+      .confirm-btn:hover {
+        background: var(--aithe-primary-7);
+      }
+
+      .confirm-btn:active {
+        background: var(--aithe-primary-8);
+      }
+
+      .preview-area {
+        display: flex;
+        min-height: 420px;
+        background: var(--aithe-color-bg);
+        color: var(--aithe-color-text);
+      }
+
+      .sidebar {
+        width: 220px;
+        flex-shrink: 0;
+        border-right: 1px solid var(--aithe-color-border);
+        padding: var(--aithe-space-2) 0;
+        overflow-y: auto;
+        background: var(--aithe-color-surface);
+      }
+
+      .sidebar-item {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        width: 100%;
+        min-height: 40px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        text-align: left;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          color 0.15s;
+      }
+
+      .sidebar-item:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .sidebar-item.active {
+        background: var(--aithe-color-surface-muted);
+        color: var(--aithe-primary-7);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .sidebar-icon {
+        font-size: 16px;
+        width: 20px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+
+      .content {
+        flex: 1;
+        padding: var(--aithe-space-5);
+        overflow-y: auto;
+      }
+
+      .section-title {
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+        color: var(--aithe-color-text);
+        margin: 0 0 var(--aithe-space-4) 0;
+      }
+
+      .component-section {
+        margin-bottom: var(--aithe-space-6);
+      }
+
+      .component-row {
+        display: flex;
+        gap: var(--aithe-space-3);
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: var(--aithe-space-3);
+      }
+
+      .input-row {
+        display: grid;
+        gap: var(--aithe-space-3);
+        max-width: 480px;
+        margin-bottom: var(--aithe-space-3);
+      }
+
+      .table-wrapper {
+        margin-bottom: var(--aithe-space-3);
+      }
+    `,
+    ]; }
+    applyShapeTokensLocally() {
+        const tokens = aitheUI.getShapeTokens(this.previewShape);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    applyShadowTokensLocally() {
+        const tokens = aitheUI.getShadowTokens(this.previewShadow);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    applyTypoTokensLocally() {
+        const tokens = aitheUI.getTypoTokens(this.previewTypo);
+        if (!tokens)
+            return;
+        for (const [key, value] of Object.entries(tokens)) {
+            this.style.setProperty(key, value);
+        }
+    }
+    firstUpdated() {
+        this.applyShapeTokensLocally();
+        this.applyShadowTokensLocally();
+        this.applyTypoTokensLocally();
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <span class="toolbar-label">${t('theme.preview.title')}</span>
+          <aithe-theme-picker
+            .value=${this.previewTheme}
+            @aithe-theme-change=${this.handleThemeChange}
+          ></aithe-theme-picker>
+          <aithe-shape-picker
+            .value=${this.previewShape}
+            @aithe-shape-change=${this.handleShapeChange}
+          ></aithe-shape-picker>
+          <aithe-shadow-picker
+            .value=${this.previewShadow}
+            @aithe-shadow-change=${this.handleShadowChange}
+          ></aithe-shadow-picker>
+          <aithe-typo-picker
+            .value=${this.previewTypo}
+            @aithe-typo-change=${this.handleTypoChange}
+          ></aithe-typo-picker>
+        </div>
+        <button class="confirm-btn" type="button" @click=${this.handleConfirm}>
+          ${t('theme.preview.applyTheme')}
+        </button>
+      </div>
+      <div class="preview-area" data-aithe-theme=${this.previewTheme}>
+        <nav class="sidebar">
+          ${this.sidebarItems.map((item, i) => html `
+              <button class=${`sidebar-item${i === 0 ? ' active' : ''}`} type="button">
+                <span class="sidebar-icon">${item.icon}</span>
+                ${t(item.labelKey)}
+              </button>
+            `)}
+        </nav>
+        <main class="content">
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.buttons')}</h3>
+            <div class="component-row">
+              <aithe-button type="primary">${t('theme.preview.primary')}</aithe-button>
+              <aithe-button type="default">${t('theme.preview.default')}</aithe-button>
+              <aithe-button type="dashed">${t('theme.preview.dashed')}</aithe-button>
+              <aithe-button type="text">${t('theme.preview.text')}</aithe-button>
+              <aithe-button type="link">${t('theme.preview.link')}</aithe-button>
+              <aithe-button type="primary" danger>${t('theme.preview.danger')}</aithe-button>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.input')}</h3>
+            <div class="input-row">
+              <aithe-input placeholder=${t('theme.preview.enterText')} clearable></aithe-input>
+              <aithe-input
+                placeholder=${t('theme.preview.search')}
+                status="success"
+                value=${t('theme.preview.brand')}
+              ></aithe-input>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.tags')}</h3>
+            <div class="component-row">
+              <aithe-tag variant="primary">${t('theme.preview.primary')}</aithe-tag>
+              <aithe-tag variant="success">${t('theme.preview.success')}</aithe-tag>
+              <aithe-tag variant="warning">${t('theme.preview.warning')}</aithe-tag>
+              <aithe-tag variant="danger">${t('theme.preview.danger')}</aithe-tag>
+            </div>
+          </div>
+          <div class="component-section">
+            <h3 class="section-title">${t('theme.preview.table')}</h3>
+            <div class="table-wrapper">
+              <aithe-table
+                striped
+                .columns=${[
+            { id: 'name', title: t('theme.preview.name'), sortable: true },
+            { id: 'role', title: t('theme.preview.role') },
+            { id: 'status', title: t('theme.preview.status'), variant: 'success' },
+        ]}
+                .data=${[
+            {
+                id: 1,
+                name: 'Alice',
+                role: t('theme.preview.admin'),
+                status: t('theme.preview.active'),
+            },
+            {
+                id: 2,
+                name: 'Bob',
+                role: t('theme.preview.editor'),
+                status: t('theme.preview.active'),
+            },
+            {
+                id: 3,
+                name: 'Carol',
+                role: t('theme.preview.viewer'),
+                status: t('theme.preview.inactive'),
+            },
+        ]}
+              ></aithe-table>
+            </div>
+          </div>
+        </main>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheThemePreview.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewTheme", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewShape", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewShadow", void 0);
+__decorate([
+    state()
+], AitheThemePreview.prototype, "previewTypo", void 0);
+AitheThemePreview = __decorate([
+    customElement('aithe-theme-preview')
+], AitheThemePreview);
+export { AitheThemePreview };

package/dist/components/theme/theme-switch.d.ts

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

package/dist/components/theme/theme-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-switch.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAiD9E,qBACa,gBAAiB,SAAQ,YAAY;IACpB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE7D,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,WAAW,CAAqB;IAE9B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,eAAe,CAAC,CAAa;IAErC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAU5B,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,CA2B/B;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAiB9B;IAEF,MAAM;CAuBP"}