stk-table-vue 0.2.2 → 0.2.5

package/src/StkTable/useHighlight.ts

@@ -1,22 +1,41 @@
 import { interpolateRgb } from 'd3-interpolate';
-import { Ref, computed } from 'vue';
+import { Ref, computed, ref } from 'vue';
 import { Highlight_Color, Highlight_Color_Change_Freq, Highlight_Duration } from './const';
+import { UniqKey } from './types';
 
 type Params = {
     props: { theme: 'light' | 'dark'; virtual: boolean; dataSource: any[] };
     tableContainer: Ref<HTMLElement | undefined>;
-    rowKeyGen: (p: any) => string;
 };
+
+/** 高亮行保存的东西 */
+type HighlightRowStore = {
+    bgc: string;
+    bgc_progress_ms: number;
+    bgc_progress: number;
+};
+
+/** 高亮行class */
+const HIGHLIGHT_ROW_CLASS = 'highlight-row';
+/** 高连单元格class */
+const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
+
 /**
  * 高亮单元格，行
  * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
  */
-export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
-    const highlightInter = computed(() => {
-        return interpolateRgb(Highlight_Color[props.theme].from, Highlight_Color[props.theme].to);
-    });
-    /** 存放高亮行的对象*/
-    const highlightDimRows = new Set<any>();
+export function useHighlight({ props, tableContainer }: Params) {
+    /**
+     * 高亮行记录 key-rowKey, value-obj
+     */
+    const highlightRowStore = ref<Record<UniqKey, HighlightRowStore>>({});
+
+    const highlightFrom = computed(() => Highlight_Color[props.theme].from);
+    const highlightTo = computed(() => Highlight_Color[props.theme].to);
+    const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
+
+    /** 存放高亮行的key*/
+    const highlightDimRowKeys = new Set<UniqKey>();
     /** 高亮后渐暗的行定时器 */
     const highlightDimRowsTimeout = new Map();
     /** 高亮后渐暗的单元格定时器 */
@@ -36,9 +55,8 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
         const recursion = () => {
             window.setTimeout(() => {
                 const nowTs = Date.now();
-                const needDeleteRows: any = [];
 
-                highlightDimRows.forEach(row => {
+                highlightDimRowKeys.forEach(rowKeyValue => {
                     //   const rowKeyValue = rowKeyGen(row);
                     //   const rowEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]`);
                     //   if (rowEl && row._bgc_progress === 0) {
@@ -47,21 +65,18 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                     //     void rowEl.offsetHeight; // reflow
                     //     rowEl.classList.add('highlight-row-transition');
                     //   }
-
+                    const highlightItem = highlightRowStore.value[rowKeyValue];
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
-                    const progress = (nowTs - row._bgc_progress_ms) / Highlight_Duration;
-                    //   row._bgc_progress = progress;
+                    const progress = (nowTs - highlightItem.bgc_progress_ms) / Highlight_Duration;
                     if (0 < progress && progress < 1) {
-                        row._bgc = highlightInter.value(progress);
+                        highlightItem.bgc = highlightInter.value(progress);
                     } else {
-                        row._bgc = ''; // 清空颜色
-                        needDeleteRows.push(row);
+                        highlightItem.bgc = ''; // 清空颜色
+                        highlightDimRowKeys.delete(rowKeyValue);
                     }
                 });
-                needDeleteRows.forEach((row: any) => highlightDimRows.delete(row));
-                // TODO: shallowRef 时，需要手动更新
 
-                if (highlightDimRows.size > 0) {
+                if (highlightDimRowKeys.size > 0) {
                     // 还有高亮的行,则下一次循环
                     recursion();
                 } else {
@@ -78,16 +93,16 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
         // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
         const cellEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
         if (!cellEl) return;
-        if (cellEl.classList.contains('highlight-cell')) {
-            cellEl.classList.remove('highlight-cell');
+        if (cellEl.classList.contains(HIGHLIGHT_CELL_CLASS)) {
+            cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
             void cellEl.offsetHeight; // 通知浏览器重绘
         }
-        cellEl.classList.add('highlight-cell');
+        cellEl.classList.add(HIGHLIGHT_CELL_CLASS);
         window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
         highlightDimCellsTimeout.set(
             rowKeyValue,
             window.setTimeout(() => {
-                cellEl.classList.remove('highlight-cell');
+                cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
                 highlightDimCellsTimeout.delete(rowKeyValue);
             }, Highlight_Duration),
         );
@@ -97,18 +112,19 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
      * 高亮一行
      * @param rowKeyValues
      */
-    function setHighlightDimRow(rowKeyValues: Array<string | number>) {
+    function setHighlightDimRow(rowKeyValues: UniqKey[]) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
         if (props.virtual) {
             // --------虚拟滚动用js计算颜色渐变的高亮方案
             const nowTs = Date.now(); // 重置渐变进度
             for (let i = 0; i < rowKeyValues.length; i++) {
                 const rowKeyValue = rowKeyValues[i];
-                const row = props.dataSource.find((it: any) => rowKeyGen(it) === rowKeyValue);
-                if (!row) continue;
-                row._bgc_progress_ms = nowTs;
-                // row._bgc_progress = 0;
-                highlightDimRows.add(row);
+                highlightRowStore.value[rowKeyValue] = {
+                    bgc: '',
+                    bgc_progress: 0,
+                    bgc_progress_ms: nowTs,
+                };
+                highlightDimRowKeys.add(rowKeyValue);
             }
             calcHighlightLoop();
         } else {
@@ -121,8 +137,8 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                 const rowKeyValue = rowKeyValues[i];
                 const rowEl = tableContainer.value?.querySelector<HTMLTableRowElement>(`[data-row-key="${rowKeyValue}"]`);
                 if (!rowEl) continue;
-                if (rowEl.classList.contains('highlight-row')) {
-                    rowEl.classList.remove('highlight-row');
+                if (rowEl.classList.contains(HIGHLIGHT_ROW_CLASS)) {
+                    rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
                     needRepaint = true;
                 }
                 rowElTemp.push(rowEl);
@@ -131,7 +147,7 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                 highlightDimRowsTimeout.set(
                     rowKeyValue,
                     window.setTimeout(() => {
-                        rowEl.classList.remove('highlight-row');
+                        rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
                         highlightDimRowsTimeout.delete(rowKeyValue); // 回收内存
                     }, Highlight_Duration),
                 );
@@ -139,11 +155,12 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
             if (needRepaint) {
                 void tableContainer.value?.offsetWidth; //强制浏览器重绘
             }
-            rowElTemp.forEach(el => el.classList.add('highlight-row')); // 统一添加动画
+            rowElTemp.forEach(el => el.classList.add(HIGHLIGHT_ROW_CLASS)); // 统一添加动画
         }
     }
 
     return {
+        highlightRowStore,
         setHighlightDimRow,
         setHighlightDimCell,
     };

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -44,11 +44,15 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
+        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
         const { headless, headerRowHeight } = props;
-        /**表头高度 */
+
+        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
         const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        /** 表体的page */
+        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
+
         if (e.code === SCROLL_CODES[0]) {
             scrollTo(scrollTop - rowHeight, null);
         } else if (e.code === SCROLL_CODES[1]) {
@@ -58,9 +62,9 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         } else if (e.code === SCROLL_CODES[3]) {
             scrollTo(null, scrollLeft - rowHeight);
         } else if (e.code === SCROLL_CODES[4]) {
-            scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
         } else if (e.code === SCROLL_CODES[5]) {
-            scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
         }
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -4,10 +4,11 @@ import { StkTableColumn } from './types';
 import { getColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
-    tableContainer: Ref<HTMLElement | undefined>;
     props: any;
+    tableContainer: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -49,7 +50,13 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  * @param param0
  * @returns
  */
-export function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>) {
+export function useVirtualScroll<DT extends Record<string, any>>({
+    props,
+    tableContainer,
+    dataSourceCopy,
+    tableHeaderLast,
+    tableHeaders,
+}: Option<DT>) {
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
@@ -140,10 +147,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         } else {
             containerHeight = offsetHeight || Default_Table_Height;
         }
-        Object.assign(virtualScroll.value, {
-            containerHeight,
-            pageSize: Math.ceil(containerHeight / rowHeight) + 1, // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
-        });
+        const { headless, headerRowHeight } = props;
+        let pageSize = Math.ceil(containerHeight / rowHeight);
+        if (!headless) {
+            /** 表头高度占几行表体高度数 */
+            const headerToBodyRowHeightCount = Math.floor((tableHeaders.value.length * (headerRowHeight || rowHeight)) / rowHeight);
+            pageSize -= headerToBodyRowHeightCount; //减去表头行数
+        }
+        Object.assign(virtualScroll.value, { containerHeight, pageSize });
         updateVirtualScrollY(scrollTop);
     }
 
@@ -168,9 +179,30 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-        const startIndex = Math.floor(sTop / rowHeight);
-        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
+        // 先更新滚动条位置记录，其他地方可能有依赖。(stripe 时ArrowUp/Down滚动依赖)
+        virtualScroll.value.scrollTop = sTop;
+        let startIndex = Math.floor(sTop / rowHeight);
+        if (props.stripe) {
+            startIndex -= 1; //预渲染1行
+        }
+        if (startIndex < 0) {
+            startIndex = 0;
+        }
+        if (props.stripe && startIndex !== 0) {
+            const scrollRows = Math.abs(oldStartIndex - startIndex);
+            // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
+            if (scrollRows < 2) {
+                return;
+            } else if (scrollRows % 2) {
+                startIndex -= 1; // 奇数-1变成偶数
+            }
+        }
         let endIndex = startIndex + pageSize;
+        if (props.stripe) {
+            // 由于上方预渲染一行，这里也要预渲染1+1行
+            endIndex += 2;
+        }
+        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         if (endIndex > dataSourceCopy.value.length) {
             endIndex = dataSourceCopy.value.length; // 溢出index修正
         }
@@ -184,13 +216,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
             // 向上滚动
             Object.assign(virtualScroll.value, {
                 startIndex,
-                offsetTop,
                 endIndex,
-                scrollTop: sTop,
+                offsetTop,
             });
         } else {
             // vue2向下滚动优化
-            Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+            virtualScroll.value.endIndex = endIndex;
             vue2ScrollYTimeout = window.setTimeout(() => {
                 Object.assign(virtualScroll.value, { startIndex, offsetTop });
             }, VUE2_SCROLL_TIMEOUT_MS);

package/src/StkTable/utils.ts

@@ -1,6 +1,15 @@
 import { Default_Col_Width } from './const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 
+/** 是否空值 */
+function isEmptyValue(val: any, isNumber?: boolean) {
+    let isEmpty = val === null || val === '';
+    if (isNumber) {
+        isEmpty ||= typeof val === 'boolean' || Number.isNaN(+val);
+    }
+    return isEmpty;
+}
+
 /**
  * 对有序数组插入新数据
  * @param sortState
@@ -10,15 +19,30 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './type
  * @param newItem 要插入的数据
  * @param targetArray 表格数据
  */
-export function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]) {
+export function insertToOrderedArray<T extends object>(
+    sortState: SortState<keyof T>,
+    newItem: any,
+    targetArray: T[],
+    sortConfig: SortConfig<T> = {},
+) {
     const { dataIndex, order } = sortState;
+    sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;
     if (!sortType) sortType = typeof newItem[dataIndex] as 'number' | 'string';
+    const isNumber = sortType === 'number';
     const data = [...targetArray];
+
     if (!order) {
+        // 没有排序的情况，插入在最上方
         data.unshift(newItem);
         return data;
     }
+
+    if (sortConfig.emptyToBottom && isEmptyValue(data)) {
+        // 空值排在最下方
+        data.push(newItem);
+    }
+
     // 二分插入
     let sIndex = 0;
     let eIndex = data.length - 1;
@@ -27,7 +51,7 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<keyo
         // console.log(sIndex, eIndex);
         const midIndex = Math.floor((sIndex + eIndex) / 2);
         const midVal: any = data[midIndex][dataIndex];
-        const compareRes = strCompare(midVal, targetVal, sortType);
+        const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
         if (compareRes === 0) {
             //midVal == targetVal
             sIndex = midIndex;
@@ -47,41 +71,44 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<keyo
 }
 /**
  * 字符串比较
- * @param  a
- * @param  b
- * @param  type 类型
+ * @param a
+ * @param b
+ * @param type 类型
+ * @param isNumber 是否是数字类型
+ * @param localeCompare 是否 使用Array.prototype.localeCompare
  * @return {-1|0|1}
  */
-function strCompare(a: string, b: string, type: 'number' | 'string'): number {
-    // if (typeof a === 'number' && typeof b === 'number') type = 'number';
-    if (type === 'number') {
-        if (+a > +b) return 1;
-        else if (+a === +b) return 0;
-        else return -1;
-    } else {
+function strCompare(a: string, b: string, isNumber: boolean, localeCompare = false): number {
+    let _a: number | string = a;
+    let _b: number | string = b;
+    if (isNumber) {
+        // 是数字就转数字
+        _a = +a;
+        _b = +b;
+    } else if (localeCompare) {
+        // 字符串才可以localeCompare
         return String(a).localeCompare(b);
     }
+    if (_a > _b) return 1;
+    else if (_a === _b) return 0;
+    else return -1;
 }
 
 /**
- * 分离出空数据和非空数据成两个数组
+ * 分离出空数据和非空数据成两个数组。NaN视为空数据。
  * @param sortOption
  * @param targetDataSource
- * @param isNumber 1 数组
+ * @param isNumber 是否数字
  * @return [值数组,空数组]
  */
-function separatedData(sortOption: SortOption, targetDataSource: any[], isNumber?: boolean) {
-    const emptyArr: any[] = [];
-    const valueArr: any[] = [];
+function separatedData<T extends Record<string, any>>(sortOption: SortOption<T>, targetDataSource: T[], isNumber?: boolean) {
+    const emptyArr: T[] = [];
+    const valueArr: T[] = [];
 
     for (let i = 0; i < targetDataSource.length; i++) {
         const row = targetDataSource[i];
         const sortField = sortOption.sortField || sortOption.dataIndex;
-        let isEmpty = row[sortField] === null || row[sortField] === '';
-        if (isNumber) {
-            isEmpty ||= typeof row[sortField] === 'boolean' || Number.isNaN(+row[sortField]);
-        }
-
+        const isEmpty = isEmptyValue(row[sortField], isNumber);
         if (isEmpty) {
             emptyArr.push(row);
         } else {
@@ -96,48 +123,49 @@ function separatedData(sortOption: SortOption, targetDataSource: any[], isNumber
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
  * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
  * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
+ *
+ * sortConfig.defaultSort 会在order为null时生效
  * @param sortOption 列配置
  * @param order 排序方式
  * @param dataSource 排序的数组
  */
-export function tableSort(sortOption: SortOption, order: Order, dataSource: any[], sortConfig: SortConfig = {}): any[] {
+export function tableSort<T extends Record<string, any>>(
+    sortOption: SortOption<T>,
+    order: Order,
+    dataSource: T[],
+    sortConfig: SortConfig<T> = {},
+): T[] {
     if (!dataSource?.length) return dataSource || [];
-    sortConfig = Object.assign({ emptyToBottom: false } as SortConfig, sortConfig);
+    sortConfig = { emptyToBottom: false, ...sortConfig };
     let targetDataSource = [...dataSource];
+    let sortField = sortOption.sortField || sortOption.dataIndex;
+
+    if (!order && sortConfig.defaultSort) {
+        // 默认排序
+        order = sortConfig.defaultSort.order;
+        sortField = sortConfig.defaultSort.dataIndex;
+    }
 
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
         if (customSorterData) targetDataSource = customSorterData;
     } else if (order) {
-        const sortField = sortOption.sortField || sortOption.dataIndex;
         let { sortType } = sortOption;
         if (!sortType) sortType = typeof dataSource[0][sortField] as 'number' | 'string';
 
         const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === 'number');
+        const isNumber = sortType === 'number';
 
-        if (sortType === 'number') {
-            // 按数字类型排序
-            // 非数字当作最小值处理
-            if (order === 'asc') {
-                valueArr.sort((a, b) => +a[sortField] - +b[sortField]);
-                targetDataSource = [...emptyArr, ...valueArr];
-            } else {
-                valueArr.sort((a, b) => +b[sortField] - +a[sortField]);
-                targetDataSource = [...valueArr, ...emptyArr];
-            }
+        if (order === 'asc') {
+            valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
         } else {
-            // 按string 排序
-            if (order === 'asc') {
-                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
-                targetDataSource = [...emptyArr, ...valueArr];
-            } else {
-                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
-                targetDataSource = [...valueArr, ...emptyArr];
-            }
+            valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
         }
 
-        if (sortConfig.emptyToBottom) {
+        if (order === 'desc' || sortConfig.emptyToBottom) {
             targetDataSource = [...valueArr, ...emptyArr];
+        } else {
+            targetDataSource = [...emptyArr, ...valueArr];
         }
     }
     return targetDataSource;
@@ -156,8 +184,18 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 1) {
 
 /** 获取列宽 */
 export function getColWidth(col: StkTableColumn<any> | null): number {
-    if (typeof col?.width === 'number') {
-        return Math.floor(col.width ?? Default_Col_Width);
+    const val = col?.width ?? Default_Col_Width;
+    if (typeof val === 'number') {
+        return Math.floor(val);
+    }
+    return parseInt(val);
+}
+
+/** 获取列宽配置。用于支持列宽配置数字 */
+export function getColWidthStr(col: StkTableColumn<any> | null | undefined, key: 'width' | 'minWidth' | 'maxWidth' = 'width') {
+    const val = col?.[key];
+    if (typeof val === 'number') {
+        return val + 'px';
     }
-    return parseInt(col?.width ?? Default_Col_Width);
+    return val;
 }