stk-table-vue 0.6.16 → 0.7.0

package/src/StkTable/useFixedCol.ts

@@ -1,148 +1,148 @@
-import { computed, ComputedRef, Ref, ShallowRef, shallowRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
-import { VirtualScrollXStore } from './useVirtualScroll';
-import { getCalculatedColWidth } from './utils/constRefUtils';
-
-type Params<T extends Record<string, any>> = {
-    props: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-    getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
-    tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
-    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
-    tableContainerRef: Ref<HTMLDivElement | undefined>;
-};
-
-/**
- * 固定列处理
- * @returns
- */
-export function useFixedCol<DT extends Record<string, any>>({
-    props,
-    colKeyGen,
-    getFixedColPosition,
-    tableHeaders,
-    tableHeadersForCalc,
-    tableContainerRef,
-}: Params<DT>) {
-    /** 保存需要出现阴影的列 */
-    const fixedShadowCols = shallowRef<StkTableColumn<DT>[]>([]);
-
-    /** 正在被固定的列 */
-    const fixedCols = shallowRef<StkTableColumn<DT>[]>([]);
-
-    /** 固定列的class */
-    const fixedColClassMap = computed(() => {
-        const colMap = new Map();
-        const fixedShadowColsValue = fixedShadowCols.value;
-        const fixedColsValue = fixedCols.value;
-        const colKey = colKeyGen.value;
-        const fixedColShadow = props.fixedColShadow;
-        tableHeaders.value.forEach(cols => {
-            cols.forEach(col => {
-                const fixed = col.fixed;
-                const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
-                const classObj: Record<string, any> = {
-                    'fixed-cell--active': fixedColsValue.includes(col), // 表示该列正在被固定
-                };
-                if (fixed) {
-                    classObj['fixed-cell'] = true;
-                    classObj['fixed-cell--' + fixed] = true;
-                }
-                if (showShadow) {
-                    classObj['fixed-cell--shadow'] = true;
-                }
-                colMap.set(colKey(col), classObj);
-            });
-        });
-        return colMap;
-    });
-
-    /**
-     * 返回所有父元素，包括自己
-     * @param col
-     * @param type 1-shadow（阴影） 2-active(被固定的列)
-     *
-     */
-    // function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
-    //     if (!col) return [];
-    //     const colsTemp: StkTableColumn<DT>[] = [];
-    //     let node: any = { __PARENT__: col };
-    //     while ((node = node.__PARENT__)) {
-    //         if (type === 1 && node.fixed) {
-    //             // shadow
-    //             colsTemp.push(node);
-    //         }
-    //         if (type === 2) {
-    //             // active
-    //             colsTemp.push(node);
-    //         }
-    //     }
-    //     return colsTemp;
-    // }
-
-    /** 滚动条变化时，更新需要展示阴影的列 */
-    function updateFixedShadow(virtualScrollX?: Ref<VirtualScrollXStore>) {
-        const fixedColsTemp: StkTableColumn<DT>[] = [];
-        const getFixedColPositionValue = getFixedColPosition.value;
-        let clientWidth, scrollLeft;
-
-        if (virtualScrollX?.value) {
-            const { containerWidth: cw, scrollLeft: sl } = virtualScrollX.value;
-            clientWidth = cw;
-            scrollLeft = sl;
-        } else {
-            const { clientWidth: cw, scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
-            clientWidth = cw;
-            scrollLeft = sl;
-        }
-
-        /*******
-         * 根据横向滚动位置，计算出哪个列需要展示阴影
-         *****/
-        /** 左侧需要展示阴影的列 */
-        const leftShadowCol: StkTableColumn<DT>[] = [];
-        /** 右侧展示阴影的列 */
-        const rightShadowCol: StkTableColumn<DT>[] = [];
-        tableHeadersForCalc.value.forEach((row, level) => {
-            /**
-             * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
-             */
-            let left = 0;
-            row.forEach(col => {
-                const position = getFixedColPositionValue(col);
-                const isFixedLeft = col.fixed === 'left';
-                const isFixedRight = col.fixed === 'right';
-
-                if (isFixedLeft && position + scrollLeft > left) {
-                    fixedColsTemp.push(col);
-                    leftShadowCol[level] = col;
-                }
-
-                left += getCalculatedColWidth(col);
-
-                if (isFixedRight && scrollLeft + clientWidth - left < position) {
-                    fixedColsTemp.push(col);
-                    // 右固定列阴影，只要第一列
-                    if (!rightShadowCol[level]) {
-                        rightShadowCol[level] = col;
-                    }
-                }
-            });
-        });
-
-        if (props.fixedColShadow) {
-            fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
-        }
-
-        fixedCols.value = fixedColsTemp;
-    }
-
-    return {
-        /** 正在被固定的列 */
-        fixedCols,
-        /** 固定列class */
-        fixedColClassMap,
-        /** 滚动条变化时，更新需要展示阴影的列 */
-        updateFixedShadow,
-    };
-}
+import { computed, ComputedRef, Ref, ShallowRef, shallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
+import { VirtualScrollXStore } from './useVirtualScroll';
+import { getCalculatedColWidth } from './utils/constRefUtils';
+
+type Params<T extends Record<string, any>> = {
+    props: any;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+    getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
+    tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
+    tableContainerRef: Ref<HTMLDivElement | undefined>;
+};
+
+/**
+ * 固定列处理
+ * @returns
+ */
+export function useFixedCol<DT extends Record<string, any>>({
+    props,
+    colKeyGen,
+    getFixedColPosition,
+    tableHeaders,
+    tableHeadersForCalc,
+    tableContainerRef,
+}: Params<DT>) {
+    /** 保存需要出现阴影的列 */
+    const fixedShadowCols = shallowRef<StkTableColumn<DT>[]>([]);
+
+    /** 正在被固定的列 */
+    const fixedCols = shallowRef<StkTableColumn<DT>[]>([]);
+
+    /** 固定列的class */
+    const fixedColClassMap = computed(() => {
+        const colMap = new Map();
+        const fixedShadowColsValue = fixedShadowCols.value;
+        const fixedColsValue = fixedCols.value;
+        const colKey = colKeyGen.value;
+        const fixedColShadow = props.fixedColShadow;
+        tableHeaders.value.forEach(cols => {
+            cols.forEach(col => {
+                const fixed = col.fixed;
+                const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
+                const classObj: Record<string, any> = {
+                    'fixed-cell--active': fixedColsValue.includes(col), // 表示该列正在被固定
+                };
+                if (fixed) {
+                    classObj['fixed-cell'] = true;
+                    classObj['fixed-cell--' + fixed] = true;
+                }
+                if (showShadow) {
+                    classObj['fixed-cell--shadow'] = true;
+                }
+                colMap.set(colKey(col), classObj);
+            });
+        });
+        return colMap;
+    });
+
+    /**
+     * 返回所有父元素，包括自己
+     * @param col
+     * @param type 1-shadow（阴影） 2-active(被固定的列)
+     *
+     */
+    // function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
+    //     if (!col) return [];
+    //     const colsTemp: StkTableColumn<DT>[] = [];
+    //     let node: any = { __PARENT__: col };
+    //     while ((node = node.__PARENT__)) {
+    //         if (type === 1 && node.fixed) {
+    //             // shadow
+    //             colsTemp.push(node);
+    //         }
+    //         if (type === 2) {
+    //             // active
+    //             colsTemp.push(node);
+    //         }
+    //     }
+    //     return colsTemp;
+    // }
+
+    /** 滚动条变化时，更新需要展示阴影的列 */
+    function updateFixedShadow(virtualScrollX?: Ref<VirtualScrollXStore>) {
+        const fixedColsTemp: StkTableColumn<DT>[] = [];
+        const getFixedColPositionValue = getFixedColPosition.value;
+        let clientWidth, scrollLeft;
+
+        if (virtualScrollX?.value) {
+            const { containerWidth: cw, scrollLeft: sl } = virtualScrollX.value;
+            clientWidth = cw;
+            scrollLeft = sl;
+        } else {
+            const { clientWidth: cw, scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
+            clientWidth = cw;
+            scrollLeft = sl;
+        }
+
+        /*******
+         * 根据横向滚动位置，计算出哪个列需要展示阴影
+         *****/
+        /** 左侧需要展示阴影的列 */
+        const leftShadowCol: StkTableColumn<DT>[] = [];
+        /** 右侧展示阴影的列 */
+        const rightShadowCol: StkTableColumn<DT>[] = [];
+        tableHeadersForCalc.value.forEach((row, level) => {
+            /**
+             * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
+             */
+            let left = 0;
+            row.forEach(col => {
+                const position = getFixedColPositionValue(col);
+                const isFixedLeft = col.fixed === 'left';
+                const isFixedRight = col.fixed === 'right';
+
+                if (isFixedLeft && position + scrollLeft > left) {
+                    fixedColsTemp.push(col);
+                    leftShadowCol[level] = col;
+                }
+
+                left += getCalculatedColWidth(col);
+
+                if (isFixedRight && scrollLeft + clientWidth - left < position) {
+                    fixedColsTemp.push(col);
+                    // 右固定列阴影，只要第一列
+                    if (!rightShadowCol[level]) {
+                        rightShadowCol[level] = col;
+                    }
+                }
+            });
+        });
+
+        if (props.fixedColShadow) {
+            fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
+        }
+
+        fixedCols.value = fixedColsTemp;
+    }
+
+    return {
+        /** 正在被固定的列 */
+        fixedCols,
+        /** 固定列class */
+        fixedColClassMap,
+        /** 滚动条变化时，更新需要展示阴影的列 */
+        updateFixedShadow,
+    };
+}

package/src/StkTable/useFixedStyle.ts

@@ -1,75 +1,75 @@
-import { CSSProperties, ComputedRef, Ref } from 'vue';
-import { StkTableColumn, TagType } from './types';
-import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-
-type Options<T extends Record<string, any>> = {
-    props: any;
-    isRelativeMode: Ref<boolean>;
-    getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
-    virtualScroll: Ref<VirtualScrollStore>;
-    virtualScrollX: Ref<VirtualScrollXStore>;
-    virtualX_on: Ref<boolean>;
-    virtualX_offsetRight: Ref<number>;
-};
-/**
- * 固定列style
- * @param param0
- * @returns
- */
-export function useFixedStyle<DT extends Record<string, any>>({
-    props,
-    isRelativeMode,
-    getFixedColPosition,
-    virtualScroll,
-    virtualScrollX,
-    virtualX_on,
-    virtualX_offsetRight,
-}: Options<DT>) {
-    /**
-     * 固定列的style
-     * @param tagType 1-th 2-td
-     * @param col
-     * @param depth 深度。tagType = 1时使用
-     */
-    function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties | null {
-        const { fixed } = col;
-        if (tagType === TagType.TD && !fixed) return null;
-
-        const style: CSSProperties = {};
-        const { headerRowHeight, rowHeight } = props;
-        const isFixedLeft = fixed === 'left';
-        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-        const scrollRight = scrollWidth - containerWidth - scrollLeft;
-
-        if (tagType === TagType.TH) {
-            // TH
-            if (isRelativeMode.value) {
-                style.top = virtualScroll.value.scrollTop + 'px';
-            } else {
-                style.top = depth * (headerRowHeight ?? rowHeight) + 'px';
-            }
-        }
-
-        if (fixed === 'left' || fixed === 'right') {
-            if (isRelativeMode.value) {
-                if (isFixedLeft) {
-                    style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + 'px';
-                } else {
-                    // fixed right
-                    style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + 'px';
-                }
-            } else {
-                const lr = getFixedColPosition.value(col) + 'px';
-                if (isFixedLeft) {
-                    style.left = lr;
-                } else {
-                    style.right = lr;
-                }
-            }
-        }
-
-        return style;
-    }
-
-    return getFixedStyle;
-}
+import { CSSProperties, ComputedRef, Ref } from 'vue';
+import { StkTableColumn, TagType } from './types';
+import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
+type Options<T extends Record<string, any>> = {
+    props: any;
+    isRelativeMode: Ref<boolean>;
+    getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
+    virtualScroll: Ref<VirtualScrollStore>;
+    virtualScrollX: Ref<VirtualScrollXStore>;
+    virtualX_on: Ref<boolean>;
+    virtualX_offsetRight: Ref<number>;
+};
+/**
+ * 固定列style
+ * @param param0
+ * @returns
+ */
+export function useFixedStyle<DT extends Record<string, any>>({
+    props,
+    isRelativeMode,
+    getFixedColPosition,
+    virtualScroll,
+    virtualScrollX,
+    virtualX_on,
+    virtualX_offsetRight,
+}: Options<DT>) {
+    /**
+     * 固定列的style
+     * @param tagType 1-th 2-td
+     * @param col
+     * @param depth 深度。tagType = 1时使用
+     */
+    function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties | null {
+        const { fixed } = col;
+        if (tagType === TagType.TD && !fixed) return null;
+
+        const style: CSSProperties = {};
+        const { headerRowHeight, rowHeight } = props;
+        const isFixedLeft = fixed === 'left';
+        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+        const scrollRight = scrollWidth - containerWidth - scrollLeft;
+
+        if (tagType === TagType.TH) {
+            // TH
+            if (isRelativeMode.value) {
+                style.top = virtualScroll.value.scrollTop + 'px';
+            } else {
+                style.top = depth * (headerRowHeight ?? rowHeight) + 'px';
+            }
+        }
+
+        if (fixed === 'left' || fixed === 'right') {
+            if (isRelativeMode.value) {
+                if (isFixedLeft) {
+                    style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + 'px';
+                } else {
+                    // fixed right
+                    style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + 'px';
+                }
+            } else {
+                const lr = getFixedColPosition.value(col) + 'px';
+                if (isFixedLeft) {
+                    style.left = lr;
+                } else {
+                    style.right = lr;
+                }
+            }
+        }
+
+        return style;
+    }
+
+    return getFixedStyle;
+}

package/src/StkTable/useGetFixedColPosition.ts

@@ -1,65 +1,65 @@
-import { ComputedRef, ShallowRef, computed } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
-import { getCalculatedColWidth } from './utils/constRefUtils';
-
-type Params<T extends Record<string, any>> = {
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
-};
-
-/**
- * 固定列fixed左侧或者右侧的距离
- * - col.fixed = left 则得到距离左侧的距离
- * - col.fixed = right 则得到距离右侧的距离
- */
-export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeadersForCalc, colKeyGen }: Params<DT>) {
-    /** 固定列fixed左侧或者右侧的距离 */
-    const getFixedColPosition = computed(() => {
-        /** colKey 作为唯一标识 */
-        const colKeyStore: Record<string, number> = {};
-        /** 没有 colKey 的多级表头列，使用对象引用做标识 */
-        const refStore = new WeakMap<StkTableColumn<DT>, number>();
-        const colKeyGenValue = colKeyGen.value;
-        tableHeadersForCalc.value.forEach(cols => {
-            let left = 0;
-            /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
-            let rightStartIndex = 0;
-            for (let i = 0; i < cols.length; i++) {
-                const item = cols[i];
-                if (item.fixed === 'left') {
-                    const colKey = colKeyGenValue(item);
-                    if (colKey) {
-                        colKeyStore[colKey] = left;
-                    } else {
-                        refStore.set(item, left);
-                    }
-                    left += getCalculatedColWidth(item);
-                }
-                if (!rightStartIndex && item.fixed === 'right') {
-                    rightStartIndex = i;
-                }
-            }
-
-            let right = 0;
-            for (let i = cols.length - 1; i >= rightStartIndex; i--) {
-                const item = cols[i];
-                const colKey = colKeyGenValue(item);
-                if (item.fixed === 'right') {
-                    if (colKey) {
-                        colKeyStore[colKey] = right;
-                    } else {
-                        refStore.set(item, right);
-                    }
-                    right += getCalculatedColWidth(item);
-                }
-            }
-        });
-
-        return (col: StkTableColumn<any>) => {
-            const colKey = colKeyGenValue(col);
-            return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
-        };
-    });
-
-    return getFixedColPosition;
-}
+import { ComputedRef, ShallowRef, computed } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
+import { getCalculatedColWidth } from './utils/constRefUtils';
+
+type Params<T extends Record<string, any>> = {
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
+};
+
+/**
+ * 固定列fixed左侧或者右侧的距离
+ * - col.fixed = left 则得到距离左侧的距离
+ * - col.fixed = right 则得到距离右侧的距离
+ */
+export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeadersForCalc, colKeyGen }: Params<DT>) {
+    /** 固定列fixed左侧或者右侧的距离 */
+    const getFixedColPosition = computed(() => {
+        /** colKey 作为唯一标识 */
+        const colKeyStore: Record<string, number> = {};
+        /** 没有 colKey 的多级表头列，使用对象引用做标识 */
+        const refStore = new WeakMap<StkTableColumn<DT>, number>();
+        const colKeyGenValue = colKeyGen.value;
+        tableHeadersForCalc.value.forEach(cols => {
+            let left = 0;
+            /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
+            let rightStartIndex = 0;
+            for (let i = 0; i < cols.length; i++) {
+                const item = cols[i];
+                if (item.fixed === 'left') {
+                    const colKey = colKeyGenValue(item);
+                    if (colKey) {
+                        colKeyStore[colKey] = left;
+                    } else {
+                        refStore.set(item, left);
+                    }
+                    left += getCalculatedColWidth(item);
+                }
+                if (!rightStartIndex && item.fixed === 'right') {
+                    rightStartIndex = i;
+                }
+            }
+
+            let right = 0;
+            for (let i = cols.length - 1; i >= rightStartIndex; i--) {
+                const item = cols[i];
+                const colKey = colKeyGenValue(item);
+                if (item.fixed === 'right') {
+                    if (colKey) {
+                        colKeyStore[colKey] = right;
+                    } else {
+                        refStore.set(item, right);
+                    }
+                    right += getCalculatedColWidth(item);
+                }
+            }
+        });
+
+        return (col: StkTableColumn<any>) => {
+            const colKey = colKeyGenValue(col);
+            return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
+        };
+    });
+
+    return getFixedColPosition;
+}