stk-table-vue 0.0.1-beta.1 → 0.0.1-beta.2

package/README.md

@@ -10,6 +10,8 @@ js体积(38kb)
 * [x] 表头拖动更改顺序。
 * [x] 表头列宽拖动。
 * [x] 多级表头。（不支持横向虚拟滚动）
+* [x] 支持table-layout: fixed 配置。
+* [] 鼠标点击后，键盘上下滚动表格
 
 ## Usage
 > npm install stk-table-vue
@@ -33,77 +35,80 @@ const stkTable = ref<InstanceType<typeof StkTable>>();
 ### StkTable Component Props
 ```ts
 export type StkProps = Partial<{
-  width: string;
+    width: string;
 
-  /** 最小表格宽度 */
-  minWidth: string;
+    /** 最小表格宽度 */
+    minWidth: string;
 
-  /** 表格最大宽度*/
-  maxWidth: string;
+    /** 表格最大宽度*/
+    maxWidth: string;
 
-  /** 是否隐藏表头 */
-  headless: boolean;
+    /** 是否使用 table-layout:fixed */
+    fixedMode: boolean;
 
-  /** 主题，亮、暗 */
-  theme: 'light' | 'dark';
+    /** 是否隐藏表头 */
+    headless: boolean;
 
-  /** 虚拟滚动 */
-  virtual: boolean;
+    /** 主题，亮、暗 */
+    theme: 'light' | 'dark';
 
-  /** x轴虚拟滚动 */
-  virtualX: boolean;
+    /** 虚拟滚动 */
+    virtual: boolean;
 
-  /** 表格列配置 */
-  columns: StkTableColumn<any>[];
+    /** x轴虚拟滚动 */
+    virtualX: boolean;
 
-  /** 表格数据源 */
-  dataSource: any[];
+    /** 表格列配置 */
+    columns: StkTableColumn<any>[];
 
-  /** 行唯一键 */
-  rowKey: UniqKey;
+    /** 表格数据源 */
+    dataSource: any[];
 
-  /** 列唯一键 */
-  colKey: UniqKey;
+    /** 行唯一键 */
+    rowKey: UniqKey;
 
-  /** 空值展示文字 */
-  emptyCellText: string;
+    /** 列唯一键 */
+    colKey: UniqKey;
 
-  /** 暂无数据兜底高度是否撑满 */
-  noDataFull: boolean;
+    /** 空值展示文字 */
+    emptyCellText: string;
 
-  /** 是否展示暂无数据 */
-  showNoData: boolean;
+    /** 暂无数据兜底高度是否撑满 */
+    noDataFull: boolean;
 
-  /** 是否服务端排序，true则不排序数据 */
-  sortRemote: boolean;
+    /** 是否展示暂无数据 */
+    showNoData: boolean;
 
-  /** 表头是否溢出展示... */
-  showHeaderOverflow: boolean;
+    /** 是否服务端排序，true则不排序数据 */
+    sortRemote: boolean;
 
-  /** 表体溢出是否展示... */
-  showOverflow: boolean;
+    /** 表头是否溢出展示... */
+    showHeaderOverflow: boolean;
 
-  /** 是否增加行hover class */
-  showTrHoverClass: boolean;
+    /** 表体溢出是否展示... */
+    showOverflow: boolean;
 
-  /** 表头是否可拖动 */
-  headerDrag: boolean;
+    /** 是否增加行hover class */
+    showTrHoverClass: boolean;
 
-  /**
-   * 给行附加className<br>
-   * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
-   */
-  rowClassName: (row: any, i: number) => string;
+    /** 表头是否可拖动 */
+    headerDrag: boolean;
 
-  /**
-   * 列宽是否可拖动<br>
-   * **不要设置**列minWidth，**必须**设置width<br>
-   * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
-   */
-  colResizable: boolean;
+    /**
+     * 给行附加className<br>
+     * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
+     */
+    rowClassName: (row: any, i: number) => string;
 
-  /** 可拖动至最小的列宽 */
-  colMinWidth: number;
+    /**
+     * 列宽是否可拖动<br>
+     * **不要设置**列minWidth，**必须**设置width<br>
+     * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+     */
+    colResizable: boolean;
+
+    /** 可拖动至最小的列宽 */
+    colMinWidth: number;
 }>;
 ```
 

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

@@ -1,4 +1,12 @@
-import { SortOption, StkProps, StkTableColumn } from '../StkTable/types/index';
+/**
+ * @author JA+
+ * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
+ * TODO:存在的问题：
+ * [] column.dataIndex 作为唯一键，不能重复
+ * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
+ * [] highlight-row 颜色不能恢复到active的颜色
+ */
+import { SortOption, StkTableColumn } from '../StkTable/types/index';
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -7,13 +15,6 @@ import { SortOption, StkProps, StkTableColumn } from '../StkTable/types/index';
 declare function setCurrentRow(rowKey: string, option?: {
     silent: boolean;
 }): void;
-/** 高亮一个单元格 */
-declare function setHighlightDimCell(rowKeyValue: string, dataIndex: string): void;
-/**
- * 高亮一行
- * @param rowKeyValues
- */
-declare function setHighlightDimRow(rowKeyValues: Array<string | number>): void;
 /**
  * 设置表头排序状态
  * @param {string} dataIndex 列字段
@@ -33,8 +34,34 @@ declare function resetSorter(): void;
 declare function scrollTo(top?: number, left?: number): void;
 /** 获取当前状态的表格数据 */
 declare function getTableData(): any[];
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StkProps>, {
+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('../StkTable/types/index').UniqKey;
+    colKey: import('../StkTable/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;
+    /** rowKey缓存 */
+    colResizable: boolean;
+    colMinWidth: number;
+}>>, {
     width: string;
+    fixedMode: boolean;
     minWidth: string;
     maxWidth: string;
     headless: boolean;
@@ -58,28 +85,54 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colMinWidth: number;
 }>, {
     setCurrentRow: typeof setCurrentRow;
-    setHighlightDimCell: typeof setHighlightDimCell;
-    setHighlightDimRow: typeof setHighlightDimRow;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
+    setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
     setSorter: typeof setSorter;
     resetSorter: typeof resetSorter;
     scrollTo: typeof scrollTo;
     getTableData: typeof getTableData;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "row-click": (...args: any[]) => void;
+    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;
-    "col-order-change": (...args: any[]) => void;
-    "th-drop": (...args: any[]) => void;
-    "th-drag-start": (...args: any[]) => void;
-    scroll: (...args: any[]) => void;
-    columns: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StkProps>, {
+}, 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('../StkTable/types/index').UniqKey;
+    colKey: import('../StkTable/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;
+    /** rowKey缓存 */
+    colResizable: boolean;
+    colMinWidth: number;
+}>>, {
     width: string;
+    fixedMode: boolean;
     minWidth: string;
     maxWidth: string;
     headless: boolean;
@@ -102,31 +155,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
 }>>> & {
-    "onRow-click"?: ((...args: any[]) => any) | undefined;
+    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;
-    "onCol-order-change"?: ((...args: any[]) => any) | undefined;
-    "onTh-drop"?: ((...args: any[]) => any) | undefined;
-    "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
-    onScroll?: ((...args: any[]) => any) | undefined;
-    onColumns?: ((...args: any[]) => any) | undefined;
 }, {
-    columns: StkTableColumn<any>[];
-    dataSource: any[];
     width: string;
     minWidth: string;
     maxWidth: string;
+    colKey: import('../StkTable/types/index').UniqKey;
+    fixedMode: boolean;
     headless: boolean;
     theme: "light" | "dark";
     virtual: boolean;
     virtualX: boolean;
+    columns: StkTableColumn<any>[];
+    dataSource: any[];
     rowKey: import('../StkTable/types/index').UniqKey;
-    colKey: import('../StkTable/types/index').UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -135,7 +189,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow: boolean;
     showTrHoverClass: boolean;
     headerDrag: boolean;
-    rowClassName: Function;
+    rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
 }, {}>, {

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

@@ -1,5 +1,13 @@
 import { Component, VNode } from 'vue';
 type Sorter = boolean | Function;
+export type CustomCellFunc<T extends Record<string, any>> = (props: {
+    row: T;
+    col: StkTableColumn<T>;
+    cellValue: any;
+}) => VNode;
+export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: {
+    col: StkTableColumn<T>;
+}) => VNode;
 export type StkTableColumn<T extends Record<string, any>> = {
     dataIndex: keyof T & string;
     title?: string;
@@ -16,8 +24,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
     fixed?: 'left' | 'right' | null;
     /** private */ rowSpan?: number;
     /** private */ colSpan?: number;
-    customCell?: Component | VNode;
-    customHeaderCell?: Component | VNode;
+    customCell?: Component | VNode | CustomCellFunc<T>;
+    customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
     children?: StkTableColumn<T>[];
 };
 export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
@@ -27,12 +35,14 @@ export type SortState = {
     sortType?: 'number' | 'string';
 };
 export type UniqKey = string | ((param: any) => string);
-export type StkProps = {
+export type StkProps = Partial<{
     width: string;
     /** 最小表格宽度 */
     minWidth: string;
     /** 表格最大宽度*/
     maxWidth: string;
+    /** 是否使用 table-layout:fixed */
+    fixedMode: boolean;
     /** 是否隐藏表头 */
     headless: boolean;
     /** 主题，亮、暗 */
@@ -69,7 +79,7 @@ export type StkProps = {
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName: Function;
+    rowClassName: (row: any, i: number) => string;
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -78,5 +88,5 @@ export type StkProps = {
     colResizable: boolean;
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
-};
+}>;
 export {};

package/lib/StkTable/useHighlight.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+type Params = {
+    props: {
+        theme: 'light' | 'dark';
+        virtual: boolean;
+        dataSource: any[];
+    };
+    tableContainer: Ref<HTMLElement | undefined>;
+    rowKeyGen: (p: any) => string;
+};
+/**
+ * 高亮单元格，行
+ * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
+ */
+export declare function useHighlight({ props, tableContainer, rowKeyGen }: Params): {
+    setHighlightDimRow: (rowKeyValues: Array<string | number>) => void;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
+};
+export {};