stk-table-vue 1.0.3 → 1.0.4

package/README.md

@@ -12,13 +12,26 @@
     </p>
 </p>
 
-Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
-
-Smooth performance with tens of thousands of rows
-
-Used for real-time data display, with data highlighting and dynamic effects.
-
-Support Vue3 and Vue2.7
+Stk Table Vue(Sticky Table) is a high-performance virtual scrolling table component based on Vue 3 / Vue 2.7.
+
+Smooth performance with tens of thousands of rows. Designed for real-time data display with built-in highlighting and animation effects.
+
+- Vue 3 & Vue 2.7 support
+- Virtual scrolling (X & Y axis)
+- CSS `sticky` based fixed columns & fixed header
+- Multi-level header with horizontal virtual scroll
+- Tree table & expandable rows
+- Area selection with keyboard navigation
+- Cell highlighting with Animation API
+- Built-in custom cells: Filter, Editable, Checkbox, Number, Change
+- Column resize, header drag, row drag
+- Merge cells (virtual mode supported)
+- Custom scrollbar
+- Sortable & filterable
+- Theme support (dark / light)
+- CSS variables for easy customization
+- Based on native `<table>` element
+- Zero third-party runtime dependencies
 
 
 ## Documentation
@@ -172,5 +185,5 @@ const dataSource = [
 Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
 
 
-## Other
-* `$*$`
+## License
+[MIT](LICENSE)

package/lib/{Dropdown-gzfyZN4Y.js → Dropdown-D7PIq_F7.js}

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.2
+ * version: v1.0.4
  * 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-CoLDxW4i.js";
+import { t as StkTable_default } from "./StkTable-DuT_ezDm.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-CoLDxW4i.js → StkTable-DuT_ezDm.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.2
+ * version: v1.0.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -2170,7 +2170,7 @@ function useRowExpand(emits, dataSourceCopy, rowKeyGen, onDataSourceChange) {
 	*/
 	function setRowExpand(rowKeyOrRow, expand, data) {
 		let rowKey;
-		if (typeof rowKeyOrRow === "string") rowKey = rowKeyOrRow;
+		if (typeof rowKeyOrRow === "string" || typeof rowKeyOrRow === "number") rowKey = rowKeyOrRow;
 		else rowKey = rowKeyGen(rowKeyOrRow);
 		const tempData = dataSourceCopy.value.slice();
 		const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
@@ -2929,6 +2929,8 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange) {
 	* @param row rowKey or row
 	* @param option
 	* @param option.expand expand or collapse
+	* @param option.all expand all descendants
+	* @param option.level expand to the nth level
 	* @param option.silent if set true, not emit `toggle-tree-expand`, default:false
 	*/
 	function privateSetTreeExpand(row, option) {
@@ -2937,7 +2939,7 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange) {
 		for (let i = 0; i < rowKeyOrRowArr.length; i++) {
 			const rowKeyOrRow = rowKeyOrRowArr[i];
 			let rowKey;
-			if (typeof rowKeyOrRow === "string") rowKey = rowKeyOrRow;
+			if (typeof rowKeyOrRow === "string" || typeof rowKeyOrRow === "number") rowKey = rowKeyOrRow;
 			else rowKey = rowKeyGen(rowKeyOrRow);
 			const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
 			if (index === -1) {
@@ -2946,12 +2948,22 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange) {
 			}
 			const row = tempData[index];
 			const level = row.__T_LV__ || 0;
+			const wasExpanded = Boolean(row.__T_EXP__);
 			let expanded = option === null || option === void 0 ? void 0 : option.expand;
 			if (expanded === void 0) expanded = !row.__T_EXP__;
-			if (expanded) {
+			if (option.all || option.level !== void 0) {
+				const targetLevel = option.all ? Infinity : option.level || 0;
+				setDescendantsToLevel(row, level + 1, targetLevel, expanded);
+			}
+			if (expanded) if (wasExpanded) {
+				const deleteCount = foldNode(index, tempData, level);
 				const children = expandNode(row, level);
-				tempData.splice(index + 1, 0, ...children);
+				tempData.splice(index + 1, deleteCount, ...children);
 			} else {
+				const children = expandNode(row, level);
+				tempData.splice(index + 1, 0, ...children);
+			}
+			else {
 				const deleteCount = foldNode(index, tempData, level);
 				tempData.splice(index + 1, deleteCount);
 			}
@@ -3006,6 +3018,17 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange) {
 		isFirstLoad = false;
 		return result;
 	}
+	/**
+	* 递归设置目标节点后代到指定层级的展开/折叠状态
+	* en: Recursively set expand/collapse state for descendants up to the target level
+	*/
+	function setDescendantsToLevel(row, currentLevel, targetLevel, expanded) {
+		if (!row.children || currentLevel > targetLevel) return;
+		for (const child of row.children) {
+			setNodeExpanded(child, expanded, currentLevel, row);
+			setDescendantsToLevel(child, currentLevel + 1, targetLevel, expanded);
+		}
+	}
 	function expandNode(row, level) {
 		let result = [];
 		row.children && row.children.forEach((child) => {

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

@@ -381,6 +381,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         children?: (PrivateRowDT & /*elided*/ any)[];
     }))[], option?: {
         expand?: boolean;
+        all?: boolean;
+        level?: number;
     }) => void;
     /**
      * 获取拖选选中的单元格信息

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

@@ -4,7 +4,26 @@ import { PrivateRowDT, RowKeyGen, UniqKey } from './types';
 type DT = PrivateRowDT & {
     children?: DT[];
 };
-export declare function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen: RowKeyGen, emits: any, onDataSourceChange: () => void): readonly [(row: DT, col: any) => void, (row: (UniqKey | DT) | (UniqKey | DT)[], option?: {
+type SetTreeExpandOption = {
+    /**
+     * 是否展开
+     * en: Whether to expand
+     * @default false
+     */
     expand?: boolean;
-}) => void, (data: DT[]) => DT[]];
+    /**
+     * 是否展开所有子节点
+     * en: Whether to expand all child nodes
+     * @default false
+     * @version 1.0.4
+     */
+    all?: boolean;
+    /**
+     * 展开到第几层
+     * en: Expand to the nth level
+     * @version 1.0.4
+     */
+    level?: number;
+};
+export declare function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen: RowKeyGen, emits: any, onDataSourceChange: () => void): readonly [(row: DT, col: any) => void, (row: (UniqKey | DT) | (UniqKey | DT)[], option?: SetTreeExpandOption) => void, (data: DT[]) => DT[]];
 export {};

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.2
+ * version: v1.0.4
  * 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-CoLDxW4i.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-DuT_ezDm.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-gzfyZN4Y.js").then((module) => module.default)).mount(div);
+		DropdownIns = createApp(await import("./Dropdown-D7PIq_F7.js").then((module) => module.default)).mount(div);
 	}
 	return DropdownIns;
 }

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.2
+ * version: v1.0.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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/useRowExpand.ts

@@ -1,4 +1,4 @@
-import { ShallowRef, nextTick } from 'vue';
+import { ShallowRef } from 'vue';
 import { EXPANDED_ROW_KEY_PREFIX } from './const';
 import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
 type DT = PrivateRowDT;
@@ -24,7 +24,7 @@ export function useRowExpand(emits: any, dataSourceCopy: ShallowRef<DT[]>, rowKe
      */
     function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean | null, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
         let rowKey: UniqKey;
-        if (typeof rowKeyOrRow === 'string') {
+        if (typeof rowKeyOrRow === 'string' || typeof rowKeyOrRow === 'number') {
             rowKey = rowKeyOrRow;
         } else {
             rowKey = rowKeyGen(rowKeyOrRow);

package/src/StkTable/useTree.ts

@@ -1,8 +1,30 @@
-import { ShallowRef, nextTick } from 'vue';
+import { ShallowRef } from 'vue';
 import { PrivateRowDT, RowKeyGen, TreeConfig, UniqKey } from './types';
 
 type DT = PrivateRowDT & { children?: DT[] };
 
+type SetTreeExpandOption = {
+    /**
+     * 是否展开
+     * en: Whether to expand
+     * @default false
+     */
+    expand?: boolean;
+    /**
+     * 是否展开所有子节点
+     * en: Whether to expand all child nodes
+     * @default false
+     * @version 1.0.4
+     */
+    all?: boolean;
+    /**
+     * 展开到第几层
+     * en: Expand to the nth level
+     * @version 1.0.4
+     */
+    level?: number;
+};
+
 export function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen: RowKeyGen, emits: any, onDataSourceChange: () => void) {
     const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel }: TreeConfig = props.treeConfig;
     /** It used to check if it is first load. To execute defaultExpandXXX */
@@ -18,16 +40,18 @@ export function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen:
      * @param row rowKey or row
      * @param option
      * @param option.expand expand or collapse
+     * @param option.all expand all descendants
+     * @param option.level expand to the nth level
      * @param option.silent if set true, not emit `toggle-tree-expand`, default:false
      */
-    function privateSetTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option: { expand?: boolean; col?: any; isClick: boolean }) {
+    function privateSetTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option: SetTreeExpandOption & { col?: any; isClick: boolean }) {
         const rowKeyOrRowArr: (UniqKey | DT)[] = Array.isArray(row) ? row : [row];
 
         const tempData = dataSourceCopy.value.slice();
         for (let i = 0; i < rowKeyOrRowArr.length; i++) {
             const rowKeyOrRow = rowKeyOrRowArr[i];
             let rowKey: UniqKey;
-            if (typeof rowKeyOrRow === 'string') {
+            if (typeof rowKeyOrRow === 'string' || typeof rowKeyOrRow === 'number') {
                 rowKey = rowKeyOrRow;
             } else {
                 rowKey = rowKeyGen(rowKeyOrRow);
@@ -40,13 +64,26 @@ export function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen:
 
             const row = tempData[index];
             const level = row.__T_LV__ || 0;
+            const wasExpanded = Boolean(row.__T_EXP__);
             let expanded = option?.expand;
             if (expanded === void 0) {
                 expanded = !row.__T_EXP__;
             }
+            if (option.all || option.level !== void 0) {
+                const targetLevel = option.all ? Infinity : option.level || 0;
+                setDescendantsToLevel(row, level + 1, targetLevel, expanded);
+            }
             if (expanded) {
-                const children = expandNode(row, level);
-                tempData.splice(index + 1, 0, ...children);
+                if (wasExpanded) {
+                    // already expanded, rebuild the flattened subtree so newly expanded
+                    // descendants are inserted into the visible data source
+                    const deleteCount = foldNode(index, tempData, level);
+                    const children = expandNode(row, level);
+                    tempData.splice(index + 1, deleteCount, ...children);
+                } else {
+                    const children = expandNode(row, level);
+                    tempData.splice(index + 1, 0, ...children);
+                }
             } else {
                 // delete all child nodes from i
                 const deleteCount = foldNode(index, tempData, level);
@@ -64,7 +101,7 @@ export function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen:
         onDataSourceChange();
     }
 
-    function setTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option?: { expand?: boolean }) {
+    function setTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option?: SetTreeExpandOption) {
         privateSetTreeExpand(row, { ...option, isClick: false });
     }
 
@@ -119,6 +156,18 @@ export function useTree(props: any, dataSourceCopy: ShallowRef<DT[]>, rowKeyGen:
         return result;
     }
 
+    /**
+     * 递归设置目标节点后代到指定层级的展开/折叠状态
+     * en: Recursively set expand/collapse state for descendants up to the target level
+     */
+    function setDescendantsToLevel(row: DT, currentLevel: number, targetLevel: number, expanded: boolean) {
+        if (!row.children || currentLevel > targetLevel) return;
+        for (const child of row.children) {
+            setNodeExpanded(child, expanded, currentLevel, row);
+            setDescendantsToLevel(child, currentLevel + 1, targetLevel, expanded);
+        }
+    }
+
     function expandNode(row: DT, level: number) {
         let result: DT[] = [];
         row.children &&