stk-table-vue 0.6.5 → 0.6.6

package/README.md

@@ -12,7 +12,7 @@ Vue2.7支持引入源码(**ts**)使用。
 
 ## License
 MIT
-repo: 
+repo(求 star🌟): 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 

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

@@ -26,6 +26,7 @@ declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 declare function setSorter(colKey: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
@@ -42,7 +43,10 @@ declare function resetSorter(): void;
 declare function scrollTo(top?: number | null, left?: number | null): void;
 /** get current table data */
 declare function getTableData(): any[];
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 declare function getSortColumns(): {
     key: string | number | symbol | undefined;
     order: "desc" | "asc";
@@ -492,6 +496,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
         col: any;
     }): any;
     empty?(_: {}): any;
+    customBottom?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

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

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

@@ -14,6 +14,12 @@ export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
  * @return targetArray 的浅拷贝
  */
 export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+/**
+ * 二分查找
+ *  @param searchArray 查找数组
+ *  @param compareCallback 比较函数，返回 -1|0|1
+ */
+export declare function binarySearch(searchArray: any[], compareCallback: (midIndex: number) => number): number;
 /**
  * 字符串比较
  * @param a
@@ -21,7 +27,7 @@ export declare function insertToOrderedArray<T extends object>(sortState: SortSt
  * @param type 类型
  * @param isNumber 是否是数字类型
  * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
- * @return {-1|0|1}
+ * @return {number} <0: a < b, 0: a = b, >0: a > b
  */
 export declare function strCompare(a: string, b: string, isNumber: boolean, localeCompare?: boolean): number;
 /**

package/lib/stk-table-vue.js

@@ -59,7 +59,6 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType) sortType = typeof newItem[dataIndex];
-  const isNumber = sortType === "number";
   const data = [...targetArray];
   if (!order || !data.length) {
     data.unshift(newItem);
@@ -68,26 +67,32 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
     data.push(newItem);
   }
-  let sIndex = 0;
-  let eIndex = data.length - 1;
+  const isNumber = sortType === "number";
   const targetVal = newItem[dataIndex];
-  while (sIndex <= eIndex) {
-    const midIndex = Math.floor((sIndex + eIndex) / 2);
+  const sIndex = binarySearch(data, (midIndex) => {
     const midVal = data[midIndex][dataIndex];
     const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+    return order === "asc" ? compareRes : -compareRes;
+  });
+  data.splice(sIndex, 0, newItem);
+  return data;
+}
+function binarySearch(searchArray, compareCallback) {
+  let sIndex = 0;
+  let eIndex = searchArray.length - 1;
+  while (sIndex <= eIndex) {
+    const midIndex = Math.floor((sIndex + eIndex) / 2);
+    const compareRes = compareCallback(midIndex);
     if (compareRes === 0) {
       sIndex = midIndex;
       break;
-    } else if (compareRes === -1) {
-      if (order === "asc") sIndex = midIndex + 1;
-      else eIndex = midIndex - 1;
+    } else if (compareRes < 0) {
+      sIndex = midIndex + 1;
     } else {
-      if (order === "asc") eIndex = midIndex - 1;
-      else sIndex = midIndex + 1;
+      eIndex = midIndex - 1;
     }
   }
-  data.splice(sIndex, 0, newItem);
-  return data;
+  return sIndex;
 }
 function strCompare(a, b, isNumber, localeCompare = false) {
   let _a = a;
@@ -2343,13 +2348,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "empty", {}, () => [
             _cache[7] || (_cache[7] = createTextVNode("暂无数据"))
           ])
-        ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "customBottom")
       ], 38);
     };
   }
 });
 export {
   _sfc_main as StkTable,
+  binarySearch,
   insertToOrderedArray,
   strCompare,
   tableSort

package/lib/style.css

@@ -260,7 +260,7 @@
 .stk-table .expand-cell{
   cursor:pointer;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper::before{
+.stk-table .expand-cell .expanded-cell-wrapper::before{
   content:'';
   display:inline-block;
   margin:0 2px;
@@ -271,7 +271,7 @@
   border-bottom:4px solid transparent;
   transition:transform 0.2s ease;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper > span{
+.stk-table .expand-cell .expanded-cell-wrapper > span{
   margin-left:var(--cell-padding-x);
 }
 .stk-table .expand-cell.expanded .table-cell-wrapper::before{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -227,6 +227,7 @@
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
             <slot name="empty">暂无数据</slot>
         </div>
+        <slot name="customBottom"></slot>
     </div>
 </template>
 
@@ -1288,6 +1289,7 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 function setSorter(colKey: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
@@ -1325,7 +1327,10 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 function getSortColumns() {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];

package/src/StkTable/index.ts

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

package/src/StkTable/style.less

@@ -386,8 +386,7 @@
     .expand-cell {
         cursor: pointer;
 
-        .table-cell-wrapper {
-            &.expanded-cell-wrapper {
+            .expanded-cell-wrapper {
                 &::before {
                     content: '';
                     display: inline-block;
@@ -404,7 +403,6 @@
                     margin-left: var(--cell-padding-x)
                 }
             }
-        }
 
         &.expanded {
             .table-cell-wrapper::before {

package/src/StkTable/utils/index.ts

@@ -26,7 +26,6 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
     sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;
     if (!sortType) sortType = typeof newItem[dataIndex] as 'number' | 'string';
-    const isNumber = sortType === 'number';
     const data = [...targetArray];
 
     if (!order || !data.length) {
@@ -40,31 +39,43 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
         data.push(newItem);
     }
 
+    const isNumber = sortType === 'number';
+
     // 二分插入
-    let sIndex = 0;
-    let eIndex = data.length - 1;
     const targetVal: any = newItem[dataIndex];
-    while (sIndex <= eIndex) {
-        // console.log(sIndex, eIndex);
-        const midIndex = Math.floor((sIndex + eIndex) / 2);
+    const sIndex = binarySearch(data, midIndex => {
         const midVal: any = data[midIndex][dataIndex];
         const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+        return order === 'asc' ? compareRes : -compareRes;
+    });
+    data.splice(sIndex, 0, newItem);
+    return data;
+}
+
+/**
+ * 二分查找
+ *  @param searchArray 查找数组
+ *  @param compareCallback 比较函数，返回 -1|0|1
+ */
+export function binarySearch(searchArray: any[], compareCallback: (midIndex: number) => number) {
+    let sIndex = 0;
+    let eIndex = searchArray.length - 1;
+    while (sIndex <= eIndex) {
+        const midIndex = Math.floor((sIndex + eIndex) / 2);
+        const compareRes = compareCallback(midIndex);
         if (compareRes === 0) {
             //midVal == targetVal
             sIndex = midIndex;
             break;
-        } else if (compareRes === -1) {
+        } else if (compareRes < 0) {
             // midVal < targetVal
-            if (order === 'asc') sIndex = midIndex + 1;
-            else eIndex = midIndex - 1;
+            sIndex = midIndex + 1;
         } else {
             //midVal > targetVal
-            if (order === 'asc') eIndex = midIndex - 1;
-            else sIndex = midIndex + 1;
+            eIndex = midIndex - 1;
         }
     }
-    data.splice(sIndex, 0, newItem);
-    return data;
+    return sIndex;
 }
 /**
  * 字符串比较
@@ -73,7 +84,7 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
  * @param type 类型
  * @param isNumber 是否是数字类型
  * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
- * @return {-1|0|1}
+ * @return {number} <0: a < b, 0: a = b, >0: a > b
  */
 export function strCompare(a: string, b: string, isNumber: boolean, localeCompare = false): number {
     let _a: number | string = a;