stk-table-vue 1.2.4 → 1.2.6

package/src/StkTable/useRowExpand.ts

@@ -1,81 +1,81 @@
-import { ShallowRef } from 'vue';
-import { EXPANDED_ROW_KEY_PREFIX } from './const';
-import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
-type DT = PrivateRowDT;
-
-export function useRowExpand(emits: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen: RowKeyGen, onDataSourceChange: () => void) {
-    const expandedKey = '__EXP__';
-
-    function isExpanded(row: DT, col?: StkTableColumn<DT>) {
-        return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
-    }
-    /** click expended icon to toggle expand row */
-    function toggleExpandRow(row: DT, col: StkTableColumn<DT>) {
-        const isExpand = isExpanded(row, col);
-        setRowExpand(row, isExpand, { col });
-    }
-
-    /**
-     *
-     * @param rowKeyOrRow rowKey or row
-     * @param expand expand or collapse, if set null, toggle expand
-     * @param data { col?: StkTableColumn<DT> }
-     * @param data.silent if set true, not emit `toggle-row-expand`, default:false
-     */
-    function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean | null, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
-        let rowKey: UniqKey;
-        if (typeof rowKeyOrRow === 'string' || typeof rowKeyOrRow === 'number') {
-            rowKey = rowKeyOrRow;
-        } else {
-            rowKey = rowKeyGen(rowKeyOrRow);
-        }
-
-        const tempData = dataSourceCopy.value.slice();
-        const index = tempData.findIndex(it => rowKeyGen(it) === rowKey);
-        if (index === -1) {
-            console.warn('expandRow failed.rowKey:', rowKey);
-            return;
-        }
-
-        // delete other expanded row below the target row
-        for (let i = index + 1; i < tempData.length; i++) {
-            const item: PrivateRowDT = tempData[i];
-            const rowKey = item.__R_K__;
-            if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
-                tempData.splice(i, 1);
-                i--;
-            } else {
-                break;
-            }
-        }
-
-        const row = tempData[index];
-        const col = data?.col;
-
-        if (expand == null) {
-            expand = isExpanded(row, col);
-        }
-
-        if (expand) {
-            // insert new expanded row
-            const newExpandRow: PrivateRowDT = {
-                __R_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
-                __EXP_R__: row,
-                __EXP_C__: col,
-            };
-            tempData.splice(index + 1, 0, newExpandRow);
-        }
-
-        if (row) {
-            row[expandedKey] = expand ? col : void 0;
-        }
-
-        dataSourceCopy.value = tempData;
-        onDataSourceChange();
-        if (!data?.silent) {
-            emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
-        }
-    }
-
-    return [toggleExpandRow, setRowExpand] as const;
-}
+import { ShallowRef } from 'vue';
+import { EXPANDED_ROW_KEY_PREFIX } from './const';
+import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
+type DT = PrivateRowDT;
+
+export function useRowExpand(emits: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen: RowKeyGen, onDataSourceChange: () => void) {
+    const expandedKey = '__EXP__';
+
+    function isExpanded(row: DT, col?: StkTableColumn<DT>) {
+        return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
+    }
+    /** click expended icon to toggle expand row */
+    function toggleExpandRow(row: DT, col: StkTableColumn<DT>) {
+        const isExpand = isExpanded(row, col);
+        setRowExpand(row, isExpand, { col });
+    }
+
+    /**
+     *
+     * @param rowKeyOrRow rowKey or row
+     * @param expand expand or collapse, if set null, toggle expand
+     * @param data { col?: StkTableColumn<DT> }
+     * @param data.silent if set true, not emit `toggle-row-expand`, default:false
+     */
+    function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean | null, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
+        let rowKey: UniqKey;
+        if (typeof rowKeyOrRow === 'string' || typeof rowKeyOrRow === 'number') {
+            rowKey = rowKeyOrRow;
+        } else {
+            rowKey = rowKeyGen(rowKeyOrRow);
+        }
+
+        const tempData = dataSourceCopy.value.slice();
+        const index = tempData.findIndex(it => rowKeyGen(it) === rowKey);
+        if (index === -1) {
+            console.warn('expandRow failed.rowKey:', rowKey);
+            return;
+        }
+
+        // delete other expanded row below the target row
+        for (let i = index + 1; i < tempData.length; i++) {
+            const item: PrivateRowDT = tempData[i];
+            const rowKey = item.__R_K__;
+            if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
+                tempData.splice(i, 1);
+                i--;
+            } else {
+                break;
+            }
+        }
+
+        const row = tempData[index];
+        const col = data?.col;
+
+        if (expand == null) {
+            expand = isExpanded(row, col);
+        }
+
+        if (expand) {
+            // insert new expanded row
+            const newExpandRow: PrivateRowDT = {
+                __R_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+                __EXP_R__: row,
+                __EXP_C__: col,
+            };
+            tempData.splice(index + 1, 0, newExpandRow);
+        }
+
+        if (row) {
+            row[expandedKey] = expand ? col : void 0;
+        }
+
+        dataSourceCopy.value = tempData;
+        onDataSourceChange();
+        if (!data?.silent) {
+            emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
+        }
+    }
+
+    return [toggleExpandRow, setRowExpand] as const;
+}

package/src/StkTable/useScrollRowByRow.ts

@@ -1,96 +1,96 @@
-import { computed, customRef, onMounted, onUnmounted, Ref, watch } from 'vue';
-
-export function useScrollRowByRow(props: any, tableContainerRef: Ref<HTMLElement | undefined>) {
-    // let isMouseDown = false;
-    let isAddListeners = false;
-    /** record the last scroll bar position */
-    // let lastScrollTop = 0;
-
-    /** 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 */
-    const isSRBRActive = computed(() => {
-        if (onlyDragScroll.value) {
-            return isDragScroll.value;
-        }
-        return props.scrollRowByRow;
-    });
-
-    watch(onlyDragScroll, v => {
-        if (v) {
-            addEventListener();
-        } else {
-            removeEventListener();
-        }
-    });
-
-    onMounted(() => {
-        addEventListener();
-    });
-
-    onUnmounted(() => {
-        removeEventListener();
-    });
-
-    function addEventListener() {
-        if (isAddListeners || !onlyDragScroll.value) return;
-        const container = tableContainerRef.value;
-        if (!container) return;
-        container.addEventListener('mousedown', handleMouseDown);
-        container.addEventListener('mouseup', handleMouseUp);
-        isAddListeners = true;
-    }
-
-    function removeEventListener() {
-        const container = tableContainerRef.value;
-        if (!container) return;
-        container.removeEventListener('mousedown', handleMouseDown);
-        container.removeEventListener('mouseup', handleMouseUp);
-        isAddListeners = false;
-    }
-
-    function handleMouseDown(e: Event) {
-        const el = e.target as HTMLElement;
-        if (el.classList.contains('stk-table')) {
-            isDragScroll.value = true;
-        }
-    }
-
-    function handleMouseUp() {
-        isDragScroll.value = false;
-    }
-
-    return [isSRBRActive] as const;
-}
+import { computed, customRef, onMounted, onUnmounted, Ref, watch } from 'vue';
+
+export function useScrollRowByRow(props: any, tableContainerRef: Ref<HTMLElement | undefined>) {
+    // let isMouseDown = false;
+    let isAddListeners = false;
+    /** record the last scroll bar position */
+    // let lastScrollTop = 0;
+
+    /** 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 */
+    const isSRBRActive = computed(() => {
+        if (onlyDragScroll.value) {
+            return isDragScroll.value;
+        }
+        return props.scrollRowByRow;
+    });
+
+    watch(onlyDragScroll, v => {
+        if (v) {
+            addEventListener();
+        } else {
+            removeEventListener();
+        }
+    });
+
+    onMounted(() => {
+        addEventListener();
+    });
+
+    onUnmounted(() => {
+        removeEventListener();
+    });
+
+    function addEventListener() {
+        if (isAddListeners || !onlyDragScroll.value) return;
+        const container = tableContainerRef.value;
+        if (!container) return;
+        container.addEventListener('mousedown', handleMouseDown);
+        container.addEventListener('mouseup', handleMouseUp);
+        isAddListeners = true;
+    }
+
+    function removeEventListener() {
+        const container = tableContainerRef.value;
+        if (!container) return;
+        container.removeEventListener('mousedown', handleMouseDown);
+        container.removeEventListener('mouseup', handleMouseUp);
+        isAddListeners = false;
+    }
+
+    function handleMouseDown(e: Event) {
+        const el = e.target as HTMLElement;
+        if (el.classList.contains('stk-table')) {
+            isDragScroll.value = true;
+        }
+    }
+
+    function handleMouseUp() {
+        isDragScroll.value = false;
+    }
+
+    return [isSRBRActive] as const;
+}