stk-table-vue 0.8.12 → 0.8.14

package/src/StkTable/useMergeCells.ts

@@ -35,20 +35,22 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
     /**
      * abstract the logic of hiding cells
      */
-    function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
-        for (let i = startIndex; i < startIndex + count; i++) {
-            if (!isSelfRow || i !== startIndex) {
-                // self row does not need to be hidden
-                const nextCol = tableHeaderLast.value[i];
-                if (!nextCol) break;
-                const nextColKey = colKeyGen.value(nextCol);
-                if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
-                hiddenCellMap.value[rowKey].add(nextColKey);
-            }
+    function hideCells(rowKey: UniqKey, colKey: UniqKey, colspan: number, isSelfRow = false, mergeCellKey: string) {
+        const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
 
+        for (let i = startIndex; i < startIndex + colspan; i++) {
             // if other row hovered, the rowspan cell need to be highlight
             if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
             hoverRowMap.value[rowKey].add(mergeCellKey);
+            if (isSelfRow && i === startIndex) {
+                // self row start cell does not need to be hidden
+                continue;
+            }
+            const nextCol = tableHeaderLast.value[i];
+            if (!nextCol) break;
+            const nextColKey = colKeyGen.value(nextCol);
+            if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
+            hiddenCellMap.value[rowKey].add(nextColKey);
         }
     }
 
@@ -78,31 +80,30 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
 
         const rowKey = rowKeyGen(row);
 
-        const colKey = colKeyGen.value(col);
-        const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
         const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
-        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
-
         if (curRowIndex === -1) return;
 
+        const colKey = colKeyGen.value(col);
+        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+
         for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
             const row = virtual_dataSourcePart.value[i];
             if (!row) break;
-            hideCells(rowKeyGen(row), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+            hideCells(rowKeyGen(row), colKey, colspan, i === curRowIndex, mergedCellKey);
         }
 
         return { colspan, rowspan };
     }
 
+    const emptySet = new Set<string>();
     function updateHoverMergedCells(rowKey: UniqKey | undefined) {
-        const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-        hoverMergedCells.value = set || new Set();
+        hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
     }
 
     function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
         if (!rowActiveProp.value.enabled) return;
         if (clear) {
-            activeMergedCells.value.clear();
+            activeMergedCells.value = new Set();
             return;
         }
         activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);

package/src/StkTable/useScrollRowByRow.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, ref, onMounted, onUnmounted, watch } from 'vue';
+import { computed, customRef, onMounted, onUnmounted, Ref, watch } from 'vue';
 
 type Params = {
     props: any;
@@ -6,13 +6,43 @@ type Params = {
 };
 
 export function useScrollRowByRow({ props, tableContainerRef }: Params) {
-    let isMouseDown = false;
+    // let isMouseDown = false;
     let isAddListeners = false;
     /** record the last scroll bar position */
-    let lastScrollTop = 0;
+    // let lastScrollTop = 0;
 
-    /** record is the scroll bar is dragging */
-    const isDragScroll = ref(false);
+    /** record is the scroll bar is dragging.debounce true to false */
+    const isDragScroll = customRef((track, trigger) => {
+        let value = false;
+        let debounceTimer = 0;
+        
+        return {
+            get() {
+                track();
+                return value;
+            },
+            set(newValue) {
+                // Add debounce when change from true to false
+                if (value && !newValue) {
+                    if (debounceTimer) {
+                        window.clearTimeout(debounceTimer);
+                    }
+                    debounceTimer = window.setTimeout(() => {
+                        value = newValue;
+                        trigger();
+                        debounceTimer = 0;
+                    }, 300); 
+                } else {
+                    if (debounceTimer) {
+                        window.clearTimeout(debounceTimer);
+                        debounceTimer = 0;
+                    }
+                    value = newValue;
+                    trigger();
+                }
+            }
+        }
+    });
     const onlyDragScroll = computed(() => props.scrollRowByRow === 'scrollbar');
 
     /** is ScrollRowByRow active */
@@ -45,7 +75,7 @@ export function useScrollRowByRow({ props, tableContainerRef }: Params) {
         if (!container) return;
         container.addEventListener('mousedown', handleMouseDown);
         container.addEventListener('mouseup', handleMouseUp);
-        container.addEventListener('scroll', handleScroll);
+        // container.addEventListener('scroll', handleScroll);
         isAddListeners = true;
     }
 
@@ -54,26 +84,31 @@ export function useScrollRowByRow({ props, tableContainerRef }: Params) {
         if (!container) return;
         container.removeEventListener('mousedown', handleMouseDown);
         container.removeEventListener('mouseup', handleMouseUp);
-        container.removeEventListener('scroll', handleScroll);
+        // container.removeEventListener('scroll', handleScroll);
         isAddListeners = false;
     }
 
     function handleMouseDown(e: Event) {
-        isMouseDown = true;
-        lastScrollTop = (e.target as HTMLElement).scrollTop;
+        // console.log('mousedown target:', e.target)
+        const el = e.target as HTMLElement;
+        if(el.classList.contains('stk-table')){
+            isDragScroll.value = true;
+        }
+        // isMouseDown = true;
+        // lastScrollTop = (e.target as HTMLElement).scrollTop;
     }
 
     function handleMouseUp() {
-        isMouseDown = false;
+        // isMouseDown = false;
         isDragScroll.value = false;
-        lastScrollTop = 0;
+        // lastScrollTop = 0;
     }
 
-    function handleScroll(e: Event) {
-        const scrollTop = (e.target as HTMLElement).scrollTop;
-        // if scrollTop === lastScrollTop means horizontal scroll
-        if (!isMouseDown || scrollTop === lastScrollTop) return;
-        isDragScroll.value = true;
-    }
+    // function handleScroll(e: Event) {
+    //     const scrollTop = (e.target as HTMLElement).scrollTop;
+    //     // if scrollTop === lastScrollTop means horizontal scroll
+    //     if (!isMouseDown || scrollTop === lastScrollTop) return;
+    //     isDragScroll.value = true;
+    // }
     return { isSRBRActive, isDragScroll };
-}
+}

package/src/StkTable/useTrDrag.ts

@@ -1,5 +1,6 @@
 import { computed, ShallowRef } from 'vue';
 import { DragRowConfig } from './types';
+import { getClosestTr } from './utils';
 
 type Params = {
     props: any;
@@ -22,12 +23,6 @@ export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
         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) {

package/src/StkTable/utils/index.ts

@@ -240,3 +240,19 @@ export function getBrowsersVersion(browserName: string) {
 export function pureCellKeyGen(rowKey: UniqKey, colKey: UniqKey) {
     return rowKey + CELL_KEY_SEPARATE + colKey;
 }
+
+export function getClosestTr(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    const tr = target?.closest('tr');
+    return tr;
+}
+
+export function getClosestTrIndex(e: MouseEvent) {
+    const tr = getClosestTr(e);
+    if (!tr) return -1;
+    return Number(tr.dataset.rowI);
+}
+
+export function getClosestColKey(e: MouseEvent) {
+    return (e.target as HTMLElement)?.closest('td')?.dataset.colKey;
+}