stk-table-vue 0.8.0 → 0.8.2

package/README.md

@@ -44,6 +44,7 @@
 * [x] 行展开。(`v0.5.0`)
 * [x] 行拖动。(`v0.5.0`)
 * [x] 树形。(`v0.7.0`)
+* [x] 单元格合并。(`v0.8.0`)
 * [] 列筛选。
 * [x] 斑马纹。
 * [x] 拖动更改列顺序。
@@ -77,7 +78,7 @@ const stkTableRef = useTemplateRef('stkTableRef');
 
 // highlight row
 stkTableRef.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'js'|'animation',// 默认 animation。
+  method: 'css'|'animation',// 默认 animation。
   className: 'custom-class-name', // method css 时生效。
   keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
   duration: 2000,// 动画时长。

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

@@ -136,7 +136,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName?: (row: DT, i: number) => string;
+    rowClassName?: (row: DT, i: number) => string | undefined;
     /**
      * 列宽是否可拖动(需要设置v-model:columns)<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -502,7 +502,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName?: (row: DT, i: number) => string;
+    rowClassName?: (row: DT, i: number) => string | undefined;
     /**
      * 列宽是否可拖动(需要设置v-model:columns)<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -703,7 +703,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellActive: boolean;
     selectedCellRevokable: boolean;
     headerDrag: boolean | HeaderDragConfig;
-    rowClassName: (row: DT, i: number) => string;
+    rowClassName: (row: DT, i: number) => string | undefined;
     colResizable: boolean | ColResizableConfig<DT>;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";

package/lib/stk-table-vue.js

@@ -296,7 +296,7 @@ function getColWidth(col) {
   return parseInt(val);
 }
 function getCalculatedColWidth(col) {
-  return (col && col.__WIDTH__) ?? 100;
+  return (col && col.__WIDTH__) ?? +DEFAULT_COL_WIDTH;
 }
 function createStkTableId() {
   let id = window.__STK_TB_ID_COUNT__;
@@ -2419,10 +2419,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
           "col-resizable": props.colResizable,
-          border: props.bordered,
-          "border-h": props.bordered === "h",
-          "border-v": props.bordered === "v",
-          "border-body-v": props.bordered === "body-v",
+          bordered: props.bordered,
+          "bordered-h": props.bordered === "h",
+          "bordered-v": props.bordered === "v",
+          "bordered-body-v": props.bordered === "body-v",
           stripe: props.stripe,
           "cell-hover": props.cellHover,
           "cell-active": props.cellActive,
@@ -2575,7 +2575,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass({
                   active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [_ctx.rowClassName(row, getRowIndex(rowIndex))]: true,
+                  [_ctx.rowClassName(row, getRowIndex(rowIndex)) || ""]: true,
                   expanded: row == null ? void 0 : row.__EXPANDED__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
@@ -2624,9 +2624,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
                           "drag-row-cell": col.type === "dragRow"
                         }
-                      ],
-                      ref_for: true
-                    }, unref(mergeCellsWrapper)(row, col, rowIndex, colIndex), {
+                      ]
+                    }, { ref_for: true }, unref(mergeCellsWrapper)(row, col, rowIndex, colIndex), {
                       onClick: ($event) => onCellClick($event, row, col, getRowIndex(rowIndex)),
                       onMousedown: ($event) => onCellMouseDown($event, row, col, getRowIndex(rowIndex)),
                       onMouseenter: ($event) => onCellMouseEnter($event, row, col),
@@ -2649,7 +2648,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           expanded: row && row.__EXPANDED__ || null,
                           "tree-expanded": row && row.__T_EXPANDED__ || null
                         }, {
-                          foldIcon: withCtx(() => [
+                          stkFoldIcon: withCtx(() => [
                             createVNode(TriangleIcon)
                           ]),
                           _: 2
@@ -2671,7 +2670,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           rowIndex: getRowIndex(rowIndex),
                           colIndex,
                           cellValue: row && row[col.dataIndex]
-                        }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
+                        }, {
+                          stkFoldIcon: withCtx(() => [
+                            createVNode(TriangleIcon)
+                          ]),
+                          stkDragIcon: withCtx(() => [
+                            createVNode(DragHandle, {
+                              onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                            }, null, 8, ["onDragstart"])
+                          ]),
+                          _: 2
+                        }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
                           key: 1,
                           class: "table-cell-wrapper",
                           title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""

package/lib/{stk-table-vue.css → style.css}

@@ -66,7 +66,7 @@
   --drag-handle-hover-color:#5d6064;
   color:#d1d1e0;
 }
-.stk-table.headless.border{
+.stk-table.headless.bordered{
   border-top:1px solid var(--border-color);
   background-image:var(--bg-border-right), var(--bg-border-bottom);
 }
@@ -79,27 +79,27 @@
 .stk-table.is-col-resizing th{
   pointer-events:none;
 }
-.stk-table.border{
+.stk-table.bordered{
   border-left:1px solid var(--border-color);
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border th,
-.stk-table.border td{
+.stk-table.bordered th,
+.stk-table.bordered td{
   background-image:var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border thead tr:first-child th{
+.stk-table.bordered thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border-h{
+.stk-table.bordered-h{
   border-left:none;
   --bg-border-right:linear-gradient(transparent, transparent);
   --bg-border-left:linear-gradient(transparent, transparent);
 }
-.stk-table.border-v{
+.stk-table.bordered-v{
   --bg-border-bottom:linear-gradient(transparent, transparent);
   --bg-border-top:linear-gradient(transparent, transparent);
 }
-.stk-table.border-body-v tbody{
+.stk-table.bordered-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
 .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -44,14 +44,14 @@
     "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vue/test-utils": "2.4.4",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.25.0",
-    "happy-dom": "^12.10.3",
+    "happy-dom": "^18.0.1",
     "less": "^4.2.0",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
@@ -59,17 +59,15 @@
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
-    "stk-table-vue": "^0.7.1",
-    "typescript": "^5.4.5",
-    "vite": "^6.3.5",
+    "stk-table-vue": "^0.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.2",
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.6.3",
     "vitepress-demo-plugin": "^1.4.5",
-    "vitepress-plugin-llms": "^1.5.1",
-    "vitest": "^2.1.3",
-    "vue": "^3.5.12",
+    "vitepress-plugin-llms": "^1.7.0",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2"
-  },
-  "dependencies": {
   }
 }

package/src/StkTable/StkTable.vue

@@ -12,10 +12,10 @@
             headless,
             'is-col-resizing': isColResizing,
             'col-resizable': props.colResizable,
-            border: props.bordered,
-            'border-h': props.bordered === 'h',
-            'border-v': props.bordered === 'v',
-            'border-body-v': props.bordered === 'body-v',
+            bordered: props.bordered,
+            'bordered-h': props.bordered === 'h',
+            'bordered-v': props.bordered === 'v',
+            'bordered-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
             'cell-hover': props.cellHover,
             'cell-active': props.cellActive,
@@ -52,7 +52,6 @@
                 'fixed-mode': props.fixedMode,
             }"
         >
-            <!-- transform: virtualX_on ? `translateX(${virtualScrollX.offsetLeft}px)` : null, 用transform控制虚拟滚动左边距，sticky会有问题 -->
             <thead v-if="!headless" ref="theadRef">
                 <tr v-for="(row, rowIndex) in tableHeaders" :key="rowIndex" @contextmenu="onHeaderMenu($event)">
                     <!-- 这个th用于横向虚拟滚动表格左边距,width、maxWidth 用于兼容低版本浏览器 -->
@@ -110,9 +109,6 @@
                 </tr>
             </thead>
 
-            <!-- 用于虚拟滚动表格内容定位 @deprecated 有兼容问题-->
-            <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
-            <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
@@ -130,7 +126,7 @@
                     :class="{
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
-                        [rowClassName(row, getRowIndex(rowIndex))]: true,
+                        [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
                         expanded: row?.__EXPANDED__,
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
@@ -200,7 +196,7 @@
                                             :expanded="(row && row.__EXPANDED__) || null"
                                             :tree-expanded="(row && row.__T_EXPANDED__) || null"
                                         >
-                                            <template #foldIcon>
+                                            <template #stkFoldIcon>
                                                 <TriangleIcon></TriangleIcon>
                                             </template>
                                         </component>
@@ -225,7 +221,14 @@
                                         :rowIndex="getRowIndex(rowIndex)"
                                         :colIndex="colIndex"
                                         :cellValue="row && row[col.dataIndex]"
-                                    />
+                                    >
+                                        <template #stkFoldIcon>
+                                            <TriangleIcon></TriangleIcon>
+                                        </template>
+                                        <template #stkDragIcon>
+                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                        </template>
+                                    </component>
                                     <div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
                                         <template v-if="col.type === 'seq'">
                                             {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
@@ -380,7 +383,7 @@ const props = withDefaults(
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
          */
-        rowClassName?: (row: DT, i: number) => string;
+        rowClassName?: (row: DT, i: number) => string | undefined;
         /**
          * 列宽是否可拖动(需要设置v-model:columns)<br>
          * **不要设置**列minWidth，**必须**设置width<br>

package/src/StkTable/style.less

@@ -91,7 +91,7 @@
     }
 
     &.headless {
-        &.border {
+        &.bordered {
             border-top: 1px solid var(--border-color);
             background-image: var(--bg-border-right), var(--bg-border-bottom);
         }
@@ -112,7 +112,7 @@
         }
     }
 
-    &.border {
+    &.bordered {
         /** 
         * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
         * - box-shadow inset 方案不生效，且占用属性。
@@ -134,18 +134,18 @@
         }
     }
 
-    &.border-h {
+    &.bordered-h {
         border-left: none;
         --bg-border-right: linear-gradient(transparent, transparent);
         --bg-border-left: linear-gradient(transparent, transparent);
     }
 
-    &.border-v {
+    &.bordered-v {
         --bg-border-bottom: linear-gradient(transparent, transparent);
         --bg-border-top: linear-gradient(transparent, transparent);
     }
 
-    &.border-body-v {
+    &.bordered-body-v {
         tbody {
             --bg-border-bottom: linear-gradient(transparent, transparent);
         }
@@ -378,13 +378,12 @@
 
     .fixed-cell {
         background-color: inherit;
-        /* 防止横向滚动后透明*/
     }
 
     .highlight-cell {
         animation: stk-table-dim var(--highlight-duration);
         animation-timing-function: var(--highlight-timing-function);
-        /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
     }
 
     .seq-column {

package/src/StkTable/useTree.ts

@@ -124,7 +124,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
     function expandNode(row: DT, level: number) {
         let result: DT[] = [];
         row.children &&
-            row.children.forEach(child => {
+            row.children.forEach((child: DT) => {
                 result.push(child);
                 const childLv = level + 1;
                 if (child.__T_EXPANDED__ && child.children) {