ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/table/src/composables/useRsTableColumnLayout.js

@@ -0,0 +1,250 @@
+import { fixedCellStyle, parseColumnWidth, resolveColumnStyle, resolveFixedColumnStyles } from "../utils/table-utils.js";
+import { RS_TABLE_PREFIX_COL_WIDTH, measureRsTablePrefixWidth } from "./useRsTableColumnVirtual.js";
+import { computed } from "vue";
+//#region src/components/table/src/composables/useRsTableColumnLayout.ts
+/**
+* RsTable 列布局：拉满补宽、渲染列宽、fixed/overflow/前缀 lead 样式。
+*
+* 性能约定：
+* - `emptyFillExtras` 使用冻结空对象恒等，避免无补宽时 renderColumnWidths 复制整表
+* - 列 style Map 一次遍历构建，模板热路径按 key O(1) 取用
+*/
+function read(source) {
+	if (typeof source === "function") return source();
+	return source.value;
+}
+/** 无补宽时的共享空对象（恒等比较，避免无意义拷贝） */
+var EMPTY_FILL_EXTRAS = Object.freeze({});
+/**
+* 列布局与样式缓存。
+*/
+function useRsTableColumnLayout(options) {
+	const PREFIX = RS_TABLE_PREFIX_COL_WIDTH;
+	/** 前缀列总宽（不含 status；status 在部分合计里另加） */
+	function measurePrefixColumnWidth() {
+		return measureRsTablePrefixWidth({
+			showRowDragHandle: read(options.showRowDragHandle),
+			detailExpandable: read(options.detailExpandable),
+			showSelectColumn: read(options.showSelectColumn),
+			showEditGutterColumn: read(options.showEditGutterColumn),
+			showIndexColumn: read(options.showIndexColumn),
+			gutterWidth: read(options.resolvedGutterWidth),
+			indexWidth: read(options.resolvedIndexWidth)
+		});
+	}
+	/** resizable 且列宽稳定时，或拖拽会话中：表格内容最小宽度 = 各列宽度之和 */
+	const resizableTableWidth = computed(() => {
+		if (!read(options.resizable)) return void 0;
+		if (!read(options.resizePaintWidths) && read(options.columnLayout) === "auto" && !read(options.useStableColumnWidths)) return;
+		let sum = measurePrefixColumnWidth();
+		const widths = read(options.effectiveColumnWidths);
+		for (const col of read(options.displayColumns)) sum += widths[col.key] ?? parseColumnWidth(col.width ?? col.minWidth);
+		return `${sum}px`;
+	});
+	const useFixedColumnLayout = computed(() => read(options.useStableColumnWidths) || read(options.isColumnResizing));
+	/**
+	* 列总宽不足视口时，把剩余像素均分到数据列（前缀列不动）。
+	* 列虚拟开启时不做拉满，避免与横向切片打架。
+	*/
+	const columnFillExtras = computed(() => {
+		if (read(options.isColumnResizing)) return EMPTY_FILL_EXTRAS;
+		if (!useFixedColumnLayout.value) return EMPTY_FILL_EXTRAS;
+		if (read(options.virtualColumnsEnabled)) return EMPTY_FILL_EXTRAS;
+		const viewportW = read(options.measuredViewportWidth);
+		if (viewportW <= 0) return EMPTY_FILL_EXTRAS;
+		const cols = read(options.displayColumns);
+		if (cols.length === 0) return EMPTY_FILL_EXTRAS;
+		let sum = measurePrefixColumnWidth();
+		if (read(options.showRowStatusColumn)) sum += PREFIX.status;
+		const widths = read(options.effectiveColumnWidths);
+		for (const col of cols) sum += widths[col.key] ?? parseColumnWidth(col.width ?? col.minWidth);
+		const excess = Math.floor(viewportW - sum) - 1;
+		if (excess <= 0) return EMPTY_FILL_EXTRAS;
+		const extras = {};
+		const base = Math.floor(excess / cols.length);
+		let rem = excess - base * cols.length;
+		for (const col of cols) {
+			extras[col.key] = base + (rem > 0 ? 1 : 0);
+			if (rem > 0) rem -= 1;
+		}
+		return extras;
+	});
+	/** 渲染用列宽 = 持久化/拖拽列宽 + 拉满补宽；无补宽时直接返回 base 引用 */
+	const renderColumnWidths = computed(() => {
+		const extras = columnFillExtras.value;
+		const base = read(options.effectiveColumnWidths);
+		if (extras === EMPTY_FILL_EXTRAS) return base;
+		const next = { ...base };
+		for (const col of read(options.displayColumns)) {
+			const extra = extras[col.key];
+			if (!extra) continue;
+			const cur = next[col.key] ?? parseColumnWidth(col.width ?? col.minWidth);
+			next[col.key] = cur + extra;
+		}
+		return next;
+	});
+	const tableInlineStyle = computed(() => {
+		if (read(options.isColumnResizing)) return void 0;
+		if (read(options.resizable)) {
+			if (read(options.columnLayout) === "auto" && !read(options.useStableColumnWidths)) {
+				const minW = read(options.tableMinWidth);
+				return minW ? {
+					width: "100%",
+					minWidth: minW
+				} : { width: "100%" };
+			}
+			const width = resizableTableWidth.value;
+			if (!width) return void 0;
+			return {
+				width: "100%",
+				minWidth: read(options.tableMinWidth) ?? width
+			};
+		}
+		const minW = read(options.tableMinWidth);
+		return minW ? { minWidth: minW } : void 0;
+	});
+	function estimateRequiredTableWidth() {
+		let sum = measurePrefixColumnWidth();
+		if (read(options.showRowStatusColumn)) sum += PREFIX.status;
+		const widths = read(options.effectiveColumnWidths);
+		for (const col of read(options.displayColumns)) {
+			const stored = widths[col.key];
+			if (typeof stored === "number") {
+				sum += stored;
+				continue;
+			}
+			if (typeof col.width === "number") {
+				sum += col.width;
+				continue;
+			}
+			if (col.minWidth !== void 0) sum += typeof col.minWidth === "number" ? col.minWidth : parseColumnWidth(col.minWidth, 0);
+		}
+		return sum;
+	}
+	/** 仅当列宽确需超过容器时开启横向滚动 */
+	const overflowXEnabled = computed(() => {
+		if (read(options.virtualColumnsEnabled)) return true;
+		const scrollX = read(options.scrollX);
+		if (scrollX != null && scrollX !== "") return true;
+		const viewportW = read(options.measuredViewportWidth);
+		if (viewportW <= 0) return false;
+		if (useFixedColumnLayout.value) {
+			const raw = resizableTableWidth.value;
+			const sum = raw ? Number.parseInt(raw, 10) : estimateRequiredTableWidth();
+			return Number.isFinite(sum) && sum > viewportW;
+		}
+		return estimateRequiredTableWidth() > viewportW;
+	});
+	function resolvedDataColumnWidth(key, fallback) {
+		const stored = renderColumnWidths.value[key];
+		if (typeof stored === "number") return stored;
+		return parseColumnWidth(fallback);
+	}
+	const fixedColumnStyles = computed(() => resolveFixedColumnStyles(read(options.displayColumns), renderColumnWidths.value, {
+		selectable: read(options.showSelectColumn),
+		showIndex: read(options.showIndexColumn),
+		showEditGutter: read(options.showEditGutterColumn),
+		gutterWidth: read(options.resolvedGutterWidth),
+		indexWidth: read(options.resolvedIndexWidth),
+		expandable: read(options.detailExpandable),
+		rowDraggable: read(options.showRowDragHandle)
+	}));
+	/**
+	* 一次遍历同时构建 body/header 列样式 Map，避免两遍 resolveColumnStyle。
+	*/
+	const columnStyleMaps = computed(() => {
+		const body = /* @__PURE__ */ new Map();
+		const header = /* @__PURE__ */ new Map();
+		const widths = renderColumnWidths.value;
+		const fixed = fixedColumnStyles.value;
+		for (const col of read(options.displayColumns)) {
+			const base = resolveColumnStyle(col, widths) ?? {};
+			const bodyFixed = fixedCellStyle(fixed.get(col.key));
+			const headerFixed = fixedCellStyle(fixed.get(col.key), { header: true });
+			let bodyMerged;
+			let headerMerged;
+			if (bodyFixed) bodyMerged = {
+				...base,
+				...bodyFixed
+			};
+			else if (Object.keys(base).length) bodyMerged = base;
+			if (headerFixed) headerMerged = {
+				...base,
+				...headerFixed
+			};
+			else if (Object.keys(base).length) headerMerged = base;
+			body.set(col.key, bodyMerged);
+			header.set(col.key, headerMerged);
+		}
+		return {
+			body,
+			header
+		};
+	});
+	return {
+		EMPTY_FILL_EXTRAS,
+		measurePrefixColumnWidth,
+		resizableTableWidth,
+		useFixedColumnLayout,
+		columnFillExtras,
+		renderColumnWidths,
+		tableInlineStyle,
+		overflowXEnabled,
+		resolvedDataColumnWidth,
+		fixedColumnStyles,
+		columnStyleMap: computed(() => columnStyleMaps.value.body),
+		columnHeaderStyleMap: computed(() => columnStyleMaps.value.header),
+		columnTdClassMap: computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const col of read(options.displayColumns)) {
+				const classes = [`rs-table__cell--${col.align ?? "left"}`];
+				if (col.ellipsis) classes.push("rs-table__td--ellipsis");
+				if (col.fixed) classes.push("rs-table__cell--fixed");
+				map.set(col.key, classes);
+			}
+			return map;
+		}),
+		dragLeadStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: 0
+		}) ?? {}),
+		expandLeadStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.dragColumnOffset)
+		}) ?? {}),
+		selectLeadStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.expandColumnOffset)
+		}) ?? {}),
+		indexLeadStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.selectColumnOffset)
+		}) ?? {}),
+		gutterLeadStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.selectColumnOffset)
+		}) ?? {}),
+		dragLeadHeaderStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: 0
+		}, { header: true }) ?? {}),
+		expandLeadHeaderStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.dragColumnOffset)
+		}, { header: true }) ?? {}),
+		selectLeadHeaderStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.expandColumnOffset)
+		}, { header: true }) ?? {}),
+		indexLeadHeaderStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.selectColumnOffset)
+		}, { header: true }) ?? {}),
+		gutterLeadHeaderStyle: computed(() => fixedCellStyle({
+			fixed: "left",
+			left: read(options.selectColumnOffset)
+		}, { header: true }) ?? {})
+	};
+}
+//#endregion
+export { useRsTableColumnLayout };

package/dist/components/table/src/composables/useRsTableColumnResize.d.ts

@@ -0,0 +1,35 @@
+/**
+ * RsTable 列宽拖拽：mousemove 走 DOM 直写，避免整表 Vue 重渲。
+ *
+ * 性能关键：
+ * - 会话开始时缓存 col/th 元素与基准总宽，RAF 内不再 querySelector 全表
+ * - 拖拽中只更新变化列宽度 + table 总宽（O(1)），不重写其它列
+ * - activeDragWidths 为非响应式 plain object，禁止写入 reactive
+ */
+import { type ComputedRef, type Ref } from 'vue';
+import { type RsTableColumn, type RsTableRowData } from '../utils/table-utils';
+export interface UseRsTableColumnResizeOptions<T extends RsTableRowData> {
+    resizable: ComputedRef<boolean> | (() => boolean);
+    minColumnWidth: ComputedRef<number | undefined> | (() => number | undefined);
+    maxColumnWidth: ComputedRef<number | undefined> | (() => number | undefined);
+    displayColumns: ComputedRef<RsTableColumn<T>[]> | (() => RsTableColumn<T>[]);
+    resolvedColumnWidths: {
+        get: () => Record<string, number>;
+        set: (value: Record<string, number>) => void;
+    };
+    /** 前缀列总宽（px），用于 DOM 直写时的 table 总宽 */
+    measurePrefixColumnWidth: () => number;
+    tableMinWidth: ComputedRef<string | undefined> | (() => string | undefined);
+    onColumnResize: (key: string, width: number) => void;
+}
+/**
+ * 列宽拖拽会话。
+ */
+export declare function useRsTableColumnResize<T extends RsTableRowData>(options: UseRsTableColumnResizeOptions<T>): {
+    tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+    isColumnResizing: Ref<boolean, boolean>;
+    resizePaintWidths: Ref<Record<string, number> | null, Record<string, number> | null>;
+    onResizeStart: (key: string, event: MouseEvent) => void;
+    stopResize: () => void;
+};
+export type RsTableColumnResizeApi = ReturnType<typeof useRsTableColumnResize>;

package/dist/components/table/src/composables/useRsTableColumnResize.js

@@ -0,0 +1,182 @@
+import { clampColumnWidth, parseColumnWidth } from "../utils/table-utils.js";
+import { nextTick, onUnmounted, ref } from "vue";
+//#region src/components/table/src/composables/useRsTableColumnResize.ts
+/**
+* RsTable 列宽拖拽：mousemove 走 DOM 直写，避免整表 Vue 重渲。
+*
+* 性能关键：
+* - 会话开始时缓存 col/th 元素与基准总宽，RAF 内不再 querySelector 全表
+* - 拖拽中只更新变化列宽度 + table 总宽（O(1)），不重写其它列
+* - activeDragWidths 为非响应式 plain object，禁止写入 reactive
+*/
+function read(source) {
+	if (typeof source === "function") return source();
+	return source.value;
+}
+/**
+* 列宽拖拽会话。
+*/
+function useRsTableColumnResize(options) {
+	const tableRef = ref(null);
+	const isColumnResizing = ref(false);
+	/** 拖拽会话中的列宽快照（仅首帧写入一次，供 colgroup 初始渲染） */
+	const resizePaintWidths = ref(null);
+	let session = null;
+	/** 非响应式：mousemove 高频更新不得触发 Vue */
+	let activeDragWidths = null;
+	let resizeRafId = 0;
+	let latestResizeClientX = 0;
+	let resizeMoved = false;
+	function cacheColumnElements(table) {
+		const colEls = /* @__PURE__ */ new Map();
+		const thEls = /* @__PURE__ */ new Map();
+		for (const col of table.querySelectorAll("colgroup col[data-col-key]")) {
+			const key = col.dataset.colKey;
+			if (key) colEls.set(key, col);
+		}
+		for (const th of table.querySelectorAll("thead th[data-col-key]")) {
+			const key = th.dataset.colKey;
+			if (key) thEls.set(key, th);
+		}
+		return {
+			colEls,
+			thEls
+		};
+	}
+	/** 会话开始：一次性写满所有列宽到 DOM */
+	function paintAllColumnWidths(table, widths, cache) {
+		let sum = options.measurePrefixColumnWidth();
+		for (const column of read(options.displayColumns)) {
+			const width = widths[column.key] ?? parseColumnWidth(column.width ?? column.minWidth);
+			const col = cache.colEls.get(column.key);
+			if (col) col.style.width = `${width}px`;
+			const th = cache.thEls.get(column.key);
+			if (th) th.style.width = `${width}px`;
+			sum += width;
+		}
+		table.style.width = `${sum}px`;
+		const minWidth = read(options.tableMinWidth);
+		if (minWidth) table.style.minWidth = minWidth;
+		return sum;
+	}
+	/** 确保 colgroup 元素已缓存；fixed 布局首帧可能尚未挂上，失败则返回 false */
+	function ensureSessionDomCache() {
+		if (!session || !tableRef.value || !activeDragWidths) return false;
+		if (session.colEls.size > 0) return true;
+		const cache = cacheColumnElements(tableRef.value);
+		if (cache.colEls.size === 0) return false;
+		session.colEls = cache.colEls;
+		session.thEls = cache.thEls;
+		session.baseTableWidth = paintAllColumnWidths(tableRef.value, activeDragWidths, cache);
+		return true;
+	}
+	/** RAF 热路径：只改变化列 + 总宽；缓存未就绪时先全量写一次 */
+	function paintChangedColumnWidth(width) {
+		if (!session || !tableRef.value) return;
+		if (!ensureSessionDomCache()) return;
+		const { key, colEls, thEls, baseTableWidth, startWidth } = session;
+		const col = colEls.get(key);
+		if (col) col.style.width = `${width}px`;
+		const th = thEls.get(key);
+		if (th) th.style.width = `${width}px`;
+		tableRef.value.style.width = `${baseTableWidth - startWidth + width}px`;
+	}
+	function beginResizeSession() {
+		if (!session || isColumnResizing.value || !tableRef.value) return;
+		isColumnResizing.value = true;
+		activeDragWidths = { ...session.domSnapshot };
+		resizePaintWidths.value = { ...activeDragWidths };
+		if (!ensureSessionDomCache()) nextTick(() => {
+			ensureSessionDomCache();
+		});
+	}
+	function onResizeMove(event) {
+		if (!session) return;
+		latestResizeClientX = event.clientX;
+		if (!resizeMoved && Math.abs(latestResizeClientX - session.startX) < 1) return;
+		if (!resizeMoved) {
+			resizeMoved = true;
+			beginResizeSession();
+		}
+		if (resizeRafId !== 0) return;
+		resizeRafId = requestAnimationFrame(() => {
+			resizeRafId = 0;
+			if (!session || !activeDragWidths) return;
+			const nextWidth = clampColumnWidth(session.startWidth + latestResizeClientX - session.startX, read(options.minColumnWidth), read(options.maxColumnWidth));
+			if (nextWidth === session.currentWidth) return;
+			session.currentWidth = nextWidth;
+			activeDragWidths[session.key] = nextWidth;
+			paintChangedColumnWidth(nextWidth);
+		});
+	}
+	function stopResize() {
+		if (session && resizeMoved) {
+			const finalWidth = clampColumnWidth(session.startWidth + latestResizeClientX - session.startX, read(options.minColumnWidth), read(options.maxColumnWidth));
+			if (finalWidth !== session.startWidth) {
+				const merged = {
+					...session.domSnapshot,
+					[session.key]: finalWidth
+				};
+				options.resolvedColumnWidths.set(merged);
+				options.onColumnResize(session.key, finalWidth);
+			}
+		}
+		if (tableRef.value) {
+			tableRef.value.style.width = "";
+			tableRef.value.style.minWidth = "";
+			for (const th of tableRef.value.querySelectorAll("thead th[data-col-key]")) th.style.width = "";
+		}
+		isColumnResizing.value = false;
+		resizePaintWidths.value = null;
+		activeDragWidths = null;
+		session = null;
+		resizeMoved = false;
+		if (resizeRafId !== 0) {
+			cancelAnimationFrame(resizeRafId);
+			resizeRafId = 0;
+		}
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+		document.removeEventListener("mousemove", onResizeMove);
+		document.removeEventListener("mouseup", stopResize, { capture: true });
+	}
+	function onResizeStart(key, event) {
+		if (!read(options.resizable)) return;
+		const thEl = event.currentTarget.closest("th");
+		if (!thEl) return;
+		const tableEl = thEl.closest("table");
+		if (!tableEl) return;
+		const dataThs = Array.from(tableEl.querySelectorAll("thead th[data-col-key]"));
+		const domSnapshot = {};
+		for (const th of dataThs) domSnapshot[th.dataset.colKey] = th.offsetWidth;
+		const startWidth = domSnapshot[key] ?? thEl.offsetWidth;
+		latestResizeClientX = event.clientX;
+		resizeMoved = false;
+		session = {
+			key,
+			startX: event.clientX,
+			startWidth,
+			currentWidth: startWidth,
+			domSnapshot,
+			baseTableWidth: 0,
+			colEls: /* @__PURE__ */ new Map(),
+			thEls: /* @__PURE__ */ new Map()
+		};
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+		document.addEventListener("mousemove", onResizeMove);
+		document.addEventListener("mouseup", stopResize, { capture: true });
+	}
+	onUnmounted(() => {
+		stopResize();
+	});
+	return {
+		tableRef,
+		isColumnResizing,
+		resizePaintWidths,
+		onResizeStart,
+		stopResize
+	};
+}
+//#endregion
+export { useRsTableColumnResize };

package/dist/components/table/src/composables/useRsTableColumnVirtual.d.ts

@@ -0,0 +1,76 @@
+/**
+ * RsTable 横向列虚拟：冻结列始终渲染，中间 fluid 列按 scrollLeft 切片。
+ *
+ * 列宽拖拽 DOM 直写仍在 RsTable；本 composable 只消费已算好的列宽 getter。
+ */
+import { type ComputedRef, type Ref } from 'vue';
+import { type RsTableColumn, type RsTableRowData } from '../utils/table-utils';
+/** ComputedRef / Ref / getter 均可（抽离后 RsTable 常直接传入 ref） */
+type Source<T> = ComputedRef<T> | Ref<T> | (() => T);
+/** 前缀列固定宽度（与 CSS / resizable 合计一致） */
+export declare const RS_TABLE_PREFIX_COL_WIDTH: {
+    readonly drag: 40;
+    readonly expand: 40;
+    readonly select: 40;
+    readonly status: 52;
+};
+/**
+ * 计算前缀列总宽（拖拽/展开/选择/序号或 gutter）。
+ * 供列布局合计与列宽拖拽 DOM 直写共用，避免两处公式漂移。
+ */
+export declare function measureRsTablePrefixWidth(flags: {
+    showRowDragHandle?: boolean;
+    detailExpandable?: boolean;
+    showSelectColumn?: boolean;
+    showEditGutterColumn?: boolean;
+    showIndexColumn?: boolean;
+    gutterWidth?: number;
+    indexWidth?: number;
+}): number;
+export interface UseRsTableColumnVirtualOptions<T extends RsTableRowData> {
+    displayColumns: Source<RsTableColumn<T>[]>;
+    /** virtualColumns prop：true / false / 'auto' */
+    virtualColumns: Source<boolean | 'auto' | undefined>;
+    virtualColumnsAutoThreshold: Source<number | undefined>;
+    virtualColumnOverscan: Source<number | undefined>;
+    /** 列宽拖拽中强制关闭列虚拟，避免切片与 DOM 直写打架 */
+    isColumnResizing: Source<boolean>;
+    scrollLeft: Source<number>;
+    measuredViewportWidth: Source<number>;
+    columnWidths: Source<Record<string, number>>;
+    showRowDragHandle: Source<boolean>;
+    detailExpandable: Source<boolean>;
+    showSelectColumn: Source<boolean>;
+    showEditGutterColumn: Source<boolean>;
+    showIndexColumn: Source<boolean>;
+    showRowStatusColumn: Source<boolean>;
+    resolvedGutterWidth: Source<number>;
+    resolvedIndexWidth: Source<number>;
+}
+/**
+ * 横向列虚拟切片状态。
+ *
+ * @returns left/right/fluid 列分组、virtualColumnsEnabled、visibleDataColumns、左右 pad
+ */
+export declare function useRsTableColumnVirtual<T extends RsTableRowData>(options: UseRsTableColumnVirtualOptions<T>): {
+    leftFixedDataColumns: ComputedRef<RsTableColumn<T>[]>;
+    rightFixedDataColumns: ComputedRef<RsTableColumn<T>[]>;
+    fluidDataColumns: ComputedRef<RsTableColumn<T>[]>;
+    dataColumnWidth: (column: RsTableColumn<T>) => number;
+    virtualColumnsEnabled: ComputedRef<boolean>;
+    fluidLeadingOffset: ComputedRef<number>;
+    columnVirtualSlice: ComputedRef<{
+        columns: RsTableColumn<T>[];
+        paddingLeft: number;
+        paddingRight: number;
+        startIndex: number;
+        endIndex: number;
+        fluidCount: number;
+    }>;
+    visibleDataColumns: ComputedRef<RsTableColumn<T>[]>;
+    columnPadLeft: ComputedRef<number>;
+    columnPadRight: ComputedRef<number>;
+};
+/** useRsTableColumnVirtual 返回值类型 */
+export type RsTableColumnVirtualApi<T extends RsTableRowData> = ReturnType<typeof useRsTableColumnVirtual<T>>;
+export {};

package/dist/components/table/src/composables/useRsTableColumnVirtual.js

@@ -0,0 +1,116 @@
+import { resolveColumnPixelWidth, sliceVirtualColumns } from "../utils/table-utils.js";
+import { computed } from "vue";
+//#region src/components/table/src/composables/useRsTableColumnVirtual.ts
+/**
+* RsTable 横向列虚拟：冻结列始终渲染，中间 fluid 列按 scrollLeft 切片。
+*
+* 列宽拖拽 DOM 直写仍在 RsTable；本 composable 只消费已算好的列宽 getter。
+*/
+/** 统一读取 ComputedRef / Ref / getter */
+function read(source) {
+	if (typeof source === "function") return source();
+	return source.value;
+}
+/** 前缀列固定宽度（与 CSS / resizable 合计一致） */
+var RS_TABLE_PREFIX_COL_WIDTH = {
+	drag: 40,
+	expand: 40,
+	select: 40,
+	status: 52
+};
+/**
+* 计算前缀列总宽（拖拽/展开/选择/序号或 gutter）。
+* 供列布局合计与列宽拖拽 DOM 直写共用，避免两处公式漂移。
+*/
+function measureRsTablePrefixWidth(flags) {
+	let sum = 0;
+	if (flags.showRowDragHandle) sum += RS_TABLE_PREFIX_COL_WIDTH.drag;
+	if (flags.detailExpandable) sum += RS_TABLE_PREFIX_COL_WIDTH.expand;
+	if (flags.showSelectColumn) sum += RS_TABLE_PREFIX_COL_WIDTH.select;
+	if (flags.showEditGutterColumn) sum += flags.gutterWidth ?? 0;
+	else if (flags.showIndexColumn) sum += flags.indexWidth ?? 0;
+	return sum;
+}
+/**
+* 横向列虚拟切片状态。
+*
+* @returns left/right/fluid 列分组、virtualColumnsEnabled、visibleDataColumns、左右 pad
+*/
+function useRsTableColumnVirtual(options) {
+	const leftFixedDataColumns = computed(() => read(options.displayColumns).filter((c) => c.fixed === "left"));
+	const rightFixedDataColumns = computed(() => read(options.displayColumns).filter((c) => c.fixed === "right"));
+	const fluidDataColumns = computed(() => read(options.displayColumns).filter((c) => !c.fixed));
+	const dataColumnWidth = (column) => resolveColumnPixelWidth(column, read(options.columnWidths));
+	/**
+	* 启用规则：
+	* - false → 关
+	* - 列宽拖拽中 → 关
+	* - true → fluid 列非空即开
+	* - auto → fluid 列数 >= threshold
+	*/
+	const virtualColumnsEnabled = computed(() => {
+		if (read(options.virtualColumns) === false) return false;
+		if (read(options.isColumnResizing)) return false;
+		if (read(options.virtualColumns) === true) return fluidDataColumns.value.length > 0;
+		const threshold = read(options.virtualColumnsAutoThreshold) ?? 0;
+		return threshold > 0 && fluidDataColumns.value.length >= threshold;
+	});
+	/** 左侧前缀 + 左冻结列总宽，用于把 scrollLeft 映射到 fluid 区 */
+	const fluidLeadingOffset = computed(() => {
+		let sum = 0;
+		if (read(options.showRowDragHandle)) sum += RS_TABLE_PREFIX_COL_WIDTH.drag;
+		if (read(options.detailExpandable)) sum += RS_TABLE_PREFIX_COL_WIDTH.expand;
+		if (read(options.showSelectColumn)) sum += RS_TABLE_PREFIX_COL_WIDTH.select;
+		if (read(options.showEditGutterColumn)) sum += read(options.resolvedGutterWidth);
+		else if (read(options.showIndexColumn)) sum += read(options.resolvedIndexWidth);
+		if (read(options.showRowStatusColumn)) sum += RS_TABLE_PREFIX_COL_WIDTH.status;
+		for (const col of leftFixedDataColumns.value) sum += dataColumnWidth(col);
+		return sum;
+	});
+	const columnVirtualSlice = computed(() => {
+		const fluidCount = fluidDataColumns.value.length;
+		if (!virtualColumnsEnabled.value) return {
+			columns: read(options.displayColumns),
+			paddingLeft: 0,
+			paddingRight: 0,
+			startIndex: 0,
+			endIndex: fluidCount,
+			fluidCount
+		};
+		const viewport = Math.max(read(options.measuredViewportWidth) || 320, 120);
+		const midScroll = Math.max(0, read(options.scrollLeft) - fluidLeadingOffset.value);
+		const midViewport = Math.max(120, viewport - Math.min(viewport - 40, fluidLeadingOffset.value));
+		const sliced = sliceVirtualColumns(fluidDataColumns.value, {
+			scrollLeft: midScroll,
+			viewportWidth: midViewport,
+			getWidth: dataColumnWidth,
+			overscan: read(options.virtualColumnOverscan) ?? 2
+		});
+		return {
+			columns: [
+				...leftFixedDataColumns.value,
+				...sliced.columns,
+				...rightFixedDataColumns.value
+			],
+			paddingLeft: sliced.paddingLeft,
+			paddingRight: sliced.paddingRight,
+			startIndex: sliced.startIndex,
+			endIndex: sliced.endIndex,
+			fluidCount
+		};
+	});
+	return {
+		leftFixedDataColumns,
+		rightFixedDataColumns,
+		fluidDataColumns,
+		dataColumnWidth,
+		virtualColumnsEnabled,
+		fluidLeadingOffset,
+		columnVirtualSlice,
+		visibleDataColumns: computed(() => columnVirtualSlice.value.columns),
+		columnPadLeft: computed(() => columnVirtualSlice.value.paddingLeft),
+		columnPadRight: computed(() => columnVirtualSlice.value.paddingRight)
+	};
+}
+//#endregion
+export { RS_TABLE_PREFIX_COL_WIDTH, measureRsTablePrefixWidth, useRsTableColumnVirtual };