stk-table-vue 0.8.13 → 0.9.0-beta.1

package/src/StkTable/useRowExpand.ts

@@ -1,88 +1,88 @@
-import { ShallowRef } from 'vue';
-import { EXPANDED_ROW_KEY_PREFIX } from './const';
-import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
-type DT = PrivateRowDT;
-type Option<DT extends Record<string, any>> = {
-    rowKeyGen: RowKeyGen;
-    dataSourceCopy: ShallowRef<DT[]>;
-    emits: any;
-};
-
-export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
-    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') {
-            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.__ROW_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 = {
-                __ROW_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;
-        if (!data?.silent) {
-            emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
-        }
-    }
-
-    return {
-        toggleExpandRow,
-        setRowExpand,
-    };
-}
+import { ShallowRef } from 'vue';
+import { EXPANDED_ROW_KEY_PREFIX } from './const';
+import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
+type DT = PrivateRowDT;
+type Option<DT extends Record<string, any>> = {
+    rowKeyGen: RowKeyGen;
+    dataSourceCopy: ShallowRef<DT[]>;
+    emits: any;
+};
+
+export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
+    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') {
+            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.__ROW_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 = {
+                __ROW_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;
+        if (!data?.silent) {
+            emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
+        }
+    }
+
+    return {
+        toggleExpandRow,
+        setRowExpand,
+    };
+}

package/src/StkTable/useScrollRowByRow.ts

@@ -1,79 +1,114 @@
-import { computed, Ref, ref, onMounted, onUnmounted, watch } from 'vue';
-
-type Params = {
-    props: any;
-    tableContainerRef: Ref<HTMLElement | undefined>;
-};
-
-export function useScrollRowByRow({ props, tableContainerRef }: Params) {
-    let isMouseDown = false;
-    let isAddListeners = false;
-    /** record the last scroll bar position */
-    let lastScrollTop = 0;
-
-    /** record is the scroll bar is dragging */
-    const isDragScroll = ref(false);
-    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);
-        container.addEventListener('scroll', handleScroll);
-        isAddListeners = true;
-    }
-
-    function removeEventListener() {
-        const container = tableContainerRef.value;
-        if (!container) return;
-        container.removeEventListener('mousedown', handleMouseDown);
-        container.removeEventListener('mouseup', handleMouseUp);
-        container.removeEventListener('scroll', handleScroll);
-        isAddListeners = false;
-    }
-
-    function handleMouseDown(e: Event) {
-        isMouseDown = true;
-        lastScrollTop = (e.target as HTMLElement).scrollTop;
-    }
-
-    function handleMouseUp() {
-        isMouseDown = false;
-        isDragScroll.value = false;
-        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;
-    }
-    return { isSRBRActive, isDragScroll };
-}
+import { computed, customRef, onMounted, onUnmounted, Ref, watch } from 'vue';
+
+type Params = {
+    props: any;
+    tableContainerRef: Ref<HTMLElement | undefined>;
+};
+
+export function useScrollRowByRow({ props, tableContainerRef }: Params) {
+    // 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);
+        // container.addEventListener('scroll', handleScroll);
+        isAddListeners = true;
+    }
+
+    function removeEventListener() {
+        const container = tableContainerRef.value;
+        if (!container) return;
+        container.removeEventListener('mousedown', handleMouseDown);
+        container.removeEventListener('mouseup', handleMouseUp);
+        // container.removeEventListener('scroll', handleScroll);
+        isAddListeners = false;
+    }
+
+    function handleMouseDown(e: Event) {
+        // 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;
+        isDragScroll.value = false;
+        // 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;
+    // }
+    return { isSRBRActive, isDragScroll };
+}

package/src/StkTable/useScrollbar.ts

@@ -0,0 +1,187 @@
+import { ref, onMounted, onUnmounted, nextTick, Ref } from 'vue';
+import { throttle } from './utils/index';
+
+export type ScrollbarOptions = {
+    enabled?: boolean;
+    /** scroll-y width */
+    width?: number;
+    /** scroll-x height */
+    height?: number;
+    /** min scroll-y width */
+    minWidth?: number;
+    /** min scroll-x height */
+    minHeight?: number;
+};
+
+/**
+ * 自定义滚动条hooks
+ * @param containerRef 滚动容器的ref
+ * @param options 滚动条配置选项
+ * @returns 滚动条相关状态和方法
+ */
+export function useScrollbar(containerRef: Ref<HTMLDivElement | undefined>, options: boolean | ScrollbarOptions = false) {
+    const defaultOptions: Required<ScrollbarOptions> = {
+        enabled: true,
+        minHeight: 20,
+        minWidth: 20,
+        width: 8,
+        height: 8,
+    };
+
+    const mergedOptions = {
+        ...defaultOptions,
+        ...(typeof options === 'boolean' ? { enabled: options } : options),
+    };
+
+    const showScrollbar = ref({ x: false, y: false });
+
+    const scrollbar = ref({ h: 0, w: 0, top: 0, left: 0 });
+
+    let isDraggingVertical = false;
+    let isDraggingHorizontal = false;
+    let dragStartY = 0;
+    let dragStartX = 0;
+    let dragStartTop = 0;
+    let dragStartLeft = 0;
+
+    let resizeObserver: ResizeObserver | null = null;
+
+    const throttledUpdateScrollbar = throttle(() => {
+        updateCustomScrollbar();
+    }, 200);
+
+    onMounted(() => {
+        if (mergedOptions.enabled && containerRef.value) {
+            resizeObserver = new ResizeObserver(throttledUpdateScrollbar);
+            resizeObserver.observe(containerRef.value);
+        }
+        // if (tableMainRef.value) {
+        //     resizeObserver.observe(tableMainRef.value);
+        // }
+        initScrollbar();
+    });
+
+    onUnmounted(() => {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
+    });
+
+    function updateCustomScrollbar() {
+        if (!mergedOptions.enabled || !containerRef.value) return;
+
+        const container = containerRef.value;
+        const { scrollHeight, clientHeight, scrollWidth, clientWidth, scrollTop, scrollLeft } = container;
+
+        const needVertical = scrollHeight > clientHeight;
+        const needHorizontal = scrollWidth > clientWidth;
+        showScrollbar.value = { x: needHorizontal, y: needVertical };
+
+        if (needVertical) {
+            const ratio = clientHeight / scrollHeight;
+            scrollbar.value.h = Math.max(mergedOptions.minHeight, ratio * clientHeight);
+            scrollbar.value.top = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - scrollbar.value.h);
+        }
+
+        if (needHorizontal) {
+            const ratio = clientWidth / scrollWidth;
+            scrollbar.value.w = Math.max(mergedOptions.minWidth, ratio * clientWidth);
+            scrollbar.value.left = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - scrollbar.value.w);
+        }
+    }
+
+    function onVerticalScrollbarMouseDown(e: MouseEvent | TouchEvent) {
+        e.preventDefault();
+        isDraggingVertical = true;
+
+        const container = containerRef.value;
+        if (!container) return;
+
+        dragStartTop = container.scrollTop;
+        dragStartY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+
+        document.addEventListener('mousemove', onVerticalDrag);
+        document.addEventListener('mouseup', onDragEnd);
+        document.addEventListener('touchmove', onVerticalDrag, { passive: false });
+        document.addEventListener('touchend', onDragEnd);
+    }
+
+    function onHorizontalScrollbarMouseDown(e: MouseEvent | TouchEvent) {
+        e.preventDefault();
+        isDraggingHorizontal = true;
+
+        const container = containerRef.value;
+        if (!container) return;
+
+        dragStartLeft = container.scrollLeft;
+
+        dragStartX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+
+        document.addEventListener('mousemove', onHorizontalDrag);
+        document.addEventListener('mouseup', onDragEnd);
+        document.addEventListener('touchmove', onHorizontalDrag, { passive: false });
+        document.addEventListener('touchend', onDragEnd);
+    }
+
+    function onVerticalDrag(e: MouseEvent | TouchEvent) {
+        if (!isDraggingVertical || !containerRef.value) return;
+
+        e.preventDefault();
+
+        const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+
+        const deltaY = clientY - dragStartY;
+        const container = containerRef.value;
+        const { scrollHeight, clientHeight } = container;
+
+        const scrollRange = scrollHeight - clientHeight;
+        const trackRange = clientHeight - scrollbar.value.h;
+        const scrollDelta = (deltaY / trackRange) * scrollRange;
+        container.scrollTop = dragStartTop + scrollDelta;
+    }
+
+    function onHorizontalDrag(e: MouseEvent | TouchEvent) {
+        if (!isDraggingHorizontal || !containerRef.value) return;
+
+        e.preventDefault();
+
+        const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+
+        const deltaX = clientX - dragStartX;
+        const container = containerRef.value;
+        const { scrollWidth, clientWidth } = container;
+
+        const scrollRange = scrollWidth - clientWidth;
+        const trackRange = clientWidth - scrollbar.value.w;
+        const scrollDelta = (deltaX / trackRange) * scrollRange;
+        container.scrollLeft = dragStartLeft + scrollDelta;
+    }
+
+    function onDragEnd() {
+        isDraggingVertical = false;
+        isDraggingHorizontal = false;
+
+        document.removeEventListener('mousemove', onVerticalDrag);
+        document.removeEventListener('mousemove', onHorizontalDrag);
+        document.removeEventListener('mouseup', onDragEnd);
+        document.removeEventListener('touchmove', onVerticalDrag);
+        document.removeEventListener('touchmove', onHorizontalDrag);
+        document.removeEventListener('touchend', onDragEnd);
+    }
+
+    function initScrollbar() {
+        nextTick(() => {
+            updateCustomScrollbar();
+        });
+    }
+
+    return {
+        scrollbarOptions: mergedOptions,
+        scrollbar,
+        showScrollbar,
+        onVerticalScrollbarMouseDown,
+        onHorizontalScrollbarMouseDown,
+        updateCustomScrollbar,
+    };
+}