stk-table-vue 0.8.13 → 0.8.14

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;
+}