stk-table-vue 0.2.5 → 0.2.6

package/README.md

@@ -40,7 +40,8 @@ repo:
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
-* [] `props.emptyCellText` 支持传入函数。
+* [x] `props.emptyCellText` 支持传入函数。
+* [] 支持配置高亮参数。
 
 
 ## Usage
@@ -135,7 +136,7 @@ export type StkProps = {
   /** 列唯一键 */
   colKey?: UniqKeyProp;
   /** 空值展示文字 */
-  emptyCellText?: string;
+  emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
   /** 暂无数据兜底高度是否撑满 */
   noDataFull?: boolean;
   /** 是否展示暂无数据 */
@@ -148,8 +149,6 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
-  /** 表头是否可拖动 */
-  headerDrag?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -348,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>
@@ -420,3 +443,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
+
+
+## Other
+* `$*$` 兼容注释

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

@@ -16,9 +16,11 @@ declare function setCurrentRow(rowKey: string, option?: {
  * @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;
     /** 是否展示暂无数据 */
@@ -225,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;
     /** 是否展示暂无数据 */
@@ -345,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;

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

@@ -78,10 +78,15 @@ 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

package/lib/stk-table-vue.js

@@ -499,6 +499,7 @@ function useHighlight({ props, tableContainer }) {
             highlightDimRowKeys.delete(rowKeyValue);
           }
         });
+        highlightRowStore.value = { ...highlightRowStore.value };
         if (highlightDimRowKeys.size > 0) {
           recursion();
         } else {
@@ -954,7 +955,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dataSource: { default: () => [] },
     rowKey: { type: [String, Number, Function], default: "" },
     colKey: { type: [String, Number, Function], default: "dataIndex" },
-    emptyCellText: { default: "--" },
+    emptyCellText: { type: [String, Function], default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
     sortRemote: { type: Boolean, default: false },
@@ -990,6 +991,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = ref([]);
     const tableHeaderLast = ref([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const getEmptyCellText = computed(() => {
+      if (typeof props.emptyCellText === "string") {
+        return () => props.emptyCellText;
+      } else {
+        return (col, row) => props.emptyCellText({ row, col });
+      }
+    });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
     const { isColResizing, onThResizeMouseDown } = useColResize({
       props,
@@ -1080,8 +1088,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function dealDefaultSorter() {
       if (!props.sortConfig.defaultSort)
         return;
-      const { dataIndex, order } = props.sortConfig.defaultSort;
-      setSorter(dataIndex, order);
+      const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+      setSorter(dataIndex, order, { force: false, silent });
     }
     function dealColumns() {
       tableHeaders.value = [];
@@ -1288,7 +1296,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
         const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
         if (column)
-          onColumnSort(column, false, { force: true, emit: !newOption.silent });
+          onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else
           console.warn("Can not find column by dataIndex:", sortCol.value);
       }
@@ -1507,7 +1515,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 1,
                       class: "table-cell-wrapper",
                       title: row[col.dataIndex]
-                    }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
+                    }, toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 9, _hoisted_14))
                   ], 14, _hoisted_13);
                 }), 128))
               ], 46, _hoisted_11);

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.2.5",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.14.3",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "highlight",
-        "sticky"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.11.14",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^5.0.3",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.1",
-        "postcss-preset-env": "^9.3.0",
-        "prettier": "^3.1.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.4",
-        "vite-plugin-dts": "^3.7.3",
-        "vitest": "^1.1.0",
-        "vue": "^3.4.19",
-        "vue-eslint-parser": "^9.3.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.2.6",
+    "description": "Simple realtime virtual table for vue3&vue2.7",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/src/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.14.3",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "highlight",
+        "sticky"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/japlus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/node": "^20.11.14",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-vue": "^5.0.3",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-vue": "^9.19.2",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "prettier": "^3.1.1",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.4",
+        "vite-plugin-dts": "^3.7.3",
+        "vitest": "^1.1.0",
+        "vue": "^3.4.19",
+        "vue-eslint-parser": "^9.3.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -167,7 +167,7 @@
                     >
                         <component :is="col.customCell" v-if="col.customCell" :col="col" :row="row" :cell-value="row[col.dataIndex]" />
                         <div v-else class="table-cell-wrapper" :title="row[col.dataIndex]">
-                            {{ row[col.dataIndex] ?? emptyCellText }}
+                            {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
                         </div>
                     </td>
                 </tr>
@@ -189,7 +189,7 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
@@ -239,7 +239,7 @@ const props = withDefaults(
         /** 列唯一键 */
         colKey?: UniqKeyProp;
         /** 空值展示文字 */
-        emptyCellText?: string; //TODO: 支持传入方法
+        emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
         /** 暂无数据兜底高度是否撑满 */
         noDataFull?: boolean;
         /** 是否展示暂无数据 */
@@ -258,7 +258,7 @@ const props = withDefaults(
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
          */
-        rowClassName?: (row: any, i: number) => string;
+        rowClassName?: (row: DT, i: number) => string;
         /**
          * 列宽是否可拖动<br>
          * **不要设置**列minWidth，**必须**设置width<br>
@@ -446,6 +446,15 @@ const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
 
+/** 空单元格占位字符 */
+const getEmptyCellText = computed(() => {
+    if (typeof props.emptyCellText === 'string') {
+        return () => props.emptyCellText;
+    } else {
+        return (col: StkTableColumn<DT>, row: DT) => (props.emptyCellText as any)({ row, col });
+    }
+});
+
 /** rowKey缓存 */
 const rowKeyGenStore = new WeakMap();
 
@@ -558,8 +567,8 @@ onMounted(() => {
 /** 处理默认排序 */
 function dealDefaultSorter() {
     if (!props.sortConfig.defaultSort) return;
-    const { dataIndex, order } = props.sortConfig.defaultSort;
-    setSorter(dataIndex as string, order);
+    const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+    setSorter(dataIndex as string, order, { force: false, silent });
 }
 
 /**
@@ -859,8 +868,9 @@ function setCurrentRow(rowKey: string, option = { silent: false }) {
  * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
+ * @param option.force 是否触发排序-默认true
  */
-function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; silent?: boolean; sort?: boolean } = {}) {
+function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
     sortCol.value = dataIndex;
     sortOrderIndex.value = sortSwitchOrder.indexOf(order);
@@ -868,7 +878,7 @@ function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortO
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序
         const column = newOption.sortOption || tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
-        if (column) onColumnSort(column, false, { force: true, emit: !newOption.silent });
+        if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn('Can not find column by dataIndex:', sortCol.value);
     }
     return dataSourceCopy.value;

package/src/StkTable/types/index.ts

@@ -77,10 +77,15 @@ 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

package/src/StkTable/useHighlight.ts

@@ -76,6 +76,9 @@ export function useHighlight({ props, tableContainer }: Params) {
                     }
                 });
 
+                // $*$ 兼容vue2响应
+                highlightRowStore.value = { ...highlightRowStore.value };
+
                 if (highlightDimRowKeys.size > 0) {
                     // 还有高亮的行,则下一次循环
                     recursion();