@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/container/scroller.js

@@ -0,0 +1,144 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheScrollbarStyles } from '../../core/styles';
+/**
+ * Themed scroll container with optional shadow edges and scrollbar control.
+ * 主题化滚动容器，支持可选阴影边缘和滚动条控制。
+ *
+ * @slot - Default slot for scrollable content. 可滚动内容的默认插槽。
+ *
+ * @fires aithe-scroll - Emitted on scroll with `{ top, left }`. 滚动时发出 `{ top, left }`。
+ *
+ * @example
+ * ```html
+ * <aithe-scroller height="300px" shadow scrollbar>
+ *   <p>Long content here...</p>
+ * </aithe-scroller>
+ * ```
+ */
+let AitheScroller = class AitheScroller extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Fixed height of the scroll area (CSS value). 滚动区域的固定高度（CSS 值）。 */
+        this.height = '';
+        /** Maximum height of the scroll area (CSS value). 滚动区域的最大高度（CSS 值）。 */
+        this.maxHeight = '';
+        /** Whether to show gradient shadows at scroll edges. 是否在滚动边缘显示渐变阴影。 */
+        this.shadow = false;
+        /** Whether to show the native scrollbar. 是否显示原生滚动条。 */
+        this.scrollbar = true;
+        this.shadowTop = false;
+        this.shadowBottom = false;
+        this.handleScroll = (event) => {
+            const element = event.currentTarget;
+            this.shadowTop = element.scrollTop > 0;
+            this.shadowBottom = element.scrollTop + element.clientHeight < element.scrollHeight;
+            this.emit('aithe-scroll', {
+                top: element.scrollTop,
+                left: element.scrollLeft,
+            });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .wrap {
+        position: relative;
+        overflow: auto;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .wrap.no-scrollbar {
+        scrollbar-width: none;
+      }
+
+      .wrap.no-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+
+      .wrap::before,
+      .wrap::after {
+        content: '';
+        position: sticky;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 16px;
+        pointer-events: none;
+      }
+
+      .wrap.shadow-top::before {
+        top: 0;
+        background: linear-gradient(180deg, rgba(11, 17, 29, 0.14), transparent);
+      }
+
+      .wrap.shadow-bottom::after {
+        bottom: 0;
+        background: linear-gradient(0deg, rgba(11, 17, 29, 0.14), transparent);
+      }
+
+      .inner {
+        padding: var(--aithe-space-4);
+      }
+    `,
+    ]; }
+    render() {
+        const style = [
+            this.height ? `height:${this.height};` : '',
+            this.maxHeight ? `max-height:${this.maxHeight};` : '',
+        ].join('');
+        return html `
+      <div
+        class=${classMap({
+            wrap: true,
+            'no-scrollbar': !this.scrollbar,
+            'shadow-top': this.shadow && this.shadowTop,
+            'shadow-bottom': this.shadow && this.shadowBottom,
+        })}
+        style=${style}
+        @scroll=${this.handleScroll}
+      >
+        <div class="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheScroller.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-height' })
+], AitheScroller.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheScroller.prototype, "shadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheScroller.prototype, "scrollbar", void 0);
+__decorate([
+    state()
+], AitheScroller.prototype, "shadowTop", void 0);
+__decorate([
+    state()
+], AitheScroller.prototype, "shadowBottom", void 0);
+AitheScroller = __decorate([
+    customElement('aithe-scroller')
+], AitheScroller);
+export { AitheScroller };

package/dist/components/container/split-panel.js

@@ -0,0 +1,150 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Resizable two-panel layout with a draggable divider.
+ * 可调整大小的双面板布局，带可拖动分隔条。
+ *
+ * @slot start - Content for the first (start) pane. 第一个（起始）面板的内容。
+ * @slot end   - Content for the second (end) pane. 第二个（末尾）面板的内容。
+ *
+ * @fires aithe-resize - Emitted when the divider is dragged with `{ value }`. 分隔条被拖动时发出 `{ value }`。
+ *
+ * @example
+ * ```html
+ * <aithe-split-panel direction="horizontal" value="40" min-size="20" max-size="80">
+ *   <div slot="start">Left pane</div>
+ *   <div slot="end">Right pane</div>
+ * </aithe-split-panel>
+ * ```
+ */
+let AitheSplitPanel = class AitheSplitPanel extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Layout direction of the split. 分割布局的方向。 */
+        this.direction = 'horizontal';
+        /** Minimum size of the start pane as a percentage. 起始面板的最小百分比尺寸。 */
+        this.minSize = 20;
+        /** Maximum size of the start pane as a percentage. 起始面板的最大百分比尺寸。 */
+        this.maxSize = 80;
+        /** Current split position as a percentage (0–100). 当前分割位置百分比（0–100）。 */
+        this.value = 50;
+        this.dragging = false;
+        this.handlePointerDown = () => {
+            this.dragging = true;
+        };
+        this.handlePointerMove = (event) => {
+            if (!this.dragging) {
+                return;
+            }
+            const rect = this.getBoundingClientRect();
+            const raw = this.direction === 'horizontal'
+                ? ((event.clientX - rect.left) / rect.width) * 100
+                : ((event.clientY - rect.top) / rect.height) * 100;
+            this.value = Math.max(this.minSize, Math.min(this.maxSize, raw));
+            this.emit('aithe-resize', { value: this.value });
+        };
+        this.handlePointerUp = () => {
+            this.dragging = false;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .split {
+        display: grid;
+        width: 100%;
+        min-height: 280px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-xl);
+        overflow: hidden;
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .split.horizontal {
+        grid-template-columns: minmax(0, var(--aithe-split-start, 50%)) 12px minmax(0, 1fr);
+      }
+
+      .split.vertical {
+        grid-template-rows: minmax(0, var(--aithe-split-start, 50%)) 12px minmax(0, 1fr);
+      }
+
+      .pane {
+        min-width: 0;
+        min-height: 0;
+        padding: var(--aithe-space-4);
+      }
+
+      .handle {
+        background: var(--aithe-color-surface-muted);
+        cursor: col-resize;
+      }
+
+      .vertical .handle {
+        cursor: row-resize;
+      }
+
+      .handle.dragging {
+        background: var(--aithe-primary-5);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointermove', this.handlePointerMove);
+        document.addEventListener('pointerup', this.handlePointerUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointermove', this.handlePointerMove);
+        document.removeEventListener('pointerup', this.handlePointerUp);
+    }
+    updated() {
+        this.style.setProperty('--aithe-split-start', `${this.value}%`);
+    }
+    render() {
+        return html `
+      <div class=${classMap({ split: true, [this.direction]: true })}>
+        <div class="pane"><slot name="start"></slot></div>
+        <div
+          class=${classMap({ handle: true, dragging: this.dragging })}
+          role="separator"
+          aria-orientation=${this.direction === 'horizontal' ? 'vertical' : 'horizontal'}
+          @pointerdown=${this.handlePointerDown}
+        ></div>
+        <div class="pane"><slot name="end"></slot></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSplitPanel.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-size' })
+], AitheSplitPanel.prototype, "minSize", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-size' })
+], AitheSplitPanel.prototype, "maxSize", void 0);
+__decorate([
+    property({ type: Number })
+], AitheSplitPanel.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheSplitPanel.prototype, "dragging", void 0);
+AitheSplitPanel = __decorate([
+    customElement('aithe-split-panel')
+], AitheSplitPanel);
+export { AitheSplitPanel };

package/dist/components/data/AGENTS.md

@@ -30,5 +30,5 @@
 - `aithe-tabs` + `aithe-tab-pane` 配合使用，通过 `active-key` 控制当前标签
 - `aithe-tree` 通过 `data` 属性传入树形数据结构
 - `aithe-timeline` 支持数据驱动模式（通过 `items` 属性）和插槽模式
-- `aithe-dropdown` 依赖 `anchored-overlay` 实现浮层定位，内部使用 `aithe-tree-menu` 渲染菜单
+- `aithe-dropdown` 依赖 `anchored-overlay` 实现浮层定位，内部使用 `aithe-tree-menu` 渲染菜单，开关状态变更事件名为 `aithe-dropdown-change`
 - 新增组件需同步更新 `src/index.ts` 和 `docs/api/data/`

package/dist/components/data/box-table.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @file AitheBoxTable — table/box dual-mode data display / AitheBoxTable — 表格/盒子双模式数据展示
+ * @description AitheBoxTable extends AitheTable with a `mode` property.
+ *              When `mode="table"`, it behaves like a standard table.
+ *              When `mode="box"`, it renders records as a grid of boxes using `aithe-brief-box`.
+ *              Column definitions with a `box` property map data to the corresponding slot.
+ *              AitheBoxTable 扩展 AitheTable，增加 `mode` 属性。
+ *              当 `mode="table"` 时，行为与标准表格一致。
+ *              当 `mode="box"` 时，使用 `aithe-brief-box` 将记录渲染为盒子网格。
+ *              带有 `box` 属性的列定义将数据映射到对应的 slot。
+ *
+ * @fires aithe-sort-change - Emitted when a sortable column header is clicked with `{ sortKey, sortOrder }`. 可排序列头被点击时发出 `{ sortKey, sortOrder }`。
+ * @fires aithe-selection-change - Emitted when row selection changes with `{ selectionSet }`. 行选择变更时发出 `{ selectionSet }`。
+ * @fires aithe-row-click - Emitted when a box is clicked with `{ record, rowIndex }`. 点击 box 时发出 `{ record, rowIndex }`。
+ *
+ * @example Data-driven mode with box view / 数据驱动模式 + 盒子视图
+ * ```html
+ * <aithe-box-table
+ *   mode="box"
+ *   columns-json='[{"id":"name","title":"Name","box":"name"},{"id":"status","title":"Status","box":"status"},{"id":"owner","title":"Owner","box":"tags"}]'
+ *   data-json='[{"name":"Alice","status":"Active","owner":"Team A"},{"name":"Bob","status":"Inactive","owner":"Team B"}]'
+ *   box-cols="3"
+ * ></aithe-box-table>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheTable } from './table';
+import '../display/brief-box';
+export declare class AitheBoxTable extends AitheTable {
+    /**
+     * Display mode: "table" for standard table view, "box" for box grid view.
+     * 显示模式："table" 为标准表格视图，"box" 为盒子网格视图。
+     */
+    mode: 'table' | 'box';
+    /**
+     * Number of box columns in box mode (1–12). 盒子模式下每行显示的盒子数（1–12）。
+     */
+    boxCols: number;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private get boxColumns();
+    private getBoxRecordKey;
+    private handleBoxClick;
+    private renderBoxValue;
+    private renderBoxCard;
+    render(): TemplateResult<1>;
+    private handleBriefBoxSelect;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-box-table': AitheBoxTable;
+    }
+}
+//# sourceMappingURL=box-table.d.ts.map

package/dist/components/data/box-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-table.d.ts","sourceRoot":"","sources":["../../../src/components/data/box-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,OAAO,+BAA+B,CAAC;AAIvC,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;OAGG;IACyB,IAAI,EAAE,OAAO,GAAG,KAAK,CAAW;IAE5D;;OAEG;IACgD,OAAO,SAAK;IAE/D,gBAAyB,MAAM,0DAiC7B;IAEF,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,aAAa;IA0CZ,MAAM;IAoDf,OAAO,CAAC,oBAAoB;CAmB7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/data/box-table.js

@@ -0,0 +1,220 @@
+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;
+};
+/**
+ * @file AitheBoxTable — table/box dual-mode data display / AitheBoxTable — 表格/盒子双模式数据展示
+ * @description AitheBoxTable extends AitheTable with a `mode` property.
+ *              When `mode="table"`, it behaves like a standard table.
+ *              When `mode="box"`, it renders records as a grid of boxes using `aithe-brief-box`.
+ *              Column definitions with a `box` property map data to the corresponding slot.
+ *              AitheBoxTable 扩展 AitheTable，增加 `mode` 属性。
+ *              当 `mode="table"` 时，行为与标准表格一致。
+ *              当 `mode="box"` 时，使用 `aithe-brief-box` 将记录渲染为盒子网格。
+ *              带有 `box` 属性的列定义将数据映射到对应的 slot。
+ *
+ * @fires aithe-sort-change - Emitted when a sortable column header is clicked with `{ sortKey, sortOrder }`. 可排序列头被点击时发出 `{ sortKey, sortOrder }`。
+ * @fires aithe-selection-change - Emitted when row selection changes with `{ selectionSet }`. 行选择变更时发出 `{ selectionSet }`。
+ * @fires aithe-row-click - Emitted when a box is clicked with `{ record, rowIndex }`. 点击 box 时发出 `{ record, rowIndex }`。
+ *
+ * @example Data-driven mode with box view / 数据驱动模式 + 盒子视图
+ * ```html
+ * <aithe-box-table
+ *   mode="box"
+ *   columns-json='[{"id":"name","title":"Name","box":"name"},{"id":"status","title":"Status","box":"status"},{"id":"owner","title":"Owner","box":"tags"}]'
+ *   data-json='[{"name":"Alice","status":"Active","owner":"Team A"},{"name":"Bob","status":"Inactive","owner":"Team B"}]'
+ *   box-cols="3"
+ * ></aithe-box-table>
+ * ```
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheTable } from './table';
+import { getValueByPath, safeStringify } from '../../utils/utils';
+import { t } from '../../styles/i18n';
+import '../display/brief-box';
+let AitheBoxTable = class AitheBoxTable extends AitheTable {
+    constructor() {
+        super(...arguments);
+        /**
+         * Display mode: "table" for standard table view, "box" for box grid view.
+         * 显示模式："table" 为标准表格视图，"box" 为盒子网格视图。
+         */
+        this.mode = 'table';
+        /**
+         * Number of box columns in box mode (1–12). 盒子模式下每行显示的盒子数（1–12）。
+         */
+        this.boxCols = 0;
+    }
+    static { this.styles = [
+        ...AitheTable.styles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .box-grid {
+        display: block;
+      }
+
+      .box-grid-row {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: var(--aithe-space-3, 12px);
+        margin-bottom: var(--aithe-space-3, 12px);
+      }
+
+      :host([box-cols]) .box-grid-row {
+        grid-template-columns: repeat(var(--box-cols), 1fr);
+      }
+
+      .box-grid-col {
+        min-width: 0;
+        box-sizing: border-box;
+      }
+
+      .box-empty {
+        padding: var(--aithe-space-8, 32px);
+        text-align: center;
+        color: var(--aithe-color-text-muted, #c9cdd4);
+      }
+    `,
+    ]; }
+    get boxColumns() {
+        return this.resolvedColumns.filter((col) => col.box);
+    }
+    getBoxRecordKey(record, index) {
+        const value = getValueByPath(record, this.rowKey);
+        if (value == null)
+            return String(index);
+        return safeStringify(value);
+    }
+    handleBoxClick(record, rowIndex) {
+        this.emit('aithe-row-click', { record, rowIndex });
+    }
+    renderBoxValue(column, record) {
+        const value = getValueByPath(record, column.dataIndex ? String(column.dataIndex) : column.id);
+        if (column.render)
+            return column.render(column.id, value, record);
+        if (value == null)
+            return nothing;
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return value;
+    }
+    renderBoxCard(record, rowIndex) {
+        const key = this.getBoxRecordKey(record, rowIndex);
+        const checked = this.selectionSet.has(key);
+        let nameSlot = nothing;
+        let statusSlot = nothing;
+        let tagsSlot = nothing;
+        let actionsSlot = nothing;
+        for (const col of this.boxColumns) {
+            const value = this.renderBoxValue(col, record);
+            switch (col.box) {
+                case 'name':
+                    nameSlot = value;
+                    break;
+                case 'status':
+                    statusSlot = value;
+                    break;
+                case 'tags':
+                    tagsSlot = value;
+                    break;
+                case 'actions':
+                    actionsSlot = value;
+                    break;
+            }
+        }
+        return html `
+      <aithe-brief-box
+        selectable=${this.selectable}
+        ?selected=${checked}
+        @click=${() => this.handleBoxClick(record, rowIndex)}
+        @selected-change=${(e) => this.handleBriefBoxSelect(e, record, rowIndex)}
+      >
+        <span slot="name">${nameSlot}</span>
+        ${statusSlot === nothing ? nothing : html `<span slot="status">${statusSlot}</span>`}
+        ${tagsSlot === nothing ? nothing : html `<span slot="tags">${tagsSlot}</span>`}
+        ${actionsSlot === nothing ? nothing : html `<span slot="actions">${actionsSlot}</span>`}
+      </aithe-brief-box>
+    `;
+    }
+    render() {
+        if (this.mode === 'table') {
+            return super.render();
+        }
+        const rows = this.rowData;
+        const cols = Math.max(1, Math.min(12, this.boxCols));
+        if (rows.length === 0) {
+            return html `
+        <div class="box-empty">
+          <slot name="empty">${t('data.table.emptyText')}</slot>
+        </div>
+      `;
+        }
+        const cards = [];
+        const isFixedCols = this.boxCols > 0;
+        if (isFixedCols) {
+            for (let i = 0; i < rows.length; i += cols) {
+                const chunk = rows.slice(i, i + cols);
+                cards.push(html `
+          <div class="box-grid-row" style=${styleMap({ '--box-cols': String(cols) })}>
+            ${chunk.map((record, j) => html `
+                <div class="box-grid-col">
+                  ${this.renderBoxCard(record, i + j)}
+                </div>
+              `)}
+          </div>
+        `);
+            }
+        }
+        else {
+            cards.push(html `
+        <div class="box-grid-row">
+          ${rows.map((record, i) => html `
+              <div class="box-grid-col">
+                ${this.renderBoxCard(record, i)}
+              </div>
+            `)}
+        </div>
+      `);
+        }
+        return html `
+      <slot @slotchange=${() => this.syncSlotColumns()}></slot>
+      <div class="box-grid">${cards}</div>
+    `;
+    }
+    handleBriefBoxSelect(e, record, rowIndex) {
+        e.stopPropagation();
+        const { selected } = e.detail;
+        const key = this.getBoxRecordKey(record, rowIndex);
+        if (this.selectable === 'single') {
+            this.selectionSet.clear();
+            if (selected) {
+                this.selectionSet.add(key);
+            }
+        }
+        else if (selected) {
+            this.selectionSet.add(key);
+        }
+        else {
+            this.selectionSet.delete(key);
+        }
+        this.requestUpdate();
+        this.emit('aithe-selection-change', { selectionSet: this.selectionSet });
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBoxTable.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'box-cols' })
+], AitheBoxTable.prototype, "boxCols", void 0);
+AitheBoxTable = __decorate([
+    customElement('aithe-box-table')
+], AitheBoxTable);
+export { AitheBoxTable };

package/dist/components/data/dropdown.d.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from 'lit';
 import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
-import type { AitheTreeNodeMeta } from '../../core/types';
+import type { AitheTreeNodeMeta, AitheTreeNodeFilter } from '../../core/types';
 /**
  * Dropdown menu with nested submenus, keyboard navigation, and hover/click triggers.
  * Internally uses `<aithe-tree-menu>` for menu rendering.
@@ -8,7 +8,7 @@ import type { AitheTreeNodeMeta } from '../../core/types';
  *
  * @slot - Default slot for the trigger element. 触发元素内容。
  * @fires aithe-select - Emitted when a menu item is selected, with `{ item, path, id }`. 菜单项选中时触发。
- * @fires aithe-open-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @fires aithe-dropdown-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
  * @example
  * ```html
  * <aithe-dropdown trigger="click" items='[{"id":"a","label":"Action"},{"id":"b","label":"Another"}]'>
@@ -29,6 +29,12 @@ export declare class AitheDropdown extends AitheAnchoredOverlayElement {
     items: readonly AitheTreeNodeMeta[];
     /** Dropdown panel placement. 下拉面板位置。 */
     placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /**
+     * Filter callback for menu items. Return `true` to show the item, `false` to hide it.
+     * Useful for permission-based access control.
+     * 菜单项过滤回调。返回 `true` 显示该项，返回 `false` 隐藏该项。适用于基于权限的访问控制。
+     */
+    itemFilter: AitheTreeNodeFilter | null;
     private readonly panel?;
     private activeId;
     protected willUpdate(changed: PropertyValues<this>): void;
@@ -47,10 +53,7 @@ export declare class AitheDropdown extends AitheAnchoredOverlayElement {
     private readonly openOnHover;
     /** Closes dropdown on hover end (hover trigger only). 悬停结束时关闭下拉菜单（仅悬停触发）。 */
     private readonly closeOnHoverEnd;
-    /** Handles item selection from the tree-menu and emits aithe-select. 处理 tree-menu 的选中事件并触发 aithe-select。 */
     private readonly handleTreeSelect;
-    /** Recursively finds an item by id. 递归查找指定 id 的菜单项。 */
-    private findItemById;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=dropdown.d.ts.map

package/dist/components/data/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/data/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,aAAc,SAAQ,2BAA2B;IAC5D,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IACjE,uFAAuF;IAC3D,KAAK,SAAM;IACvC,8EAA8E;IAClD,IAAI,SAAM;IACtC,2DAA2D;IACX,SAAS,SAAM;IAC/D,sDAAsD;IACtB,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAM;IACzE,wCAAwC;IACZ,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAC7E;IAEA,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAE7C,OAAO,CAAC,QAAQ,CAAM;IAE/B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+BpB;IAEF,SAAS,KAAK,YAAY,IAAI,WAAW,GAAG,IAAI,CAE/C;IAED,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAYtD,8DAA8D;IAC9D,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAYnC;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,2EAA2E;IAC3E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIzB;IAEF,sEAAsE;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAC,eAAe,CAI9B;IAEF,4GAA4G;IAC5G,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAO/B;IAEF,uDAAuD;IACvD,OAAO,CAAC,YAAY;IAcpB,MAAM;CAkCP"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/data/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAG1E;;;;;;;;;;;;;;GAcG;AACH,qBACa,aAAc,SAAQ,2BAA2B;IAC5D,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IACjE,uFAAuF;IAC3D,KAAK,SAAM;IACvC,8EAA8E;IAClD,IAAI,SAAM;IACtC,2DAA2D;IACX,SAAS,SAAM;IAC/D,sDAAsD;IACtB,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAM;IACzE,wCAAwC;IACZ,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAC7E;IAEjB;;;;OAIG;IAC6B,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAE7D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAE7C,OAAO,CAAC,QAAQ,CAAM;IAE/B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+BpB;IAEF,SAAS,KAAK,YAAY,IAAI,WAAW,GAAG,IAAI,CAE/C;IAED,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAYtD,8DAA8D;IAC9D,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAYnC;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,2EAA2E;IAC3E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIzB;IAEF,sEAAsE;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAC,eAAe,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAE/B;IAEF,MAAM;CAmCP"}