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

package/README.md

@@ -10,6 +10,8 @@ js体积(38kb)
 * [x] 表头拖动更改顺序。
 * [x] 表头列宽拖动。
 * [x] 多级表头。（不支持横向虚拟滚动）
+* [x] 支持table-layout: fixed 配置。
+* [] 鼠标点击后，键盘上下滚动表格
 
 ## Usage
 > npm install stk-table-vue
@@ -33,104 +35,183 @@ 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;
 }>;
 ```
 
-#### StkTableColumn
+### StkTableColumn
 ``` ts
 type Sorter = boolean | Function;
-
+/** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
-  dataIndex: keyof T & string;
-  title?: string;
-  align?: 'right' | 'left' | 'center';
-  headerAlign?: 'right' | 'left' | 'center';
-  sorter?: Sorter;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  headerClassName?: string;
-  className?: string;
-  sortField?: keyof T;
-  sortType?: 'number' | 'string';
-  fixed?: 'left' | 'right' | null;
-
-  /** private */ rowSpan?: number;
-  /** private */ colSpan?: number;
-  customCell?: Component | VNode;
-  customHeaderCell?: Component | VNode;
-  children?: StkTableColumn<T>[];
+    /** 取值id */
+    dataIndex: keyof T & string;
+    /** 表头文字 */
+    title?: string;
+    /** 列内容对齐方式 */
+    align?: 'right' | 'left' | 'center';
+    /** 表头内容对齐方式 */
+    headerAlign?: 'right' | 'left' | 'center';
+    /** 筛选 */
+    sorter?: Sorter;
+    /** 列宽。横向虚拟滚动时必须设置。 */
+    width?: string;
+    /** 最小列宽。非x虚拟滚动生效。 */
+    minWidth?: string;
+    /** 最大列宽。非x虚拟滚动生效。 */
+    maxWidth?: string;
+    /**th class */
+    headerClassName?: string;
+    /** td class */
+    className?: string;
+    /** 排序字段。default: dataIndex */
+    sortField?: keyof T;
+    /** 排序方式。按数字/字符串 */
+    sortType?: 'number' | 'string';
+    /** 固定列 */
+    fixed?: 'left' | 'right' | null;
+    /** private */ rowSpan?: number;
+    /** private */ colSpan?: number;
+    /**自定义 td 渲染内容 */
+    customCell?: Component | VNode | CustomCellFunc<T>;
+    /** 自定义 th 渲染内容 */
+    customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
+    /** 二级表头 */
+    children?: StkTableColumn<T>[];
 };
 ```
 
+
+### Example
+```vue
+<template>
+ <StkTable
+    ref="stkTable"
+    row-key="name"
+    v-model:columns="columns"
+    :style="{height:props.height}"
+    theme='dark'
+    height='200px'
+    :show-overflow="false"
+    :show-header-overflow="false"
+    :sort-remote="false"
+    col-resizable
+    header-drag
+    virtual
+    virtual-x
+    no-data-full
+    :headless="false"
+    :data-source="dataSource"
+    @current-change="onCurrentChange"
+    @row-menu="onRowMenu"
+    @header-row-menu="onHeaderRowMenu"
+    @row-click="onRowClick"
+    @row-dblclick="onRowDblclick"
+    @sort-change="handleSortChange"
+    @cell-click="onCellClick"
+    @header-cell-click="onHeaderCellClick"
+    @scroll="onTableScroll"
+    @col-order-change="onColOrderChange"
+  />
+</template>
+<script setup>
+  import { h, defineComponent } from 'vue';
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      fixed: 'left',
+      width: '200px',
+      headerClassName: 'my-th',
+      className: 'my-td',
+      sorter: true,
+      customHeaderCell: function FunctionalComponent(props){
+          return h(
+              'span',
+              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+              props.col.title + '(render) text-overflow,',
+          );
+      },
+      customCell: defineComponent({
+        setup(){
+          //...
+          return () => <div></div>
+        }
+      })
+    },
+  ]
+</script>
+```

package/lib/{StkTable → src/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 列字段
@@ -29,14 +30,44 @@ declare function setSorter(dataIndex: string, order: null | 'asc' | 'desc', opti
 }): any[];
 /** 重置排序 */
 declare function resetSorter(): void;
-/** 滚动 */
-declare function scrollTo(top?: number, left?: number): 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<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;
+    colResizable: boolean;
+    colMinWidth: number;
+    border: boolean | "horizontal";
+}>>, {
+    width: string;
+    fixedMode: boolean;
+    minWidth: string;
+    maxWidth: string;
     headless: boolean;
     theme: string;
     virtual: boolean;
@@ -56,32 +87,59 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
+    border: boolean;
 }>, {
     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;
+    colResizable: boolean;
+    colMinWidth: number;
+    border: boolean | "horizontal";
+}>>, {
+    width: string;
+    fixedMode: boolean;
+    minWidth: string;
+    maxWidth: string;
     headless: boolean;
     theme: string;
     virtual: boolean;
@@ -101,32 +159,34 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
+    border: boolean;
 }>>> & {
-    "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,9 +195,10 @@ 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;
+    border: boolean | "horizontal";
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

package/lib/{StkTable → src/StkTable}/types/index.d.ts

@@ -1,38 +1,70 @@
 import { Component, VNode } from 'vue';
-type Sorter = boolean | Function;
+/** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
+export type Order = null | 'asc' | 'desc';
+type Sorter = boolean | ((data: any[], option: {
+    order: Order;
+    column: any;
+}) => any[]);
+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>> = {
+    /** 取值id */
     dataIndex: keyof T & string;
+    /** 表头文字 */
     title?: string;
+    /** 列内容对齐方式 */
     align?: 'right' | 'left' | 'center';
+    /** 表头内容对齐方式 */
     headerAlign?: 'right' | 'left' | 'center';
+    /** 筛选 */
     sorter?: Sorter;
+    /** 列宽。横向虚拟滚动时必须设置。 */
     width?: string;
+    /** 最小列宽。非x虚拟滚动生效。 */
     minWidth?: string;
+    /** 最大列宽。非x虚拟滚动生效。 */
     maxWidth?: string;
+    /**th class */
     headerClassName?: string;
+    /** td class */
     className?: string;
+    /** 排序字段。default: dataIndex */
     sortField?: keyof T;
+    /** 排序方式。按数字/字符串 */
     sortType?: 'number' | 'string';
+    /** 固定列 */
     fixed?: 'left' | 'right' | null;
     /** private */ rowSpan?: number;
     /** private */ colSpan?: number;
-    customCell?: Component | VNode;
-    customHeaderCell?: Component | VNode;
+    /**自定义 td 渲染内容 */
+    customCell?: Component | VNode | CustomCellFunc<T>;
+    /** 自定义 th 渲染内容 */
+    customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
+    /** 二级表头 */
     children?: StkTableColumn<T>[];
 };
 export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
-export type SortState = {
-    dataIndex: string;
+export type SortState<T> = {
+    dataIndex: T;
     order: null | 'asc' | 'desc';
     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 +101,7 @@ export type StkProps = {
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName: Function;
+    rowClassName: (row: any, i: number) => string;
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -78,5 +110,11 @@ export type StkProps = {
     colResizable: boolean;
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
-};
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * horizontal - 仅展示横线
+     */
+    border: boolean | 'horizontal';
+}>;
 export {};

package/lib/src/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 {};

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

@@ -0,0 +1,23 @@
+import { Order, SortOption, SortState, StkTableColumn } from './types';
+/**
+ * 对有序数组插入新数据
+ * @param sortState
+ * @param sortState.dataIndex 排序的列
+ * @param sortState.order 排序顺序
+ * @param sortState.sortType 排序方式
+ * @param newItem 要插入的数据
+ * @param targetArray 表格数据
+ */
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]): T[];
+/**
+ * 表格排序抽离
+ * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
+ * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
+ * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
+ * @param sortOption 列配置
+ * @param order 排序方式
+ * @param dataSource 排序的数组
+ */
+export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[];
+/** column 的层级 */
+export declare function howDeepTheColumn(arr: StkTableColumn<any>[], level?: number): number;