stk-table-vue 1.0.1 → 1.0.2

package/README.md

@@ -24,6 +24,8 @@ Support Vue3 and Vue2.7
 ## Documentation
 ### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
 ### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
+### [Stk Table Svelte Official](https://ja-plus.github.io/stk-table-svelte/)
+### [Stk Table Solid Official](https://ja-plus.github.io/stk-table-solid/)
 
 
 ## Repo: 

package/lib/{Dropdown-wEI6qpCx.js → Dropdown-iW-rY3I6.js}

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { t as StkTable_default } from "./StkTable-BK4VNsvG.js";
+import { t as StkTable_default } from "./StkTable-Deyo4iqb.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
 var DROPDOWN_DEFAULT_WIDTH = 300;

package/lib/{StkTable-BK4VNsvG.js → StkTable-Deyo4iqb.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -1312,11 +1312,11 @@ var TagType = {
 /**
 * 窗口变化自动重置虚拟滚动
 * @param tableContainerRef
-* @param initVirtualScroll
+* @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
 * @param props
 * @param debounceMs
 */
-function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs) {
+function useAutoResize(tableContainerRef, onResize, props, debounceMs) {
 	let resizeObserver = null;
 	let isObserved = false;
 	watch(() => props.virtual, (v) => {
@@ -1361,7 +1361,7 @@ function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs)
 		if (debounceTime) window.clearTimeout(debounceTime);
 		debounceTime = window.setTimeout(() => {
 			if (props.autoResize) {
-				initVirtualScroll();
+				onResize();
 				if (typeof props.autoResize === "function") props.autoResize();
 			}
 			debounceTime = 0;
@@ -1519,11 +1519,17 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 	const fixedShadowCols = shallowRef([]);
 	/** 正在被固定的列 */
 	const fixedCols = shallowRef([]);
+	/**
+	* 需要自行绘制左边框的右固定列。
+	* 单元格的左边框由左侧相邻单元格的 border-right 提供，右固定列吸附遮挡内容后两者不再相邻，因此需要自行绘制。
+	*/
+	const fixedBorderLeftCols = shallowRef([]);
 	/** 固定列的class */
 	const fixedColClassMap = computed(() => {
 		const colMap = /* @__PURE__ */ new Map();
 		const fixedShadowColsValue = fixedShadowCols.value;
 		const fixedColsValue = fixedCols.value;
+		const fixedBorderLeftColsValue = fixedBorderLeftCols.value;
 		const colKeyFn = colKeyGen.value;
 		const fixedColShadow = props.fixedColShadow;
 		const headers = tableHeaders.value;
@@ -1540,6 +1546,7 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 					classList.push("fixed-cell--" + fixed);
 				}
 				if (showShadow) classList.push("fixed-cell--shadow");
+				if (fixed === "right" && fixedBorderLeftColsValue.includes(col)) classList.push("fixed-cell--border-left");
 				colMap.set(colKeyFn(col), classList);
 			}
 		}
@@ -1576,6 +1583,13 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 		for (let level = 0; level < len; level++) {
 			const row = tableHeadersForCalc.value[level];
 			/**
+			* 最右侧连续 fixed:right 列的起始下标。
+			* 这些列的固定偏移只由其右侧固定列宽度决定，不依赖中间列的声明宽度，
+			* 且 sticky/relative 在无横向溢出时偏移为0无副作用，因此无需判断滚动位置，始终固定。
+			*/
+			let rightSuffixStart = row.length;
+			while (rightSuffixStart > 0 && row[rightSuffixStart - 1].fixed === "right") rightSuffixStart--;
+			/**
 			* 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
 			*/
 			let left = 0;
@@ -1589,13 +1603,16 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 					leftShadowCol[level] = col;
 				}
 				left += getCalculatedColWidth(col);
-				if (isFixedRight && scrollLeft + clientWidth - left < position) {
-					fixedColsTemp.push(col);
-					if (!rightShadowCol[level]) rightShadowCol[level] = col;
+				if (isFixedRight) {
+					/** 是否需要固定。依赖列声明宽度累加，声明宽度与实际渲染宽度不一致时会失真 */
+					const needFix = scrollLeft + clientWidth - left < position;
+					if (i >= rightSuffixStart || needFix) fixedColsTemp.push(col);
+					if (needFix && !rightShadowCol[level]) rightShadowCol[level] = col;
 				}
 			}
 		}
 		if (props.fixedColShadow) fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean);
+		fixedBorderLeftCols.value = rightShadowCol.filter(Boolean);
 		fixedCols.value = fixedColsTemp;
 	}
 	return [
@@ -3897,7 +3914,6 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 		const getFixedColPosition = useGetFixedColPosition(tableHeadersForCalc, colKeyGen);
 		const getFixedStyle = useFixedStyle(props, isRelativeMode, getFixedColPosition, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight);
 		const [highlightSteps, setHighlightDimRow, setHighlightDimCell] = useHighlight(props, stkTableId, tableContainerRef);
-		if (props.autoResize) useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
 		function getRowIndex(row) {
 			const targetKey = rowKeyGen(row);
 			return dataSourceCopy.value.findIndex((item) => rowKeyGen(item) === targetKey);
@@ -3911,6 +3927,10 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 		useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig);
 		/** 固定列处理 */
 		const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableHeadersForCalc, tableContainerRef);
+		if (props.autoResize) useAutoResize(tableContainerRef, () => {
+			initVirtualScroll();
+			updateFixedShadow();
+		}, props, 200);
 		const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(props, emits, tableContainerRef, tableHeaderLast, colResizeIndicatorRef, colKeyGen, fixedCols, clearColWidthCache);
 		const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen, onDataSourceChange);
 		const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange);

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

@@ -3,8 +3,8 @@ import { Ref } from 'vue';
 /**
  * 窗口变化自动重置虚拟滚动
  * @param tableContainerRef
- * @param initVirtualScroll
+ * @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
  * @param props
  * @param debounceMs
  */
-export declare function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, initVirtualScroll: () => void, props: any, debounceMs: number): void;
+export declare function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, onResize: () => void, props: any, debounceMs: number): void;

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-BK4VNsvG.js";
+import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-Deyo4iqb.js";
 import { Fragment, computed, createApp, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, h, markRaw, nextTick, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, watch, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.ts
 var DropdownIns = null;
@@ -15,7 +15,7 @@ async function getDropdownIns() {
 		const div = document.createElement("div");
 		div.classList.add("stk-filter-dropdown-wrapper");
 		document.body.appendChild(div);
-		DropdownIns = createApp(await import("./Dropdown-wEI6qpCx.js").then((module) => module.default)).mount(div);
+		DropdownIns = createApp(await import("./Dropdown-iW-rY3I6.js").then((module) => module.default)).mount(div);
 	}
 	return DropdownIns;
 }

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -291,6 +291,13 @@
 .stk-table.bordered thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
+.stk-table.bordered th.fixed-cell--border-left,
+.stk-table.bordered td.fixed-cell--border-left{
+  background-image:var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+}
+.stk-table.bordered thead tr:first-child th.fixed-cell--border-left{
+  background-image:var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+}
 .stk-table.bordered-h{
   border-left:none;
   --bg-border-right:linear-gradient(transparent, transparent);
@@ -305,6 +312,7 @@
 }
 .stk-table.bordered-body-h tbody{
   --bg-border-right:linear-gradient(transparent, transparent);
+  --bg-border-left:linear-gradient(transparent, transparent);
 }
 .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "High performance 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

@@ -911,10 +911,6 @@ const getFixedStyle = useFixedStyle<DT>(props, isRelativeMode, getFixedColPositi
 
 const [highlightSteps, setHighlightDimRow, setHighlightDimCell] = useHighlight(props, stkTableId, tableContainerRef);
 
-if (props.autoResize) {
-    useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
-}
-
 function getRowIndex(row: DT): number {
     const targetKey = rowKeyGen(row);
     return dataSourceCopy.value.findIndex(item => rowKeyGen(item) === targetKey);
@@ -963,6 +959,19 @@ const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
     tableContainerRef,
 );
 
+if (props.autoResize) {
+    useAutoResize(
+        tableContainerRef,
+        () => {
+            initVirtualScroll();
+            // 容器宽度变化后，需重新计算固定列状态
+            updateFixedShadow();
+        },
+        props,
+        200,
+    );
+}
+
 const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
     props,
     emits,

package/src/StkTable/style.less

@@ -184,6 +184,19 @@
         thead tr:first-child th {
             background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
         }
+
+        /**
+        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
+        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
+        */
+        th.fixed-cell--border-left,
+        td.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
     }
 
     &.bordered-h {
@@ -206,6 +219,7 @@
     &.bordered-body-h {
         tbody {
             --bg-border-right: linear-gradient(transparent, transparent);
+            --bg-border-left: linear-gradient(transparent, transparent);
         }
     }
 

package/src/StkTable/useAutoResize.ts

@@ -3,11 +3,11 @@ import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 /**
  * 窗口变化自动重置虚拟滚动
  * @param tableContainerRef
- * @param initVirtualScroll
+ * @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
  * @param props
  * @param debounceMs
  */
-export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, initVirtualScroll: () => void, props: any, debounceMs: number) {
+export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, onResize: () => void, props: any, debounceMs: number) {
     let resizeObserver: ResizeObserver | null = null;
     let isObserved = false;
     watch(
@@ -76,7 +76,7 @@ export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, i
         }
         debounceTime = window.setTimeout(() => {
             if (props.autoResize) {
-                initVirtualScroll();
+                onResize();
                 if (typeof props.autoResize === 'function') {
                     props.autoResize();
                 }

package/src/StkTable/useFixedCol.ts

@@ -21,11 +21,18 @@ export function useFixedCol<DT extends Record<string, any>>(
     /** 正在被固定的列 */
     const fixedCols = shallowRef<StkTableColumn<DT>[]>([]);
 
+    /**
+     * 需要自行绘制左边框的右固定列。
+     * 单元格的左边框由左侧相邻单元格的 border-right 提供，右固定列吸附遮挡内容后两者不再相邻，因此需要自行绘制。
+     */
+    const fixedBorderLeftCols = shallowRef<StkTableColumn<DT>[]>([]);
+
     /** 固定列的class */
     const fixedColClassMap = computed(() => {
         const colMap = new Map();
         const fixedShadowColsValue = fixedShadowCols.value;
         const fixedColsValue = fixedCols.value;
+        const fixedBorderLeftColsValue = fixedBorderLeftCols.value;
         const colKeyFn = colKeyGen.value;
         const fixedColShadow = props.fixedColShadow;
         const headers = tableHeaders.value;
@@ -49,6 +56,9 @@ export function useFixedCol<DT extends Record<string, any>>(
                 if (showShadow) {
                     classList.push('fixed-cell--shadow');
                 }
+                if (fixed === 'right' && fixedBorderLeftColsValue.includes(col)) {
+                    classList.push('fixed-cell--border-left');
+                }
                 colMap.set(colKeyFn(col), classList);
             }
         }
@@ -104,6 +114,15 @@ export function useFixedCol<DT extends Record<string, any>>(
         const len = tableHeadersForCalc.value.length;
         for (let level = 0; level < len; level++) {
             const row = tableHeadersForCalc.value[level];
+            /**
+             * 最右侧连续 fixed:right 列的起始下标。
+             * 这些列的固定偏移只由其右侧固定列宽度决定，不依赖中间列的声明宽度，
+             * 且 sticky/relative 在无横向溢出时偏移为0无副作用，因此无需判断滚动位置，始终固定。
+             */
+            let rightSuffixStart = row.length;
+            while (rightSuffixStart > 0 && row[rightSuffixStart - 1].fixed === 'right') {
+                rightSuffixStart--;
+            }
             /**
              * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
              */
@@ -121,10 +140,14 @@ export function useFixedCol<DT extends Record<string, any>>(
 
                 left += getCalculatedColWidth(col);
 
-                if (isFixedRight && scrollLeft + clientWidth - left < position) {
-                    fixedColsTemp.push(col);
-                    // 右固定列阴影，只要第一列
-                    if (!rightShadowCol[level]) {
+                if (isFixedRight) {
+                    /** 是否需要固定。依赖列声明宽度累加，声明宽度与实际渲染宽度不一致时会失真 */
+                    const needFix = scrollLeft + clientWidth - left < position;
+                    if (i >= rightSuffixStart || needFix) {
+                        fixedColsTemp.push(col);
+                    }
+                    // 右固定列阴影，只要第一列。阴影仍按滚动位置判断，避免未遮挡时也显示阴影
+                    if (needFix && !rightShadowCol[level]) {
                         rightShadowCol[level] = col;
                     }
                 }
@@ -135,6 +158,9 @@ export function useFixedCol<DT extends Record<string, any>>(
             fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
         }
 
+        // rightShadowCol 是每层最靠左的、已遮挡内容的右固定列，正是需要绘制左边框的列
+        fixedBorderLeftCols.value = rightShadowCol.filter(Boolean) as StkTableColumn<DT>[];
+
         fixedCols.value = fixedColsTemp;
     }