stk-table-vue 0.0.2 → 0.2.0

package/src/StkTable/style.less

@@ -8,6 +8,7 @@
 .stk-table {
     /* contain: strict;*/
     --row-height: 28px;
+    --header-row-height: var(--row-height);
     --cell-padding-x: 8px;
     --resize-handle-width: 4px;
     --border-color: #e8e8f4;
@@ -32,10 +33,16 @@
     /** 列宽拖动指示器颜色 */
     --col-resize-indicator-color: #87879c;
 
+    /** 固定列阴影颜色 */
+    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
+    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
+
     position: relative;
     overflow: auto;
     display: flex;
     flex-direction: column;
+    /* border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left*/
+    border-left: 1px solid var(--border-color);
 
     /**深色模式 */
     &.dark {
@@ -58,20 +65,14 @@
 
         --col-resize-indicator-color: #5d6064;
 
+        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
+        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
+
         /* background-color: var(--table-bgc); */
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
     }
 
-    /*.stk-table-fixed-left-col-box-shadow {
-       position: sticky;
-       left: 0;
-       top: 0;
-       height: 100%;
-       box-shadow: 0 0 10px;
-       z-index: 1;
-       pointer-events: none;
-     }*/
     &.headless {
         border-top: 1px solid var(--border-color);
     }
@@ -101,83 +102,50 @@
     }
 
     &.border {
-        .stk-table-main {
-
-            th,
-            td {
-                background-image: var(--bg-border-right), var(--bg-border-bottom);
-            }
 
-            thead {
-                tr {
-                    &:first-child th {
-                        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        th,
+        td {
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
 
-                        &:first-child {
-                            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                        }
-                    }
+        thead {
+            tr {
+                &:first-child th {
+                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 
-                    th {
-                        &:first-child {
-                            background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                        }
-                    }
                 }
-            }
 
-            tbody {
-                td {
-                    &:first-child {
-                        background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                    }
-                }
             }
         }
 
+
         &.virtual-x {
-            .stk-table-main {
-                .virtual-x-left {
-                    background: none;
-                    pointer-events: none;;
-                }
-                .virtual-x-right {
-                    padding: 0;
-                    background: none;
-                    pointer-events: none;;
-                }
-                thead tr:first-child .virtual-x-left+th {
-                    /* 横向虚拟滚动时，左侧第一个单元格加上border-left*/
-                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                }
+            .virtual-x-left {
+                background: none;
+                pointer-events: none;
+            }
 
-                tr .virtual-x-left+th {
-                    background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                }
+            .virtual-x-right {
+                padding: 0;
+                background: none;
+                pointer-events: none;
             }
+
         }
     }
 
     &.border-body-v {
-        .stk-table-main {
-            tbody {
-                --bg-border-bottom: linear-gradient(transparent, transparent);
-            }
+        tbody {
+            --bg-border-bottom: linear-gradient(transparent, transparent);
         }
     }
 
     &.stripe {
-        .stk-table-main {
 
-            /* 斑马纹*/
-            tbody {
-                tr:nth-child(odd) {
-                    background-color: var(--stripe-bgc);
-                }
-
-                tr:hover {
-                    background-color: var(--tr-hover-bgc);
-                }
+        /* 斑马纹*/
+        tbody {
+            tr:nth-child(odd) {
+                background-color: var(--stripe-bgc);
             }
         }
     }
@@ -208,7 +176,6 @@
         th,
         td {
             z-index: 1;
-            height: var(--row-height);
             font-size: 14px;
             box-sizing: border-box;
             padding: 0 var(--cell-padding-x);
@@ -216,109 +183,161 @@
 
         th {
             color: var(--th-color);
+            background-color: var(--th-bgc);
+
+            &.sortable {
+                cursor: pointer;
+            }
+
+            &.text-overflow {
+                .table-header-cell-wrapper {
+                    white-space: nowrap;
+                    overflow: hidden;
+                }
+
+                .table-header-title {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+        }
+
+        td {
+            &.fixed-cell {
+                background-color: inherit;
+                /* 防止横向滚动后透明*/
+            }
+
+            &.highlight-cell {
+                animation: stkTableDim 2s linear;
+            }
+
+            &.text-overflow {
+                .table-cell-wrapper {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        /*固定列阴影-左*/
+        .fixed-cell--left {
+            --shadow-rotate: 90deg;
+
+            &.fixed-cell--shadow::after {
+                right: -10px;
+            }
+        }
+
+        /*固定列阴影-右*/
+        .fixed-cell--right {
+            --shadow-rotate: -90deg;
+
+            &.fixed-cell--shadow::after {
+                left: -10px;
+            }
+        }
+
+        /*固定列阴影*/
+        .fixed-cell--shadow::after {
+            content: '';
+            width: 10px;
+            height: 100%;
+            top: 0px;
+            position: absolute;
+            pointer-events: none;
+            background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to)),
         }
 
         thead {
             tr {
+                height: var(--header-row-height);
+
                 &:first-child th {
                     position: sticky;
                     top: 0;
                 }
+            }
+        }
 
-                th {
-                    background-color: var(--th-bgc);
+        th {
 
-                    &.sortable {
-                        cursor: pointer;
-                    }
+            &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
+                .arrow-up {
+                    fill: var(--sort-arrow-hover-color);
+                }
 
-                    &.text-overflow {
-                        .table-header-cell-wrapper {
-                            white-space: nowrap;
-                            overflow: hidden;
+                .arrow-down {
+                    fill: var(--sort-arrow-hover-color);
+                }
+            }
 
-                            .table-header-title {
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                            }
-                        }
-                    }
+            &.sorter-desc .table-header-sorter {
+                display: initial;
 
-                    &:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter {
-                        #arrow-up {
-                            fill: var(--sort-arrow-hover-color);
-                        }
+                .arrow-up {
+                    fill: var(--sort-arrow-active-sub-color);
+                }
 
-                        #arrow-down {
-                            fill: var(--sort-arrow-hover-color);
-                        }
-                    }
+                .arrow-down {
+                    fill: var(--sort-arrow-active-color);
+                }
+            }
 
-                    &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
-                        display: initial;
+            &.sorter-asc .table-header-sorter {
+                display: initial;
 
-                        #arrow-up {
-                            fill: var(--sort-arrow-active-sub-color);
-                        }
+                .arrow-up {
+                    fill: var(--sort-arrow-active-color);
+                }
 
-                        #arrow-down {
-                            fill: var(--sort-arrow-active-color);
-                        }
-                    }
+                .arrow-down {
+                    fill: var(--sort-arrow-active-sub-color);
+                }
+            }
 
-                    &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
-                        display: initial;
 
-                        #arrow-up {
-                            fill: var(--sort-arrow-active-color);
-                        }
+        }
 
-                        #arrow-down {
-                            fill: var(--sort-arrow-active-sub-color);
-                        }
-                    }
+        .table-header-cell-wrapper {
+            max-width: 100%;
+            /*最大宽度不超过列宽*/
+            display: inline-flex;
+            align-items: center;
+        }
 
-                    .table-header-cell-wrapper {
-                        max-width: 100%;
-                        /*最大宽度不超过列宽*/
-                        display: inline-flex;
-                        align-items: center;
-
-                        .table-header-title {
-                            overflow: hidden;
-                            align-self: flex-start;
-                        }
-
-                        .table-header-sorter {
-                            flex-shrink: 0;
-                            margin-left: 4px;
-                            width: 16px;
-                            height: 16px;
-                            display: none;
-
-                            #arrow-up,
-                            #arrow-down {
-                                fill: var(--sort-arrow-color);
-                            }
-                        }
-
-                        .table-header-resizer {
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            cursor: col-resize;
-                            width: var(--resize-handle-width);
-
-                            &.left {
-                                left: 0;
-                            }
-
-                            &.right {
-                                right: 0;
-                            }
-                        }
-                    }
-                }
+        .table-header-title {
+            overflow: hidden;
+            align-self: flex-start;
+        }
+
+        .table-header-sorter {
+            flex-shrink: 0;
+            margin-left: 4px;
+            width: 16px;
+            height: 16px;
+            display: none;
+
+            .arrow-up,
+            .arrow-down {
+                fill: var(--sort-arrow-color);
+            }
+        }
+
+        .table-header-resizer {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            cursor: col-resize;
+            width: var(--resize-handle-width);
+
+            &.left {
+                left: 0;
+            }
+
+            &.right {
+                right: 0;
             }
         }
 
@@ -326,8 +345,9 @@
 
             tr {
                 background-color: var(--td-bgc);
-                /* td inherit tr bgc*/
+                height: var(--row-height);
 
+                /* td inherit tr bgc*/
                 &.highlight-row {
                     animation: stkTableDim 2s linear;
                 }
@@ -344,65 +364,9 @@
                 &.active {
                     background-color: var(--tr-active-bgc);
                 }
-
-                td {
-                    &.fixed-cell {
-                        background-color: inherit;
-                        /* 防止横向滚动后透明*/
-                    }
-
-                    &.highlight-cell {
-                        animation: stkTableDim 2s linear;
-                    }
-
-                    &.text-overflow {
-                        .table-cell-wrapper {
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                        }
-                    }
-
-                    /*   &.perch-td {
-                            padding: 0;
-                            height: 0;
-                            &.top {
-                            background-image: repeating-linear-gradient(
-                                180deg,
-                                transparent 0,
-                                transparent var(--row-height),
-                                var(--border-color) var(--row-height),
-                                var(--border-color) calc(var(--row-height) + 1px)
-                                ),
-                                var(--bg-border-right);
-                            }
-                            &.bottom {
-                            background-image: repeating-linear-gradient(
-                                0deg,
-                                transparent 0,
-                                transparent var(--row-height),
-                                var(--border-color) var(--row-height),
-                                var(--border-color) calc(var(--row-height) + 1px)
-                                ),
-                                var(--bg-border-right);
-                            }
-                        }*/
-                }
             }
 
         }
-
-        /* tr .fixed-cell--left{
-            border: 1px solid red;
-            &::after{
-                content: '';
-                width: 20px;
-                position: absolute;
-                right: -20px;
-                top: 0px;
-                background: rgba(255,255,255,0.5);
-            }
-        } */
     }
 
     .stk-table-no-data {
@@ -412,7 +376,6 @@
         font-size: 14px;
         position: sticky;
         left: 0px;
-        border-left: var(--border-width) solid var(--border-color);
         border-right: var(--border-width) solid var(--border-color);
         border-bottom: var(--border-width) solid var(--border-color);
         display: flex;
@@ -427,47 +390,38 @@
 
     /**虚拟滚动模式 */
     &.virtual {
-        .stk-table-main {
-            thead {
-                tr {
-                    th {
-
-                        /* 为不影响布局，表头行高要定死*/
-                        .table-header-cell-wrapper {
-                            overflow: hidden;
-                            max-height: var(--row-height);
-                        }
-                    }
-                }
-            }
 
-            tbody {
-                position: relative;
+        /* 为不影响布局，表头行高要定死*/
+        .table-header-cell-wrapper {
+            overflow: hidden;
+            max-height: var(--header-row-height);
+        }
 
-                tr {
-                    &.padding-top-tr td {
-                        height: 0;
-                    }
+        tbody {
+            position: relative;
 
-                    td {
-                        height: var(--row-height);
-                        line-height: 1;
+            tr {
 
-                        .table-cell-wrapper {
-                            max-height: var(--row-height);
-                            overflow: hidden;
-                        }
+                td {
+                    height: var(--row-height);
+                    line-height: 1;
+
+                    .table-cell-wrapper {
+                        max-height: var(--row-height);
+                        overflow: hidden;
                     }
                 }
             }
         }
+
+        .padding-top-tr td {
+            height: 0;
+        }
     }
 
     &.virtual-x {
-        .stk-table-main {
-            .virtual-x-left {
-                padding: 0;
-            }
+        .virtual-x-left {
+            padding: 0;
         }
     }
 }

package/src/StkTable/types/index.ts

@@ -38,12 +38,25 @@ export type StkTableColumn<T extends Record<string, any>> = {
     fixed?: 'left' | 'right' | null;
     /** private */ rowSpan?: number;
     /** private */ colSpan?: number;
-    /**自定义 td 渲染内容 */
+    /**
+     * 自定义 td 渲染内容。
+     *
+     * 组件prop入参:
+     * - props.row 一行的记录。
+     * - props.col 列配置
+     */
     customCell?: Component | VNode | CustomCellFunc<T>;
-    /** 自定义 th 渲染内容 */
+    /**
+     * 自定义 th 渲染内容
+     *
+     * 组件prop入参:
+     * - props.col 列配置
+     */
     customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
+    /** 父节点引用 */
+    __PARENT__?: StkTableColumn<T> | null;
 };
 
 export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;

package/src/StkTable/useFixedCol.ts

@@ -0,0 +1,91 @@
+import { ref, Ref } from 'vue';
+import { StkTableColumn } from './types';
+
+type Params<T extends Record<string, any>> = {
+    props: any;
+    tableHeaderLast: Ref<StkTableColumn<T>[]>;
+    tableContainer: Ref<HTMLDivElement | undefined>;
+};
+
+/**
+ * 固定列处理
+ * @returns
+ */
+export function useFixedCol<DT extends Record<string, any>>({ props, tableHeaderLast, tableContainer }: Params<DT>) {
+    /** 固定列阴影 */
+    const fixedShadow = ref<{
+        /** 是否展示左侧固定列阴影 */
+        showL: boolean;
+        /** 是否展示右侧固定列阴影 */
+        showR: boolean;
+    }>({
+        showL: false,
+        showR: false,
+    });
+    /** 保存需要出现阴影的列 */
+    let fixedShadowCols: StkTableColumn<DT>[] = [];
+
+    /** 处理固定列阴影 */
+    function dealFixedColShadow() {
+        if (!props.fixedColShadow) return;
+        fixedShadowCols = [];
+        // 找到最右边的固定列 findLast
+        let lastLeftCol = null;
+        for (let i = tableHeaderLast.value.length - 1; i > 0; i--) {
+            const col = tableHeaderLast.value[i];
+            if (col.fixed === 'left') {
+                lastLeftCol = col;
+                break;
+            }
+        }
+        // 处理多级表头列阴影
+        let node: any = { __PARENT__: lastLeftCol };
+        while ((node = node.__PARENT__)) {
+            if (node.fixed) {
+                fixedShadowCols.push(node);
+            }
+        }
+
+        // 找到最左边的固定列
+        const lastRightCol = tableHeaderLast.value.find(it => it.fixed === 'right');
+        node = { __PARENT__: lastRightCol };
+        while ((node = node.__PARENT__)) {
+            if (node.fixed) {
+                fixedShadowCols.push(node);
+            }
+        }
+    }
+
+    /** 固定列class */
+    function getFixedColClass(col: StkTableColumn<DT>): Record<string, boolean> {
+        const { showR, showL } = fixedShadow.value;
+        const showShadow =
+            props.fixedColShadow &&
+            col.fixed &&
+            ((showL && col.fixed === 'left') || (showR && col.fixed === 'right')) &&
+            fixedShadowCols.includes(col);
+        const classObj = {
+            'fixed-cell': col.fixed,
+            ['fixed-cell--' + col.fixed]: col.fixed,
+            'fixed-cell--shadow': showShadow,
+        };
+        return classObj;
+    }
+
+    /** 滚动条变化时，更新需要展示阴影的列 */
+    function updateFixedShadow() {
+        if (!props.fixedColShadow) return;
+        const { clientWidth, scrollWidth, scrollLeft } = tableContainer.value as HTMLDivElement;
+        fixedShadow.value.showL = Boolean(scrollLeft);
+        fixedShadow.value.showR = Math.abs(scrollWidth - scrollLeft - clientWidth) > 0.5;
+    }
+
+    return {
+        /** 固定列class */
+        getFixedColClass,
+        /** 处理固定列阴影 */
+        dealFixedColShadow,
+        /** 滚动条变化时，更新需要展示阴影的列 */
+        updateFixedShadow,
+    };
+}