niuma-ui 1.3.9 → 2.0.0

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

@@ -0,0 +1,83 @@
+import { buildVirtualHeightModel, getTableTreeChildren, hasTableTreeChildren, resolveTableTreeRowKey, sliceVirtualHeightModel } from "../utils/table-utils.js";
+import { computed } from "vue";
+//#region src/components/table/src/composables/useRsTableVirtual.ts
+/**
+* RsTable 行虚拟滚动：启用判定、高度前缀和、可视窗口切片。
+*
+* 横向列虚拟见 useRsTableColumnVirtual；滚动/视口见 useRsTableScrollLayout。
+* 本 composable 只消费已算好的 `tableEntries`，不参与 entries 构建，避免循环依赖。
+*/
+/** 统一读取 ComputedRef / Ref / getter */
+function read(source) {
+	if (typeof source === "function") return source();
+	return source.value;
+}
+/**
+* 树表展开态下的可见行粗算，供 virtual 自动阈值使用。
+* 仅统计当前 expandedKeys 下可见节点，不做完整 entry 构建。
+*
+* @param rows 根节点列表
+* @param expandedKeys 已展开行 key 集合
+* @param options 树字段与 rowKey 约定
+* @returns 可见行数量（含未展开的叶子占位行本身）
+*/
+function flattenVisibleCountRough(rows, expandedKeys, options) {
+	let count = 0;
+	const walk = (items, parentKey) => {
+		for (let i = 0; i < items.length; i += 1) {
+			const row = items[i];
+			count += 1;
+			const key = resolveTableTreeRowKey(row, i, parentKey, options.rowKey);
+			if (hasTableTreeChildren(row, options) && expandedKeys.has(key)) walk(getTableTreeChildren(row, options.childrenField), key);
+		}
+	};
+	walk(rows, null);
+	return count;
+}
+/**
+* 行虚拟滚动状态。
+*
+* @returns
+* - `virtualScrollEnabled`：是否启用行虚拟
+* - `virtualHeightModel`：前缀高度模型（总高 / 定位）
+* - `virtualSlice`：当前窗口 entries + 上下 pad
+* - `visibleEntries`：切片后的 entries（模板渲染用）
+*/
+function useRsTableVirtual(options) {
+	/**
+	* 启用规则：
+	* 1. virtual === true → 开
+	* 2. infinite 且未关闭 virtualOnInfinite → 开
+	* 3. virtual === false → 关
+	* 4. 否则 auto：fill 且行数 >= threshold
+	*/
+	const virtualScrollEnabled = computed(() => {
+		if (read(options.virtual) === true) return true;
+		if (read(options.infinite) && read(options.virtualOnInfinite) !== false) return true;
+		if (read(options.virtual) === false) return false;
+		const threshold = read(options.virtualAutoThreshold) ?? 0;
+		const rowCount = read(options.treeMode) ? read(options.tableEntriesForThreshold) : read(options.dataLength);
+		return Boolean(read(options.fill) && threshold > 0 && rowCount >= threshold);
+	});
+	/** 全量 entries 的高度前缀和模型 */
+	const virtualHeightModel = computed(() => buildVirtualHeightModel(read(options.tableEntries), read(options.fixedRowHeight), void 0, read(options.expandRowHeight) ?? void 0));
+	/**
+	* 可视切片。未启用虚拟时返回全部 entries，pad 为 0。
+	*/
+	const virtualSlice = computed(() => {
+		if (!virtualScrollEnabled.value) return {
+			entries: read(options.tableEntries),
+			paddingTop: 0,
+			paddingBottom: 0
+		};
+		return sliceVirtualHeightModel(virtualHeightModel.value, options.scrollTop.value, read(options.viewportHeight), read(options.fixedRowHeight), read(options.overscan));
+	});
+	return {
+		virtualScrollEnabled,
+		virtualHeightModel,
+		virtualSlice,
+		visibleEntries: computed(() => virtualSlice.value.entries)
+	};
+}
+//#endregion
+export { flattenVisibleCountRough, useRsTableVirtual };

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

@@ -0,0 +1,177 @@
+import { nextTick, onUnmounted, ref } from "vue";
+//#region src/components/table/src/composables/useTableCellTooltip.ts
+var RS_TABLE_TIP_ATTR = "data-rs-table-tip";
+var RS_TABLE_TIP_MODE_ATTR = "data-rs-table-tip-mode";
+var RS_TABLE_TIP_TEXT_ATTR = "data-rs-table-tip-text";
+/** 列头 headerTip：整表共享浮层，悬停 th-label 显示 */
+var RS_TABLE_HEADER_TIP_ATTR = "data-rs-table-header-tip";
+var TIP_SIDE_OFFSET = 6;
+var TIP_VIEWPORT_PAD = 8;
+var TIP_HIDE_GRACE_MS = 80;
+function isHeaderTipHost(host) {
+	return host.hasAttribute(RS_TABLE_HEADER_TIP_ATTR);
+}
+function findTipHost(target) {
+	const el = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+	if (!el) return null;
+	const header = el.closest(`[${RS_TABLE_HEADER_TIP_ATTR}]`);
+	if (header instanceof HTMLElement) return header;
+	const cell = el.closest(`[${RS_TABLE_TIP_ATTR}], .rs-table__cell-tip`);
+	return cell instanceof HTMLElement ? cell : null;
+}
+function resolveMeasureEl(host) {
+	if (host.classList.contains("rs-table__ellipsis-text")) return host;
+	const inner = host.querySelector(".rs-table__ellipsis-text");
+	return inner instanceof HTMLElement ? inner : host;
+}
+function resolveTipText(host) {
+	if (isHeaderTipHost(host)) return host.getAttribute("data-rs-table-header-tip")?.trim() || null;
+	if (host.hasAttribute("data-rs-table-tip")) return host.getAttribute("data-rs-table-tip")?.trim() || null;
+	const mode = host.getAttribute(RS_TABLE_TIP_MODE_ATTR);
+	if (!mode) return null;
+	const text = host.getAttribute("data-rs-table-tip-text")?.trim() ?? "";
+	if (mode === "always") return text || null;
+	if (mode === "overflow") {
+		const measure = resolveMeasureEl(host);
+		if (measure.scrollWidth <= measure.clientWidth) return null;
+		return text || measure.textContent?.trim() || null;
+	}
+	return null;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function useTableCellTooltip(options) {
+	const state = ref({
+		visible: false,
+		ready: false,
+		text: "",
+		kind: "cell",
+		style: {
+			left: "0",
+			top: "0"
+		}
+	});
+	let tipHost = null;
+	let showTimer = 0;
+	let hideTimer = 0;
+	let positionRaf = 0;
+	function clearTimers() {
+		if (showTimer) {
+			clearTimeout(showTimer);
+			showTimer = 0;
+		}
+		if (hideTimer) {
+			clearTimeout(hideTimer);
+			hideTimer = 0;
+		}
+	}
+	function cancelPositionRaf() {
+		if (positionRaf) {
+			cancelAnimationFrame(positionRaf);
+			positionRaf = 0;
+		}
+	}
+	function positionTip(host) {
+		const tipEl = options.tipRef.value;
+		if (!tipEl) return;
+		const hostRect = host.getBoundingClientRect();
+		const tipRect = tipEl.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		let left;
+		let top;
+		if (isHeaderTipHost(host)) {
+			left = hostRect.left;
+			top = hostRect.bottom + TIP_SIDE_OFFSET;
+			if (top + tipRect.height > vh - TIP_VIEWPORT_PAD) top = hostRect.top - tipRect.height - TIP_SIDE_OFFSET;
+		} else {
+			left = hostRect.left + hostRect.width / 2 - tipRect.width / 2;
+			top = hostRect.top - tipRect.height - TIP_SIDE_OFFSET;
+			if (top < TIP_VIEWPORT_PAD) top = hostRect.bottom + TIP_SIDE_OFFSET;
+		}
+		left = clamp(left, TIP_VIEWPORT_PAD, Math.max(TIP_VIEWPORT_PAD, vw - tipRect.width - TIP_VIEWPORT_PAD));
+		top = clamp(top, TIP_VIEWPORT_PAD, Math.max(TIP_VIEWPORT_PAD, vh - tipRect.height - TIP_VIEWPORT_PAD));
+		state.value.style = {
+			left: `${left}px`,
+			top: `${top}px`
+		};
+		state.value.ready = true;
+	}
+	function hide() {
+		clearTimers();
+		cancelPositionRaf();
+		tipHost = null;
+		state.value.visible = false;
+		state.value.ready = false;
+		state.value.text = "";
+		state.value.kind = "cell";
+	}
+	function show(host, text) {
+		tipHost = host;
+		state.value.text = text;
+		state.value.kind = isHeaderTipHost(host) ? "header" : "cell";
+		state.value.ready = false;
+		state.value.visible = true;
+		cancelPositionRaf();
+		nextTick(() => {
+			positionRaf = requestAnimationFrame(() => {
+				positionRaf = 0;
+				if (tipHost === host) positionTip(host);
+			});
+		});
+	}
+	function scheduleShow(host) {
+		if (isHeaderTipHost(host)) {
+			if (options.headerEnabled && !options.headerEnabled()) return;
+		} else if (!options.enabled()) return;
+		const text = resolveTipText(host);
+		if (!text) {
+			hide();
+			return;
+		}
+		clearTimers();
+		if (tipHost !== host) tipHost = host;
+		const delay = options.delay();
+		if (delay <= 0) {
+			show(host, text);
+			return;
+		}
+		showTimer = window.setTimeout(() => {
+			showTimer = 0;
+			if (tipHost === host) show(host, text);
+		}, delay);
+	}
+	function scheduleHide() {
+		clearTimers();
+		hideTimer = window.setTimeout(hide, TIP_HIDE_GRACE_MS);
+	}
+	function onPointerOver(event) {
+		if (event.pointerType === "touch") return;
+		const host = findTipHost(event.target);
+		if (!host) {
+			if (tipHost) scheduleHide();
+			return;
+		}
+		if (host === tipHost && state.value.visible) return;
+		if (tipHost && host !== tipHost) hide();
+		scheduleShow(host);
+	}
+	function onPointerOut(event) {
+		const related = event.relatedTarget;
+		if (related instanceof Element && findTipHost(related)) return;
+		scheduleHide();
+	}
+	onUnmounted(() => {
+		clearTimers();
+		cancelPositionRaf();
+	});
+	return {
+		state,
+		onPointerOver,
+		onPointerOut,
+		hide
+	};
+}
+//#endregion
+export { RS_TABLE_HEADER_TIP_ATTR, RS_TABLE_TIP_ATTR, RS_TABLE_TIP_MODE_ATTR, RS_TABLE_TIP_TEXT_ATTR, useTableCellTooltip };

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

@@ -0,0 +1,176 @@
+import { makeCellKey } from "../context/table-keys.js";
+import { ref, shallowRef } from "vue";
+//#region src/components/table/src/composables/useTableEdit.ts
+function useTableEdit(options) {
+	const editingCell = ref(null);
+	const editingDraft = ref("");
+	const focusCell = ref(null);
+	const stagedMap = shallowRef(/* @__PURE__ */ new Map());
+	const errorMap = shallowRef(/* @__PURE__ */ new Map());
+	const validatingMap = shallowRef(/* @__PURE__ */ new Map());
+	const undoStack = shallowRef([]);
+	const redoStack = shallowRef([]);
+	function isEditing(rowKey, colKey) {
+		const active = editingCell.value;
+		return active?.rowKey === rowKey && active.colKey === colKey;
+	}
+	function isFocused(rowKey, colKey) {
+		const active = focusCell.value;
+		return active?.rowKey === rowKey && active.colKey === colKey;
+	}
+	function getDraft(rowKey, colKey) {
+		const staged = stagedMap.value.get(makeCellKey(rowKey, colKey));
+		if (staged) return staged.draft;
+		if (isEditing(rowKey, colKey)) return editingDraft.value;
+	}
+	function isDirty(rowKey, colKey) {
+		return stagedMap.value.has(makeCellKey(rowKey, colKey));
+	}
+	function getRowStagedCells(rowKey) {
+		return [...stagedMap.value.values()].filter((item) => item.rowKey === rowKey);
+	}
+	function isRowDirty(rowKey) {
+		return getRowStagedCells(rowKey).length > 0;
+	}
+	function getCellError(rowKey, colKey) {
+		return errorMap.value.get(makeCellKey(rowKey, colKey));
+	}
+	function setCellError(rowKey, colKey, message) {
+		const key = makeCellKey(rowKey, colKey);
+		const next = new Map(errorMap.value);
+		if (!message) next.delete(key);
+		else next.set(key, message);
+		errorMap.value = next;
+	}
+	function clearCellError(rowKey, colKey) {
+		setCellError(rowKey, colKey, null);
+	}
+	function isValidating(rowKey, colKey) {
+		return validatingMap.value.get(makeCellKey(rowKey, colKey)) === true;
+	}
+	function setValidating(rowKey, colKey, value) {
+		const key = makeCellKey(rowKey, colKey);
+		const next = new Map(validatingMap.value);
+		if (!value) next.delete(key);
+		else next.set(key, true);
+		validatingMap.value = next;
+	}
+	function startEdit(cell, initialText) {
+		if (!options.enabled()) return;
+		editingCell.value = cell;
+		focusCell.value = cell;
+		const staged = stagedMap.value.get(makeCellKey(cell.rowKey, cell.colKey));
+		editingDraft.value = staged?.draft ?? initialText;
+		clearCellError(cell.rowKey, cell.colKey);
+	}
+	function updateDraft(text) {
+		if (!editingCell.value) return;
+		editingDraft.value = text;
+	}
+	function cancelEdit() {
+		editingCell.value = null;
+		editingDraft.value = "";
+	}
+	function cancelAll() {
+		editingCell.value = null;
+		editingDraft.value = "";
+		stagedMap.value = /* @__PURE__ */ new Map();
+		errorMap.value = /* @__PURE__ */ new Map();
+		validatingMap.value = /* @__PURE__ */ new Map();
+	}
+	function setFocusCell(cell) {
+		focusCell.value = cell;
+	}
+	function stageCell(cell) {
+		const key = makeCellKey(cell.rowKey, cell.colKey);
+		const next = new Map(stagedMap.value);
+		next.set(key, cell);
+		stagedMap.value = next;
+		clearCellError(cell.rowKey, cell.colKey);
+		if (editingCell.value?.rowKey === cell.rowKey && editingCell.value.colKey === cell.colKey) {
+			editingCell.value = null;
+			editingDraft.value = "";
+		}
+	}
+	function removeStagedKeys(keys) {
+		if (!keys.length) return;
+		const next = new Map(stagedMap.value);
+		for (const key of keys) next.delete(key);
+		stagedMap.value = next;
+	}
+	function unstageCell(rowKey, colKey) {
+		removeStagedKeys([makeCellKey(rowKey, colKey)]);
+	}
+	function rollbackRow(rowKey) {
+		removeStagedKeys([...stagedMap.value.keys()].filter((key) => key.startsWith(`${rowKey}:`)));
+		const errNext = new Map(errorMap.value);
+		for (const key of [...errNext.keys()]) if (key.startsWith(`${rowKey}:`)) errNext.delete(key);
+		errorMap.value = errNext;
+		if (editingCell.value?.rowKey === rowKey) cancelEdit();
+	}
+	function commitRow(rowKey) {
+		const changes = getRowStagedCells(rowKey);
+		rollbackRow(rowKey);
+		return changes;
+	}
+	function normalizeUndo(entry) {
+		if ("items" in entry) return entry;
+		return { items: [entry] };
+	}
+	function pushUndo(entry) {
+		const limit = options.undoLimit?.() ?? 50;
+		undoStack.value = [...undoStack.value, normalizeUndo(entry)].slice(-Math.max(1, limit));
+		redoStack.value = [];
+	}
+	function undo() {
+		const stack = undoStack.value;
+		if (!stack.length) return null;
+		const entry = stack[stack.length - 1];
+		undoStack.value = stack.slice(0, -1);
+		redoStack.value = [...redoStack.value, entry];
+		return entry;
+	}
+	function redo() {
+		const stack = redoStack.value;
+		if (!stack.length) return null;
+		const entry = stack[stack.length - 1];
+		redoStack.value = stack.slice(0, -1);
+		undoStack.value = [...undoStack.value, entry];
+		return entry;
+	}
+	return {
+		editingCell,
+		editingDraft,
+		focusCell,
+		stagedMap,
+		errorMap,
+		validatingMap,
+		undoStack,
+		redoStack,
+		isEditing,
+		isFocused,
+		getDraft,
+		isDirty,
+		isRowDirty,
+		getCellError,
+		setCellError,
+		clearCellError,
+		isValidating,
+		setValidating,
+		getRowStagedCells,
+		startEdit,
+		updateDraft,
+		cancelEdit,
+		cancelAll,
+		setFocusCell,
+		stageCell,
+		unstageCell,
+		rollbackRow,
+		commitRow,
+		pushUndo,
+		undo,
+		redo
+	};
+}
+//#endregion
+export { useTableEdit };

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

@@ -0,0 +1,35 @@
+import { computed, ref } from "vue";
+//#region src/components/table/src/composables/useTableRowHighlight.ts
+function useTableRowHighlight(options) {
+	const internalHighlightedKey = ref(options.defaultHighlightedRowKey());
+	const highlightedKey = computed({
+		get: () => options.isControlled() ? options.highlightedRowKey() : internalHighlightedKey.value,
+		set: (value) => {
+			if (options.isControlled()) {
+				options.onUpdate(value);
+				return;
+			}
+			internalHighlightedKey.value = value;
+			options.onUpdate(value);
+		}
+	});
+	function setHighlightedKey(value) {
+		highlightedKey.value = value;
+	}
+	function isHighlighted(rowKey) {
+		if (!options.enabled()) return false;
+		return highlightedKey.value === rowKey;
+	}
+	function applyRowClickHighlight(rowKey) {
+		if (!options.enabled() || !options.highlightRowOnClick()) return;
+		setHighlightedKey(rowKey);
+	}
+	return {
+		highlightedKey,
+		setHighlightedKey,
+		isHighlighted,
+		applyRowClickHighlight
+	};
+}
+//#endregion
+export { useTableRowHighlight };

package/dist/components/table/src/context/rs-table-module-registry.d.ts

@@ -0,0 +1,37 @@
+/**
+ * RsTable 模块注册表（对标 AG Grid ModuleRegistry）。
+ *
+ * - 全局 register：所有表格实例默认挂载（同页多表会共享这些模块）
+ * - 实例 props.features：仅该实例；同 id 覆盖全局
+ * - 不改内核渲染；模块通过 Feature.setup 订阅/贡献
+ * - 多表隔离要点：选中/编辑/ViewContext 仍是实例私有；仅 Registry 是全局点
+ */
+import type { RsTableFeature } from '../features/table-features';
+import type { RsTableRowData } from '../utils/table-utils';
+/**
+ * 全局模块注册表。
+ *
+ * @example
+ * ```ts
+ * RsTableModuleRegistry.register(
+ *   createAnalyticsTableFeature({ onSnapshot: (s) => syncCharts(s) }),
+ * )
+ * ```
+ */
+export declare const RsTableModuleRegistry: {
+    /**
+     * 注册全局 feature（幂等：同 id 覆盖）。
+     */
+    register<T extends RsTableRowData>(feature: RsTableFeature<T>): void;
+    /** 按 id 注销全局模块 */
+    unregister(id: string): void;
+    /** 清空（测试用） */
+    clear(): void;
+    /** 当前全局模块快照（浅拷贝） */
+    getModules<T extends RsTableRowData = object>(): RsTableFeature<T>[];
+    listIds(): string[];
+};
+/**
+ * 合并全局模块 + 实例 features（实例同 id 覆盖全局）。
+ */
+export declare function resolveInstanceFeatures<T extends RsTableRowData>(instanceFeatures?: RsTableFeature<T>[] | null): RsTableFeature<T>[];

package/dist/components/table/src/context/rs-table-module-registry.js

@@ -0,0 +1,51 @@
+//#region src/components/table/src/context/rs-table-module-registry.ts
+var globalModules = [];
+/**
+* 全局模块注册表。
+*
+* @example
+* ```ts
+* RsTableModuleRegistry.register(
+*   createAnalyticsTableFeature({ onSnapshot: (s) => syncCharts(s) }),
+* )
+* ```
+*/
+var RsTableModuleRegistry = {
+	/**
+	* 注册全局 feature（幂等：同 id 覆盖）。
+	*/
+	register(feature) {
+		const id = feature.id;
+		const idx = globalModules.findIndex((item) => item.id === id);
+		const next = feature;
+		if (idx >= 0) globalModules[idx] = next;
+		else globalModules.push(next);
+	},
+	/** 按 id 注销全局模块 */
+	unregister(id) {
+		const idx = globalModules.findIndex((item) => item.id === id);
+		if (idx >= 0) globalModules.splice(idx, 1);
+	},
+	/** 清空（测试用） */
+	clear() {
+		globalModules.length = 0;
+	},
+	/** 当前全局模块快照（浅拷贝） */
+	getModules() {
+		return [...globalModules];
+	},
+	listIds() {
+		return globalModules.map((item) => item.id);
+	}
+};
+/**
+* 合并全局模块 + 实例 features（实例同 id 覆盖全局）。
+*/
+function resolveInstanceFeatures(instanceFeatures) {
+	const map = /* @__PURE__ */ new Map();
+	for (const feature of RsTableModuleRegistry.getModules()) map.set(feature.id, feature);
+	for (const feature of instanceFeatures ?? []) map.set(feature.id, feature);
+	return [...map.values()];
+}
+//#endregion
+export { RsTableModuleRegistry, resolveInstanceFeatures };