@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/data/table.js

@@ -0,0 +1,1210 @@
+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, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheScrollbarStyles } from '../../core/styles';
+import { getValueByPath, safeStringify } from '../../utils/utils';
+import { t } from '../../styles/i18n';
+import { filterFactory } from '../../core/filter';
+import './table-column';
+const SELECTION_COL_WIDTH = 52;
+const MIN_COL_WIDTH = 40;
+const DEFAULT_COL_WIDTH = 120;
+const DRAG_THRESHOLD = 5;
+const SHADOW_WIDTH = 15;
+function toSortableString(val) {
+    if (val === null || val === undefined)
+        return '';
+    if (typeof val === 'object')
+        return '';
+    if (typeof val === 'string')
+        return val;
+    if (typeof val === 'number' || typeof val === 'boolean')
+        return String(val);
+    return '';
+}
+/**
+ * Data table with sorting, row selection, column fixed, column resizing,
+ * column drag-to-reorder, loading state, single-select mode, and keyboard navigation.
+ *
+ * @slot empty - Content shown when the table has no data.
+ * @slot loading - Custom loading indicator content.
+ * @slot - Default slot for `<aithe-table-column>` children.
+ *
+ * @fires aithe-sort-change    - Emitted with `{ sortKey, sortOrder }`.
+ * @fires aithe-selection-change - Emitted with `{ selectionSet }`.
+ * @fires aithe-row-click      - Emitted with `{ record, rowIndex }`.
+ * @fires aithe-column-resize  - Emitted with `{ columnId, width }`.
+ * @fires aithe-column-reorder - Emitted with `{ columns }` (new column id order).
+ */
+let AitheTable = class AitheTable extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.columnsJson = '';
+        this.columns = [];
+        this.dataJson = '';
+        this.data = [];
+        this.rowKey = 'id';
+        this.striped = false;
+        this.bordered = true;
+        this.hoverable = true;
+        this.selectable = 'none';
+        this.selectionSet = new Set();
+        this.sortKey = '';
+        this.sortOrder = '';
+        this.loading = false;
+        this.loadingText = '';
+        this.slotColumns = [];
+        this.columnOrder = [];
+        this.focusedRowIndex = -1;
+        this.resizeData = null;
+        this.dragData = null;
+        /**
+         * Keyboard navigation handler for ArrowDown/ArrowUp/Space/Enter.
+         * 键盘导航处理：ArrowDown/ArrowUp/空格/Enter。
+         */
+        this._onKeyDown = (e) => {
+            const rows = this.rowData;
+            if (rows.length === 0)
+                return;
+            const tag = e.target?.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'BUTTON')
+                return;
+            let newIndex;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    newIndex = Math.min(this.focusedRowIndex + 1, rows.length - 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    newIndex = Math.max(this.focusedRowIndex - 1, 0);
+                    break;
+                case ' ':
+                    e.preventDefault();
+                    if (this.selectable !== 'none' && this.focusedRowIndex >= 0) {
+                        const record = rows[this.focusedRowIndex];
+                        const key = this.getRecordKey(record, this.focusedRowIndex);
+                        const checked = !this.selectionSet.has(key);
+                        this.toggleRowSelection(record, this.focusedRowIndex, checked);
+                    }
+                    return;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.focusedRowIndex >= 0) {
+                        this.emit('aithe-row-click', { record: rows[this.focusedRowIndex], rowIndex: this.focusedRowIndex });
+                    }
+                    return;
+                default:
+                    return;
+            }
+            if (newIndex !== this.focusedRowIndex) {
+                this.focusedRowIndex = newIndex;
+                this.requestUpdate();
+                this._scrollRowIntoView(newIndex);
+            }
+        };
+        /**
+         * Handle mousemove during column resize, updating column width.
+         * 列宽调整时处理鼠标移动，更新列宽。
+         */
+        this._onResizeMove = (e) => {
+            if (!this.resizeData)
+                return;
+            const rd = this.resizeData;
+            const { startX, startWidth } = rd;
+            const diff = e.clientX - startX;
+            const newWidth = Math.max(MIN_COL_WIDTH, startWidth + diff);
+            const col = this.resolvedColumns.find((c) => c.id === rd.columnId);
+            const minW = col?.minWidth ? Number.parseInt(col.minWidth, 10) : MIN_COL_WIDTH;
+            const finalWidth = Math.max(minW, newWidth);
+            const ths = this.renderRoot?.querySelectorAll('th');
+            if (ths) {
+                for (const th of ths) {
+                    const el = th;
+                    const colId = el.dataset.columnId;
+                    if (colId === rd.columnId) {
+                        el.style.width = `${finalWidth}px`;
+                    }
+                }
+            }
+            const tds = this.renderRoot?.querySelectorAll('td');
+            if (tds) {
+                for (const td of tds) {
+                    const el = td;
+                    const colId = el.dataset.columnId;
+                    if (colId === rd.columnId) {
+                        el.style.width = `${finalWidth}px`;
+                    }
+                }
+            }
+        };
+        /**
+         * End column resize on mouseup, emit event with final width.
+         * 鼠标松开时结束列宽调整，发射最终宽度事件。
+         */
+        this._onResizeEnd = () => {
+            if (!this.resizeData)
+                return;
+            this._removeResizeListeners();
+            const ths = this.renderRoot?.querySelectorAll('th');
+            let finalWidth = '';
+            if (ths) {
+                for (const th of ths) {
+                    const el = th;
+                    const colId = el.dataset.columnId;
+                    if (colId === this.resizeData.columnId) {
+                        finalWidth = el.style.width;
+                    }
+                }
+            }
+            this.emit('aithe-column-resize', {
+                columnId: this.resizeData.columnId,
+                width: finalWidth,
+            });
+            this.resizeData = null;
+        };
+        // --- Column drag-to-reorder logic ---
+        this.dragThreshold = DRAG_THRESHOLD;
+        this._onDragMove = (e) => {
+            if (!this.dragData)
+                return;
+            const ths = this.renderRoot?.querySelectorAll('th[data-column-id]');
+            if (!ths)
+                return;
+            for (const th of ths) {
+                th.classList.remove('drag-over-left', 'drag-over-right');
+            }
+            for (const th of ths) {
+                const el = th;
+                const rect = el.getBoundingClientRect();
+                const colId = el.dataset.columnId;
+                if (colId === this.dragData.columnId)
+                    continue;
+                if (e.clientX >= rect.left && e.clientX <= rect.right) {
+                    const mid = rect.left + rect.width / 2;
+                    if (e.clientX < mid) {
+                        el.classList.add('drag-over-left');
+                    }
+                    else {
+                        el.classList.add('drag-over-right');
+                    }
+                    break;
+                }
+            }
+        };
+        /**
+         * End column drag-to-reorder. Removes ghost element and event listeners,
+         * updates column order, and emits event.
+         * 结束列拖拽排序。移除幽灵元素和事件监听，更新列顺序并发射事件。
+         */
+        this._onDragEnd = (e) => {
+            if (!this.dragData)
+                return;
+            document.removeEventListener('mousemove', this._onDragMove);
+            document.removeEventListener('mouseup', this._onDragEnd);
+            this._clearDragClasses();
+            const dragColId = this.dragData.columnId;
+            const target = this._findDropTarget(e, dragColId);
+            if (target) {
+                this._applyColumnReorder(dragColId, target.colId, target.insertBefore);
+            }
+            this.dragData = null;
+        };
+    }
+    /**
+     * Resolved column definitions with drag-to-reorder applied.
+     * 应用了拖拽排序后的列定义。
+     */
+    get resolvedColumns() {
+        const cols = this.slotColumns.length > 0 ? this.slotColumns : this.columns;
+        if (this.columnOrder.length === cols.length && this.columnOrder.length > 0) {
+            const ordered = [];
+            for (const id of this.columnOrder) {
+                const found = cols.find((c) => c.id === id);
+                if (found)
+                    ordered.push(found);
+            }
+            if (ordered.length === cols.length)
+                return ordered;
+        }
+        return cols;
+    }
+    /** Ordered column IDs from resolved columns. 已解析列的 ID 顺序。 */
+    get orderedColumnIds() {
+        return this.resolvedColumns.map((c) => c.id);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slotObserver = new MutationObserver(() => this.syncSlotColumns());
+        this.slotObserver.observe(this, { childList: true, subtree: true, attributes: true });
+        this.syncSlotColumns();
+        this.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.slotObserver?.disconnect();
+        this.removeEventListener('keydown', this._onKeyDown);
+    }
+    updated(changed) {
+        if (changed.has('data') || changed.has('sortKey') || changed.has('sortOrder')) {
+            this.focusedRowIndex = -1;
+        }
+    }
+    /**
+     * Scroll the row at the given index into the visible area.
+     * 将指定索引的行滚动到可视区域。
+     */
+    _scrollRowIntoView(index) {
+        const tbody = this.renderRoot?.querySelector('tbody');
+        if (!tbody)
+            return;
+        const tr = tbody.children[index];
+        tr?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+    /**
+     * Sync column definitions from `<aithe-table-column>` child elements.
+     * 从 `<aithe-table-column>` 子元素同步列定义。
+     */
+    syncSlotColumns() {
+        const colEls = this.querySelectorAll('aithe-table-column');
+        if (colEls.length === 0) {
+            if (this.slotColumns.length > 0) {
+                this.slotColumns = [];
+            }
+            return;
+        }
+        const cols = [];
+        for (const el of colEls) {
+            const col = el;
+            const def = {
+                id: col.id,
+                title: col.title,
+                dataIndex: col.dataIndex || col.id,
+                width: col.width || undefined,
+                minWidth: col.minWidth || undefined,
+                align: col.align,
+                sortable: col.sortable,
+                fixed: col.fixed || undefined,
+                resizable: col.resizable,
+                draggable: col.draggable,
+                icon: col.icon || undefined,
+                variant: col.variant || undefined,
+                filter: col.filter || undefined,
+                box: col.box || undefined,
+            };
+            if (typeof col.cellRenderer === 'function') {
+                def.render = col.cellRenderer;
+            }
+            cols.push(def);
+        }
+        this.slotColumns = cols;
+    }
+    /**
+     * Parse JSON string properties into their object counterparts.
+     * 将 JSON 字符串属性解析为对象。
+     */
+    willUpdate(changed) {
+        if (changed.has('columnsJson') && this.columnsJson) {
+            try {
+                this.columns = JSON.parse(this.columnsJson);
+            }
+            catch {
+                this.columns = [];
+            }
+        }
+        if (changed.has('dataJson') && this.dataJson) {
+            try {
+                this.data = JSON.parse(this.dataJson);
+            }
+            catch {
+                this.data = [];
+            }
+        }
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        outline: none;
+      }
+
+      .table-wrap {
+        overflow: auto;
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-1);
+        position: relative;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+      }
+
+      :host([has-fixed]) table {
+        min-width: max-content;
+      }
+
+      th,
+      td {
+        padding: var(--aithe-space-4);
+        text-align: left;
+        border-bottom: 1px solid var(--aithe-color-border);
+        vertical-align: middle;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      .bordered th,
+      .bordered td {
+        border-inline-end: 1px solid var(--aithe-color-border);
+      }
+
+      .bordered th:last-child,
+      .bordered td:last-child {
+        border-inline-end: none;
+      }
+
+      thead th {
+        position: sticky;
+        top: 0;
+        background: color-mix(in srgb, var(--aithe-color-surface-elevated) 92%, transparent);
+        color: var(--aithe-color-text-muted);
+        font-size: var(--aithe-font-size-sm);
+        font-weight: var(--aithe-font-weight-semibold);
+        z-index: 2;
+      }
+
+      /* Fixed column styles */
+      th.fixed-left,
+      td.fixed-left {
+        position: sticky;
+        z-index: 3;
+      }
+
+      th.fixed-right,
+      td.fixed-right {
+        position: sticky;
+        z-index: 3;
+      }
+
+      th.fixed-left {
+        z-index: 4;
+      }
+
+      th.fixed-right {
+        z-index: 4;
+      }
+
+      td.fixed-left,
+      td.fixed-right {
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .fixed-left-shadow::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: ${SHADOW_WIDTH}px;
+        pointer-events: none;
+        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
+        transform: translateX(100%);
+      }
+
+      .fixed-right-shadow::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: ${SHADOW_WIDTH}px;
+        pointer-events: none;
+        background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.06));
+        transform: translateX(-100%);
+      }
+
+      tbody tr.hoverable:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      tbody tr.striped:nth-child(even) {
+        background: color-mix(in srgb, var(--aithe-color-surface-muted) 72%, transparent);
+      }
+
+      tbody tr.striped:nth-child(even) td.fixed-left,
+      tbody tr.striped:nth-child(even) td.fixed-right,
+      tbody tr.striped:nth-child(even) td.selection-cell {
+        background: color-mix(in srgb, var(--aithe-color-surface-muted) 72%, transparent);
+      }
+
+      tbody tr.focused {
+        outline: 2px solid var(--aithe-primary-5);
+        outline-offset: -2px;
+      }
+
+      .sorter {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        border: none;
+        padding: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .sort-icon {
+        color: var(--aithe-color-text-subtle);
+      }
+
+      .empty {
+        padding: var(--aithe-space-8);
+        text-align: center;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .checkbox {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+
+      .radio {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        accent-color: var(--aithe-primary-6);
+      }
+
+      .header-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .cell.primary {
+        color: var(--aithe-primary-7);
+      }
+      .cell.success {
+        color: var(--aithe-success-7);
+      }
+      .cell.warning {
+        color: var(--aithe-warning-7);
+      }
+      .cell.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      /* Column resize handle */
+      .resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 4px;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 5;
+        user-select: none;
+      }
+
+      .resize-handle:hover,
+      .resize-handle.resizing {
+        background: var(--aithe-primary-5);
+      }
+
+      /* Column drag handle */
+      .drag-handle {
+        cursor: grab;
+        display: inline-flex;
+        align-items: center;
+        opacity: 0.4;
+        margin-right: var(--aithe-space-1);
+        user-select: none;
+        font-size: 12px;
+      }
+
+      .drag-handle:hover {
+        opacity: 0.8;
+      }
+
+      .drag-handle:active {
+        cursor: grabbing;
+      }
+
+      th.dragging {
+        opacity: 0.5;
+      }
+
+      th.drag-over-left {
+        border-left: 2px solid var(--aithe-primary-6);
+      }
+
+      th.drag-over-right {
+        border-right: 2px solid var(--aithe-primary-6);
+      }
+
+      /* Loading overlay */
+      .loading-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: color-mix(in srgb, var(--aithe-color-surface-elevated) 70%, transparent);
+        z-index: 10;
+        border-radius: var(--aithe-container-radius-xl);
+      }
+
+      .loading-spinner {
+        width: 32px;
+        height: 32px;
+        border: 3px solid var(--aithe-color-border);
+        border-top-color: var(--aithe-primary-6);
+        border-radius: 50%;
+        animation: aithe-spin 0.8s linear infinite;
+      }
+
+      .loading-text {
+        margin-top: var(--aithe-space-2);
+        color: var(--aithe-color-text-muted);
+        font-size: var(--aithe-font-size-sm);
+      }
+
+      @keyframes aithe-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* Loading placeholder rows */
+      .placeholder-cell {
+        height: 20px;
+        background: linear-gradient(
+          90deg,
+          var(--aithe-color-surface-muted) 25%,
+          color-mix(in srgb, var(--aithe-color-surface-muted) 60%, transparent) 50%,
+          var(--aithe-color-surface-muted) 75%
+        );
+        background-size: 200% 100%;
+        animation: aithe-shimmer 1.5s ease-in-out infinite;
+        border-radius: var(--aithe-container-radius-sm);
+      }
+
+      @keyframes aithe-shimmer {
+        0% {
+          background-position: 200% 0;
+        }
+        100% {
+          background-position: -200% 0;
+        }
+      }
+
+      .selection-cell {
+        width: ${SELECTION_COL_WIDTH}px;
+        min-width: ${SELECTION_COL_WIDTH}px;
+        max-width: ${SELECTION_COL_WIDTH}px;
+        position: sticky;
+        left: 0;
+        z-index: 3;
+      }
+
+      thead .selection-cell {
+        z-index: 5;
+      }
+    `,
+    ]; }
+    /**
+     * Sorted row data. Returns original data when no sort key is set.
+     * 排序后的行数据。未设置排序键时返回原始数据。
+     */
+    get rowData() {
+        if (!this.sortKey || !this.sortOrder) {
+            return this.data;
+        }
+        const sorted = [...this.data];
+        sorted.sort((left, right) => {
+            const leftValue = getValueByPath(left, this.sortKey);
+            const rightValue = getValueByPath(right, this.sortKey);
+            if (typeof leftValue === 'number' && typeof rightValue === 'number') {
+                return this.sortOrder === 'asc' ? leftValue - rightValue : rightValue - leftValue;
+            }
+            const normalizedLeft = toSortableString(leftValue);
+            const normalizedRight = toSortableString(rightValue);
+            return this.sortOrder === 'asc'
+                ? normalizedLeft.localeCompare(normalizedRight)
+                : normalizedRight.localeCompare(normalizedLeft);
+        });
+        return sorted;
+    }
+    /** Whether all rows are selected. 是否所有行都被选中。 */
+    get allChecked() {
+        return this.rowData.length > 0 && this.selectionSet.size === this.rowData.length;
+    }
+    /** Whether some (but not all) rows are selected. 是否部分行被选中。 */
+    get partiallyChecked() {
+        return this.selectionSet.size > 0 && !this.allChecked;
+    }
+    /**
+     * Get the unique key for a record.
+     * 获取记录的唯一键。
+     */
+    getRecordKey(record, index) {
+        const value = getValueByPath(record, this.rowKey);
+        if (value == null)
+            return String(index);
+        return safeStringify(value);
+    }
+    /**
+     * Toggle sort state for a column (asc → desc → none → asc).
+     * 切换列的排序状态（升序 → 降序 → 无 → 升序）。
+     */
+    toggleSort(column) {
+        if (!column.sortable)
+            return;
+        if (this.sortKey !== column.id) {
+            this.sortKey = column.id;
+            this.sortOrder = 'asc';
+        }
+        else if (this.sortOrder === 'asc') {
+            this.sortOrder = 'desc';
+        }
+        else if (this.sortOrder === 'desc') {
+            this.sortOrder = '';
+            this.sortKey = '';
+        }
+        else {
+            this.sortOrder = 'asc';
+        }
+        this.emit('aithe-sort-change', {
+            sortKey: this.sortKey,
+            sortOrder: this.sortOrder,
+        });
+    }
+    /**
+     * Toggle selection state for a single row.
+     * 切换单行的选中状态。
+     */
+    toggleRowSelection(record, index, checked) {
+        const key = this.getRecordKey(record, index);
+        if (this.selectable === 'single') {
+            this.selectionSet.clear();
+            if (checked) {
+                this.selectionSet.add(key);
+            }
+        }
+        else if (checked) {
+            this.selectionSet.add(key);
+        }
+        else {
+            this.selectionSet.delete(key);
+        }
+        this.requestUpdate();
+        this.emit('aithe-selection-change', { selectionSet: this.selectionSet });
+    }
+    /**
+     * Toggle all rows selection state (multi-select mode only).
+     * 切换所有行的选中状态（仅多选模式）。
+     */
+    toggleAllRows(checked) {
+        if (this.selectable === 'single')
+            return;
+        this.selectionSet.clear();
+        if (checked) {
+            for (const [index, row] of this.rowData.entries()) {
+                this.selectionSet.add(this.getRecordKey(row, index));
+            }
+        }
+        this.requestUpdate();
+        this.emit('aithe-selection-change', { selectionSet: this.selectionSet });
+    }
+    // --- Column resize logic ---
+    /**
+     * Start column resize on mousedown of the resize handle.
+     * 在调整大小手柄上按下鼠标时开始列宽调整。
+     */
+    _onResizeStart(e, columnId) {
+        e.preventDefault();
+        const th = e.currentTarget.closest('th');
+        if (!th)
+            return;
+        const startWidth = th.getBoundingClientRect().width;
+        this.resizeData = { columnId, startX: e.clientX, startWidth };
+        this._addResizeListeners();
+    }
+    /** Attach document-level resize event listeners. 添加文档级调整大小事件监听。 */
+    _addResizeListeners() {
+        document.addEventListener('mousemove', this._onResizeMove);
+        document.addEventListener('mouseup', this._onResizeEnd);
+    }
+    /** Remove document-level resize event listeners. 移除文档级调整大小事件监听。 */
+    _removeResizeListeners() {
+        document.removeEventListener('mousemove', this._onResizeMove);
+        document.removeEventListener('mouseup', this._onResizeEnd);
+    }
+    /**
+     * Handle mousedown on a column header th. If the user moves the mouse beyond
+     * the drag threshold, starts column drag-to-reorder.
+     * 处理列头 th 上的鼠标按下。如果鼠标移动超过拖拽阈值，开始列拖拽排序。
+     */
+    _onThMouseDown(e, column) {
+        if (!column.draggable)
+            return;
+        const target = e.target;
+        if (target.closest('.resize-handle'))
+            return;
+        if (target.closest('.sorter') && !target.closest('.drag-handle'))
+            return;
+        if (target.closest('.checkbox'))
+            return;
+        if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA')
+            return;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const onMouseMove = (ev) => {
+            if (Math.abs(ev.clientX - startX) > this.dragThreshold || Math.abs(ev.clientY - startY) > this.dragThreshold) {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+                this._startDrag(ev, column.id);
+            }
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    /**
+     * Start column drag-to-reorder. Creates a drag ghost element and attaches
+     * document-level mousemove/mouseup listeners.
+     * 开始列拖拽排序。创建拖拽幽灵元素并添加文档级鼠标事件监听。
+     */
+    _startDrag(e, columnId) {
+        const th = this.renderRoot?.querySelector(`th[data-column-id="${columnId}"]`);
+        if (!th)
+            return;
+        const rect = th.getBoundingClientRect();
+        this.dragData = { columnId, startX: e.clientX, dragColWidth: rect.width };
+        th.classList.add('dragging');
+        document.addEventListener('mousemove', this._onDragMove);
+        document.addEventListener('mouseup', this._onDragEnd);
+    }
+    _clearDragClasses() {
+        const ths = this.renderRoot?.querySelectorAll('th[data-column-id]');
+        if (!ths)
+            return;
+        for (const th of ths) {
+            th.classList.remove('dragging', 'drag-over-left', 'drag-over-right');
+        }
+    }
+    _findDropTarget(e, dragColId) {
+        const ths = this.renderRoot?.querySelectorAll('th[data-column-id]');
+        if (!ths)
+            return null;
+        for (const th of ths) {
+            const el = th;
+            const colId = el.dataset.columnId;
+            if (colId === dragColId)
+                continue;
+            const rect = el.getBoundingClientRect();
+            if (e.clientX >= rect.left && e.clientX <= rect.right) {
+                const mid = rect.left + rect.width / 2;
+                return { colId: colId ?? '', insertBefore: e.clientX < mid };
+            }
+        }
+        return null;
+    }
+    _applyColumnReorder(dragColId, targetColId, insertBefore) {
+        if (targetColId === dragColId)
+            return;
+        const currentOrder = [...this.orderedColumnIds];
+        const dragIdx = currentOrder.indexOf(dragColId);
+        const targetIdx = currentOrder.indexOf(targetColId);
+        if (dragIdx === -1 || targetIdx === -1)
+            return;
+        currentOrder.splice(dragIdx, 1);
+        const newTargetIdx = currentOrder.indexOf(targetColId);
+        const insertIdx = insertBefore ? newTargetIdx : newTargetIdx + 1;
+        currentOrder.splice(insertIdx, 0, dragColId);
+        this.columnOrder = currentOrder;
+        this.emit('aithe-column-reorder', { columns: currentOrder });
+    }
+    // --- Rendering ---
+    renderCell(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);
+        if (column.filter)
+            return filterFactory.format(value, column.filter);
+        return value;
+    }
+    getSortIcon(column) {
+        if (this.sortKey !== column.id)
+            return '↕';
+        if (this.sortOrder === 'asc')
+            return '↑';
+        if (this.sortOrder === 'desc')
+            return '↓';
+        return '↕';
+    }
+    renderColumnHeader(column) {
+        const colIcon = column.icon
+            ? html `
+          <aithe-icon class="header-icon" name=${column.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        const dragHandle = column.draggable
+            ? html `<span class="drag-handle">⠿</span>`
+            : nothing;
+        const sortContent = column.sortable
+            ? html `
+          <button class="sorter" type="button" @click=${() => this.toggleSort(column)}>
+            ${colIcon}
+            <span>${column.title}</span>
+            <span class="sort-icon">${this.getSortIcon(column)}</span>
+          </button>
+        `
+            : html `
+          ${dragHandle}${colIcon}${column.title}
+        `;
+        const resizeHandle = column.resizable
+            ? html `<span
+          class="resize-handle"
+          @mousedown=${(e) => this._onResizeStart(e, column.id)}
+        ></span>`
+            : nothing;
+        return html `
+      <div style="display:flex;align-items:center;gap:4px;">
+        ${column.sortable ? dragHandle : nothing}
+        ${sortContent}
+      </div>
+      ${resizeHandle}
+    `;
+    }
+    /**
+     * Compute `left` or `right` offset for a fixed column.
+     * 计算固定列的 left 或 right 偏移值。
+     */
+    _getFixedStyle(column) {
+        if (!column.fixed)
+            return {};
+        if (column.fixed === 'left') {
+            return { left: `${this._calcLeftOffset(column)}px` };
+        }
+        if (column.fixed === 'right') {
+            return { right: `${this._calcRightOffset(column)}px` };
+        }
+        return {};
+    }
+    _calcLeftOffset(column) {
+        let offset = this.selectable === 'none' ? 0 : SELECTION_COL_WIDTH;
+        for (const c of this.resolvedColumns) {
+            if (c.id === column.id)
+                break;
+            if (c.fixed === 'left') {
+                offset += this._getColumnWidth(c);
+            }
+        }
+        return offset;
+    }
+    _calcRightOffset(column) {
+        let offset = 0;
+        const reversed = [...this.resolvedColumns].reverse();
+        for (const c of reversed) {
+            if (c.id === column.id)
+                break;
+            if (c.fixed === 'right') {
+                offset += this._getColumnWidth(c);
+            }
+        }
+        return offset;
+    }
+    /**
+     * Get the current width of a column from the DOM.
+     * 从 DOM 获取列当前实际宽度。
+     */
+    _getColumnWidth(column) {
+        if (column.width) {
+            const parsed = Number.parseInt(column.width, 10);
+            if (!Number.isNaN(parsed))
+                return parsed;
+        }
+        return DEFAULT_COL_WIDTH;
+    }
+    _hasFixedLeft() {
+        return this.resolvedColumns.some((c) => c.fixed === 'left');
+    }
+    _hasFixedRight() {
+        return this.resolvedColumns.some((c) => c.fixed === 'right');
+    }
+    _renderLoadingRows() {
+        const placeholderCount = Math.min(3, this.data.length || 3);
+        return html `
+      ${Array.from({ length: placeholderCount }, (_, _rowIdx) => html `
+          <tr>
+            ${this.selectable === 'none'
+            ? nothing
+            : html `
+                  <td class="selection-cell"><div class="placeholder-cell"></div></td>
+                `}
+            ${this.resolvedColumns.map((col) => html `
+                <td>
+                  <div
+                    class="placeholder-cell"
+                    style=${styleMap({ width: col.width || '60%' })}
+                  ></div>
+                </td>
+              `)}
+          </tr>
+        `)}
+    `;
+    }
+    _renderSelectAllCheckbox() {
+        if (this.selectable === 'single')
+            return html ``;
+        return html `
+      <input
+        class="checkbox"
+        aria-label=${t('data.table.selectAllAriaLabel')}
+        .indeterminate=${this.partiallyChecked}
+        ?checked=${this.allChecked}
+        type="checkbox"
+        @change=${(event) => this.toggleAllRows(event.currentTarget.checked)}
+      />
+    `;
+    }
+    _renderSelectionCell(checked, record, rowIndex) {
+        if (this.selectable === 'none')
+            return html ``;
+        const isSingle = this.selectable === 'single';
+        return html `
+      <td class="selection-cell">
+        ${isSingle
+            ? html `
+              <input
+                class="radio"
+                type="radio"
+                name=${`${this.tagName}-selection`}
+                aria-label=${t('data.table.selectRowAriaLabel')}
+                .checked=${checked}
+                @click=${(event) => event.stopPropagation()}
+                @change=${(event) => this.toggleRowSelection(record, rowIndex, event.currentTarget.checked)}
+              />
+            `
+            : html `
+              <input
+                class="checkbox"
+                aria-label=${t('data.table.selectRowAriaLabel')}
+                .checked=${checked}
+                type="checkbox"
+                @click=${(event) => event.stopPropagation()}
+                @change=${(event) => this.toggleRowSelection(record, rowIndex, event.currentTarget.checked)}
+              />
+            `}
+      </td>
+    `;
+    }
+    _renderTableBody(rows) {
+        if (this.loading)
+            return this._renderLoadingRows();
+        const hasFixedLeft = this._hasFixedLeft();
+        const hasFixedRight = this._hasFixedRight();
+        return html `
+      ${rows.map((record, rowIndex) => {
+            const key = this.getRecordKey(record, rowIndex);
+            const checked = this.selectionSet.has(key);
+            const isFocused = rowIndex === this.focusedRowIndex;
+            return html `
+          <tr
+            class=${classMap({
+                hoverable: this.hoverable,
+                striped: this.striped,
+                focused: isFocused,
+            })}
+            @click=${() => {
+                this.focusedRowIndex = rowIndex;
+                this.emit('aithe-row-click', { record, rowIndex });
+            }}
+          >
+            ${this._renderSelectionCell(checked, record, rowIndex)}
+            ${this.resolvedColumns.map((column) => {
+                const hasVariant = column.variant && column.variant !== 'default';
+                return html `
+                <td
+                  data-column-id=${column.id}
+                  class=${classMap({
+                    cell: !!hasVariant,
+                    [column.variant || '']: !!hasVariant,
+                    'fixed-left': column.fixed === 'left',
+                    'fixed-right': column.fixed === 'right',
+                    'fixed-left-shadow': column.fixed === 'left' && hasFixedLeft,
+                    'fixed-right-shadow': column.fixed === 'right' && hasFixedRight,
+                })}
+                  style=${styleMap({
+                    textAlign: column.align ?? 'left',
+                    ...this._getFixedStyle(column),
+                })}
+                >
+                  ${this.renderCell(column, record)}
+                </td>
+              `;
+            })}
+          </tr>
+        `;
+        })}
+    `;
+    }
+    render() {
+        const rows = this.rowData;
+        const hasFixedLeft = this._hasFixedLeft();
+        const hasFixedRight = this._hasFixedRight();
+        this.toggleAttribute('has-fixed', (hasFixedLeft || hasFixedRight || this.selectable !== 'none'));
+        const selectAllTh = this.selectable === 'none'
+            ? null
+            : html `
+            <th
+              class="selection-cell"
+              style=${styleMap({
+                width: `${SELECTION_COL_WIDTH}px`,
+                minWidth: `${SELECTION_COL_WIDTH}px`,
+                maxWidth: `${SELECTION_COL_WIDTH}px`,
+                left: '0',
+            })}
+            >
+              ${this._renderSelectAllCheckbox()}
+            </th>
+          `;
+        const loadingTextEl = this.loadingText
+            ? html `<div class="loading-text">${this.loadingText}</div>`
+            : nothing;
+        return html `
+      <div
+        class=${classMap({ 'table-wrap': true, bordered: this.bordered })}
+        tabindex="0"
+        @keydown=${this._onKeyDown}
+      >
+        <slot @slotchange=${() => this.syncSlotColumns()}></slot>
+        ${this.loading
+            ? html `
+              <div class="loading-overlay">
+                <slot name="loading">
+                  <div class="loading-spinner"></div>
+                  ${loadingTextEl}
+                </slot>
+              </div>
+            `
+            : nothing}
+        ${rows.length
+            ? html `
+              <table>
+                <thead>
+                  <tr>
+                    ${selectAllTh}
+                    ${this.resolvedColumns.map((column) => html `
+                        <th
+                          data-column-id=${column.id}
+                          @mousedown=${(e) => this._onThMouseDown(e, column)}
+                          class=${classMap({
+                'fixed-left': column.fixed === 'left',
+                'fixed-right': column.fixed === 'right',
+                'fixed-left-shadow': column.fixed === 'left' && hasFixedLeft,
+                'fixed-right-shadow': column.fixed === 'right' && hasFixedRight,
+            })}
+                          style=${styleMap({
+                textAlign: column.align ?? 'left',
+                width: column.width,
+                minWidth: column.minWidth,
+                ...this._getFixedStyle(column),
+            })}
+                        >
+                          ${this.renderColumnHeader(column)}
+                        </th>
+                      `)}
+                  </tr>
+                </thead>
+                <tbody>
+                  ${this._renderTableBody(rows)}
+                </tbody>
+              </table>
+            `
+            : html `
+              <div class="empty">
+                <slot name="empty">${t('data.table.emptyText')}</slot>
+              </div>
+            `}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'columns' })
+], AitheTable.prototype, "columnsJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: String, attribute: 'data' })
+], AitheTable.prototype, "dataJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTable.prototype, "data", void 0);
+__decorate([
+    property({ type: String, attribute: 'row-key' })
+], AitheTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTable.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTable.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hoverable' })
+], AitheTable.prototype, "hoverable", void 0);
+__decorate([
+    property({ type: String })
+], AitheTable.prototype, "selectable", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheTable.prototype, "selectionSet", void 0);
+__decorate([
+    property({ type: String, attribute: 'sort-key' })
+], AitheTable.prototype, "sortKey", void 0);
+__decorate([
+    property({ type: String, attribute: 'sort-order' })
+], AitheTable.prototype, "sortOrder", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], AitheTable.prototype, "loadingText", void 0);
+__decorate([
+    state()
+], AitheTable.prototype, "slotColumns", void 0);
+__decorate([
+    state()
+], AitheTable.prototype, "columnOrder", void 0);
+__decorate([
+    state()
+], AitheTable.prototype, "focusedRowIndex", void 0);
+AitheTable = __decorate([
+    customElement('aithe-table')
+], AitheTable);
+export { AitheTable };