stk-table-vue 0.0.2 → 0.1.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,6 +33,10 @@
     /** 列宽拖动指示器颜色 */
     --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;
@@ -58,20 +63,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);
     }
@@ -139,13 +138,17 @@
             .stk-table-main {
                 .virtual-x-left {
                     background: none;
-                    pointer-events: none;;
+                    pointer-events: none;
+                    ;
                 }
+
                 .virtual-x-right {
                     padding: 0;
                     background: none;
-                    pointer-events: 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);
@@ -208,10 +211,36 @@
         th,
         td {
             z-index: 1;
-            height: var(--row-height);
             font-size: 14px;
             box-sizing: border-box;
             padding: 0 var(--cell-padding-x);
+
+            /*固定列阴影*/
+            &.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)),
+            }
         }
 
         th {
@@ -219,7 +248,10 @@
         }
 
         thead {
+
             tr {
+                height: var(--header-row-height);
+
                 &:first-child th {
                     position: sticky;
                     top: 0;
@@ -245,11 +277,11 @@
                     }
 
                     &:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter {
-                        #arrow-up {
+                        .arrow-up {
                             fill: var(--sort-arrow-hover-color);
                         }
 
-                        #arrow-down {
+                        .arrow-down {
                             fill: var(--sort-arrow-hover-color);
                         }
                     }
@@ -257,11 +289,11 @@
                     &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
                         display: initial;
 
-                        #arrow-up {
+                        .arrow-up {
                             fill: var(--sort-arrow-active-sub-color);
                         }
 
-                        #arrow-down {
+                        .arrow-down {
                             fill: var(--sort-arrow-active-color);
                         }
                     }
@@ -269,11 +301,11 @@
                     &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
                         display: initial;
 
-                        #arrow-up {
+                        .arrow-up {
                             fill: var(--sort-arrow-active-color);
                         }
 
-                        #arrow-down {
+                        .arrow-down {
                             fill: var(--sort-arrow-active-sub-color);
                         }
                     }
@@ -296,8 +328,8 @@
                             height: 16px;
                             display: none;
 
-                            #arrow-up,
-                            #arrow-down {
+                            .arrow-up,
+                            .arrow-down {
                                 fill: var(--sort-arrow-color);
                             }
                         }
@@ -326,8 +358,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;
                 }
@@ -435,7 +468,7 @@
                         /* 为不影响布局，表头行高要定死*/
                         .table-header-cell-wrapper {
                             overflow: hidden;
-                            max-height: var(--row-height);
+                            max-height: var(--header-row-height);
                         }
                     }
                 }

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/useKeyboardArrowScroll.ts

@@ -1,19 +1,26 @@
 import { Ref, onBeforeUnmount, onMounted } from 'vue';
+import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
-const ARROW_CODES = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
+/** 翻页按键 */
+const SCROLL_CODES = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'PageUp', 'PageDown'] as const;
 
-type Options = {
-    scrollTo: (x: number | null, y: number | null) => void;
+type Options<DT extends Record<string, any>> = {
+    props: any;
+    scrollTo: (y: number | null, x: number | null) => void;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 /**
  * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
  *
  * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
  */
-export function useKeyboardArrowScroll(targetElement: Ref<HTMLElement | undefined>, { scrollTo, virtualScroll, virtualScrollX }: Options) {
+export function useKeyboardArrowScroll<DT extends Record<string, any>>(
+    targetElement: Ref<HTMLElement | undefined>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders }: Options<DT>,
+) {
     /** 检测鼠标是否悬浮在表格体上 */
     let isMouseOver = false;
 
@@ -33,20 +40,27 @@ export function useKeyboardArrowScroll(targetElement: Ref<HTMLElement | undefine
 
     /** 键盘按下事件 */
     function handleKeydown(e: KeyboardEvent) {
-        if (!ARROW_CODES.includes(e.code)) return;
+        if (!SCROLL_CODES.includes(e.code as any)) return;
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight } = virtualScroll.value;
+        const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
-        if (e.code === ARROW_CODES[0]) {
+        const { headless, headerRowHeight } = props;
+        /**表头高度 */
+        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        if (e.code === SCROLL_CODES[0]) {
             scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === ARROW_CODES[1]) {
+        } else if (e.code === SCROLL_CODES[1]) {
             scrollTo(null, scrollLeft + rowHeight);
-        } else if (e.code === ARROW_CODES[2]) {
+        } else if (e.code === SCROLL_CODES[2]) {
             scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === ARROW_CODES[3]) {
+        } else if (e.code === SCROLL_CODES[3]) {
             scrollTo(null, scrollLeft - rowHeight);
+        } else if (e.code === SCROLL_CODES[4]) {
+            scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+        } else if (e.code === SCROLL_CODES[5]) {
+            scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
         }
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -88,7 +88,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ tableContaine
 
     const virtualX_on = computed(() => {
         return (
-            props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getCalcWidth(col)), 0) > virtualScrollX.value.containerWidth * 1.5
+            props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getCalcWidth(col)), 0) > virtualScrollX.value.containerWidth + 100
         );
     });
 

package/src/vite-env.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 declare module '*.vue' {
     import { DefineComponent } from 'vue';
     const component: DefineComponent<object, object, any>;