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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 JA+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -112,30 +112,112 @@ export type StkProps = Partial<{
 }>;
 ```
 
-#### 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>[];
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * horizontal - 仅展示横线
+     */
+    border: boolean | 'horizontal';
 };
 ```
 
+
+### 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

@@ -30,8 +30,12 @@ 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<Partial<{
@@ -56,9 +60,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showTrHoverClass: boolean;
     headerDrag: boolean;
     rowClassName: (row: any, i: number) => string;
-    /** rowKey缓存 */
     colResizable: boolean;
     colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -83,6 +87,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
+    bordered: boolean;
 }>, {
     setCurrentRow: typeof setCurrentRow;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
@@ -127,9 +132,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showTrHoverClass: boolean;
     headerDrag: boolean;
     rowClassName: (row: any, i: number) => string;
-    /** rowKey缓存 */
     colResizable: boolean;
     colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -154,6 +159,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
+    bordered: boolean;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
@@ -192,6 +198,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
+    bordered: boolean | "h" | "v" | "body-v";
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

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

@@ -1,5 +1,10 @@
 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>;
@@ -8,29 +13,46 @@ export type CustomCellFunc<T extends Record<string, any>> = (props: {
 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;
+    /**自定义 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';
 };
@@ -88,5 +110,13 @@ export type StkProps = Partial<{
     colResizable: boolean;
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
+     */
+    bordered: boolean | 'h' | 'v' | 'body-v';
 }>;
 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;

package/lib/stk-table-vue.js

@@ -435,9 +435,9 @@ function strCompare(a, b, type) {
   if (type === "number") {
     if (+a > +b)
       return 1;
-    if (+a === +b)
+    else if (+a === +b)
       return 0;
-    if (+a < +b)
+    else
       return -1;
   } else {
     return String(a).localeCompare(b);
@@ -492,7 +492,7 @@ function howDeepTheColumn(arr, level = 1) {
   });
   return Math.max(...levels);
 }
-const _withScopeId = (n) => (pushScopeId("data-v-646b1c00"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-0aa41491"), n = n(), popScopeId(), n);
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_3 = { class: "table-header-cell-wrapper" };
@@ -563,7 +563,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     headerDrag: { type: Boolean, default: false },
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
-    colMinWidth: { default: 10 }
+    colMinWidth: { default: 10 },
+    bordered: { type: [Boolean, String], default: true }
   },
   emits: [
     "sort-change",
@@ -920,7 +921,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "virtual-x": _ctx.virtualX,
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
-          "is-col-resizing": unref(isColResizing)
+          "is-col-resizing": unref(isColResizing),
+          border: props.bordered,
+          "border-h": props.bordered === "h",
+          "border-v": props.bordered === "v",
+          "border-body-v": props.bordered === "body-v"
         }]),
         style: normalizeStyle(_ctx.virtual && { "--row-height": unref(virtualScroll).rowHeight + "px" }),
         onScroll: onTableScroll,
@@ -1093,7 +1098,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-646b1c00"]]);
+const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0aa41491"]]);
 export {
   StkTable,
   insertToOrderedArray,

package/lib/style.css

@@ -1,4 +1,4 @@
-.stk-table[data-v-646b1c00] {
+.stk-table[data-v-0aa41491] {
   --row-height: 28px;
   --cell-padding-x: 8px;
   --resize-handle-width: 4px;
@@ -28,7 +28,7 @@
   /** 列宽调整指示器 */
   /**虚拟滚动模式 */
 }
-.stk-table.dark[data-v-646b1c00] {
+.stk-table.dark[data-v-0aa41491] {
   --th-bgc: #181c21;
   --td-bgc: #181c21;
   --border-color: #26292e;
@@ -43,13 +43,45 @@
   --col-resize-indicator-color: #5d6064;
   color: #d0d1d2;
 }
-.stk-table.headless[data-v-646b1c00] {
+.stk-table.headless[data-v-0aa41491] {
   border-top: 1px solid var(--border-color);
 }
-.stk-table.is-col-resizing th[data-v-646b1c00] {
+.stk-table.is-col-resizing th[data-v-0aa41491] {
   pointer-events: none;
 }
-.stk-table .column-resize-indicator[data-v-646b1c00] {
+.stk-table.border-h[data-v-0aa41491] {
+  --bg-border-right: linear-gradient(transparent, transparent);
+  --bg-border-left: linear-gradient(transparent, transparent);
+}
+.stk-table.border-v[data-v-0aa41491] {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table.border .stk-table-main th[data-v-0aa41491],
+.stk-table.border .stk-table-main td[data-v-0aa41491] {
+  background-image: var(--bg-border-right), var(--bg-border-bottom);
+}
+.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491] {
+  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+}
+.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491]:first-child {
+  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+}
+.stk-table.border .stk-table-main thead tr th[data-v-0aa41491]:first-child {
+  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+}
+.stk-table.border .stk-table-main tbody td[data-v-0aa41491]:first-child {
+  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+}
+.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-0aa41491] {
+  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+}
+.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-0aa41491] {
+  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+}
+.stk-table.border-body-v .stk-table-main tbody[data-v-0aa41491] {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table .column-resize-indicator[data-v-0aa41491] {
   width: 0;
   height: 100%;
   border-left: 1px dashed var(--col-resize-indicator-color);
@@ -58,133 +90,122 @@
   display: none;
   pointer-events: none;
 }
-.stk-table .stk-table-main[data-v-646b1c00] {
+.stk-table .stk-table-main[data-v-0aa41491] {
   border-spacing: 0;
   border-collapse: separate;
 }
-.stk-table .stk-table-main.fixed-mode[data-v-646b1c00] {
+.stk-table .stk-table-main.fixed-mode[data-v-0aa41491] {
   table-layout: fixed;
 }
-.stk-table .stk-table-main th[data-v-646b1c00],
-.stk-table .stk-table-main td[data-v-646b1c00] {
+.stk-table .stk-table-main th[data-v-0aa41491],
+.stk-table .stk-table-main td[data-v-0aa41491] {
   z-index: 1;
   height: var(--row-height);
   font-size: 14px;
   box-sizing: border-box;
   padding: 0 var(--cell-padding-x);
-  background-image: var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table .stk-table-main thead tr:first-child th[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr:first-child th[data-v-0aa41491] {
   position: sticky;
   top: 0;
-  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table .stk-table-main thead tr:first-child th[data-v-646b1c00]:first-child {
-  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-}
-.stk-table .stk-table-main thead tr th[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th[data-v-0aa41491] {
   background-color: var(--th-bgc);
 }
-.stk-table .stk-table-main thead tr th.sortable[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.sortable[data-v-0aa41491] {
   cursor: pointer;
 }
-.stk-table .stk-table-main thead tr th[data-v-646b1c00]:first-child {
-  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-}
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-0aa41491] {
   white-space: nowrap;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
   max-width: 100%;
   display: inline-flex;
   align-items: center;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
   overflow: hidden;
   align-self: flex-start;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-0aa41491] {
   flex-shrink: 0;
   margin-left: 4px;
   width: 16px;
   height: 16px;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-646b1c00],
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491],
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-0aa41491] {
   position: absolute;
   top: 0;
   bottom: 0;
   cursor: col-resize;
   width: var(--resize-handle-width);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-0aa41491] {
   left: 0;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-646b1c00] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-0aa41491] {
   right: 0;
 }
-.stk-table .stk-table-main tbody[data-v-646b1c00] {
+.stk-table .stk-table-main tbody[data-v-0aa41491] {
   /**高亮渐暗 */
 }
-@keyframes dim-646b1c00 {
+@keyframes dim-0aa41491 {
 from {
     background-color: var(--highlight-color);
 }
 }
-.stk-table .stk-table-main tbody tr[data-v-646b1c00] {
+.stk-table .stk-table-main tbody tr[data-v-0aa41491] {
   background-color: var(--td-bgc);
 }
-.stk-table .stk-table-main tbody tr.highlight-row[data-v-646b1c00] {
-  animation: dim-646b1c00 2s linear;
+.stk-table .stk-table-main tbody tr.highlight-row[data-v-0aa41491] {
+  animation: dim-0aa41491 2s linear;
 }
-.stk-table .stk-table-main tbody tr.hover[data-v-646b1c00],
-.stk-table .stk-table-main tbody tr[data-v-646b1c00]:hover {
+.stk-table .stk-table-main tbody tr.hover[data-v-0aa41491],
+.stk-table .stk-table-main tbody tr[data-v-0aa41491]:hover {
   background-color: var(--tr-hover-bgc);
 }
-.stk-table .stk-table-main tbody tr.active[data-v-646b1c00] {
+.stk-table .stk-table-main tbody tr.active[data-v-0aa41491] {
   background-color: var(--tr-active-bgc);
 }
-.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-646b1c00] {
+.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-0aa41491] {
   background-color: inherit;
 }
-.stk-table .stk-table-main tbody tr td[data-v-646b1c00]:first-child {
-  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-}
-.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-646b1c00] {
-  animation: dim-646b1c00 2s linear;
+.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-0aa41491] {
+  animation: dim-0aa41491 2s linear;
 }
-.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-646b1c00] {
+.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-0aa41491] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.stk-table .stk-table-no-data[data-v-646b1c00] {
+.stk-table .stk-table-no-data[data-v-0aa41491] {
   background-color: var(--table-bgc);
   line-height: var(--row-height);
   text-align: center;
@@ -199,33 +220,27 @@ from {
   align-items: center;
   justify-content: center;
 }
-.stk-table .stk-table-no-data.no-data-full[data-v-646b1c00] {
+.stk-table .stk-table-no-data.no-data-full[data-v-0aa41491] {
   flex: 1;
 }
-.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-646b1c00] {
+.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
   overflow: hidden;
   max-height: var(--row-height);
 }
-.stk-table.virtual .stk-table-main tbody[data-v-646b1c00] {
+.stk-table.virtual .stk-table-main tbody[data-v-0aa41491] {
   position: relative;
 }
-.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-646b1c00] {
+.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-0aa41491] {
   height: 0;
 }
-.stk-table.virtual .stk-table-main tbody tr td[data-v-646b1c00] {
+.stk-table.virtual .stk-table-main tbody tr td[data-v-0aa41491] {
   height: var(--row-height);
   line-height: 1;
 }
-.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-646b1c00] {
+.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-0aa41491] {
   max-height: var(--row-height);
   overflow: hidden;
 }
-.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-646b1c00] {
+.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-0aa41491] {
   padding: 0;
 }
-.stk-table.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-646b1c00] {
-  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-}
-.stk-table.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-646b1c00] {
-  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-}

package/lib/test/StkTable.browser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/test/insertToOrderedArray.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,58 +1,60 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.0.1-beta.2",
-    "description": "simple realtime virtual table for vue3",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.11.0",
-    "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",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^4.5.0",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "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",
-        "less": "^4.2.0",
-        "prettier": "^3.1.1",
-        "pug": "^3.0.2",
-        "typescript": "^5.3.3",
-        "vite": "^5.0.6",
-        "vite-plugin-dts": "^3.6.4",
-        "vue": "^3.3.9",
-        "vue-eslint-parser": "^9.3.2",
-        "vue-loader": "^17.2.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1",
-        "vitest": "^1.1.0"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.0.1-beta.4",
+    "description": "simple realtime virtual table for vue3",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.11.0",
+    "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",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-vue": "^4.5.0",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vue/test-utils": "2.4.0-alpha.2",
+        "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",
+        "prettier": "^3.1.1",
+        "pug": "^3.0.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.6",
+        "vite-plugin-dts": "^3.6.4",
+        "vitest": "^1.1.0",
+        "vue": "^3.3.9",
+        "vue-eslint-parser": "^9.3.2",
+        "vue-loader": "^17.2.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -8,6 +8,10 @@
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
+            border: props.bordered,
+            'border-h': props.bordered === 'h',
+            'border-v': props.bordered === 'v',
+            'border-body-v': props.bordered === 'body-v',
         }"
         :style="virtual && { '--row-height': virtualScroll.rowHeight + 'px' }"
         @scroll="onTableScroll"
@@ -185,7 +189,7 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { SortOption, StkProps, StkTableColumn } from '@/StkTable/types/index';
+import { Order, SortOption, StkProps, StkTableColumn } from '@/StkTable/types/index';
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Col_Width, Is_Legacy_Mode } from './const';
 import { useColResize } from './useColResize';
@@ -218,6 +222,7 @@ const props = withDefaults(defineProps<StkProps>(), {
     rowClassName: () => '',
     colResizable: false,
     colMinWidth: 10,
+    bordered: true,
 });
 
 const emit = defineEmits([
@@ -248,7 +253,7 @@ let sortCol = ref<string | null>();
 let sortOrderIndex = ref(0);
 
 /** 排序切换顺序 */
-const sortSwitchOrder = [null, 'desc', 'asc'];
+const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
 
 /** 表头.内容是 props.columns 的引用集合 */
 const tableHeaders = ref<StkTableColumn<any>[][]>([]);
@@ -767,6 +772,65 @@ defineExpose({
     &.is-col-resizing th {
         pointer-events: none;
     }
+    &.border-h {
+        --bg-border-right: linear-gradient(transparent, transparent);
+        --bg-border-left: linear-gradient(transparent, transparent);
+    }
+    &.border-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+    }
+
+    &.border {
+        .stk-table-main {
+            th,
+            td {
+                background-image: var(--bg-border-right), var(--bg-border-bottom);
+            }
+            thead {
+                tr {
+                    &:first-child th {
+                        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+
+                        &:first-child {
+                            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+                        }
+                    }
+                    th {
+                        &:first-child {
+                            background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+                        }
+                    }
+                }
+            }
+            tbody {
+                td {
+                    &:first-child {
+                        background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+                    }
+                }
+            }
+        }
+
+        &.virtual-x {
+            .stk-table-main {
+                thead tr:first-child .virtual-x-left + th {
+                    // 横向虚拟滚动时，左侧第一个单元格加上border-left
+                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+                }
+
+                tr .virtual-x-left + th {
+                    background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
+                }
+            }
+        }
+    }
+    &.border-body-v {
+        .stk-table-main {
+            tbody {
+                --bg-border-bottom: linear-gradient(transparent, transparent);
+            }
+        }
+    }
 
     /** 列宽调整指示器 */
     .column-resize-indicator {
@@ -793,7 +857,6 @@ defineExpose({
             font-size: 14px;
             box-sizing: border-box;
             padding: 0 var(--cell-padding-x);
-            background-image: var(--bg-border-right), var(--bg-border-bottom);
         }
 
         thead {
@@ -801,12 +864,6 @@ defineExpose({
                 &:first-child th {
                     position: sticky;
                     top: 0;
-                    // border-top: 1px solid var(--border-color);
-                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
-                    &:first-child {
-                        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                    }
                 }
 
                 th {
@@ -816,15 +873,6 @@ defineExpose({
                         cursor: pointer;
                     }
 
-                    &:first-child {
-                        // border-left: 1px solid var(--border-color);
-                        background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                        // padding-left: 12px;
-                    }
-
-                    // &:last-child {
-                    //   padding-right: 12px;
-                    // }
                     &.text-overflow {
                         .table-header-cell-wrapper {
                             white-space: nowrap;
@@ -945,10 +993,6 @@ defineExpose({
                         background-color: inherit; // 防止横向滚动后透明
                     }
 
-                    &:first-child {
-                        background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-                    }
-
                     &.highlight-cell {
                         animation: dim 2s linear;
                     }
@@ -1059,15 +1103,6 @@ defineExpose({
             .virtual-x-left {
                 padding: 0;
             }
-
-            thead tr:first-child .virtual-x-left + th {
-                // 横向虚拟滚动时，左侧第一个单元格加上border-left
-                background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-            }
-
-            tr .virtual-x-left + th {
-                background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
-            }
         }
     }
 }

package/src/StkTable/types/index.ts

@@ -1,29 +1,48 @@
 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;
+    /**自定义 td 渲染内容 */
     customCell?: Component | VNode | CustomCellFunc<T>;
+    /** 自定义 th 渲染内容 */
     customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
+    /** 二级表头 */
     children?: StkTableColumn<T>[];
 };
 
@@ -112,4 +131,13 @@ export type StkProps = Partial<{
 
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
+
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
+     */
+    bordered: boolean | 'h' | 'v' | 'body-v';
 }>;

package/src/StkTable/utils.ts

@@ -1,4 +1,4 @@
-import { SortOption, SortState, StkTableColumn } from './types';
+import { Order, SortOption, SortState, StkTableColumn } from './types';
 
 /**
  * 对有序数组插入新数据
@@ -67,11 +67,11 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
  * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
  * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
- * @param {SortOption} sortOption 列配置
- * @param {string|null} order 排序方式
- * @param {any} dataSource 排序的数组
+ * @param sortOption 列配置
+ * @param order 排序方式
+ * @param dataSource 排序的数组
  */
-export function tableSort(sortOption: SortOption, order: string | null, dataSource: any[]) {
+export function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[] {
     let targetDataSource = [...dataSource];
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });

package/lib/StkTable/utils.d.ts

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