@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/display/carousel.js

@@ -0,0 +1,223 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Slot-based carousel for cycling through child elements with autoplay, arrows, and indicators.
+ * 基于插槽的轮播组件，支持自动播放、箭头导航和指示器。
+ *
+ * @slot - Default slot for carousel slide content. 轮播幻灯片内容的默认插槽。
+ *
+ * @fires aithe-change - Emitted when the active slide changes with `{ current }`. 当前幻灯片切换时发出 `{ current }`。
+ *
+ * @example
+ * ```html
+ * <aithe-carousel autoplay interval="4000" arrows indicators>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </aithe-carousel>
+ * ```
+ */
+let AitheCarousel = class AitheCarousel extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the carousel auto-advances slides. 轮播是否自动切换幻灯片。 */
+        this.autoplay = false;
+        /** Auto-advance interval in milliseconds. 自动切换间隔（毫秒）。 */
+        this.interval = 3200;
+        /** Whether to show dot indicators. 是否显示指示器圆点。 */
+        this.indicators = true;
+        /** Whether to show prev/next arrow buttons. 是否显示前进/后退箭头按钮。 */
+        this.arrows = true;
+        this.current = 0;
+        this.timer = 0;
+        this.syncSlides = () => {
+            const slides = this.slides;
+            if (!slides.length) {
+                return;
+            }
+            this.current = Math.min(this.current, slides.length - 1);
+            for (const [index, slide] of slides.entries()) {
+                slide.style.display = index === this.current ? '' : 'none';
+                slide.style.width = '100%';
+                slide.style.height = '100%';
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+        overflow: hidden;
+        border-radius: var(--aithe-container-radius-xl);
+      }
+
+      .viewport {
+        position: relative;
+        min-height: 240px;
+        border-radius: inherit;
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .controls {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 var(--aithe-space-4);
+        pointer-events: none;
+      }
+
+      .controls button,
+      .indicators button {
+        pointer-events: auto;
+        border: none;
+        background: rgba(11, 17, 29, 0.56);
+        color: white;
+        cursor: pointer;
+      }
+
+      .controls button {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+      }
+
+      .indicators {
+        position: absolute;
+        left: 50%;
+        bottom: var(--aithe-space-4);
+        display: inline-flex;
+        gap: var(--aithe-space-2);
+        transform: translateX(-50%);
+      }
+
+      .indicators button {
+        width: 10px;
+        height: 10px;
+        padding: 0;
+        border-radius: 50%;
+        opacity: 0.4;
+      }
+
+      .indicators button[aria-current='true'] {
+        opacity: 1;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncSlides();
+        this.startTimer();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.clearInterval(this.timer);
+    }
+    updated(changed) {
+        if (changed.has('autoplay') || changed.has('interval')) {
+            this.startTimer();
+        }
+        if (changed.has('current')) {
+            this.syncSlides();
+            this.emit('aithe-change', { current: this.current });
+        }
+    }
+    get slides() {
+        return Array.from(this.children).filter((item) => item instanceof HTMLElement);
+    }
+    startTimer() {
+        globalThis.clearInterval(this.timer);
+        if (!this.autoplay || this.slides.length <= 1) {
+            return;
+        }
+        this.timer = globalThis.setInterval(() => this.next(), this.interval);
+    }
+    next() {
+        const total = this.slides.length;
+        if (!total) {
+            return;
+        }
+        this.current = (this.current + 1) % total;
+    }
+    prev() {
+        const total = this.slides.length;
+        if (!total) {
+            return;
+        }
+        this.current = (this.current - 1 + total) % total;
+    }
+    render() {
+        const total = this.slides.length;
+        return html `
+      <div class="viewport">
+        <slot @slotchange=${this.syncSlides}></slot>
+        ${this.arrows && total > 1
+            ? html `
+              <div class="controls">
+                <button
+                  type="button"
+                  aria-label=${t('display.carousel.prevSlideAriaLabel')}
+                  @click=${this.prev}
+                >
+                  ‹
+                </button>
+                <button
+                  type="button"
+                  aria-label=${t('display.carousel.nextSlideAriaLabel')}
+                  @click=${this.next}
+                >
+                  ›
+                </button>
+              </div>
+            `
+            : null}
+        ${this.indicators && total > 1
+            ? html `
+              <div class="indicators">
+                ${Array.from({ length: total }, (_, index) => html `
+                    <button
+                      type="button"
+                      aria-current=${String(index === this.current)}
+                      @click=${() => {
+                this.current = index;
+            }}
+                    ></button>
+                  `)}
+              </div>
+            `
+            : null}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], AitheCarousel.prototype, "autoplay", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCarousel.prototype, "interval", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCarousel.prototype, "indicators", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCarousel.prototype, "arrows", void 0);
+__decorate([
+    state()
+], AitheCarousel.prototype, "current", void 0);
+AitheCarousel = __decorate([
+    customElement('aithe-carousel')
+], AitheCarousel);
+export { AitheCarousel };

package/dist/components/display/code-editor.d.ts

@@ -0,0 +1,246 @@
+import { AitheElement } from '../../core/aithe-element';
+/**
+ * A full-featured code editor Web Component with syntax highlighting,
+ * line numbers, toolbar controls, resizable preview pane, and fullscreen mode.
+ *
+ * Architecture / 架构说明：
+ * - Uses a transparent <textarea> overlaid on a syntax-highlighted <div>
+ *   (the "highlight layer") so the user sees colored text while typing
+ *   into a native textarea for reliable input handling.
+ * - Syntax highlighting is powered by SyntaxRegistry, a rule-based tokenizer
+ *   that supports 30+ languages out of the box.
+ * - The toolbar provides language selection, theme switching, copy,
+ *   fullscreen, line numbers toggle, and preview pane toggle.
+ * - The preview pane is a slot-based area that can host custom content
+ *   (e.g., a markdown renderer in markdown-editor).
+ *
+ * 使用透明的 <textarea> 覆盖在语法高亮的 <div>（"高亮层"）之上，
+ * 用户在原生 textarea 中输入时能看到彩色文本，同时获得可靠的输入处理。
+ * 语法高亮由 SyntaxRegistry 驱动，它是一个基于规则的分词器，内置支持 30+ 种语言。
+ * 工具栏提供语言选择、主题切换、复制、全屏、行号切换和预览面板切换。
+ * 预览面板是基于插槽的区域，可承载自定义内容（例如 markdown-editor 中的 markdown 渲染器）。
+ *
+ * @slot toolbar-left - Custom content on the left side of toolbar. 工具栏左侧的自定义内容。
+ * @slot toolbar-right - Custom content on the right side of toolbar. 工具栏右侧的自定义内容。
+ * @slot preview - Custom preview content (when show-preview is enabled). 自定义预览内容。
+ *
+ * @property {string} value - Editor content. 编辑器内容。
+ * @property {string} language - Programming language for syntax highlighting. 用于语法高亮的编程语言。
+ * @property {boolean} readonly - Whether the editor is readonly. 是否只读。
+ * @property {boolean} lineNumbers - Whether to show line numbers. 是否显示行号。
+ * @property {string} placeholder - Placeholder text when empty. 占位符文本。
+ * @property {boolean} showToolbar - Whether to show the toolbar. 是否显示工具栏。
+ * @property {boolean} showTheme - Whether to show the theme picker. 是否显示主题选择器。
+ * @property {boolean} showPreview - Whether to show the preview pane. 是否显示预览面板。
+ * @property {boolean} showLanguage - Whether to show the language selector. 是否显示语言选择器。
+ * @property {boolean} showFullscreen - Whether to show the fullscreen button. 是否显示全屏按钮。
+ * @property {boolean} showCopy - Whether to show the copy button. 是否显示复制按钮。
+ * @property {boolean} showLineNumbersToggle - Whether to show the line numbers toggle button. 是否显示行号切换按钮。
+ *
+ * @fires aithe-input - Fired when editor content changes. 当编辑器内容发生变化时触发。
+ * @fires aithe-focus - Fired when editor gains focus. 当编辑器获得焦点时触发。
+ * @fires aithe-blur - Fired when editor loses focus. 当编辑器失去焦点时触发。
+ * @fires aithe-language-change - Fired when language is changed via toolbar select. 通过工具栏选择更改语言时触发。
+ * @fires aithe-line-numbers-change - Fired when line numbers visibility is toggled. 行号显示切换时触发。
+ * @fires aithe-fullscreen-change - Fired when fullscreen mode is toggled. 全屏模式切换时触发。
+ * @fires aithe-copy - Fired after copy button is clicked. 点击复制按钮后触发。
+ * @fires aithe-theme-change - Fired when theme is changed via toolbar picker. 通过工具栏选择更改主题时触发。
+ * @fires aithe-preview-toggle - Fired when preview pane is toggled. 预览面板切换时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-code-editor language="javascript" show-toolbar></aithe-code-editor>
+ * ```
+ */
+export declare class AitheCodeEditor extends AitheElement {
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /** Editor content. Code text displayed in the editor. 编辑器内容。 */
+    value: string;
+    /** Programming language for syntax highlighting. 用于语法高亮的编程语言。 */
+    language: string;
+    /** Whether the editor is readonly. 是否只读。 */
+    readonly: boolean;
+    /** Whether to show line numbers on the left side. 是否显示左侧行号。 */
+    lineNumbers: boolean;
+    /** Placeholder text when editor is empty. 编辑器为空时显示的占位符文本。 */
+    placeholder: string;
+    /** Whether to show the toolbar. 是否显示工具栏。 */
+    showToolbar: boolean;
+    /** Whether to show the theme picker in toolbar. 是否在工具栏中显示主题选择器。 */
+    showTheme: boolean;
+    /** Whether to show the preview pane. 是否显示预览面板。 */
+    showPreview: boolean;
+    /** Whether to show the language selector in toolbar. 是否在工具栏中显示语言选择器。 */
+    showLanguage: boolean;
+    /** Whether to show the fullscreen button in toolbar. 是否在工具栏中显示全屏按钮。 */
+    showFullscreen: boolean;
+    /** Whether to show the copy button in toolbar. 是否在工具栏中显示复制按钮。 */
+    showCopy: boolean;
+    /** Whether to show the line numbers toggle button in toolbar. 是否在工具栏中显示行号切换按钮。 */
+    showLineNumbersToggle: boolean;
+    /** Reference to the textarea element for direct DOM access. textarea 元素的引用。 */
+    private readonly textarea;
+    /** Whether the editor is currently focused. 编辑器是否聚焦。 */
+    private focused;
+    /** Whether the editor is in fullscreen mode. 是否全屏模式。 */
+    private isFullscreen;
+    /** Whether the copy button was just clicked (shows feedback). 复制按钮是否刚被点击（显示反馈）。 */
+    private copied;
+    /** Current editor theme (from theme picker). 当前编辑器主题（来自主题选择器）。 */
+    private editorTheme;
+    /** Whether the preview pane is visible. 预览面板是否可见。 */
+    private previewVisible;
+    /** Whether the preview splitter is being dragged. 预览分割条是否正在拖动。 */
+    private splitterDragging;
+    /** Refs for splitter, editor body, code pane, and preview pane elements. */
+    private readonly splitterRef;
+    private readonly editorBodyRef;
+    private readonly codePaneRef;
+    private readonly previewPaneRef;
+    /**
+     * Returns the syntax-highlighted HTML for the current value and language.
+     * Falls back to placeholder text if the editor is empty.
+     * 返回当前值和语言的语法高亮 HTML。编辑器为空时回退到占位符文本。
+     */
+    private get highlightedHtml();
+    /**
+     * Returns the number of lines in the current value.
+     * 返回当前值的行数。
+     */
+    private get lineCount();
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handles textarea input: updates value and emits aithe-input.
+     * 处理 textarea 输入：更新 value 并触发 aithe-input 事件。
+     */
+    private handleInput;
+    /** Handles focus event. 处理聚焦事件。 */
+    private handleFocus;
+    /** Handles blur event. 处理失焦事件。 */
+    private handleBlur;
+    /**
+     * Handles Tab key: inserts 2 spaces instead of moving focus.
+     * 处理 Tab 键：插入 2 个空格而不是切换焦点。
+     */
+    private handleKeyDown;
+    /** Handles language selector change. 处理语言选择器变更。 */
+    private handleLanguageChange;
+    /** Toggles line numbers visibility. 切换行号显示。 */
+    private handleToggleLineNumbers;
+    /**
+     * Toggles fullscreen mode. When entering fullscreen,
+     * locks body scroll to prevent background scrolling.
+     * 切换全屏模式。进入全屏时锁定 body 滚动以防止背景滚动。
+     */
+    private handleFullscreen;
+    /**
+     * Copies editor content to clipboard using the Clipboard API.
+     * Shows a brief "copied" feedback state for 2 seconds.
+     * 使用 Clipboard API 将编辑器内容复制到剪贴板。
+     * 显示 2 秒的"已复制"反馈状态。
+     */
+    private handleCopy;
+    /** Toggles preview pane visibility. 切换预览面板可见性。 */
+    private handleTogglePreview;
+    /**
+     * Initializes splitter drag: captures pointer and adds move/up listeners.
+     * 初始化分割条拖动：捕获指针并添加 move/up 监听器。
+     */
+    private handleSplitterDown;
+    /**
+     * Handles splitter drag move: calculates percentage and resizes panes.
+     * Clamps between 20%-80% to prevent collapsing either pane.
+     * 处理分割条拖动移动：计算百分比并调整面板大小。
+     * 限制在 20%-80% 之间以防止任一面板折叠。
+     */
+    private readonly handleSplitterMove;
+    /**
+     * Handles splitter drag end: cleans up listeners and removes dragging class.
+     * 处理分割条拖动结束：清理监听器并移除 dragging 类。
+     */
+    private readonly handleSplitterUp;
+    /**
+     * Global keydown handler: Escape exits fullscreen.
+     * 全局键盘事件处理：Escape 键退出全屏。
+     */
+    private handleGlobalKeyDown;
+    /**
+     * Handles theme change from the theme picker component.
+     * Stores the selected theme and emits aithe-theme-change.
+     * 处理主题选择器的主题变更。存储所选主题并触发 aithe-theme-change 事件。
+     */
+    private readonly handleThemeChange;
+    /** Focus the editor textarea. 将焦点设置到编辑器文本区域。 */
+    focus(): void;
+    /** Get the start position of text selection. 获取选区起始位置。 */
+    getSelectionStart(): number;
+    /** Get the end position of text selection. 获取选区结束位置。 */
+    getSelectionEnd(): number;
+    /** Set the text selection range. 设置文本选区范围。 */
+    setSelection(start: number, end: number): void;
+    /**
+     * Get the list of supported languages from SyntaxRegistry.
+     * 从 SyntaxRegistry 获取支持的语言列表。
+     */
+    static getSupportedLanguages(): {
+        langId: string;
+        name: string;
+    }[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Renders the language selector dropdown.
+     * 渲染语言选择器下拉框。
+     */
+    private renderLanguageSelect;
+    /**
+     * Renders the line numbers toggle button.
+     * 渲染行号切换按钮。
+     */
+    private renderLineNumbersToggle;
+    /**
+     * Renders the theme picker button.
+     * 渲染主题选择器按钮。
+     */
+    private renderThemePicker;
+    /**
+     * Renders the preview toggle button.
+     * 渲染预览切换按钮。
+     */
+    private renderPreviewToggle;
+    /**
+     * Renders the copy button.
+     * 渲染复制按钮。
+     */
+    private renderCopyButton;
+    /**
+     * Renders the fullscreen toggle button.
+     * 渲染全屏切换按钮。
+     */
+    private renderFullscreenButton;
+    /**
+     * Renders the toolbar with language selector, theme picker,
+     * and action buttons (line numbers, preview, copy, fullscreen).
+     * 渲染工具栏，包含语言选择器、主题选择器和操作按钮。
+     */
+    private renderToolbar;
+    /**
+     * Renders the editor body with line numbers gutter and
+     * the textarea + highlight layer overlay.
+     * 渲染编辑器主体，包含行号槽和 textarea + 高亮层叠加。
+     */
+    private renderEditorBody;
+    /**
+     * Main render: assembles the editor wrapper with toolbar,
+     * editor body, optional preview pane, and resizable splitter.
+     * 主渲染：组装编辑器外壳，包含工具栏、编辑器主体、可选预览面板和可调整分割条。
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-code-editor': AitheCodeEditor;
+    }
+}
+//# sourceMappingURL=code-editor.d.ts.map

package/dist/components/display/code-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../src/components/display/code-editor.ts"],"names":[],"mappings":"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"}