@yh-ui/components 0.1.0

package/dist/table/src/table.vue.d.ts

@@ -0,0 +1,493 @@
+/**
+ * YhTable - 高性能表格组件
+ * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+ * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+ */
+import { type CSSProperties } from 'vue';
+import { type TableColumn, type SortOrder, type TablePaginationConfig } from './table';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_20: any, __VLS_21: {
+    column: any;
+    columnIndex: any;
+}, __VLS_32: any, __VLS_33: {
+    column: any;
+    columnIndex: any;
+}, __VLS_39: {}, __VLS_46: any, __VLS_47: {
+    row: any;
+    column: any;
+    rowIndex: any;
+    cellValue: any;
+}, __VLS_57: {
+    row: any;
+    rowIndex: any;
+}, __VLS_63: {}, __VLS_66: any, __VLS_67: {
+    column: any;
+    columnIndex: any;
+    data: any;
+}, __VLS_69: {}, __VLS_80: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+} & {
+    [K in NonNullable<typeof __VLS_32>]?: (props: typeof __VLS_33) => any;
+} & {
+    [K in NonNullable<typeof __VLS_46>]?: (props: typeof __VLS_47) => any;
+} & {
+    [K in NonNullable<typeof __VLS_66>]?: (props: typeof __VLS_67) => any;
+} & {
+    toolbar?: (props: typeof __VLS_1) => any;
+} & {
+    'toolbar-left-prefix'?: (props: typeof __VLS_3) => any;
+} & {
+    'toolbar-left'?: (props: typeof __VLS_5) => any;
+} & {
+    'toolbar-left-suffix'?: (props: typeof __VLS_7) => any;
+} & {
+    'toolbar-right-prefix'?: (props: typeof __VLS_9) => any;
+} & {
+    'toolbar-right'?: (props: typeof __VLS_11) => any;
+} & {
+    'toolbar-right-suffix'?: (props: typeof __VLS_13) => any;
+} & {
+    empty?: (props: typeof __VLS_39) => any;
+} & {
+    expand?: (props: typeof __VLS_57) => any;
+} & {
+    summary?: (props: typeof __VLS_63) => any;
+} & {
+    loading?: (props: typeof __VLS_69) => any;
+} & {
+    default?: (props: typeof __VLS_80) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly data: {
+        readonly type: import("vue").PropType<Record<string, unknown>[]>;
+        readonly default: () => never[];
+    };
+    readonly columns: {
+        readonly type: import("vue").PropType<TableColumn[]>;
+        readonly default: () => never[];
+    };
+    readonly rowKey: {
+        readonly type: import("vue").PropType<import("./table").RowKey>;
+        readonly default: "id";
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("./table").TableSize>;
+        readonly default: "default";
+    };
+    readonly height: {
+        readonly type: import("vue").PropType<number | string>;
+    };
+    readonly maxHeight: {
+        readonly type: import("vue").PropType<number | string>;
+    };
+    readonly width: {
+        readonly type: import("vue").PropType<number | string>;
+    };
+    readonly border: {
+        readonly type: import("vue").PropType<boolean | "full" | "outer" | "inner" | "none">;
+        readonly default: false;
+    };
+    readonly stripe: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly highlightCurrentRow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly currentRowKey: {
+        readonly type: import("vue").PropType<string | number>;
+    };
+    readonly showHeader: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fit: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly sortConfig: {
+        readonly type: import("vue").PropType<import("./table").TableSortConfig>;
+    };
+    readonly filterConfig: {
+        readonly type: import("vue").PropType<import("./table").TableFilterConfig>;
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<boolean | TablePaginationConfig>;
+        readonly default: false;
+    };
+    readonly selectionConfig: {
+        readonly type: import("vue").PropType<import("./table").TableSelectionConfig>;
+    };
+    readonly expandConfig: {
+        readonly type: import("vue").PropType<import("./table").TableExpandConfig>;
+    };
+    readonly treeConfig: {
+        readonly type: import("vue").PropType<import("./table").TableTreeConfig>;
+    };
+    readonly virtualConfig: {
+        readonly type: import("vue").PropType<import("./table").TableVirtualConfig>;
+    };
+    readonly dragConfig: {
+        readonly type: import("vue").PropType<import("./table").TableDragConfig>;
+    };
+    readonly summaryConfig: {
+        readonly type: import("vue").PropType<import("./table").TableSummaryConfig>;
+    };
+    readonly toolbarConfig: {
+        readonly type: import("vue").PropType<import("./table").TableToolbarConfig>;
+    };
+    readonly emptyConfig: {
+        readonly type: import("vue").PropType<import("./table").TableEmptyConfig>;
+    };
+    readonly loading: {
+        readonly type: import("vue").PropType<boolean | import("./table").TableLoadingConfig>;
+        readonly default: false;
+    };
+    readonly rowConfig: {
+        readonly type: import("vue").PropType<import("./table").TableRowConfig>;
+    };
+    readonly headerConfig: {
+        readonly type: import("vue").PropType<import("./table").TableHeaderConfig>;
+    };
+    readonly contextMenuConfig: {
+        readonly type: import("vue").PropType<import("./table").TableContextMenuConfig>;
+    };
+    readonly tableLayout: {
+        readonly type: import("vue").PropType<"auto" | "fixed">;
+        readonly default: "fixed";
+    };
+    readonly tooltipEffect: {
+        readonly type: import("vue").PropType<"dark" | "light">;
+        readonly default: "dark";
+    };
+    readonly spanMethod: {
+        readonly type: import("vue").PropType<(params: {
+            row: Record<string, unknown>;
+            column: TableColumn;
+            rowIndex: number;
+            columnIndex: number;
+        }) => {
+            rowspan: number;
+            colspan: number;
+        } | [number, number] | void>;
+    };
+    readonly rowClassName: {
+        readonly type: import("vue").PropType<string | ((params: {
+            row: Record<string, unknown>;
+            rowIndex: number;
+        }) => string)>;
+    };
+    readonly rowStyle: {
+        readonly type: import("vue").PropType<CSSProperties | ((params: {
+            row: Record<string, unknown>;
+            rowIndex: number;
+        }) => CSSProperties)>;
+    };
+    readonly cellClassName: {
+        readonly type: import("vue").PropType<string | ((params: {
+            row: Record<string, unknown>;
+            column: TableColumn;
+            rowIndex: number;
+            columnIndex: number;
+        }) => string)>;
+    };
+    readonly cellStyle: {
+        readonly type: import("vue").PropType<CSSProperties | ((params: {
+            row: Record<string, unknown>;
+            column: TableColumn;
+            rowIndex: number;
+            columnIndex: number;
+        }) => CSSProperties)>;
+    };
+    readonly headerRowClassName: {
+        readonly type: import("vue").PropType<string | ((params: {
+            rowIndex: number;
+        }) => string)>;
+    };
+    readonly headerRowStyle: {
+        readonly type: import("vue").PropType<CSSProperties | ((params: {
+            rowIndex: number;
+        }) => CSSProperties)>;
+    };
+    readonly headerCellClassName: {
+        readonly type: import("vue").PropType<string | ((params: {
+            column: TableColumn;
+            columnIndex: number;
+        }) => string)>;
+    };
+    readonly headerCellStyle: {
+        readonly type: import("vue").PropType<CSSProperties | ((params: {
+            column: TableColumn;
+            columnIndex: number;
+        }) => CSSProperties)>;
+    };
+    readonly lazy: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loadMethod: {
+        readonly type: import("vue").PropType<(row: Record<string, unknown>) => Promise<Record<string, unknown>[]>>;
+    };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showIndex: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly indexConfig: {
+        readonly type: import("vue").PropType<{
+            label
+            /**
+             * YhTable - 高性能表格组件
+             * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+             * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+             */
+            ?: string;
+            width
+            /**
+             * YhTable - 高性能表格组件
+             * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+             * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+             */
+            ?: number | string;
+            fixed
+            /**
+             * YhTable - 高性能表格组件
+             * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+             * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+             */
+            ?: import("./table").FixedPosition;
+            method
+            /**
+             * YhTable - 高性能表格组件
+             * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+             * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+             */
+            ?: (rowIndex: number) => number | string;
+        }>;
+    };
+    readonly autoHeight: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly keepScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly syncScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly scrollOptimize: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    getSelectionRows: () => Record<string, unknown>[];
+    getSelectionRowKeys: () => Array<string | number>;
+    toggleRowSelection: (row: Record<string, unknown>, selected
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: boolean) => void;
+    toggleAllSelection: () => void;
+    clearSelection: () => void;
+    setCurrentRow: (row: Record<string, unknown> | null) => void;
+    toggleRowExpansion: (row: Record<string, unknown>, expanded
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: boolean) => void;
+    setExpandedRowKeys: (keys: Array<string | number>) => void;
+    getExpandedRowKeys: () => Array<string | number>;
+    sort: (prop: string, order: SortOrder) => void;
+    clearSort: () => void;
+    filter: (prop: string, values: unknown[]) => void;
+    clearFilter: (props
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: string | string[]) => void;
+    doLayout: () => void;
+    refresh: () => void;
+    scrollTo: (options: {
+        left
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: number;
+        top
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: number;
+        row
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: Record<string, unknown>;
+        rowIndex
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: number;
+        column
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: TableColumn;
+        columnIndex
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: number;
+    }) => void;
+    getTableData: () => {
+        fullData: Record<string, unknown>[];
+        tableData: Record<string, unknown>[];
+    };
+    exportData: (config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<string | void>;
+    print: (config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<void>;
+    openImport: (config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<Record<string, unknown>[]>;
+    importFile: (file: File, config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<Record<string, unknown>[]>;
+    importData: (content: string | Record<string, unknown>[], config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<Record<string, unknown>[]>;
+    printMultiple: (tables: Array<{
+        title
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: string;
+        data: Record<string, unknown>[];
+        columns
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: TableColumn[];
+        config
+        /**
+         * YhTable - 高性能表格组件
+         * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+         * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+         */
+        ?: Record<string, unknown>;
+    }>, config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<void>;
+    printTemplate: (templateHtml: string, config
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: Record<string, unknown>) => Promise<void>;
+    toggleFullscreen: () => void;
+    getColumns: () => TableColumn[];
+    setColumnVisible: (prop: string, visible: boolean) => void;
+    resetColumns: () => void;
+    insertRow: (row: Record<string, unknown>, index
+    /**
+     * YhTable - 高性能表格组件
+     * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长
+     * 支持虚拟滚动、树形数据、拖拽、固定列/行、汇总行等高级功能
+     */
+    ?: number) => void;
+    removeRow: (row: Record<string, unknown> | Record<string, unknown>[]) => void;
+    updateRow: (row: Record<string, unknown>, newRow: Record<string, unknown>) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly data: Record<string, unknown>[];
+    readonly size: import("./table").TableSize;
+    readonly border: boolean | "none" | "inner" | "outer" | "full";
+    readonly tableLayout: "fixed" | "auto";
+    readonly columns: TableColumn<Record<string, unknown>>[];
+    readonly loading: boolean | import("./table").TableLoadingConfig;
+    readonly fit: boolean;
+    readonly lazy: boolean;
+    readonly emptyText: string;
+    readonly pagination: boolean | TablePaginationConfig;
+    readonly showHeader: boolean;
+    readonly resizable: boolean;
+    readonly rowKey: import("./table").RowKey;
+    readonly stripe: boolean;
+    readonly highlightCurrentRow: boolean;
+    readonly tooltipEffect: "dark" | "light";
+    readonly showIndex: boolean;
+    readonly autoHeight: boolean;
+    readonly keepScroll: boolean;
+    readonly syncScroll: boolean;
+    readonly scrollOptimize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/src/use-column-drag.cjs

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnDrag = void 0;
+var _vue = require("vue");
+const useColumnDrag = options => {
+  const {
+    columns,
+    dragConfig,
+    flatColumns,
+    emit
+  } = options;
+  const isDraggingColumn = (0, _vue.ref)(false);
+  const dragColumnIndex = (0, _vue.ref)(-1);
+  const dropColumnIndex = (0, _vue.ref)(-1);
+  const isColumnDragEnabled = (0, _vue.computed)(() => !!dragConfig.value?.column);
+  const isColumnDraggable = column => {
+    if (!isColumnDragEnabled.value) return false;
+    if (column.fixed) return false;
+    if (column.draggable !== void 0) return column.draggable;
+    return true;
+  };
+  const onHeaderDragStart = (column, columnIndex, event) => {
+    if (!isColumnDraggable(column)) {
+      event.preventDefault();
+      return;
+    }
+    isDraggingColumn.value = true;
+    dragColumnIndex.value = columnIndex;
+    dropColumnIndex.value = columnIndex;
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", String(columnIndex));
+      const target = event.target;
+      if (target) {
+        const clone = target.cloneNode(true);
+        clone.style.opacity = "0.7";
+        clone.style.position = "absolute";
+        clone.style.top = "-9999px";
+        document.body.appendChild(clone);
+        event.dataTransfer.setDragImage(clone, event.offsetX, event.offsetY);
+        requestAnimationFrame(() => document.body.removeChild(clone));
+      }
+    }
+    dragConfig.value?.onDragStart?.({
+      type: "column",
+      data: column,
+      index: columnIndex
+    });
+  };
+  const onHeaderDragOver = (column, columnIndex, event) => {
+    event.preventDefault();
+    if (!isDraggingColumn.value) return;
+    if (!isColumnDraggable(column)) return;
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+    dropColumnIndex.value = columnIndex;
+  };
+  const onHeaderDragEnter = (column, columnIndex, event) => {
+    event.preventDefault();
+    if (!isDraggingColumn.value) return;
+    if (!isColumnDraggable(column)) return;
+    dropColumnIndex.value = columnIndex;
+  };
+  const onHeaderDrop = (_column, columnIndex, event) => {
+    event.preventDefault();
+    if (!isDraggingColumn.value) return;
+    const oldIndex = dragColumnIndex.value;
+    const newIndex = columnIndex;
+    if (oldIndex !== newIndex && oldIndex >= 0 && newIndex >= 0) {
+      const cols = flatColumns.value;
+      const newCols = [...cols];
+      const [movedCol] = newCols.splice(oldIndex, 1);
+      newCols.splice(newIndex, 0, movedCol);
+      reorderColumns(columns.value, oldIndex, newIndex);
+      const params = {
+        type: "column",
+        oldIndex,
+        newIndex,
+        data: newCols
+      };
+      dragConfig.value?.onDragEnd?.(params);
+      emit("drag-end", params);
+    }
+    resetDragState();
+  };
+  const onHeaderDragEnd = _event => {
+    resetDragState();
+  };
+  const resetDragState = () => {
+    isDraggingColumn.value = false;
+    dragColumnIndex.value = -1;
+    dropColumnIndex.value = -1;
+  };
+  const reorderColumns = (cols, oldIndex, newIndex) => {
+    const flat = flatColumns.value;
+    const movedColumn = flat[oldIndex];
+    const targetColumn = flat[newIndex];
+    if (!movedColumn || !targetColumn) return;
+    const findAndRemove = (arr, target) => {
+      const idx = arr.indexOf(target);
+      if (idx !== -1) {
+        arr.splice(idx, 1);
+        return true;
+      }
+      for (const col of arr) {
+        if (col.children?.length) {
+          if (findAndRemove(col.children, target)) return true;
+        }
+      }
+      return false;
+    };
+    const findAndInsert = (arr, target, toInsert, after) => {
+      const idx = arr.indexOf(target);
+      if (idx !== -1) {
+        arr.splice(after ? idx + 1 : idx, 0, toInsert);
+        return true;
+      }
+      for (const col of arr) {
+        if (col.children?.length) {
+          if (findAndInsert(col.children, target, toInsert, after)) return true;
+        }
+      }
+      return false;
+    };
+    findAndRemove(cols, movedColumn);
+    findAndInsert(cols, targetColumn, movedColumn, oldIndex > newIndex ? false : true);
+  };
+  const getHeaderDragAttrs = (column, columnIndex) => {
+    if (!isColumnDragEnabled.value || !isColumnDraggable(column)) return {};
+    return {
+      draggable: true,
+      onDragstart: e => onHeaderDragStart(column, columnIndex, e),
+      onDragover: e => onHeaderDragOver(column, columnIndex, e),
+      onDragenter: e => onHeaderDragEnter(column, columnIndex, e),
+      onDrop: e => onHeaderDrop(column, columnIndex, e),
+      onDragend: e => onHeaderDragEnd(e)
+    };
+  };
+  const getHeaderDragClass = columnIndex => {
+    if (!isColumnDragEnabled.value || !isDraggingColumn.value) return "";
+    const classes = [];
+    if (columnIndex === dragColumnIndex.value) {
+      classes.push("is-column-dragging");
+    }
+    if (columnIndex === dropColumnIndex.value && columnIndex !== dragColumnIndex.value) {
+      if (dropColumnIndex.value < dragColumnIndex.value) {
+        classes.push("is-column-drop-left");
+      } else {
+        classes.push("is-column-drop-right");
+      }
+    }
+    return classes.join(" ");
+  };
+  return {
+    isColumnDragEnabled,
+    isDraggingColumn,
+    dragColumnIndex,
+    dropColumnIndex,
+    isColumnDraggable,
+    getHeaderDragAttrs,
+    getHeaderDragClass
+  };
+};
+exports.useColumnDrag = useColumnDrag;

package/dist/table/src/use-column-drag.d.ts

@@ -0,0 +1,35 @@
+/**
+ * useColumnDrag
+ * @description 列拖拽排序 Hook
+ * 使用 HTML5 Drag & Drop API 实现表头列拖拽排序
+ * 支持固定列排除、分组表头整组拖拽
+ */
+import { type Ref } from 'vue';
+import type { TableColumn, TableDragConfig } from './table';
+export interface UseColumnDragOptions {
+    /** 可见列 */
+    columns: Ref<TableColumn[]>;
+    /** 拖拽配置 */
+    dragConfig: Ref<TableDragConfig | undefined>;
+    /** 扁平后的列配置(用于操作) */
+    flatColumns: Ref<TableColumn[]>;
+    /** 事件触发 */
+    emit: (event: string, ...args: unknown[]) => void;
+}
+export interface UseColumnDragReturn {
+    /** 是否启用列拖拽 */
+    isColumnDragEnabled: Ref<boolean>;
+    /** 是否正在拖拽列 */
+    isDraggingColumn: Ref<boolean>;
+    /** 拖拽中的列索引 */
+    dragColumnIndex: Ref<number>;
+    /** 放置目标列索引 */
+    dropColumnIndex: Ref<number>;
+    /** 判断列是否可拖拽 */
+    isColumnDraggable: (column: TableColumn) => boolean;
+    /** 获取列拖拽 HTML attrs */
+    getHeaderDragAttrs: (column: TableColumn, columnIndex: number) => Record<string, unknown>;
+    /** 获取列拖拽 CSS 类 */
+    getHeaderDragClass: (columnIndex: number) => string;
+}
+export declare const useColumnDrag: (options: UseColumnDragOptions) => UseColumnDragReturn;