stk-table-vue 0.6.16 → 0.7.0

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,112 +1,112 @@
-import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
-import { StkTableColumn } from './types';
-import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-
-/** 翻页按键 */
-enum ScrollCodes {
-    ArrowUp = 'ArrowUp',
-    ArrowRight = 'ArrowRight',
-    ArrowDown = 'ArrowDown',
-    ArrowLeft = 'ArrowLeft',
-    PageUp = 'PageUp',
-    PageDown = 'PageDown',
-    Home = 'Home',
-    End = 'End',
-}
-/** 所有翻页按键数组 */
-const ScrollCodesValues = Object.values(ScrollCodes);
-
-type Options<DT extends Record<string, any>> = {
-    props: any;
-    scrollTo: (y: number | null, x: number | null) => void;
-    virtualScroll: Ref<VirtualScrollStore>;
-    virtualScrollX: Ref<VirtualScrollXStore>;
-    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
-    virtual_on: ComputedRef<boolean>;
-};
-/**
- * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
- *
- * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
- */
-export function useKeyboardArrowScroll<DT extends Record<string, any>>(
-    targetElement: Ref<HTMLElement | undefined>,
-    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
-) {
-    /** 检测鼠标是否悬浮在表格体上 */
-    let isMouseOver = false;
-    watch(virtual_on, val => {
-        if (!val) {
-            removeListeners();
-        } else {
-            addEventListeners();
-        }
-    });
-
-    onMounted(addEventListeners);
-
-    onBeforeUnmount(removeListeners);
-
-    function addEventListeners() {
-        window.addEventListener('keydown', handleKeydown);
-        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.addEventListener('mousedown', handleMouseDown);
-    }
-
-    function removeListeners() {
-        window.removeEventListener('keydown', handleKeydown);
-        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
-    }
-
-    /** 键盘按下事件 */
-    function handleKeydown(e: KeyboardEvent) {
-        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
-        if (!ScrollCodesValues.includes(e.code as any)) return;
-        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
-        e.preventDefault(); // 不触发键盘默认的箭头事件
-
-        const { scrollTop, rowHeight, containerHeight, scrollHeight } = 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 === ScrollCodes.ArrowUp) {
-            scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowRight) {
-            scrollTo(null, scrollLeft + 50);
-        } else if (e.code === ScrollCodes.ArrowDown) {
-            scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowLeft) {
-            scrollTo(null, scrollLeft - 50);
-        } else if (e.code === ScrollCodes.PageUp) {
-            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-        } else if (e.code === ScrollCodes.PageDown) {
-            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-        } else if (e.code === ScrollCodes.Home) {
-            scrollTo(0, null);
-        } else if (e.code === ScrollCodes.End) {
-            scrollTo(scrollHeight, null);
-        }
-    }
-
-    function handleMouseEnter() {
-        isMouseOver = true;
-    }
-    function handleMouseLeave() {
-        isMouseOver = false;
-    }
-    /**
-     * 兜底。
-     * 是否存在不触发mouseEnter的时候？
-     */
-    function handleMouseDown() {
-        if (!isMouseOver) isMouseOver = true;
-    }
-}
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
+import { StkTableColumn } from './types';
+import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
+/** 翻页按键 */
+enum ScrollCodes {
+    ArrowUp = 'ArrowUp',
+    ArrowRight = 'ArrowRight',
+    ArrowDown = 'ArrowDown',
+    ArrowLeft = 'ArrowLeft',
+    PageUp = 'PageUp',
+    PageDown = 'PageDown',
+    Home = 'Home',
+    End = 'End',
+}
+/** 所有翻页按键数组 */
+const ScrollCodesValues = Object.values(ScrollCodes);
+
+type Options<DT extends Record<string, any>> = {
+    props: any;
+    scrollTo: (y: number | null, x: number | null) => void;
+    virtualScroll: Ref<VirtualScrollStore>;
+    virtualScrollX: Ref<VirtualScrollXStore>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
+    virtual_on: ComputedRef<boolean>;
+};
+/**
+ * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
+ *
+ * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
+ */
+export function useKeyboardArrowScroll<DT extends Record<string, any>>(
+    targetElement: Ref<HTMLElement | undefined>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
+) {
+    /** 检测鼠标是否悬浮在表格体上 */
+    let isMouseOver = false;
+    watch(virtual_on, val => {
+        if (!val) {
+            removeListeners();
+        } else {
+            addEventListeners();
+        }
+    });
+
+    onMounted(addEventListeners);
+
+    onBeforeUnmount(removeListeners);
+
+    function addEventListeners() {
+        window.addEventListener('keydown', handleKeydown);
+        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.addEventListener('mousedown', handleMouseDown);
+    }
+
+    function removeListeners() {
+        window.removeEventListener('keydown', handleKeydown);
+        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
+    }
+
+    /** 键盘按下事件 */
+    function handleKeydown(e: KeyboardEvent) {
+        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
+        if (!ScrollCodesValues.includes(e.code as any)) return;
+        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
+        e.preventDefault(); // 不触发键盘默认的箭头事件
+
+        const { scrollTop, rowHeight, containerHeight, scrollHeight } = 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 === ScrollCodes.ArrowUp) {
+            scrollTo(scrollTop - rowHeight, null);
+        } else if (e.code === ScrollCodes.ArrowRight) {
+            scrollTo(null, scrollLeft + 50);
+        } else if (e.code === ScrollCodes.ArrowDown) {
+            scrollTo(scrollTop + rowHeight, null);
+        } else if (e.code === ScrollCodes.ArrowLeft) {
+            scrollTo(null, scrollLeft - 50);
+        } else if (e.code === ScrollCodes.PageUp) {
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
+        } else if (e.code === ScrollCodes.PageDown) {
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
+        } else if (e.code === ScrollCodes.Home) {
+            scrollTo(0, null);
+        } else if (e.code === ScrollCodes.End) {
+            scrollTo(scrollHeight, null);
+        }
+    }
+
+    function handleMouseEnter() {
+        isMouseOver = true;
+    }
+    function handleMouseLeave() {
+        isMouseOver = false;
+    }
+    /**
+     * 兜底。
+     * 是否存在不触发mouseEnter的时候？
+     */
+    function handleMouseDown() {
+        if (!isMouseOver) isMouseOver = true;
+    }
+}

package/src/StkTable/useRowExpand.ts

@@ -0,0 +1,78 @@
+import { ShallowRef } from 'vue';
+import { ExpandedRow, PrivateRowDT, StkTableColumn, UniqKey } from './types';
+import { EXPANDED_ROW_KEY_PREFIX } from './const';
+type DT = PrivateRowDT;
+type Option<DT extends Record<string, any>> = {
+    rowKeyGen: (row: any) => UniqKey;
+    dataSourceCopy: ShallowRef<DT[]>;
+    emits: any;
+};
+
+export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
+    /** click expended icon to toggle expand row */
+    function toggleExpandRow(row: DT, col: StkTableColumn<DT>) {
+        const isExpand = row?.__EXPANDED__ === col ? !row?.__EXPANDED__ : true;
+        setRowExpand(row, isExpand, { col });
+    }
+
+    /**
+     *
+     * @param rowKeyOrRow rowKey or row
+     * @param expand expand or collapse
+     * @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, 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_KEY__;
+            if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
+                tempData.splice(i, 1);
+                i--;
+            } else {
+                break;
+            }
+        }
+
+        const row = tempData[index];
+        const col = data?.col || null;
+
+        if (expand) {
+            // insert new expanded row
+            const newExpandRow: ExpandedRow = {
+                __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+                __EXPANDED_ROW__: row,
+                __EXPANDED_COL__: col,
+            };
+            tempData.splice(index + 1, 0, newExpandRow);
+        }
+
+        if (row) {
+            row.__EXPANDED__ = expand ? col : null;
+        }
+
+        dataSourceCopy.value = tempData;
+        if (!data?.silent) {
+            emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
+        }
+    }
+
+    return {
+        toggleExpandRow,
+        setRowExpand,
+    };
+}

package/src/StkTable/useThDrag.ts

@@ -1,102 +1,102 @@
-import { computed, ComputedRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
-import { isEmptyValue } from './utils';
-
-type Params<T extends Record<string, any>> = {
-    props: any;
-    emits: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-};
-/**
- * 列顺序拖动
- * @returns
- */
-export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
-    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
-
-    const dragConfig = computed(() => {
-        const headerDrag = props.headerDrag;
-        const draggable = headerDrag !== false; // true or object
-        return {
-            draggable,
-            mode: 'insert',
-            disabled: () => false,
-            ...headerDrag,
-        };
-    });
-
-    /** 开始拖动记录th位置 */
-    function onThDragStart(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = th.dataset.colKey || '';
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.effectAllowed = 'move';
-            dt.setData('text/plain', dragStartKey);
-        }
-
-        emits('th-drag-start', dragStartKey);
-    }
-
-    function onThDragOver(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-
-        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
-        if (!isHeaderDraggable) return;
-
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.dropEffect = 'move';
-        }
-        e.preventDefault();
-    }
-
-    /** th拖动释放时 */
-    function onThDrop(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = e.dataTransfer?.getData('text');
-        if (dragStartKey !== th.dataset.colKey) {
-            handleColOrderChange(dragStartKey, th.dataset.colKey);
-        }
-        emits('th-drop', th.dataset.colKey);
-    }
-
-    /** 列拖动交换顺序 */
-    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
-        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
-
-        if (dragConfig.value.mode !== 'none') {
-            const columns: StkTableColumn<any>[] = props.columns.slice();
-
-            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
-            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
-
-            if (dragStartIndex === -1 || dragEndIndex === -1) return;
-
-            const dragStartCol = columns[dragStartIndex];
-            // if mode is none, do nothing
-            if (dragConfig.value.mode === 'swap') {
-                columns[dragStartIndex] = columns[dragEndIndex];
-                columns[dragEndIndex] = dragStartCol;
-            } else {
-                // default is insert
-                columns.splice(dragStartIndex, 1);
-                columns.splice(dragEndIndex, 0, dragStartCol);
-            }
-            emits('update:columns', columns);
-        }
-
-        emits('col-order-change', dragStartKey, dragEndKey);
-    }
-
-    return {
-        onThDragStart,
-        onThDragOver,
-        onThDrop,
-        /** 是否可拖拽 */
-        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
-    };
-}
+import { computed, ComputedRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
+import { isEmptyValue } from './utils';
+
+type Params<T extends Record<string, any>> = {
+    props: any;
+    emits: any;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+};
+/**
+ * 列顺序拖动
+ * @returns
+ */
+export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
+    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
+
+    const dragConfig = computed(() => {
+        const headerDrag = props.headerDrag;
+        const draggable = headerDrag !== false; // true or object
+        return {
+            draggable,
+            mode: 'insert',
+            disabled: () => false,
+            ...headerDrag,
+        };
+    });
+
+    /** 开始拖动记录th位置 */
+    function onThDragStart(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = th.dataset.colKey || '';
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData('text/plain', dragStartKey);
+        }
+
+        emits('th-drag-start', dragStartKey);
+    }
+
+    function onThDragOver(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+
+        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
+        if (!isHeaderDraggable) return;
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+        e.preventDefault();
+    }
+
+    /** th拖动释放时 */
+    function onThDrop(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = e.dataTransfer?.getData('text');
+        if (dragStartKey !== th.dataset.colKey) {
+            handleColOrderChange(dragStartKey, th.dataset.colKey);
+        }
+        emits('th-drop', th.dataset.colKey);
+    }
+
+    /** 列拖动交换顺序 */
+    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
+        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
+
+        if (dragConfig.value.mode !== 'none') {
+            const columns: StkTableColumn<any>[] = props.columns.slice();
+
+            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
+            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
+
+            if (dragStartIndex === -1 || dragEndIndex === -1) return;
+
+            const dragStartCol = columns[dragStartIndex];
+            // if mode is none, do nothing
+            if (dragConfig.value.mode === 'swap') {
+                columns[dragStartIndex] = columns[dragEndIndex];
+                columns[dragEndIndex] = dragStartCol;
+            } else {
+                // default is insert
+                columns.splice(dragStartIndex, 1);
+                columns.splice(dragEndIndex, 0, dragStartCol);
+            }
+            emits('update:columns', columns);
+        }
+
+        emits('col-order-change', dragStartKey, dragEndKey);
+    }
+
+    return {
+        onThDragStart,
+        onThDragOver,
+        onThDrop,
+        /** 是否可拖拽 */
+        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
+    };
+}