stk-table-vue 0.2.3 → 0.2.6

package/README.md

@@ -4,6 +4,10 @@ Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐
 
 Vue2.7支持引入源码(**ts**)使用。
 
+repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
+
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
 
@@ -18,7 +22,7 @@ Vue2.7支持引入源码(**ts**)使用。
     - [] sticky column 动态计算阴影位置。
 * [] 列筛选。
 * [x] 斑马纹。
-  - [] 虚拟滚动斑马纹。
+  - [x] 虚拟滚动斑马纹。
 * [x] 表头拖动更改顺序。
 * [x] 表头拖动调整列宽。
 * [x] 排序
@@ -33,10 +37,11 @@ Vue2.7支持引入源码(**ts**)使用。
 * 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
-* [] 不传row-key 时，自动按序号生成id。
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
+* [x] `props.emptyCellText` 支持传入函数。
+* [] 支持配置高亮参数。
 
 
 ## Usage
@@ -131,7 +136,7 @@ export type StkProps = {
   /** 列唯一键 */
   colKey?: UniqKeyProp;
   /** 空值展示文字 */
-  emptyCellText?: string;
+  emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
   /** 暂无数据兜底高度是否撑满 */
   noDataFull?: boolean;
   /** 是否展示暂无数据 */
@@ -144,8 +149,6 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
-  /** 表头是否可拖动 */
-  headerDrag?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -188,7 +191,14 @@ export type StkProps = {
         dataIndex: keyof T;
         order: Order;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (历史设计问题，为了兼容，默认true)
+     */
+    stringLocaleCompare?: boolean;
   },
+  /** 隐藏头部title。可传入dataIndex数组 */
+  hideHeaderTitle?: boolean | string[];
 };
 ```
 #### Emits
@@ -337,6 +347,30 @@ export type StkTableColumn<T extends Record<string, any>> = {
 ```
 
 
+### StkTableColumn.SortConfig
+```ts
+/** 排序配置 */
+export type SortConfig<T extends Record<string, any>> = {
+    /** 空值始终排在列表末尾 */
+    emptyToBottom?: boolean;
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
+    defaultSort?: {
+        dataIndex: keyof T;
+        order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
+    };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
+};
+```
+
 ### Example
 ```vue
 <template>
@@ -404,3 +438,12 @@ export type StkTableColumn<T extends Record<string, any>> = {
   ]
 </script>
 ```
+
+## Special Example
+### 鼠标悬浮表头时，不展示title
+* 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
+* 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
+
+
+## Other
+* `$*$` 兼容注释

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

@@ -13,12 +13,14 @@ declare function setCurrentRow(rowKey: string, option?: {
  * 设置表头排序状态
  * @param dataIndex 列字段
  * @param order 正序倒序
- * @param option.sortOption 指定排序参数
+ * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
+ * @param option.force 是否触发排序-默认true
  */
 declare function setSorter(dataIndex: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
+    force?: boolean;
     silent?: boolean;
     sort?: boolean;
 }): any[];
@@ -65,7 +67,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
-    emptyCellText?: string | undefined;
+    emptyCellText?: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
     /** 是否展示暂无数据 */
@@ -113,6 +118,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
+    /** 隐藏头部title。可传入dataIndex数组 */
+    hideHeaderTitle?: boolean | string[] | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -146,7 +153,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
         emptyToBottom: boolean;
+        stringLocaleCompare: boolean;
     };
+    hideHeaderTitle: boolean;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -221,7 +230,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
-    emptyCellText?: string | undefined;
+    emptyCellText?: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
     /** 是否展示暂无数据 */
@@ -269,6 +281,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
+    /** 隐藏头部title。可传入dataIndex数组 */
+    hideHeaderTitle?: boolean | string[] | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -302,7 +316,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
         emptyToBottom: boolean;
+        stringLocaleCompare: boolean;
     };
+    hideHeaderTitle: boolean;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -337,7 +353,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dataSource: any[];
     rowKey: UniqKeyProp;
     colKey: UniqKeyProp;
-    emptyCellText: string;
+    emptyCellText: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string);
     noDataFull: boolean;
     showNoData: boolean;
     sortRemote: boolean;
@@ -353,6 +372,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
     sortConfig: SortConfig<any>;
+    hideHeaderTitle: boolean | string[];
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -1,3 +1,4 @@
 export { default as StkTable } from './StkTable.vue';
 export { tableSort, insertToOrderedArray } from './utils';
 export type { StkTableColumn } from './types/index';
+import './style.less';

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

@@ -78,10 +78,20 @@ export type UniqKeyProp = UniqKey | UniqKeyFun;
 export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
-    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
     defaultSort?: {
         dataIndex: keyof T;
         order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
 };
 export {};

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

@@ -1,9 +1,9 @@
 import { CSSProperties, Ref } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-type Options = {
+type Options<T extends Record<string, any>> = {
     props: any;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    tableHeaders: Ref<StkTableColumn<T>[][]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
     virtualX_on: Ref<boolean>;
@@ -14,7 +14,7 @@ type Options = {
  * @param param0
  * @returns
  */
-export declare function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options): {
+export declare function useFixedStyle<DT extends Record<string, any>>({ props, tableHeaders, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight, }: Options<DT>): {
     getFixedStyle: (tagType: 1 | 2, col: StkTableColumn<any>, depth?: number) => CSSProperties;
 };
 export {};

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

@@ -1,10 +1,11 @@
 import { Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
 type Option<DT extends Record<string, any>> = {
-    tableContainer: Ref<HTMLElement | undefined>;
     props: any;
+    tableContainer: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 /** 暂存纵向虚拟滚动的数据 */
 export type VirtualScrollStore = {
@@ -41,7 +42,7 @@ export type VirtualScrollXStore = {
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast, tableHeaders, }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
         pageSize: number;

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

@@ -8,7 +8,7 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './type
  * @param newItem 要插入的数据
  * @param targetArray 表格数据
  */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]): T[];
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[], sortConfig?: SortConfig<T>): T[];
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
@@ -25,3 +25,5 @@ export declare function tableSort<T extends Record<string, any>>(sortOption: Sor
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
 /** 获取列宽 */
 export declare function getColWidth(col: StkTableColumn<any> | null): number;
+/** 获取列宽配置。用于支持列宽配置数字 */
+export declare function getColWidthStr(col: StkTableColumn<any> | null | undefined, key?: 'width' | 'minWidth' | 'maxWidth'): string | undefined;