stk-table-vue 0.7.1 → 0.8.0

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

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKeyProp } from './types/index';
+import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -54,7 +54,7 @@ declare function getSortColumns(): {
 }[];
 declare function __VLS_template(): {
     tableHeader?(_: {
-        col: StkTableColumn<any>;
+        col: PrivateStkTableColumn<any>;
     }): any;
     expand?(_: {
         row: any;
@@ -94,7 +94,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
-    headerRowHeight?: number | null;
+    headerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -194,8 +194,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
      */
     smoothScroll?: boolean;
-    /** 按整数行纵向滚动 */
-    scrollRowByRow?: boolean;
+    /**
+     * 按整数行纵向滚动
+     * - scrollbar：仅拖动滚动条生效
+     */
+    scrollRowByRow?: boolean | "scrollbar";
 }>, {
     width: string;
     fixedMode: boolean;
@@ -215,6 +218,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     columns: () => never[];
     dataSource: () => never[];
     rowKey: string;
+    colKey: undefined;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -288,14 +292,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * en: Set highlight cell
      * @see {@link setHighlightDimCell}
      */
-    setHighlightDimCell: (rowKeyValue: import('./types/index').UniqKey, colKeyValue: string, option?: import('./types/highlightDimOptions').HighlightDimCellOption) => void;
+    setHighlightDimCell: (rowKeyValue: UniqKey, colKeyValue: string, option?: import('./types/highlightDimOptions').HighlightDimCellOption) => void;
     /**
      * 设置高亮行
      *
      * en: Set highlight row
      * @see {@link setHighlightDimRow}
      */
-    setHighlightDimRow: (rowKeyValues: import('./types/index').UniqKey[], option?: import('./types/highlightDimOptions').HighlightDimRowOption) => void;
+    setHighlightDimRow: (rowKeyValues: UniqKey[], option?: import('./types/highlightDimOptions').HighlightDimRowOption) => void;
     /**
      * 表格排序列colKey
      *
@@ -353,7 +357,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * en: When the row height is not fixed, call this method to update the row height if the row height changes.
      * @see {@link setAutoHeight}
      */
-    setAutoHeight: (rowKey: import('./types/index').UniqKey, height?: number | null) => void;
+    setAutoHeight: (rowKey: UniqKey, height?: number | null) => void;
     /**
      * 清除所有行高
      *
@@ -367,12 +371,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * en: Set tree node expand state
      * @see {@link setTreeExpand}
      */
-    setTreeExpand: (row: (import('./types/index').UniqKey | (PrivateRowDT & {
+    setTreeExpand: (row: (UniqKey | (PrivateRowDT & {
         children?: (PrivateRowDT & /*elided*/ any)[];
-    })) | (import('./types/index').UniqKey | (PrivateRowDT & {
+    })) | (UniqKey | (PrivateRowDT & {
         children?: (PrivateRowDT & /*elided*/ any)[];
     }))[], option?: {
-        expand? /** 是否高亮选中的行 */: boolean;
+        expand?: boolean;
     }) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
@@ -456,7 +460,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
-    headerRowHeight?: number | null;
+    headerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -556,8 +560,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
      */
     smoothScroll?: boolean;
-    /** 按整数行纵向滚动 */
-    scrollRowByRow?: boolean;
+    /**
+     * 按整数行纵向滚动
+     * - scrollbar：仅拖动滚动条生效
+     */
+    scrollRowByRow?: boolean | "scrollbar";
 }>, {
     width: string;
     fixedMode: boolean;
@@ -577,6 +584,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     columns: () => never[];
     dataSource: () => never[];
     rowKey: string;
+    colKey: undefined;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -670,7 +678,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     stripe: boolean;
     optimizeVue2Scroll: boolean;
     rowKey: UniqKeyProp;
-    headerRowHeight: number | null;
+    headerRowHeight: number | string | null;
+    colKey: UniqKeyProp;
     fixedMode: boolean;
     theme: "light" | "dark";
     rowHover: boolean;
@@ -708,7 +717,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     treeConfig: TreeConfig;
     cellFixedMode: "sticky" | "relative";
     smoothScroll: boolean;
-    scrollRowByRow: boolean;
+    scrollRowByRow: boolean | "scrollbar";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { Component, ConcreteComponent } from 'vue';
+import { Component, ComputedRef, ConcreteComponent } from 'vue';
 
 /** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
 export type Order = null | 'asc' | 'desc';
@@ -25,6 +25,16 @@ export type CustomHeaderCellProps<T extends Record<string, any>> = {
     rowIndex: number;
     colIndex: number;
 };
+export type MergeCellsParam<T extends Record<string, any>> = {
+    row: T;
+    col: StkTableColumn<T>;
+    rowIndex: number;
+    colIndex: number;
+};
+export type MergeCellsFn<T extends Record<string, any>> = (data: MergeCellsParam<T>) => {
+    rowspan?: number;
+    colspan?: number;
+} | undefined;
 /**
  * 自定义渲染单元格
  *
@@ -77,8 +87,6 @@ export type StkTableColumn<T extends Record<string, any>> = {
     sortConfig?: Pick<SortConfig<T>, 'emptyToBottom' | 'stringLocaleCompare'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
-    /** private */ rowSpan?: number;
-    /** private */ colSpan?: number;
     /**
      * 自定义 td 渲染内容。
      *
@@ -101,16 +109,22 @@ export type StkTableColumn<T extends Record<string, any>> = {
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
+    /** 单元格合并 */
+    mergeCells?: MergeCellsFn<T>;
 };
 /** private StkTableColumn type. Add some private key */
 export type PrivateStkTableColumn<T extends Record<string, any>> = StkTableColumn<T> & {
+    /** header rowSpan */
+    __R_SP__?: number;
+    /** header colSpan */
+    __C_SP__?: number;
     /**
-     * 父节点引用
+     * parent not ref
      * @private
      */
     __PARENT__?: StkTableColumn<T> | null;
     /**
-     * 保存计算的宽度。横向虚拟滚动用。
+     * Save the calculated width. Used for horizontal virtual scrolling.
      * @private
      */
     __WIDTH__?: number;
@@ -236,4 +250,7 @@ export type AutoRowHeightConfig<DT> = {
 export type ColResizableConfig<DT extends Record<string, any>> = {
     disabled: (col: StkTableColumn<DT>) => boolean;
 };
+export type RowKeyGen = (row: any) => UniqKey;
+export type ColKeyGen = ComputedRef<(col: StkTableColumn<any>) => UniqKey>;
+export type CellKeyGen = (row: any, col: StkTableColumn<any>) => string;
 export {};

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

@@ -0,0 +1,20 @@
+import { ShallowRef } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+
+export declare function useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart, }: {
+    props: any;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    colKeyGen: ColKeyGen;
+    virtual_dataSourcePart: ShallowRef<any[]>;
+}): {
+    hiddenCellMap: import('vue').Ref<Record<UniqKey, Set<UniqKey>>, Record<UniqKey, Set<UniqKey>>>;
+    mergeCellsWrapper: (row: MergeCellsParam<any>["row"], col: MergeCellsParam<any>["col"], rowIndex: MergeCellsParam<any>["rowIndex"], colIndex: MergeCellsParam<any>["colIndex"]) => {
+        colspan?: number;
+        rowspan?: number;
+    } | undefined;
+    hoverMergedCells: import('vue').Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    updateHoverMergedCells: (rowKey: UniqKey | undefined) => void;
+    activeMergedCells: import('vue').Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    updateActiveMergedCells: (clear?: boolean) => void;
+};

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

@@ -1,9 +1,9 @@
 import { ShallowRef } from 'vue';
-import { PrivateRowDT, StkTableColumn, UniqKey } from './types';
+import { PrivateRowDT, RowKeyGen, StkTableColumn } from './types';
 
 type DT = PrivateRowDT;
 type Option<DT extends Record<string, any>> = {
-    rowKeyGen: (row: any) => UniqKey;
+    rowKeyGen: RowKeyGen;
     dataSourceCopy: ShallowRef<DT[]>;
     emits: any;
 };

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

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+
+type Params = {
+    props: any;
+    tableContainerRef: Ref<HTMLElement | undefined>;
+};
+export declare function useScrollRowByRow({ props, tableContainerRef }: Params): {
+    isSRBRActive: import('vue').ComputedRef<any>;
+    isDragScroll: Ref<boolean, boolean>;
+};
+export {};

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

@@ -1,20 +1,19 @@
-import { ComputedRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
+import { ColKeyGen, StkTableColumn } from './types';
 
-type Params<T extends Record<string, any>> = {
+type Params = {
     props: any;
     emits: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+    colKeyGen: ColKeyGen;
 };
 /**
  * 列顺序拖动
  * @returns
  */
-export declare function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>): {
+export declare function useThDrag({ props, emits, colKeyGen }: Params): {
     onThDragStart: (e: DragEvent) => void;
     onThDragOver: (e: DragEvent) => void;
     onThDrop: (e: DragEvent) => void;
     /** 是否可拖拽 */
-    isHeaderDraggable: (col: StkTableColumn<DT>) => any;
+    isHeaderDraggable: (col: StkTableColumn<any>) => any;
 };
 export {};

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

@@ -1,12 +1,12 @@
 import { ShallowRef } from 'vue';
-import { PrivateRowDT, UniqKey } from './types';
+import { PrivateRowDT, RowKeyGen, UniqKey } from './types';
 
 type DT = PrivateRowDT & {
     children?: DT[];
 };
 type Option<DT extends Record<string, any>> = {
     props: any;
-    rowKeyGen: (row: any) => UniqKey;
+    rowKeyGen: RowKeyGen;
     dataSourceCopy: ShallowRef<DT[]>;
     emits: any;
 };

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

@@ -1,14 +1,14 @@
 import { Ref, ShallowRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
+import { PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
 
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
     trRef: Ref<HTMLTableRowElement[] | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
-    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
-    rowKeyGen: (row: any) => UniqKey;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
+    tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
+    rowKeyGen: RowKeyGen;
 };
 /** 暂存纵向虚拟滚动的数据 */
 export type VirtualScrollStore = {
@@ -88,7 +88,7 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
     virtual_dataSourcePart: import('vue').ComputedRef<DT[]>;
     virtual_offsetBottom: import('vue').ComputedRef<number>;
     virtualX_on: import('vue').ComputedRef<any>;
-    virtualX_columnPart: import('vue').ComputedRef<StkTableColumn<DT>[]>;
+    virtualX_columnPart: import('vue').ComputedRef<PrivateStkTableColumn<DT>[]>;
     virtualX_offsetRight: import('vue').ComputedRef<number>;
     initVirtualScroll: (height?: number) => void;
     initVirtualScrollY: (height?: number) => void;

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

@@ -1,4 +1,4 @@
-import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from '../types';
 
 /** 是否空值 */
 export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
@@ -50,3 +50,4 @@ export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: num
 /** number width +px */
 export declare function transformWidthToStr(width?: string | number): string | undefined;
 export declare function getBrowsersVersion(browserName: string): number;
+export declare function pureCellKeyGen(rowKey: UniqKey, colKey: UniqKey): string;

package/lib/{style.css → stk-table-vue.css}

@@ -402,3 +402,9 @@
 .stk-table .stk-fold-icon:hover::before{
   border-left:5px solid var(--fold-icon-hover-color);
 }
+.stk-table td.cell-hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table td.cell-active{
+  background-color:var(--tr-active-bgc);
+}