stk-table-vue 0.4.15 → 0.5.0

package/src/StkTable/style.less

@@ -41,6 +41,9 @@
     --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
     --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
 
+    /** 拖动行hover背景 */
+    --drag-handle-hover-color: #d0d1e0;
+
     position: relative;
     overflow: auto;
     display: flex;
@@ -83,6 +86,8 @@
         --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
         --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
 
+        --drag-handle-hover-color: #5d6064;
+
         /* background-color: var(--table-bgc); */
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
@@ -170,10 +175,10 @@
     }
 
     /* 单元格高亮 */
-    &.cell-active tbody td.active{
+    &.cell-active tbody td.active {
         box-shadow: inset 0 0 0 2px var(--td-active-color);
     }
-    
+
     /* td 溢出*/
     &.text-overflow {
         .table-cell-wrapper {
@@ -202,7 +207,7 @@
         /* 为不影响布局，表头行高要定死*/
         .table-header-cell-wrapper {
             overflow: hidden;
-            max-height: calc(var(--header-row-height) * var(--row-span));
+            max-height: calc(var(--header-row-height) * var(--row-span, 1));
         }
 
         tbody td {
@@ -217,6 +222,14 @@
         .padding-top-tr td {
             height: 0;
         }
+
+        .expand-cell .table-cell-wrapper {
+            white-space: nowrap;
+        }
+
+        // .expanded-row .table-cell-wrapper{
+        //     overflow: auto;
+        // }
     }
 
     &.fixed-relative-mode {
@@ -345,6 +358,68 @@
         text-align: center;
     }
 
+    .expand-cell {
+        cursor: pointer;
+
+        .table-cell-wrapper {
+            &.expanded-cell-wrapper {
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    margin: 0 2px;
+                    width: 0;
+                    height: 0;
+                    border-left: 5px solid #757699;
+                    border-top: 4px solid transparent;
+                    border-bottom: 4px solid transparent;
+                    transition: transform 0.2s ease;
+                }
+
+                >span {
+                    margin-left: var(--cell-padding-x)
+                }
+            }
+        }
+
+        &.expanded {
+            .table-cell-wrapper::before {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    .drag-row-cell {
+        .table-cell-wrapper {
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .drag-row-handle {
+            cursor: grab;
+            border-radius: 4px;
+
+            &:hover {
+                background-color: var(--drag-handle-hover-color);
+            }
+
+            &:active {
+                cursor: grabbing;
+            }
+
+            >svg {
+                vertical-align: -2px;
+            }
+        }
+    }
+
+    .tr-dragging {
+        opacity: .5;
+    }
+
+    .tr-dragging-over {
+        background-color: var(--tr-hover-bgc);
+    }
+
     /*固定列阴影-左*/
     .fixed-cell--left {
         --shadow-rotate: 90deg;
@@ -453,4 +528,6 @@
         }
     }
 
+
+
 }

package/src/StkTable/types/index.ts

@@ -1,4 +1,4 @@
-import { Component, ConcreteComponent, VNode } from 'vue';
+import { Component, ConcreteComponent } from 'vue';
 
 /** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
 export type Order = null | 'asc' | 'desc';
@@ -12,26 +12,20 @@ export type CustomCellProps<T extends Record<string, any>> = {
     cellValue: any;
     rowIndex: number;
     colIndex: number;
+    /**
+     * 当前行是否展开
+     * - 不展开: null
+     * - 展开: 返回column配置
+     */
+    expanded?: PrivateRowDT['__EXPANDED__'];
 };
 
-/**
- * $*$自定义单元格渲染函数
- * @deprecated
- */
-export type CustomCellFunc<T extends Record<string, any>> = (props: CustomCellProps<T>) => VNode;
-
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
     rowIndex: number;
     colIndex: number;
 };
 
-/**
- * $*$自定义表头渲染函数
- * @deprecated
- */
-export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: CustomHeaderCellProps<T>) => VNode;
-
 /**
  * 自定义渲染单元格
  *
@@ -48,11 +42,18 @@ export type CustomCell<T extends CustomCellProps<U> | CustomHeaderCellProps<U>,
 
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
+    /**
+     * 用于区分相同dataIndex 的列。
+     * 需要自行配置colKey="(col: StkTableColumn<any>) => col.key ?? col.dataIndex"
+     */
+    key?: any;
     /**
      * 列类型
      * - seq 序号列
+     * - expand 展开列
+     * - dragRow 拖拽列(使用sktTableRef.getTableData 获取改变后的顺序)
      */
-    type?: 'seq';
+    type?: 'seq' | 'expand' | 'dragRow';
     /** 取值id */
     dataIndex: keyof T & string;
     /** 表头文字 */
@@ -103,27 +104,49 @@ export type StkTableColumn<T extends Record<string, any>> = {
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
-    /** private 父节点引用 */
+};
+
+/** private StkTableColumn type. Add some private key */
+export type PrivateStkTableColumn<T extends Record<string, any>> = StkTableColumn<T> & {
+    /**
+     * 父节点引用
+     * @private
+     */
     __PARENT__?: StkTableColumn<T> | null;
-    /** private 保存计算的宽度。横向虚拟滚动用。 */
+    /**
+     * 保存计算的宽度。横向虚拟滚动用。
+     * @private
+     */
     __WIDTH__?: number;
 };
+/** private row keys */
+export type PrivateRowDT = {
+    /**
+     * Only expanded row will add this key
+     *
+     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * @private
+     */
+    __ROW_KEY__: string;
+    /**
+     * if row expanded
+     * @private
+     */
+    __EXPANDED__?: StkTableColumn<any> | null;
+};
 
 export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
 
-/** 排序状态 */
 export type SortState<T> = {
     dataIndex: keyof T;
     order: Order;
     sortType?: 'number' | 'string';
 };
 
-/** 唯一键 */
 export type UniqKey = string | number;
 export type UniqKeyFun = (param: any) => UniqKey;
 export type UniqKeyProp = UniqKey | UniqKeyFun;
 
-/** 排序配置 */
 export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
@@ -147,22 +170,53 @@ export type SortConfig<T extends Record<string, any>> = {
     stringLocaleCompare?: boolean;
 };
 
-/** th td类型 */
+/** th td type */
 export const enum TagType {
     TH,
     TD,
 }
 
-/** 高亮配置 */
 export type HighlightConfig = {
-    /** 高亮持续时间(s) */
+    /** Duration of the highlight in seconds */
     duration?: number;
-    /** 高亮帧率 */
+    /** Frame rate of the highlight */
     fps?: number;
 };
 
-/** 序号列配置 */
+/**
+ * Configuration options for the sequence column.
+ */
 export type SeqConfig = {
     /** 序号列起始下标 用于适配分页 */
     startIndex?: number;
 };
+
+/** Configuration options for the expand column  */
+export type ExpandConfig = {
+    height?: number;
+};
+
+export type ExpandedRow = PrivateRowDT & {
+    __EXPANDED_ROW__: any;
+    __EXPANDED_COL__: any;
+};
+
+/** drag row config */
+export type DragRowConfig = {
+    mode?: 'none' | 'insert' | 'swap';
+    // disabled?: (row: T, rowIndex: number) => boolean;
+};
+/** header drag config */
+export type HeaderDragConfig<DT extends Record<string, any> = any> =
+    | boolean
+    | {
+          /**
+           * 列交换模式
+           * - none - 不做任何事
+           * - insert - 插入(默认值)
+           * - swap - 交换
+           */
+          mode?: 'none' | 'insert' | 'swap';
+          /** 禁用拖动的列 */
+          disabled?: (col: StkTableColumn<DT>) => boolean;
+      };

package/src/StkTable/useThDrag.ts

@@ -1,72 +1,102 @@
-import { StkTableColumn } from './types';
+import { computed, ComputedRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 
-type Params = {
+type Params<T extends Record<string, any>> = {
     props: any;
     emits: any;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
 };
 /**
  * 列顺序拖动
- * @param param0
  * @returns
  */
-export function useThDrag<DT extends Record<string, any>>({ props, emits }: Params) {
-    let dragStartKey: string | undefined = void 0;
-
-    function findParentTH(el: HTMLElement | Node) {
-        let n: any = el;
-        while (n) {
-            if (n.tagName === 'TH') return n;
-            n = n.parentElement;
-        }
-    }
+export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
+    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
+
+    const dragConfig = computed(() => {
+        const headerDrag = props.headerDrag;
+        const draggable = headerDrag !== false;
+        return {
+            draggable,
+            mode: 'insert',
+            disabled: () => !draggable,
+            ...headerDrag,
+        };
+    });
+
     /** 开始拖动记录th位置 */
-    function onThDragStart(e: MouseEvent) {
-        // const i = Array.prototype.indexOf.call(e.target.parentNode.children, e.target); // 得到是第几个子元素
-        const th = findParentTH(e.target as HTMLElement | Node);
+    function onThDragStart(e: DragEvent) {
+        const th = findParentTH(e);
         if (!th) return;
+        const dragStartKey = th.dataset.colKey || '';
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData('text/plain', dragStartKey);
+        }
 
-        dragStartKey = th.dataset.colKey;
         emits('th-drag-start', dragStartKey);
     }
 
-    function onThDragOver(e: MouseEvent) {
-        const th = findParentTH(e.target as HTMLElement | Node);
+    function onThDragOver(e: DragEvent) {
+        const th = findParentTH(e);
         if (!th) return;
 
         const isHeaderDraggable = th.getAttribute('draggable') === 'true';
-        if (!isHeaderDraggable) {
-            // 不可drag的表头不可被覆盖
-            return;
+        if (!isHeaderDraggable) return;
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
         }
         e.preventDefault();
     }
 
     /** th拖动释放时 */
-    function onThDrop(e: MouseEvent) {
-        const th = findParentTH(e.target as HTMLElement | Node);
+    function onThDrop(e: DragEvent) {
+        const th = findParentTH(e);
         if (!th) return;
+        const dragStartKey = e.dataTransfer?.getData('text');
 
-        // const i = Array.prototype.indexOf.call(th.parentNode.children, th); // 得到是第几个子元素
         if (dragStartKey !== th.dataset.colKey) {
-            emits('col-order-change', dragStartKey, th.dataset.colKey);
+            handleColOrderChange(dragStartKey, th.dataset.colKey);
         }
         emits('th-drop', th.dataset.colKey);
     }
 
-    const isHeaderDragFun = typeof props.headerDrag === 'function';
-    /** 是否可拖拽 */
-    function isHeaderDraggable(col: StkTableColumn<DT>) {
-        if (isHeaderDragFun) {
-            return props.headerDrag(col);
-        } else {
-            return props.headerDrag;
+    /** 列拖动交换顺序 */
+    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
+        if (!dragStartKey || !dragEndKey) return;
+
+        if (dragConfig.value.mode !== 'none') {
+            const columns = [...props.columns];
+
+            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
+            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
+
+            if (dragStartIndex === -1 || dragEndIndex === -1) return;
+
+            const dragStartCol = columns[dragStartIndex];
+            // if mode is none, do nothing
+            if (dragConfig.value.mode === 'swap') {
+                columns[dragStartIndex] = columns[dragEndIndex];
+                columns[dragEndIndex] = dragStartCol;
+            } else {
+                // default is insert
+                columns.splice(dragStartIndex, 1);
+                columns.splice(dragEndIndex, 0, dragStartCol);
+            }
+            emits('update:columns', columns);
         }
+
+        emits('col-order-change', dragStartKey, dragEndKey);
     }
 
     return {
         onThDragStart,
         onThDragOver,
         onThDrop,
-        isHeaderDraggable,
+        /** 是否可拖拽 */
+        isHeaderDraggable: dragConfig.value.disabled,
     };
 }

package/src/StkTable/useTrDrag.ts

@@ -0,0 +1,118 @@
+import { computed, ShallowRef } from 'vue';
+import { DragRowConfig } from './types';
+
+type Params = {
+    props: any;
+    emits: any;
+    dataSourceCopy: ShallowRef<any[]>;
+};
+
+const TR_DRAGGING_CLASS = 'tr-dragging';
+const TR_DRAG_OVER_CLASS = 'tr-dragging-over';
+const DATA_TRANSFER_FORMAT = 'text/plain';
+
+/**
+ * 拖拽行
+ * TODO: 不在虚拟滚动的情况下，从上面拖拽到下面，跨页的时候，滚动条会自适应位置。没有顶上去
+ */
+export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
+    let trDragFlag = false;
+
+    const dragRowConfig = computed<DragRowConfig>(() => {
+        return { mode: 'insert', ...props.dragRowConfig };
+    });
+
+    function getClosestTr(e: DragEvent) {
+        const target = e.target as HTMLElement;
+        const tr = target?.closest('tr');
+        return tr;
+    }
+
+    function onTrDragStart(e: DragEvent, rowIndex: number) {
+        const tr = getClosestTr(e);
+        if (tr) {
+            const trRect = tr.getBoundingClientRect();
+            const x = e.clientX - (trRect.left ?? 0);
+            e.dataTransfer?.setDragImage(tr, x, trRect.height / 2);
+            tr.classList.add(TR_DRAGGING_CLASS);
+        }
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
+        }
+        trDragFlag = true;
+    }
+
+    function onTrDragOver(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault(); // 阻止默认行为，否则不会触发 drop 事件
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+    }
+
+    let oldTr: HTMLElement | null = null;
+    function onTrDragEnter(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault();
+        const tr = getClosestTr(e);
+        if (oldTr && oldTr !== tr) {
+            // 两个tr不一样说明移动到了另一个tr中
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+        }
+        if (tr) {
+            oldTr = tr;
+            tr.classList.add(TR_DRAG_OVER_CLASS);
+        }
+    }
+
+    function onTrDragEnd(e: DragEvent) {
+        if (!trDragFlag) return;
+        const tr = getClosestTr(e);
+        if (tr) {
+            tr.classList.remove(TR_DRAGGING_CLASS);
+        }
+        if (oldTr) {
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+            oldTr = null;
+        }
+        trDragFlag = false;
+    }
+
+    function onTrDrop(e: DragEvent, rowIndex: number) {
+        if (!trDragFlag) return;
+        const dt = e.dataTransfer;
+        if (!dt) return;
+        const mode = dragRowConfig.value.mode;
+        const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
+        dt.clearData(DATA_TRANSFER_FORMAT);
+        const endIndex = rowIndex;
+        if (sourceIndex === endIndex) return;
+
+        if (mode !== 'none') {
+            const dataSourceTemp = [...dataSourceCopy.value];
+            const sourceRow = dataSourceTemp[sourceIndex];
+            if (mode === 'swap') {
+                dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
+                dataSourceTemp[endIndex] = sourceRow;
+            } else {
+                dataSourceTemp.splice(sourceIndex, 1);
+                dataSourceTemp.splice(endIndex, 0, sourceRow);
+            }
+            dataSourceCopy.value = [...dataSourceTemp];
+        }
+        emits('row-order-change', sourceIndex, endIndex);
+    }
+
+    return {
+        dragRowConfig,
+        onTrDragStart,
+        onTrDragEnter,
+        onTrDragOver,
+        onTrDrop,
+        onTrDragEnd,
+    };
+}

package/src/StkTable/useVirtualScroll.ts

@@ -6,7 +6,6 @@ import { getCalculatedColWidth } from './utils';
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
-    theadRef: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
@@ -58,7 +57,6 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
 export function useVirtualScroll<DT extends Record<string, any>>({
     props,
     tableContainerRef,
-    theadRef,
     dataSourceCopy,
     tableHeaderLast,
     tableHeaders,

package/src/StkTable/utils/index.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_COL_WIDTH, STK_ID_PREFIX } from '../const';
-import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+import { Order, PrivateStkTableColumn, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
 
 /** 是否空值 */
 function isEmptyValue(val: any, isNumber?: boolean) {
@@ -195,7 +195,7 @@ export function getColWidth(col: StkTableColumn<any> | null): number {
 }
 
 /** 获取计算后的宽度 */
-export function getCalculatedColWidth(col: StkTableColumn<any> | null) {
+export function getCalculatedColWidth(col: PrivateStkTableColumn<any> | null) {
     return col?.__WIDTH__ ?? +DEFAULT_COL_WIDTH;
 }