stk-table-vue 0.0.2 → 0.1.0

package/lib/style.css

@@ -5,6 +5,7 @@
 }
 .stk-table{
   --row-height:28px;
+  --header-row-height:var(--row-height);
   --cell-padding-x:8px;
   --resize-handle-width:4px;
   --border-color:#e8e8f4;
@@ -25,6 +26,8 @@
   --sort-arrow-active-color:#1b63d9;
   --sort-arrow-active-sub-color:#cbcbe1;
   --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;
@@ -45,6 +48,8 @@
   --sort-arrow-active-color:#d0d1d2;
   --sort-arrow-active-sub-color:#5d6064;
   --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);
   color:#d1d1e0;
 }
 .stk-table.headless{
@@ -132,14 +137,42 @@
 .stk-table .stk-table-main th,
 .stk-table .stk-table-main td{
   z-index:1;
-  height:var(--row-height);
   font-size:14px;
   box-sizing:border-box;
   padding:0 var(--cell-padding-x);
 }
+.stk-table .stk-table-main th.fixed-cell--left,
+.stk-table .stk-table-main td.fixed-cell--left{
+  --shadow-rotate:90deg;
+}
+.stk-table .stk-table-main th.fixed-cell--left.fixed-cell--shadow::after,
+.stk-table .stk-table-main td.fixed-cell--left.fixed-cell--shadow::after{
+  right:-10px;
+}
+.stk-table .stk-table-main th.fixed-cell--right,
+.stk-table .stk-table-main td.fixed-cell--right{
+  --shadow-rotate:-90deg;
+}
+.stk-table .stk-table-main th.fixed-cell--right.fixed-cell--shadow::after,
+.stk-table .stk-table-main td.fixed-cell--right.fixed-cell--shadow::after{
+  left:-10px;
+}
+.stk-table .stk-table-main th.fixed-cell--shadow::after,
+.stk-table .stk-table-main td.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));
+}
 .stk-table .stk-table-main th{
   color:var(--th-color);
 }
+.stk-table .stk-table-main thead tr{
+  height:var(--header-row-height);
+}
 .stk-table .stk-table-main thead tr:first-child th{
   position:sticky;
   top:0;
@@ -158,30 +191,30 @@
   text-overflow:ellipsis;
   overflow:hidden;
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up{
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter .arrow-up{
   fill:var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down{
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-hover-color);
 }
 .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter{
   display:inline;
   display:initial;
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up{
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter .arrow-up{
   fill:var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down{
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-active-color);
 }
 .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter{
   display:inline;
   display:initial;
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up{
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter .arrow-up{
   fill:var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down{
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-active-sub-color);
 }
 .stk-table .stk-table-main thead tr th .table-header-cell-wrapper{
@@ -200,8 +233,8 @@
   height:16px;
   display:none;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down{
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter .arrow-up,
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-color);
 }
 .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer{
@@ -219,6 +252,7 @@
 }
 .stk-table .stk-table-main tbody tr{
   background-color:var(--td-bgc);
+  height:var(--row-height);
 }
 .stk-table .stk-table-main tbody tr.highlight-row{
   animation:stkTableDim 2s linear;
@@ -265,7 +299,7 @@
 }
 .stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper{
   overflow:hidden;
-  max-height:var(--row-height);
+  max-height:var(--header-row-height);
 }
 .stk-table.virtual .stk-table-main tbody{
   position:relative;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.0.2",
+    "version": "0.1.0",
     "description": "simple realtime virtual table for vue3",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -15,15 +15,15 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
         }"
-        :style="virtual && { '--row-height': virtualScroll.rowHeight + 'px' }"
+        :style="
+            virtual && {
+                '--row-height': virtualScroll.rowHeight + 'px',
+                '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
+            }
+        "
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 横向滚动时固定列的阴影，TODO: 覆盖一层在整个表上，使用linear-gradient 绘制阴影-->
-        <!-- <div
-        :class="showFixedLeftShadow && 'stk-table-fixed-left-col-box-shadow'"
-        :style="{ width: fixedLeftColWidth + 'px' }"
-      ></div> -->
         <!-- 这个元素用于虚拟滚动时，撑开父容器的高度 （已弃用，因为滚动条拖动过快，下方tr为加载出来时，会导致表头sticky闪动）
         <div
           v-if="virtual"
@@ -67,8 +67,7 @@
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
                             showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
-                            col.fixed ? 'fixed-cell' : '',
-                            col.fixed ? 'fixed-cell--' + col.fixed : '',
+                            ...getFixedColClass(col),
                         ]"
                         @click="
                             e => {
@@ -83,7 +82,7 @@
                         <div class="table-header-cell-wrapper">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" />
                             <template v-else>
-                                <slot name="tableHeader" :column="col">
+                                <slot name="tableHeader" :col="col">
                                     <span class="table-header-title">{{ col.title }}</span>
                                 </slot>
                             </template>
@@ -91,14 +90,12 @@
                             <!-- 排序图图标 -->
                             <span v-if="col.sorter" class="table-header-sorter">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
-                                    <g id="sort-btn">
-                                        <polygon id="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
-                                        <polygon
-                                            id="arrow-down"
-                                            transform="translate(8, 12) rotate(-180) translate(-8, -12) "
-                                            points="8 10 4.8 14 11.2 14"
-                                        ></polygon>
-                                    </g>
+                                    <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
+                                    <polygon
+                                        class="arrow-down"
+                                        transform="translate(8, 12) rotate(-180) translate(-8, -12) "
+                                        points="8 10 4.8 14 11.2 14"
+                                    ></polygon>
                                 </svg>
                             </span>
                             <!-- 列宽拖动handler -->
@@ -164,12 +161,7 @@
                         v-for="col in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[
-                            col.className,
-                            showOverflow ? 'text-overflow' : '',
-                            col.fixed ? 'fixed-cell' : '',
-                            col.fixed ? 'fixed-cell--' + col.fixed : '',
-                        ]"
+                        :class="[col.className, showOverflow ? 'text-overflow' : '', ...getFixedColClass(col)]"
                         :style="getCellStyle(2, col)"
                         @click="e => onCellClick(e, row, col)"
                     >
@@ -188,7 +180,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 /**
  * @author JA+
  * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
@@ -197,7 +189,8 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { CSSProperties, VNode, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { Default_Row_Height } from './const';
 import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
@@ -230,14 +223,16 @@ const props = withDefaults(
         theme?: 'light' | 'dark';
         /** 行高 */
         rowHeight?: number;
+        /** 表头行高。default = rowHeight */
+        headerRowHeight?: number | null;
         /** 虚拟滚动 */
         virtual?: boolean;
         /** x轴虚拟滚动 */
         virtualX?: boolean;
         /** 表格列配置 */
-        columns?: StkTableColumn<any>[];
+        columns?: StkTableColumn<DT>[];
         /** 表格数据源 */
-        dataSource?: any[];
+        dataSource?: DT[];
         /** 行唯一键 */
         rowKey?: UniqKey;
         /** 列唯一键 */
@@ -285,6 +280,8 @@ const props = withDefaults(
          * 传入方法表示resize后的回调
          */
         autoResize?: boolean | (() => void);
+        /** 是否展示固定列阴影。默认不展示。 */
+        fixedColShadow?: boolean;
     }>(),
     {
         width: '',
@@ -294,7 +291,8 @@ const props = withDefaults(
         maxWidth: '',
         headless: false,
         theme: 'light',
-        rowHeight: 28,
+        rowHeight: Default_Row_Height,
+        headerRowHeight: null,
         virtual: false,
         virtualX: false,
         columns: () => [],
@@ -314,39 +312,88 @@ const props = withDefaults(
         colMinWidth: 10,
         bordered: true,
         autoResize: true,
+        fixedColShadow: false,
     },
 );
 
 const emits = defineEmits<{
-    /** 排序变更触发 */
+    /**
+     * 排序变更触发
+     * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
+     */
     (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[]): void;
-    /** 一行点击事件 */
+    /**
+     * 一行点击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-click', ev: MouseEvent, row: DT): void;
-    /** 选中一行触发。ev返回null表示不是点击事件触发的 */
+    /**
+     * 选中一行触发。ev返回null表示不是点击事件触发的
+     * ```(ev: MouseEvent | null, row: DT)```
+     */
     (e: 'current-change', ev: MouseEvent | null, row: DT): void;
-    /** 行双击事件 */
+    /**
+     * 行双击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-dblclick', ev: MouseEvent, row: DT): void;
-    /** 表头右键事件 */
+    /**
+     * 表头右键事件
+     * ```(ev: MouseEvent)```
+     */
     (e: 'header-row-menu', ev: MouseEvent): void;
-    /** 表体行右键点击事件 */
+    /**
+     * 表体行右键点击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-menu', ev: MouseEvent, row: DT): void;
-    /** 单元格点击事件 */
+    /**
+     * 单元格点击事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
     (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
-    /**表头单元格点击事件 */
+    /**
+     * 表头单元格点击事件
+     * ```(ev: MouseEvent, col: StkTableColumn<DT>)```
+     */
     (e: 'header-cell-click', ev: MouseEvent, col: StkTableColumn<DT>): void;
-    /** 表格滚动事件 */
+    /**
+     * 表格滚动事件
+     * ```(ev: Event, data: { startIndex: number; endIndex: number })```
+     */
     (e: 'scroll', ev: Event, data: { startIndex: number; endIndex: number }): void;
-    /** 表格横向滚动事件 */
+    /**
+     * 表格横向滚动事件
+     * ```(ev: Event)```
+     */
     (e: 'scroll-x', ev: Event): void;
-    /** 表头列拖动事件 */
+    /**
+     * 表头列拖动事件
+     * ```(dragStartKey: string, targetColKey: string)```
+     */
     (e: 'col-order-change', dragStartKey: string, targetColKey: string): void;
-    /** 表头列拖动开始 */
+    /**
+     * 表头列拖动开始
+     * ```(dragStartKey: string)```
+     */
     (e: 'th-drag-start', dragStartKey: string): void;
-    /** 表头列拖动drop */
+    /**
+     * 表头列拖动drop
+     * ```(targetColKey: string)```
+     */
     (e: 'th-drop', targetColKey: string): void;
+    /** v-model:columns col resize 时更新宽度*/
     (e: 'update:columns', cols: StkTableColumn<DT>[]): void;
 }>();
 
+// 仅支持vue3.3+
+// const slots = defineSlots<{
+//     /** 表头插槽 */
+//     tableHeader(props: { col: StkTableColumn<DT> }): void;
+//     /** 空状态插槽 */
+//     empty(): void;
+// }>();
+
 const tableContainer = ref<HTMLDivElement>();
 const colResizeIndicator = ref<HTMLDivElement>();
 /** 当前选中的一行*/
@@ -376,7 +423,17 @@ const tableHeaders = ref<StkTableColumn<DT>[][]>([]);
 /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
 const tableHeaderLast = ref<StkTableColumn<DT>[]>([]);
 
-const dataSourceCopy = shallowRef([...props.dataSource]);
+const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
+
+/** 固定列阴影 */
+const fixedShadow = ref({
+    /** 是否展示左侧固定列阴影 */
+    showL: false,
+    /** 是否展示右侧固定列阴影 */
+    showR: false,
+    /** 保存需要出现阴影的列 */
+    cols: [] as StkTableColumn<DT>[],
+});
 
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
@@ -431,9 +488,11 @@ if (props.autoResize) {
 
 /** 键盘箭头滚动 */
 useKeyboardArrowScroll(tableContainer, {
+    props,
     scrollTo,
     virtualScroll,
     virtualScrollX,
+    tableHeaders,
 });
 
 watch(
@@ -453,7 +512,6 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-        // dealColumns(val);
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
@@ -467,6 +525,7 @@ watch(
             const column = tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
             onColumnSort(column, false);
         }
+        updateFixedShadow();
     },
     {
         deep: false,
@@ -474,11 +533,11 @@ watch(
 );
 onMounted(() => {
     initVirtualScroll();
+    updateFixedShadow();
 });
 
 /**
  * 处理多级表头
- * FIXME: 仅支持到两级表头。不支持多级。
  */
 function dealColumns() {
     // reset
@@ -497,9 +556,10 @@ function dealColumns() {
     /**
      * @param arr
      * @param depth 深度
+     * @param parent 父节点引用，用于构建双向链表。
      * @param parentFixed 父节点固定列继承。
      */
-    function flat(arr: StkTableColumn<any>[], depth = 0 /* , parentFixed: 'left' | 'right' | null = null */) {
+    function flat(arr: StkTableColumn<DT>[], parent: StkTableColumn<DT> | null, depth = 0 /* , parentFixed: 'left' | 'right' | null = null */) {
         if (!tableHeaders.value[depth]) {
             tableHeaders.value[depth] = [];
         }
@@ -510,11 +570,13 @@ function dealColumns() {
             // if (parentFixed) {
             //     col.fixed = parentFixed;
             // }
+            // 构建指向父节点的引用
+            col.__PARENT__ = parent;
             /** 一列中的子节点数量 */
             let colChildrenLen = 1;
             if (col.children) {
                 // DFS
-                colChildrenLen = flat(col.children, depth + 1 /* , col.fixed */);
+                colChildrenLen = flat(col.children, col, depth + 1 /* , col.fixed */);
             } else {
                 tempHeaderLast.push(col); // 没有children的列作为colgroup
             }
@@ -532,15 +594,58 @@ function dealColumns() {
         });
         return allChildrenLen;
     }
-    flat(copyColumn);
+
+    flat(copyColumn, null);
 
     tableHeaderLast.value = tempHeaderLast;
+    dealFixedColShadow();
+}
+
+/** 处理固定列阴影 */
+function dealFixedColShadow() {
+    if (!props.fixedColShadow) return;
+    fixedShadow.value.cols = [];
+    const lastLeftCol = tableHeaderLast.value.findLast(it => it.fixed === 'left');
+    const lastRightCol = tableHeaderLast.value.find(it => it.fixed === 'right');
+    // 处理多级表头列阴影
+    let node: any = { __PARENT__: lastLeftCol };
+    while ((node = node.__PARENT__)) {
+        if (node.fixed) {
+            fixedShadow.value.cols.push(node);
+        }
+    }
+    node = { __PARENT__: lastRightCol };
+    while ((node = node.__PARENT__)) {
+        if (node.fixed) {
+            fixedShadow.value.cols.push(node);
+        }
+    }
+}
+
+/** 固定列class */
+function getFixedColClass(col: StkTableColumn<DT>): string[] {
+    const { showR, showL, cols } = fixedShadow.value;
+    const classArr = [
+        col.fixed ? 'fixed-cell' : '',
+        col.fixed ? 'fixed-cell--' + col.fixed : '',
+        props.fixedColShadow && col.fixed && ((showL && col.fixed === 'left') || (showR && col.fixed === 'right')) && cols.includes(col)
+            ? 'fixed-cell--shadow'
+            : '',
+    ];
+    return classArr;
+}
+
+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;
 }
 
 /**
  * 行唯一值生成
  */
-function rowKeyGen(row: any) {
+function rowKeyGen(row: DT) {
     let key = rowKeyGenStore.get(row);
     if (!key) {
         key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
@@ -678,10 +783,12 @@ function onTableWheel(e: MouseEvent) {
 function onTableScroll(e: Event) {
     if (!e?.target) return;
 
-    // 此处可优化，因为访问e.target.scrollXX消耗性能
     const { scrollTop, scrollLeft } = e.target as HTMLElement;
-    const isYScroll = scrollTop !== virtualScroll.value.scrollTop;
-    const isXScroll = scrollLeft !== virtualScrollX.value.scrollLeft;
+    const { scrollTop: vScrollTop, startIndex, endIndex } = virtualScroll.value;
+    const { scrollLeft: vScrollLeft } = virtualScrollX.value;
+    const isYScroll = scrollTop !== vScrollTop;
+    const isXScroll = scrollLeft !== vScrollLeft;
+
     // 纵向滚动有变化
     if (isYScroll) {
         virtualScroll.value.scrollTop = scrollTop;
@@ -693,14 +800,12 @@ function onTableScroll(e: Event) {
     // 横向滚动有变化
     if (isXScroll) {
         virtualScrollX.value.scrollLeft = scrollLeft;
+        updateFixedShadow();
     }
     if (virtualX_on.value) {
         updateVirtualScrollX(scrollLeft);
     }
-    const data = {
-        startIndex: virtualScroll.value.startIndex,
-        endIndex: virtualScroll.value.endIndex,
-    };
+    const data = { startIndex, endIndex };
     if (isYScroll) {
         emits('scroll', e, data);
     }
@@ -775,16 +880,27 @@ function getTableData() {
 }
 
 defineExpose({
+    /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll,
+    /** 初始化横向虚拟滚动 */
     initVirtualScrollX,
+    /** 初始化纵向虚拟滚动 */
     initVirtualScrollY,
+    /** 设置当前选中行 */
     setCurrentRow,
+    /** 设置高亮渐暗单元格 */
     setHighlightDimCell,
+    /** 设置高亮渐暗行 */
     setHighlightDimRow,
+    /** 表格排序列dataIndex */
     sortCol,
+    /** 设置排序 */
     setSorter,
+    /** 重置排序 */
     resetSorter,
+    /** 滚动至 */
     scrollTo,
+    /** 获取表格数据 */
     getTableData,
 });
 </script>

package/src/StkTable/const.ts

@@ -2,6 +2,7 @@ export const Default_Col_Width = '100';
 
 export const Default_Table_Height = 100;
 export const Default_Table_Width = 200;
+export const Default_Row_Height = 28;
 
 /** 高亮背景色 */
 export const Highlight_Color = {