stk-table-vue 0.8.9 → 0.8.10

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -214,7 +214,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHeight: number;
     autoRowHeight: boolean;
     rowHover: boolean;
-    rowActive: boolean;
+    rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
     virtual: boolean;
@@ -583,7 +583,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHeight: number;
     autoRowHeight: boolean;
     rowHover: boolean;
-    rowActive: boolean;
+    rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
     virtual: boolean;

package/lib/src/StkTable/types/index.d.ts

@@ -18,7 +18,7 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded?: PrivateRowDT['__EXPANDED__'];
+    expanded?: PrivateRowDT['__EXP__'];
 };
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
@@ -134,25 +134,25 @@ export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * If user define the `__ROW_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_KEY__?: string;
+    __ROW_K__?: string;
     /**
      * if row expanded
      * @private
      */
-    __EXPANDED__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any> | null;
     /**
      * if tree node row expanded
      * @private
      */
-    __T_EXPANDED__?: boolean;
+    __T_EXP__?: boolean;
     /**
      * tree parent key
      * @private
      */
-    __T_PARENT_K__?: UniqKey;
+    __T_P_K__?: UniqKey;
     /**
      * tree level
      * @private

package/lib/stk-table-vue.js

@@ -971,7 +971,7 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
   };
 }
 function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
-  const expandedKey = "__EXPANDED__";
+  const expandedKey = "__EXP__";
   function isExpanded(row, col) {
     return (row == null ? void 0 : row[expandedKey]) === col ? !(row == null ? void 0 : row[expandedKey]) : true;
   }
@@ -994,7 +994,7 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     }
     for (let i = index + 1; i < tempData.length; i++) {
       const item = tempData[i];
-      const rowKey2 = item.__ROW_KEY__;
+      const rowKey2 = item.__ROW_K__;
       if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
         tempData.splice(i, 1);
         i--;
@@ -1009,14 +1009,14 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     }
     if (expand) {
       const newExpandRow = {
-        __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+        __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
         __EXPANDED_ROW__: row,
         __EXPANDED_COL__: col
       };
       tempData.splice(index + 1, 0, newExpandRow);
     }
     if (row) {
-      row.__EXPANDED__ = expand ? col : null;
+      row.__EXP__ = expand ? col : null;
     }
     dataSourceCopy.value = tempData;
     if (!(data == null ? void 0 : data.silent)) {
@@ -1253,7 +1253,7 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
 function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
   const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
   function toggleTreeNode(row, col) {
-    const expand = row ? !row.__T_EXPANDED__ : false;
+    const expand = row ? !row.__T_EXP__ : false;
     privateSetTreeExpand(row, { expand, col, isClick: true });
   }
   function privateSetTreeExpand(row, option) {
@@ -1276,7 +1276,7 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
       const level = row2.__T_LV__ || 0;
       let expanded = option == null ? void 0 : option.expand;
       if (expanded === void 0) {
-        expanded = !row2.__T_EXPANDED__;
+        expanded = !row2.__T_EXP__;
       }
       if (expanded) {
         const children = expandNode(row2, level);
@@ -1296,13 +1296,10 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
     privateSetTreeExpand(row, { ...option, isClick: false });
   }
   function setNodeExpanded(row, expanded, level, parent) {
-    row.__T_EXPANDED__ = expanded;
+    row.__T_EXP__ = expanded;
     if (level !== void 0) {
       row.__T_LV__ = level;
     }
-    if (parent) {
-      row.__T_PARENT_K__ = rowKeyGen(parent);
-    }
   }
   function flatTreeData(data) {
     const result = [];
@@ -1311,28 +1308,24 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
       for (let i = 0; i < data2.length; i++) {
         const item = data2[i];
         result.push(item);
-        const isExpanded = Boolean(item.__T_EXPANDED__);
-        setNodeExpanded(item, isExpanded, level, parent);
+        const isExpanded = Boolean(item.__T_EXP__);
+        setNodeExpanded(item, isExpanded, level);
         if (!isExpanded) {
           if (defaultExpandAll) {
             setNodeExpanded(item, true);
           } else {
-            if (defaultExpandLevel) {
-              if (level < defaultExpandLevel) {
-                setNodeExpanded(item, true);
-              }
+            if (defaultExpandLevel && level < defaultExpandLevel) {
+              setNodeExpanded(item, true);
             }
-            if (defaultExpandKeys) {
-              if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                setNodeExpanded(item, true);
-              }
+            if (defaultExpandKeys == null ? void 0 : defaultExpandKeys.includes(rowKeyGen(item))) {
+              setNodeExpanded(item, true);
             }
-            if (!item.__T_EXPANDED__) {
+            if (!item.__T_EXP__) {
               continue;
             }
           }
         }
-        recursion(item.children, level + 1, item);
+        recursion(item.children, level + 1);
       }
     })(data, 0);
     return result;
@@ -1342,11 +1335,11 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
     row.children && row.children.forEach((child) => {
       result.push(child);
       const childLv = level + 1;
-      if (child.__T_EXPANDED__ && child.children) {
+      if (child.__T_EXP__ && child.children) {
         const res = expandNode(child, childLv);
         result = result.concat(res);
       } else {
-        setNodeExpanded(child, false, childLv, row);
+        setNodeExpanded(child, false, childLv);
       }
     });
     return result;
@@ -1740,7 +1733,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
     autoRowHeight: { type: Boolean, default: false },
     rowHover: { type: Boolean, default: true },
-    rowActive: { type: Boolean, default: true },
+    rowActive: { type: Boolean, default: () => DEFAULT_ROW_ACTIVE_CONFIG },
     rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
     virtual: { type: Boolean, default: false },
@@ -1806,7 +1799,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (typeof rowActive === "boolean") {
         return {
           ...DEFAULT_ROW_ACTIVE_CONFIG,
-          enabled: rowActive,
+          enabled: rowActive ?? true,
           revokable: Boolean(props.rowCurrentRevokable)
         };
       } else {
@@ -2076,7 +2069,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function rowKeyGen(row) {
       if (!row) return row;
-      let key = rowKeyGenCache.get(row) || row.__ROW_KEY__;
+      let key = rowKeyGenCache.get(row) || row.__ROW_K__;
       if (!key) {
         key = rowKeyGenComputed.value(row);
         if (key === void 0) {
@@ -2251,22 +2244,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       const dom = tableContainerRef.value;
       if (!dom) return;
+      if (!virtual_on.value && !virtualX_on.value) return;
       const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
       const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
       const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
       const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
-      const { deltaY, deltaX } = e;
-      if (virtual_on.value && deltaY) {
+      const { deltaY, deltaX, shiftKey } = e;
+      if (virtual_on.value && deltaY && !shiftKey) {
         if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
           e.preventDefault();
         }
         dom.scrollTop += deltaY;
       }
-      if (virtualX_on.value && deltaX) {
-        if (deltaX > 0 && !isScrollRight || deltaX < 0 && scrollLeft > 0) {
+      if (virtualX_on.value) {
+        let distance = deltaX;
+        if (shiftKey && deltaY) {
+          distance = deltaY;
+        }
+        if (distance > 0 && !isScrollRight || distance < 0 && scrollLeft > 0) {
           e.preventDefault();
         }
-        dom.scrollLeft += deltaX;
+        dom.scrollLeft += distance;
       }
     }
     function onTableScroll(e) {
@@ -2693,7 +2691,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
                   [_ctx.rowClassName(row, getRowIndex(rowIndex)) || ""]: true,
-                  expanded: row == null ? void 0 : row.__EXPANDED__,
+                  expanded: row == null ? void 0 : row.__EXP__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
@@ -2737,8 +2735,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           "cell-active": col.mergeCells && unref(activeMergedCells).has(cellKeyGen(row, col)),
                           "seq-column": col.type === "seq",
                           active: props.cellActive && currentSelectedCellKey.value === cellKeyGen(row, col),
-                          expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
-                          "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
+                          expanded: col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false),
+                          "tree-expanded": col.type === "tree-node" && row.__T_EXP__,
                           "drag-row-cell": col.type === "dragRow"
                         }
                       ]
@@ -2762,8 +2760,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           rowIndex: getRowIndex(rowIndex),
                           colIndex,
                           cellValue: row && row[col.dataIndex],
-                          expanded: row && row.__EXPANDED__ || null,
-                          "tree-expanded": row && row.__T_EXPANDED__ || null
+                          expanded: row && row.__EXP__ || null,
+                          "tree-expanded": row && row.__T_EXP__ || null
                         }, {
                           stkFoldIcon: withCtx(() => [
                             createVNode(TriangleIcon)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -115,7 +115,7 @@
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
-                        expanded: row?.__EXPANDED__,
+                        expanded: row?.__EXP__,
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
                     :style="{
@@ -152,9 +152,8 @@
                                         'cell-active': col.mergeCells && activeMergedCells.has(cellKeyGen(row, col)),
                                         'seq-column': col.type === 'seq',
                                         active: props.cellActive && currentSelectedCellKey === cellKeyGen(row, col),
-                                        expanded:
-                                            col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
-                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXPANDED__,
+                                        expanded: col.type === 'expand' && (row.__EXP__ ? colKeyGen(row.__EXP__) === colKeyGen(col) : false),
+                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXP__,
                                         'drag-row-cell': col.type === 'dragRow',
                                     },
                                 ]"
@@ -179,8 +178,8 @@
                                             :rowIndex="getRowIndex(rowIndex)"
                                             :colIndex="colIndex"
                                             :cellValue="row && row[col.dataIndex]"
-                                            :expanded="(row && row.__EXPANDED__) || null"
-                                            :tree-expanded="(row && row.__T_EXPANDED__) || null"
+                                            :expanded="(row && row.__EXP__) || null"
+                                            :tree-expanded="(row && row.__T_EXP__) || null"
                                         >
                                             <template #stkFoldIcon>
                                                 <TriangleIcon></TriangleIcon>
@@ -456,7 +455,7 @@ const props = withDefaults(
         rowHeight: DEFAULT_ROW_HEIGHT,
         autoRowHeight: false,
         rowHover: true,
-        rowActive: true,
+        rowActive: () => DEFAULT_ROW_ACTIVE_CONFIG,
         rowCurrentRevokable: true,
         headerRowHeight: DEFAULT_ROW_HEIGHT,
         virtual: false,
@@ -721,7 +720,7 @@ const rowActiveProp = computed<Required<RowActiveOption<DT>>>(() => {
     if (typeof rowActive === 'boolean') {
         return {
             ...DEFAULT_ROW_ACTIVE_CONFIG,
-            enabled: rowActive,
+            enabled: rowActive ?? true,
             revokable: Boolean(props.rowCurrentRevokable),
         };
     } else {
@@ -1063,7 +1062,7 @@ function dealColumns() {
  */
 function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
-    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_KEY__;
+    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_K__;
     if (!key) {
         key = rowKeyGenComputed.value(row);
 
@@ -1301,50 +1300,47 @@ function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowInd
 }
 
 /**
- * 鼠标滚轮事件监听。代理滚轮事件，防止滚动过快出现白屏。
+ * proxy scroll, prevent white screen
  * @param e
  */
 function onTableWheel(e: WheelEvent) {
     if (props.smoothScroll) {
         return;
     }
+    // if is resizing, not allow scroll
     if (isColResizing.value) {
-        // 正在调整列宽时，不允许用户滚动
         e.stopPropagation();
         return;
     }
-    // #region ---- 控制滚动，防止出现白屏--
     const dom = tableContainerRef.value;
     if (!dom) return;
+    if (!virtual_on.value && !virtualX_on.value) return;
+
     const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
     const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-    /** 是否滚动在下面 */
     const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-    /** 是否滚动在右侧 */
     const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
-    const { deltaY, deltaX } = e;
+    const { deltaY, deltaX, shiftKey } = e;
 
-    /**
-     * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
-     * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
-     */
-    if (virtual_on.value && deltaY) {
+    if (virtual_on.value && deltaY && !shiftKey) {
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
-            e.preventDefault();
+            e.preventDefault(); // parent element scroll
         }
         dom.scrollTop += deltaY;
     }
-    if (virtualX_on.value && deltaX) {
-        if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
+    if (virtualX_on.value) {
+        let distance = deltaX;
+        if (shiftKey && deltaY) {
+            distance = deltaY;
+        }
+        if ((distance > 0 && !isScrollRight) || (distance < 0 && scrollLeft > 0)) {
             e.preventDefault();
         }
-        dom.scrollLeft += deltaX;
+        dom.scrollLeft += distance;
     }
-    //#endregion
 }
 
 /**
- * 滚动条监听
  * @param e scrollEvent
  */
 function onTableScroll(e: Event) {

package/src/StkTable/types/index.ts

@@ -17,7 +17,7 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded?: PrivateRowDT['__EXPANDED__'];
+    expanded?: PrivateRowDT['__EXP__'];
 };
 
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
@@ -139,25 +139,25 @@ export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * If user define the `__ROW_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_KEY__?: string;
+    __ROW_K__?: string;
     /**
      * if row expanded
      * @private
      */
-    __EXPANDED__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any> | null;
     /**
      * if tree node row expanded
      * @private
      */
-    __T_EXPANDED__?: boolean;
+    __T_EXP__?: boolean;
     /**
      * tree parent key
      * @private
      */
-    __T_PARENT_K__?: UniqKey;
+    __T_P_K__?: UniqKey;
     /**
      * tree level
      * @private

package/src/StkTable/useRowExpand.ts

@@ -9,7 +9,7 @@ type Option<DT extends Record<string, any>> = {
 };
 
 export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
-    const expandedKey = '__EXPANDED__';
+    const expandedKey = '__EXP__';
 
     function isExpanded(row: DT, col?: StkTableColumn<DT> | null) {
         return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
@@ -45,7 +45,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         // 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__;
+            const rowKey = item.__ROW_K__;
             if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
                 tempData.splice(i, 1);
                 i--;
@@ -64,7 +64,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         if (expand) {
             // insert new expanded row
             const newExpandRow: ExpandedRow = {
-                __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+                __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
                 __EXPANDED_ROW__: row,
                 __EXPANDED_COL__: col,
             };
@@ -72,7 +72,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         }
 
         if (row) {
-            row.__EXPANDED__ = expand ? col : null;
+            row.__EXP__ = expand ? col : null;
         }
 
         dataSourceCopy.value = tempData;

package/src/StkTable/useTree.ts

@@ -14,7 +14,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
 
     /** click expended icon to toggle expand row */
     function toggleTreeNode(row: DT, col: any) {
-        const expand = row ? !row.__T_EXPANDED__ : false;
+        const expand = row ? !row.__T_EXP__ : false;
         privateSetTreeExpand(row, { expand, col, isClick: true });
     }
 
@@ -47,7 +47,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             const level = row.__T_LV__ || 0;
             let expanded = option?.expand;
             if (expanded === void 0) {
-                expanded = !row.__T_EXPANDED__;
+                expanded = !row.__T_EXP__;
             }
             if (expanded) {
                 const children = expandNode(row, level);
@@ -73,13 +73,13 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
     }
 
     function setNodeExpanded(row: DT, expanded: boolean, level?: number, parent?: DT) {
-        row.__T_EXPANDED__ = expanded;
+        row.__T_EXP__ = expanded;
         if (level !== void 0) {
             row.__T_LV__ = level;
         }
-        if (parent) {
-            row.__T_PARENT_K__ = rowKeyGen(parent);
-        }
+        // if (parent) {
+        //     row.__T_P_K__ = rowKeyGen(parent);
+        // }
     }
 
     /**
@@ -94,23 +94,19 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
                 result.push(item);
-                const isExpanded = Boolean(item.__T_EXPANDED__);
+                const isExpanded = Boolean(item.__T_EXP__);
                 setNodeExpanded(item, isExpanded, level, parent);
                 if (!isExpanded) {
                     if (defaultExpandAll) {
                         setNodeExpanded(item, true);
                     } else {
-                        if (defaultExpandLevel) {
-                            if (level < defaultExpandLevel) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandLevel && level < defaultExpandLevel) {
+                            setNodeExpanded(item, true);
                         }
-                        if (defaultExpandKeys) {
-                            if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandKeys?.includes(rowKeyGen(item))) {
+                            setNodeExpanded(item, true);
                         }
-                        if (!item.__T_EXPANDED__) {
+                        if (!item.__T_EXP__) {
                             continue;
                         }
                     }
@@ -127,7 +123,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             row.children.forEach((child: DT) => {
                 result.push(child);
                 const childLv = level + 1;
-                if (child.__T_EXPANDED__ && child.children) {
+                if (child.__T_EXP__ && child.children) {
                     const res = expandNode(child, childLv);
                     result = result.concat(res);
                 } else {