stk-table-vue 0.0.1-beta.6 → 0.0.1-beta.8

package/README.md

@@ -11,7 +11,8 @@ js体积(未压缩41kb)
 * [x] 表头列宽拖动。
 * [x] 多级表头。（不支持横向虚拟滚动）
 * [x] 支持table-layout: fixed 配置。
-* [] 鼠标点击后，键盘上下滚动表格
+* [x] 鼠标悬浮在表格上，键盘上下左右滚动虚拟表格
+* [] 列固定阴影
 
 ## Usage
 > npm install stk-table-vue
@@ -36,80 +37,57 @@ const stkTable = ref<InstanceType<typeof StkTable>>();
 ```ts
 export type StkProps = Partial<{
     width: string;
-
     /** 最小表格宽度 */
     minWidth: string;
-
     /** 表格最大宽度*/
     maxWidth: string;
-
     /** 是否使用 table-layout:fixed */
     fixedMode: boolean;
-
     /** 是否隐藏表头 */
     headless: boolean;
-
     /** 主题，亮、暗 */
     theme: 'light' | 'dark';
-
     /** 虚拟滚动 */
     virtual: boolean;
-
     /** x轴虚拟滚动 */
     virtualX: boolean;
-
     /** 表格列配置 */
     columns: StkTableColumn<any>[];
-
     /** 表格数据源 */
     dataSource: any[];
-
     /** 行唯一键 */
     rowKey: UniqKey;
-
     /** 列唯一键 */
     colKey: UniqKey;
-
     /** 空值展示文字 */
     emptyCellText: string;
-
     /** 暂无数据兜底高度是否撑满 */
     noDataFull: boolean;
-
     /** 是否展示暂无数据 */
     showNoData: boolean;
-
     /** 是否服务端排序，true则不排序数据 */
     sortRemote: boolean;
-
     /** 表头是否溢出展示... */
     showHeaderOverflow: boolean;
-
     /** 表体溢出是否展示... */
     showOverflow: boolean;
-
     /** 是否增加行hover class */
     showTrHoverClass: boolean;
-
     /** 表头是否可拖动 */
     headerDrag: boolean;
-
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
     rowClassName: (row: any, i: number) => string;
-
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      */
     colResizable: boolean;
-
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
-
     /**
      * 单元格分割线。
      * 默认横竖都有
@@ -118,7 +96,6 @@ export type StkProps = Partial<{
      * "body-v" - 仅表体展示竖线
      */
     bordered: boolean | 'h' | 'v' | 'body-v';
-
     /** 自动重新计算虚拟滚动高度宽度。默认true */
     autoResize: boolean;
 }>;
@@ -126,7 +103,7 @@ export type StkProps = Partial<{
 
 ### StkTableColumn
 ``` ts
-type Sorter = boolean | Function;
+type Sorter<T> = boolean | ((data: T[], option: { order: Order; column: any }) => T[]);
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
     /** 取值id */
@@ -138,7 +115,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 表头内容对齐方式 */
     headerAlign?: 'right' | 'left' | 'center';
     /** 筛选 */
-    sorter?: Sorter;
+    sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
     width?: string;
     /** 最小列宽。非x虚拟滚动生效。 */

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

@@ -1,236 +1,233 @@
-import { SortOption, StkTableColumn } from './types/index';
-/**
- * 初始化虚拟滚动参数
- * @param {number} [height] 虚拟滚动的高度
- */
-declare function initVirtualScroll(height?: number): void;
-/**
- * 选中一行，
- * @param {string} rowKey
- * @param {boolean} option.silent 是否触发回调
- */
-declare function setCurrentRow(rowKey: string, option?: {
-    silent: boolean;
-}): void;
-/**
- * 设置表头排序状态
- * @param {string} dataIndex 列字段
- * @param {'asc'|'desc'|null} order
- * @param {object} option.sortOption 指定排序参数
- * @param {boolean} option.sort 是否触发排序
- * @param {boolean} option.silent 是否触发回调
- */
-declare function setSorter(dataIndex: string, order: null | 'asc' | 'desc', option?: {
-    sortOption?: SortOption;
-    silent?: boolean;
-    sort?: boolean;
-}): any[];
-/** 重置排序 */
-declare function resetSorter(): void;
-/**
- * 设置滚动条位置
- * @param top 传null 则不变动位置
- * @param left 传null 则不变动位置
- */
-declare function scrollTo(top?: number | null, left?: number | null): void;
-/** 获取当前状态的表格数据 */
-declare function getTableData(): any[];
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
-    width: string;
-    minWidth: string;
-    maxWidth: string;
-    fixedMode: boolean;
-    headless: boolean;
-    theme: "light" | "dark";
-    virtual: boolean;
-    virtualX: boolean;
-    columns: StkTableColumn<any>[];
-    dataSource: any[];
-    rowKey: import("./types/index").UniqKey;
-    colKey: import("./types/index").UniqKey;
-    emptyCellText: string;
-    noDataFull: boolean;
-    showNoData: boolean;
-    sortRemote: boolean;
-    showHeaderOverflow: boolean;
-    showOverflow: boolean;
-    showTrHoverClass: boolean;
-    headerDrag: boolean;
-    rowClassName: (row: any, i: number) => string;
-    colResizable: boolean;
-    colMinWidth: number;
-    bordered: boolean | "h" | "v" | "body-v";
-    autoResize: boolean;
-}>>, {
-    width: string;
-    fixedMode: boolean;
-    minWidth: string;
-    maxWidth: string;
-    headless: boolean;
-    theme: string;
-    virtual: boolean;
-    virtualX: boolean;
-    columns: () => never[];
-    dataSource: () => never[];
-    rowKey: string;
-    colKey: string;
-    emptyCellText: string;
-    noDataFull: boolean;
-    showNoData: boolean;
-    sortRemote: boolean;
-    showHeaderOverflow: boolean;
-    showOverflow: boolean;
-    showTrHoverClass: boolean;
-    headerDrag: boolean;
-    rowClassName: () => "";
-    colResizable: boolean;
-    colMinWidth: number;
-    bordered: boolean;
-    autoResize: boolean;
-}>, {
-    initVirtualScroll: typeof initVirtualScroll;
-    initVirtualScrollX: () => void;
-    initVirtualScrollY: (height?: number | undefined) => void;
-    setCurrentRow: typeof setCurrentRow;
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
-    setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
-    sortCol: import("vue").Ref<string | null | undefined>;
-    setSorter: typeof setSorter;
-    resetSorter: typeof resetSorter;
-    scrollTo: typeof scrollTo;
-    getTableData: typeof getTableData;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    scroll: (...args: any[]) => void;
-    "th-drag-start": (...args: any[]) => void;
-    "col-order-change": (...args: any[]) => void;
-    "th-drop": (...args: any[]) => void;
-    columns: (...args: any[]) => void;
-    "sort-change": (...args: any[]) => void;
-    "row-click": (...args: any[]) => void;
-    "current-change": (...args: any[]) => void;
-    "row-dblclick": (...args: any[]) => void;
-    "header-row-menu": (...args: any[]) => void;
-    "row-menu": (...args: any[]) => void;
-    "cell-click": (...args: any[]) => void;
-    "header-cell-click": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
-    width: string;
-    minWidth: string;
-    maxWidth: string;
-    fixedMode: boolean;
-    headless: boolean;
-    theme: "light" | "dark";
-    virtual: boolean;
-    virtualX: boolean;
-    columns: StkTableColumn<any>[];
-    dataSource: any[];
-    rowKey: import("./types/index").UniqKey;
-    colKey: import("./types/index").UniqKey;
-    emptyCellText: string;
-    noDataFull: boolean;
-    showNoData: boolean;
-    sortRemote: boolean;
-    showHeaderOverflow: boolean;
-    showOverflow: boolean;
-    showTrHoverClass: boolean;
-    headerDrag: boolean;
-    rowClassName: (row: any, i: number) => string;
-    colResizable: boolean;
-    colMinWidth: number;
-    bordered: boolean | "h" | "v" | "body-v";
-    autoResize: boolean;
-}>>, {
-    width: string;
-    fixedMode: boolean;
-    minWidth: string;
-    maxWidth: string;
-    headless: boolean;
-    theme: string;
-    virtual: boolean;
-    virtualX: boolean;
-    columns: () => never[];
-    dataSource: () => never[];
-    rowKey: string;
-    colKey: string;
-    emptyCellText: string;
-    noDataFull: boolean;
-    showNoData: boolean;
-    sortRemote: boolean;
-    showHeaderOverflow: boolean;
-    showOverflow: boolean;
-    showTrHoverClass: boolean;
-    headerDrag: boolean;
-    rowClassName: () => "";
-    colResizable: boolean;
-    colMinWidth: number;
-    bordered: boolean;
-    autoResize: boolean;
-}>>> & {
-    onScroll?: ((...args: any[]) => any) | undefined;
-    "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
-    "onCol-order-change"?: ((...args: any[]) => any) | undefined;
-    "onTh-drop"?: ((...args: any[]) => any) | undefined;
-    onColumns?: ((...args: any[]) => any) | undefined;
-    "onSort-change"?: ((...args: any[]) => any) | undefined;
-    "onRow-click"?: ((...args: any[]) => any) | undefined;
-    "onCurrent-change"?: ((...args: any[]) => any) | undefined;
-    "onRow-dblclick"?: ((...args: any[]) => any) | undefined;
-    "onHeader-row-menu"?: ((...args: any[]) => any) | undefined;
-    "onRow-menu"?: ((...args: any[]) => any) | undefined;
-    "onCell-click"?: ((...args: any[]) => any) | undefined;
-    "onHeader-cell-click"?: ((...args: any[]) => any) | undefined;
-}, {
-    width: string;
-    minWidth: string;
-    maxWidth: string;
-    colKey: import("./types/index").UniqKey;
-    fixedMode: boolean;
-    headless: boolean;
-    theme: "light" | "dark";
-    virtual: boolean;
-    virtualX: boolean;
-    columns: StkTableColumn<any>[];
-    dataSource: any[];
-    rowKey: import("./types/index").UniqKey;
-    emptyCellText: string;
-    noDataFull: boolean;
-    showNoData: boolean;
-    sortRemote: boolean;
-    showHeaderOverflow: boolean;
-    showOverflow: boolean;
-    showTrHoverClass: boolean;
-    headerDrag: boolean;
-    rowClassName: (row: any, i: number) => string;
-    colResizable: boolean;
-    colMinWidth: number;
-    bordered: boolean | "h" | "v" | "body-v";
-    autoResize: boolean;
-}, {}>, {
-    tableHeader?(_: {
-        column: StkTableColumn<any>;
-    }): any;
-    empty?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+import { SortOption, StkTableColumn } from './types/index';
+/**
+ * 选中一行，
+ * @param {string} rowKey
+ * @param {boolean} option.silent 是否触发回调
+ */
+declare function setCurrentRow(rowKey: string, option?: {
+    silent: boolean;
+}): void;
+/**
+ * 设置表头排序状态
+ * @param {string} dataIndex 列字段
+ * @param {'asc'|'desc'|null} order
+ * @param {object} option.sortOption 指定排序参数
+ * @param {boolean} option.sort 是否触发排序
+ * @param {boolean} option.silent 是否触发回调
+ */
+declare function setSorter(dataIndex: string, order: null | 'asc' | 'desc', option?: {
+    sortOption?: SortOption;
+    silent?: boolean;
+    sort?: boolean;
+}): any[];
+/** 重置排序 */
+declare function resetSorter(): void;
+/**
+ * 设置滚动条位置
+ * @param top 传null 则不变动位置
+ * @param left 传null 则不变动位置
+ */
+declare function scrollTo(top?: number | null, left?: number | null): void;
+/** 获取当前状态的表格数据 */
+declare function getTableData(): any[];
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    fixedMode: boolean;
+    headless: boolean;
+    theme: "light" | "dark";
+    virtual: boolean;
+    virtualX: boolean;
+    columns: StkTableColumn<any>[];
+    dataSource: any[];
+    rowKey: import("./types/index").UniqKey;
+    /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
+    colKey: import("./types/index").UniqKey;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: (row: any, i: number) => string;
+    colResizable: boolean;
+    colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
+}>>, {
+    width: string;
+    fixedMode: boolean;
+    minWidth: string;
+    maxWidth: string;
+    headless: boolean;
+    theme: string;
+    virtual: boolean;
+    virtualX: boolean;
+    columns: () => never[];
+    dataSource: () => never[];
+    rowKey: string;
+    colKey: string;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: () => "";
+    colResizable: boolean;
+    colMinWidth: number;
+    bordered: boolean;
+    autoResize: boolean;
+}>, {
+    initVirtualScroll: (height?: number | undefined) => void;
+    initVirtualScrollX: () => void;
+    initVirtualScrollY: (height?: number | undefined) => void;
+    setCurrentRow: typeof setCurrentRow;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
+    setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
+    sortCol: import("vue").Ref<string | null | undefined>;
+    setSorter: typeof setSorter;
+    resetSorter: typeof resetSorter;
+    scrollTo: typeof scrollTo;
+    getTableData: typeof getTableData;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: (...args: any[]) => void;
+    "th-drag-start": (...args: any[]) => void;
+    "col-order-change": (...args: any[]) => void;
+    "th-drop": (...args: any[]) => void;
+    columns: (...args: any[]) => void;
+    "sort-change": (...args: any[]) => void;
+    "row-click": (...args: any[]) => void;
+    "current-change": (...args: any[]) => void;
+    "row-dblclick": (...args: any[]) => void;
+    "header-row-menu": (...args: any[]) => void;
+    "row-menu": (...args: any[]) => void;
+    "cell-click": (...args: any[]) => void;
+    "header-cell-click": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    fixedMode: boolean;
+    headless: boolean;
+    theme: "light" | "dark";
+    virtual: boolean;
+    virtualX: boolean;
+    columns: StkTableColumn<any>[];
+    dataSource: any[];
+    rowKey: import("./types/index").UniqKey;
+    /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
+    colKey: import("./types/index").UniqKey;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: (row: any, i: number) => string;
+    colResizable: boolean;
+    colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
+}>>, {
+    width: string;
+    fixedMode: boolean;
+    minWidth: string;
+    maxWidth: string;
+    headless: boolean;
+    theme: string;
+    virtual: boolean;
+    virtualX: boolean;
+    columns: () => never[];
+    dataSource: () => never[];
+    rowKey: string;
+    colKey: string;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: () => "";
+    colResizable: boolean;
+    colMinWidth: number;
+    bordered: boolean;
+    autoResize: boolean;
+}>>> & {
+    onScroll?: ((...args: any[]) => any) | undefined;
+    "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
+    "onCol-order-change"?: ((...args: any[]) => any) | undefined;
+    "onTh-drop"?: ((...args: any[]) => any) | undefined;
+    onColumns?: ((...args: any[]) => any) | undefined;
+    "onSort-change"?: ((...args: any[]) => any) | undefined;
+    "onRow-click"?: ((...args: any[]) => any) | undefined;
+    "onCurrent-change"?: ((...args: any[]) => any) | undefined;
+    "onRow-dblclick"?: ((...args: any[]) => any) | undefined;
+    "onHeader-row-menu"?: ((...args: any[]) => any) | undefined;
+    "onRow-menu"?: ((...args: any[]) => any) | undefined;
+    "onCell-click"?: ((...args: any[]) => any) | undefined;
+    "onHeader-cell-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    colKey: import("./types/index").UniqKey;
+    fixedMode: boolean;
+    headless: boolean;
+    theme: "light" | "dark";
+    virtual: boolean;
+    virtualX: boolean;
+    columns: StkTableColumn<any>[];
+    dataSource: any[];
+    rowKey: import("./types/index").UniqKey;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: (row: any, i: number) => string;
+    colResizable: boolean;
+    colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
+}, {}>, {
+    tableHeader?(_: {
+        column: StkTableColumn<any>;
+    }): any;
+    empty?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};