stk-table-vue 0.2.0 → 0.2.1

package/lib/test/utils/h.d.ts

@@ -1,10 +1,10 @@
-/**
- * createElement function
- * h(tag[, text[,children]])
- * h(tag[, attrs[,children]])
- * h(tag[, children])
- * @param {String} tag 标签名称，支持tag#id.class emmet写法，暂支持id ,class
- * @param {Object | String | Number | Array<HTMLElement>} attrs 传Object为属性，传String为textContent，传数组为children
- * @param {Array<HTMLElement>} children
- */
-export default function h(tag: string, attrs: Object | string | number | Array<HTMLElement>, children: Array<HTMLElement>): HTMLElement;
+/**
+ * createElement function
+ * h(tag[, text[,children]])
+ * h(tag[, attrs[,children]])
+ * h(tag[, children])
+ * @param {String} tag 标签名称，支持tag#id.class emmet写法，暂支持id ,class
+ * @param {Object | String | Number | Array<HTMLElement>} attrs 传Object为属性，传String为textContent，传数组为children
+ * @param {Array<HTMLElement>} children
+ */
+export default function h(tag: string, attrs: Object | string | number | Array<HTMLElement>, children: Array<HTMLElement>): HTMLElement;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.0",
-    "description": "simple realtime virtual table for vue3",
+    "version": "0.2.1",
+    "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/StkTable/index.d.ts",
     "packageManager": "pnpm@8.14.3",

package/src/StkTable/StkTable.vue

@@ -57,7 +57,7 @@
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="col.dataIndex"
                         :data-col-key="colKeyGen(col)"
-                        :draggable="headerDrag ? 'true' : 'false'"
+                        :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
                         :colspan="col.colSpan"
                         :style="getCellStyle(1, col, rowIndex)"
@@ -180,7 +180,7 @@
     </div>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
 /**
  * @author JA+
  * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
@@ -191,7 +191,7 @@
  */
 import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
-import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -252,8 +252,8 @@ const props = withDefaults(
         showOverflow?: boolean;
         /** 是否增加行hover class */
         showTrHoverClass?: boolean;
-        /** 表头是否可拖动 */
-        headerDrag?: boolean;
+        /** 表头是否可拖动。支持回调函数。 */
+        headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
         /**
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -449,7 +449,7 @@ const { isColResizing, onThResizeMouseDown } = useColResize({
     tableHeaderLast,
 });
 
-const { onThDragStart, onThDragOver, onThDrop } = useThDrag({ emits });
+const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
 
 const {
     virtualScroll,
@@ -482,7 +482,7 @@ const { getFixedStyle } = useFixedStyle({
 const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
 
 if (props.autoResize) {
-    useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+    useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
 }
 
 /** 键盘箭头滚动 */
@@ -627,7 +627,7 @@ function rowKeyGen(row: DT) {
  * 列唯一键
  * @param col
  */
-function colKeyGen(col: StkTableColumn<any>) {
+function colKeyGen(col: StkTableColumn<DT>) {
     return typeof props.colKey === 'function' ? props.colKey(col) : (col as any)[props.colKey];
 }
 
@@ -769,6 +769,9 @@ function onTableScroll(e: Event) {
         updateFixedShadow();
         if (virtualX_on.value) {
             updateVirtualScrollX(scrollLeft);
+        } else {
+            // 非虚拟滚动也记录一下滚动条位置。用于判断isXScroll
+            virtualScrollX.value.scrollLeft = scrollLeft;
         }
     }
 
@@ -848,6 +851,13 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
+/** 获取当前排序列的信息 */
+function getSortColumns(): SortState<DT>[] {
+    const sortOrder = sortSwitchOrder[sortOrderIndex.value];
+    if (!sortOrder) return [];
+    return [{ dataIndex: sortCol.value, order: sortOrder }];
+}
+
 defineExpose({
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll,
@@ -863,6 +873,8 @@ defineExpose({
     setHighlightDimRow,
     /** 表格排序列dataIndex */
     sortCol,
+    /** 获取当前排序状态 */
+    getSortColumns,
     /** 设置排序 */
     setSorter,
     /** 重置排序 */

package/src/StkTable/style.less

@@ -1,5 +1,5 @@
 /**高亮渐暗 */
-@keyframes stkTableDim {
+@keyframes stk-table-dim {
     from {
         background-color: var(--highlight-color);
     }
@@ -41,9 +41,11 @@
     overflow: auto;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     /* border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left*/
     border-left: 1px solid var(--border-color);
-
+    /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
@@ -75,6 +77,7 @@
 
     &.headless {
         border-top: 1px solid var(--border-color);
+        background-image: var(--bg-border-right), var(--bg-border-bottom);
     }
 
     /* 调整列宽的话，表格宽度应当自适应 */
@@ -112,7 +115,6 @@
             tr {
                 &:first-child th {
                     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
                 }
 
             }
@@ -209,7 +211,7 @@
             }
 
             &.highlight-cell {
-                animation: stkTableDim 2s linear;
+                animation: stk-table-dim 2s linear;
             }
 
             &.text-overflow {
@@ -349,7 +351,7 @@
 
                 /* td inherit tr bgc*/
                 &.highlight-row {
-                    animation: stkTableDim 2s linear;
+                    animation: stk-table-dim 2s linear;
                 }
 
                 /* &.highlight-row-transition {

package/src/StkTable/types/index.ts

@@ -21,11 +21,11 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 筛选 */
     sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
-    width?: string;
+    width?: string | number;
     /** 最小列宽。非x虚拟滚动生效。 */
-    minWidth?: string;
+    minWidth?: string | number;
     /** 最大列宽。非x虚拟滚动生效。 */
-    maxWidth?: string;
+    maxWidth?: string | number;
     /**th class */
     headerClassName?: string;
     /** td class */

package/src/StkTable/useAutoResize.ts

@@ -1,10 +1,9 @@
 import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 
 type Options = {
+    props: any;
     tableContainer: Ref<HTMLElement | undefined>;
     initVirtualScroll: () => void;
-    scrollTo: () => void;
-    props: any;
     /** 防抖延时 */
     debounceMs: number;
 };
@@ -12,7 +11,7 @@ type Options = {
  * 窗口变化自动重置虚拟滚动
  * @param param0
  */
-export function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options) {
+export function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }: Options) {
     let resizeObserver: ResizeObserver | null = null;
 
     onMounted(() => {

package/src/StkTable/useColResize.ts

@@ -1,6 +1,6 @@
 import { Ref, onBeforeUnmount, onMounted, ref } from 'vue';
-import { Default_Col_Width } from './const';
 import { StkTableColumn } from './types';
+import { getColWidth } from './utils';
 
 type ColResizeState<DT extends Record<string, any>> = {
     /** 当前被拖动的列*/
@@ -115,7 +115,7 @@ export function useColResize<DT extends Record<string, any>>({
         const { lastCol, startX, startOffsetTableX } = colResizeState;
         const { clientX } = e;
         let moveX = clientX - startX;
-        const currentColWidth = parseInt(lastCol?.width || Default_Col_Width);
+        const currentColWidth = getColWidth(lastCol);
         // 移动量不小于最小列宽
         if (currentColWidth + moveX < props.colMinWidth) {
             moveX = -currentColWidth;
@@ -136,7 +136,7 @@ export function useColResize<DT extends Record<string, any>>({
         const moveX = clientX - startX;
 
         // 移动量不小于最小列宽
-        let width = parseInt(lastCol?.width || Default_Col_Width) + moveX;
+        let width = getColWidth(lastCol) + moveX;
         if (width < props.colMinWidth) width = props.colMinWidth;
 
         const curCol = tableHeaderLast.value.find(it => colKeyGen(it) === colKeyGen(lastCol));

package/src/StkTable/useFixedCol.ts

@@ -31,7 +31,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
         fixedShadowCols = [];
         // 找到最右边的固定列 findLast
         let lastLeftCol = null;
-        for (let i = tableHeaderLast.value.length - 1; i > 0; i--) {
+        for (let i = tableHeaderLast.value.length - 1; i >= 0; i--) {
             const col = tableHeaderLast.value[i];
             if (col.fixed === 'left') {
                 lastLeftCol = col;

package/src/StkTable/useFixedStyle.ts

@@ -1,7 +1,8 @@
 import { CSSProperties, Ref, computed } from 'vue';
-import { Default_Col_Width, Is_Legacy_Mode } from './const';
+import { Is_Legacy_Mode } from './const';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+import { getColWidth } from './utils';
 
 type Options = {
     props: any;
@@ -27,7 +28,7 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
             const item = cols[i];
             if (item.fixed === 'left') {
                 store[item.dataIndex] = left;
-                left += parseInt(item.width || Default_Col_Width);
+                left += getColWidth(item);
             }
             if (!rightStartIndex && item.fixed === 'right') {
                 rightStartIndex = i;
@@ -38,7 +39,7 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
             const item = cols[i];
             if (item.fixed === 'right') {
                 store[item.dataIndex] = right;
-                right += parseInt(item.width || Default_Col_Width);
+                right += getColWidth(item);
             }
         }
 

package/src/StkTable/useHighlight.ts

@@ -47,6 +47,7 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                     //     void rowEl.offsetHeight; // reflow
                     //     rowEl.classList.add('highlight-row-transition');
                     //   }
+
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
                     const progress = (nowTs - row._bgc_progress_ms) / Highlight_Duration;
                     //   row._bgc_progress = progress;
@@ -58,6 +59,7 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                     }
                 });
                 needDeleteRows.forEach((row: any) => highlightDimRows.delete(row));
+                // TODO: shallowRef 时，需要手动更新
 
                 if (highlightDimRows.size > 0) {
                     // 还有高亮的行,则下一次循环

package/src/StkTable/useThDrag.ts

@@ -1,4 +1,7 @@
+import { StkTableColumn } from './types';
+
 type Params = {
+    props: any;
     emits: any;
 };
 /**
@@ -6,28 +9,43 @@ type Params = {
  * @param param0
  * @returns
  */
-export function useThDrag({ emits }: Params) {
+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;
+        }
+    }
     /** 开始拖动记录th位置 */
     function onThDragStart(e: MouseEvent) {
         // const i = Array.prototype.indexOf.call(e.target.parentNode.children, e.target); // 得到是第几个子元素
-        dragStartKey = (e.target as HTMLElement).dataset.colKey;
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
+        dragStartKey = th.dataset.colKey;
         emits('th-drag-start', dragStartKey);
     }
 
     function onThDragOver(e: MouseEvent) {
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
+        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
+        if (!isHeaderDraggable) {
+            // 不可drag的表头不可被覆盖
+            return;
+        }
         e.preventDefault();
     }
 
     /** th拖动释放时 */
     function onThDrop(e: MouseEvent) {
-        let th = e.target as HTMLElement;
-        // 找到th元素
-        while (th) {
-            if (th.tagName === 'TH') break;
-            th = th.parentNode as HTMLElement;
-        }
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
         // const i = Array.prototype.indexOf.call(th.parentNode.children, th); // 得到是第几个子元素
         if (dragStartKey !== th.dataset.colKey) {
             emits('col-order-change', dragStartKey, th.dataset.colKey);
@@ -35,9 +53,20 @@ export function useThDrag({ emits }: Params) {
         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;
+        }
+    }
+
     return {
         onThDragStart,
         onThDragOver,
         onThDrop,
+        isHeaderDraggable,
     };
 }

package/src/StkTable/useVirtualScroll.ts

@@ -1,6 +1,7 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
-import { Default_Col_Width, Default_Table_Height, Default_Table_Width } from './const';
+import { Default_Table_Height, Default_Table_Width } from './const';
 import { StkTableColumn } from './types';
+import { getColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
     tableContainer: Ref<HTMLElement | undefined>;
@@ -40,11 +41,6 @@ export type VirtualScrollXStore = {
     scrollLeft: number;
 };
 
-/**获取计算宽度 */
-function getCalcWidth<DT extends Record<string, any>>(col: StkTableColumn<DT>) {
-    return parseInt(col.minWidth || col.width || Default_Col_Width);
-}
-
 /** vue2 优化滚动回收延时 */
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 
@@ -90,9 +86,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
     });
 
     const virtualX_on = computed(() => {
-        return (
-            props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getCalcWidth(col)), 0) > virtualScrollX.value.containerWidth + 100
-        );
+        return props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getColWidth(col)), 0) > virtualScrollX.value.containerWidth + 100;
     });
 
     const virtualX_columnPart = computed(() => {
@@ -125,7 +119,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
             const col = tableHeaderLast.value[i];
             if (col.fixed !== 'right') {
-                width += getCalcWidth(col);
+                width += getColWidth(col);
             }
         }
         return width;
@@ -219,7 +213,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
             const col = tableHeaderLast.value[colIndex];
             // fixed left 不进入计算列宽
             if (col.fixed === 'left') continue;
-            const colWidth = getCalcWidth(col);
+            const colWidth = getColWidth(col);
             colWidthSum += colWidth;
             // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
             if (colWidthSum >= sLeft) {
@@ -233,7 +227,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLast.value[colIndex];
-            colWidthSum += getCalcWidth(col);
+            colWidthSum += getColWidth(col);
             // 列宽大于容器宽度则停止
             if (colWidthSum >= virtualScrollX.value.containerWidth) {
                 endIndex = colIndex + 1; // TODO:预渲染的列数

package/src/StkTable/utils.ts

@@ -1,3 +1,4 @@
+import { Default_Col_Width } from './const';
 import { Order, SortOption, SortState, StkTableColumn } from './types';
 
 /**
@@ -126,3 +127,11 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 1) {
     });
     return Math.max(...levels);
 }
+
+/** 获取列宽 */
+export function getColWidth(col: StkTableColumn<any> | null): number {
+    if (typeof col?.width === 'number') {
+        return Math.floor(col.width ?? Default_Col_Width);
+    }
+    return parseInt(col?.width ?? Default_Col_Width);
+}