@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{Table-CsdH8fCB.js → Table-fecqnm7P.js}

@@ -1,15 +1,20 @@
 import { t as _sfc_main$14 } from "./VisuallyHidden-C7NN3VEP.js";
-import { t as _sfc_main$15 } from "./Button-DrqeomlE.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as _sfc_main$16 } from "./Tooltip-C2fh9anJ.js";
-import { t as _sfc_main$17 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$15 } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$16 } from "./IconButton-DDNgNl7B.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$17 } from "./Tooltip-C4Vaqd3G.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$18 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$19 } from "./CheckboxInput-25Q8ItH-.js";
-import { t as _sfc_main$20 } from "./Popover-D7zqpFwU.js";
-import { t as _sfc_main$21 } from "./Pagination-CNe9F6Fl.js";
-import { t as _sfc_main$22 } from "./Selector-5N-hq2nF.js";
-import { t as _sfc_main$23 } from "./TextInput-BasnjVvy.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx, withModifiers } from "vue";
+import { t as _sfc_main$19 } from "./CheckboxInput-BS9J6edf.js";
+import { t as _sfc_main$20 } from "./Popover-DJf8POzL.js";
+import { t as _sfc_main$21 } from "./DateInput-DT518j5E.js";
+import { t as _sfc_main$22 } from "./MultiSelector-BtAUfQ3t.js";
+import { t as _sfc_main$23 } from "./NumberInput-AZ9x3oja.js";
+import { t as _sfc_main$24 } from "./Pagination-DqwNQFRp.js";
+import { t as _sfc_main$25 } from "./Selector-DJ2BhUTV.js";
+import { t as _sfc_main$26 } from "./TextInput-zFT1_qgI.js";
+import { t as _sfc_main$27 } from "./Toolbar-BrgvvTCk.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import "../styles/table.css";
 function proportional(value = 1, options) {
 	return {
@@ -163,36 +168,140 @@ function compareValues(a, b) {
 }
 //#endregion
 //#region src/Table/plugins/columnResize.ts
+/** 宽度的类型。没写宽度按比例列处理。 */
+function isProportionalColumnWidth(width) {
+	return width == null || width.type === "proportional";
+}
+/**
+* 一列能拖到的最窄像素。
+* 全局 `minWidth` 优先，其次列自己声明的下限，再退到默认值：没写宽度 60px，比例列 120px。
+* 固定像素列不能比它声明的宽度更窄。
+*/
+function columnResizeMinWidth(width, globalMinWidth) {
+	if (globalMinWidth != null) return globalMinWidth;
+	if (width == null) return 60;
+	if (width.type === "proportional") return width.minWidth ?? 120;
+	if (width.type === "pixel") return width.value;
+	return 60;
+}
+/**
+* 按拖动位移算出每一列的新宽度。
+*
+* 有相邻列时两列一增一减，表格总宽不变；没有相邻列时只改这一列，钳在它自己的上下限里。
+* 表格宽度已知时，最后一列总是吃掉剩下的空间，所以表格保持撑满。
+*/
+function resizeColumnWidths(plan, delta) {
+	const { snapshots, resizeIndex, neighborIndex, tableWidth } = plan;
+	const widths = snapshots.map((snapshot) => snapshot.initialWidth);
+	const self = snapshots[resizeIndex];
+	if (self == null) return widths;
+	if (neighborIndex != null) {
+		const neighbor = snapshots[neighborIndex];
+		if (neighbor != null) {
+			const room = neighbor.initialWidth - neighbor.minWidth;
+			const give = Math.max(self.minWidth - self.initialWidth, Math.min(delta, room));
+			widths[neighborIndex] = neighbor.initialWidth - give;
+			widths[resizeIndex] = self.initialWidth + give;
+		}
+	} else widths[resizeIndex] = Math.min(self.maxWidth, Math.max(self.minWidth, self.initialWidth + delta));
+	const last = snapshots.length - 1;
+	if (last >= 0 && tableWidth > 0) {
+		let used = 0;
+		for (let index = 0; index < widths.length; index++) if (index !== last) used += widths[index] ?? 0;
+		widths[last] = Math.max(snapshots[last]?.minWidth ?? 0, tableWidth - used);
+	}
+	return widths;
+}
+/** 横向位移的方向。RTL 里往右拖等于把列变窄。 */
+function columnResizeDirectionSign(direction) {
+	return direction === "rtl" ? -1 : 1;
+}
+/** 键盘按一下走多少像素。按住 Shift 走大步。 */
+function columnResizeStep(isShiftKey) {
+	return isShiftKey ? 50 : 10;
+}
+function roundWidth(value) {
+	return Math.round(value);
+}
 function useTableColumnResize(config) {
 	return {
 		widthFor(column) {
-			return toValue(config).columnWidths[column.key];
+			return toValue(config).columnWidths?.[column.key];
+		},
+		resizeFor(column, columns) {
+			if (column.resizable === false) return null;
+			const current = toValue(config);
+			const resizable = (current.columns ?? columns).filter((item) => item.resizable !== false);
+			const index = resizable.findIndex((item) => item.key === column.key);
+			const isLast = index >= 0 && index === resizable.length - 1;
+			const isProportional = isProportionalColumnWidth(column.width);
+			const neighbor = isProportional && index >= 0 && index < resizable.length - 1 ? resizable[index + 1]?.key ?? null : null;
+			return {
+				currentWidth: current.columnWidths?.[column.key],
+				minWidth: columnResizeMinWidth(column.width, current.minWidth),
+				maxWidth: current.maxWidth ?? Number.POSITIVE_INFINITY,
+				neighborKey: neighbor,
+				hasHandle: !(isLast && isProportional)
+			};
 		},
-		onColumnResizeEnd(key, width) {
-			toValue(config).onColumnResizeEnd({ [key]: Math.max(60, Math.round(width)) });
+		onColumnResizeEnd(updates) {
+			const current = toValue(config);
+			if (current.onColumnResizeEnd == null) return;
+			const rounded = {};
+			for (const [key, width] of Object.entries(updates)) rounded[key] = roundWidth(width);
+			current.onColumnResizeEnd(rounded);
 		}
 	};
 }
 //#endregion
 //#region src/Table/plugins/columnSettings.ts
 function useTableColumnSettingsState(config) {
+	function lockedKeys() {
+		return config.columns.filter((column) => column.isAlwaysVisible).map((column) => column.key);
+	}
+	function lockedSet() {
+		return new Set(lockedKeys());
+	}
+	function toggleColumn(key) {
+		if (lockedSet().has(key)) return;
+		const current = toValue(config.activeColumnKeys);
+		if (current.includes(key)) config.onChangeActiveColumnKeys(current.filter((item) => item !== key));
+		else config.onChangeActiveColumnKeys([...current, key]);
+	}
 	function setActiveColumnKeys(keys) {
-		const locked = config.columns.filter((column) => column.isAlwaysVisible).map((column) => column.key);
-		const next = [...keys];
-		for (const key of locked) if (!next.includes(key)) next.unshift(key);
-		config.onChangeActiveColumnKeys(next);
+		const next = new Set(keys);
+		for (const key of lockedKeys()) next.add(key);
+		config.onChangeActiveColumnKeys([...next]);
+	}
+	function showAllColumns() {
+		config.onChangeActiveColumnKeys(config.columns.map((column) => column.key));
+	}
+	function resetToDefault() {
+		if (config.defaultColumnKeys != null) {
+			config.onChangeActiveColumnKeys([...config.defaultColumnKeys]);
+			return;
+		}
+		showAllColumns();
 	}
 	return {
 		get activeColumnKeys() {
 			return toValue(config.activeColumnKeys);
 		},
+		toggleColumn,
+		isColumnActive: (key) => toValue(config.activeColumnKeys).includes(key),
+		isColumnToggleable: (key) => !lockedSet().has(key),
+		showAllColumns,
+		resetToDefault,
 		setActiveColumnKeys,
 		columnSettingsConfig: {
 			columns: config.columns,
 			get activeColumnKeys() {
 				return toValue(config.activeColumnKeys);
 			},
-			onChangeActiveColumnKeys: setActiveColumnKeys
+			onChangeActiveColumnKeys: setActiveColumnKeys,
+			get defaultColumnKeys() {
+				return config.defaultColumnKeys;
+			}
 		}
 	};
 }
@@ -205,11 +314,24 @@ function useTableColumnSettings(config) {
 }
 //#endregion
 //#region src/Table/plugins/filtering.ts
-function useTableFilterState(initial = {}) {
-	const filters = ref({ ...initial });
+function isEmptyValue(value) {
+	if (value == null || value === "") return true;
+	return Array.isArray(value) && value.length === 0;
+}
+function resolveInitialState(initial) {
+	if (initial == null) return {};
+	const options = initial.initialState;
+	if (options != null && typeof options === "object") return { ...options };
+	return { ...initial };
+}
+/**
+* 托住过滤条件。位置参数可以直接给初始条件，也可以写成 `{ initialState }`。
+*/
+function useTableFilterState(initial) {
+	const filters = ref(resolveInitialState(initial));
 	function onFilterChange(key, value) {
 		const next = { ...filters.value };
-		if (value == null || value === "" || Array.isArray(value) && value.length === 0) delete next[key];
+		if (value == null || isEmptyValue(value)) delete next[key];
 		else next[key] = value;
 		filters.value = next;
 	}
@@ -222,32 +344,92 @@ function useTableFilterState(initial = {}) {
 		clearAll
 	};
 }
+function toComparableNumber(value) {
+	if (typeof value === "number") return Number.isNaN(value) ? null : value;
+	if (value instanceof Date) return value.getTime();
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		if (trimmed === "") return null;
+		const parsed = Number(trimmed);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+	return null;
+}
+function toTimestamp(value) {
+	if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value.getTime();
+	if (typeof value === "number") return Number.isNaN(value) ? null : value;
+	if (typeof value === "string") {
+		const parsed = Date.parse(value);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+	return null;
+}
+/** 单元格的值看成一组可比较的文本。数组格的每一项都算一个值。 */
+function cellValues(cell) {
+	if (Array.isArray(cell)) return cell.map((item) => cellText(item).toLowerCase());
+	return [cellText(cell).toLowerCase()];
+}
+function matchesField(value, cell, kind) {
+	switch (kind) {
+		case "enum":
+		case "multi-select": {
+			const selected = (Array.isArray(value) ? value : [value]).map((item) => String(item).toLowerCase());
+			const values = cellValues(cell);
+			return selected.some((item) => values.includes(item));
+		}
+		case "number": {
+			const target = toComparableNumber(value);
+			const actual = toComparableNumber(cell);
+			return target != null && actual != null && target === actual;
+		}
+		case "date": {
+			const target = toTimestamp(value);
+			const actual = toTimestamp(cell);
+			return target != null && actual != null && actual > target;
+		}
+		default: return cellText(cell).toLowerCase().includes(String(value).toLowerCase());
+	}
+}
+/**
+* 按当前过滤条件挑出符合条件的行。每个条件都要满足。
+* `string` 匹配子串，`enum` / `multi-select` 匹配选项，`number` 比数值，`date` 要求单元格日期更晚。
+*/
 function applyTableFilters(rows, filters, fields = []) {
 	const kinds = new Map(fields.map((field) => [field.key, field.type]));
-	const active = Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
+	const active = Object.entries(filters).filter(([, value]) => !isEmptyValue(value));
 	if (active.length === 0) return [...rows];
 	return rows.filter((row) => active.every(([key, value]) => {
-		const cell = String(row[key] ?? "").toLowerCase();
-		if ((kinds.get(key) ?? (Array.isArray(value) ? "enum" : "string")) === "enum") return (Array.isArray(value) ? value : [value]).some((item) => cell === item.toLowerCase());
-		return cell.includes(String(value).toLowerCase());
+		const kind = kinds.get(key) ?? (Array.isArray(value) ? "multi-select" : "string");
+		return matchesField(value, row[key], kind);
 	}));
 }
 function useTableFiltering(config) {
-	return { filterFor(column) {
-		if (column.filter == null) return null;
-		const current = toValue(config);
-		const fieldKey = column.filter;
-		const field = current.fields.find((item) => item.key === fieldKey);
-		if (field == null) return null;
-		return {
-			variant: current.variant ?? "popover",
-			field,
-			value: current.filters[fieldKey] ?? null,
-			onChange(value) {
-				toValue(config).onFilterChange(fieldKey, value);
-			}
-		};
-	} };
+	const variantOf = () => toValue(config).variant ?? "popover";
+	return {
+		transformColumns(columns) {
+			const variant = variantOf();
+			if (variant !== "inline" && variant !== "inline-compact") return columns;
+			return columns.map((column) => column.filter != null && column.width == null ? {
+				...column,
+				width: proportional(1)
+			} : column);
+		},
+		filterFor(column) {
+			if (column.filter == null) return null;
+			const current = toValue(config);
+			const fieldKey = column.filter;
+			const field = current.fields.find((item) => item.key === fieldKey);
+			if (field == null) return null;
+			return {
+				variant: current.variant ?? "popover",
+				field,
+				value: current.filters[fieldKey] ?? null,
+				onChange(value) {
+					toValue(config).onFilterChange(fieldKey, value);
+				}
+			};
+		}
+	};
 }
 //#endregion
 //#region src/Table/plugins/groupedRows.ts
@@ -353,29 +535,56 @@ function isInteractiveRowClick(event) {
 //#endregion
 //#region src/Table/plugins/pagination.ts
 function useTablePagination(config) {
-	function controls() {
+	const messages = useAstryxMessages();
+	function pageCount(current) {
+		if (current.totalPages != null) return current.totalPages;
+		if (current.totalItems == null) return void 0;
+		const size = current.pageSize ?? 10;
+		const pageSize = Number.isFinite(size) ? Math.max(1, Math.floor(size)) : 10;
+		return Math.ceil(current.totalItems / pageSize);
+	}
+	/** 只有一页、也没有下一页时整个控件不出现，和原版一致。 */
+	function isVisible(current) {
+		if ((current.position ?? "below") === "none") return false;
+		return !(pageCount(current) === 1 && current.hasMore !== true);
+	}
+	function controls(place) {
 		const current = toValue(config);
-		if ((current.position ?? "below") === "none") return null;
-		const pageSize = current.pageSize ?? 10;
+		if (!isVisible(current)) return null;
+		const size = current.pageSize ?? 10;
+		const pageSize = Number.isFinite(size) ? Math.max(1, Math.floor(size)) : 10;
+		const label = current.label ?? messages.value.table.paginationLabel;
 		return h("div", {
 			"class": "astryx-table__pagination",
-			"data-align": current.align ?? "center"
-		}, [h(_sfc_main$21, {
+			"data-align": current.align ?? "center",
+			"data-place": place
+		}, [h(_sfc_main$24, {
 			"page": current.page,
 			pageSize,
 			"total": current.totalItems ?? 0,
+			"totalPages": pageCount(current),
+			"hasMore": current.hasMore,
+			"variant": current.variant ?? "pages",
+			"size": current.size ?? "md",
 			"showSizeChanger": current.pageSizeOptions != null && current.onPageSizeChange != null,
 			"pageSizeOptions": current.pageSizeOptions,
-			"aria-label": current.label,
+			"label": (current.position ?? "below") === "both" ? place === "above" ? messages.value.table.paginationLabelAbove(label) : messages.value.table.paginationLabelBelow(label) : label,
 			"onUpdate:page": (page) => toValue(config).onPageChange(page),
 			"onUpdate:pageSize": (size) => toValue(config).onPageSizeChange?.(size)
 		})]);
 	}
-	return { below() {
-		const position = toValue(config).position ?? "below";
-		if (position === "above" || position === "none") return null;
-		return controls();
-	} };
+	return {
+		above() {
+			const position = toValue(config).position ?? "below";
+			if (position !== "above" && position !== "both") return null;
+			return controls("above");
+		},
+		below() {
+			const position = toValue(config).position ?? "below";
+			if (position !== "below" && position !== "both") return null;
+			return controls("below");
+		}
+	};
 }
 //#endregion
 //#region src/Table/TableExpansionChevron.vue
@@ -550,7 +759,7 @@ function useTableRowStatus(config) {
 				const status = toValue(config).getStatus(item);
 				if (status == null) return null;
 				const customColor = status.status == null && status.icon != null && NAMED_ICON_COLOR[status.color] == null ? status.color : void 0;
-				return h(_sfc_main$16, { content: status.label }, { default: () => h("span", {
+				return h(_sfc_main$17, { content: status.label }, { default: () => h("span", {
 					"class": "astryx-table__status",
 					"role": "img",
 					"aria-label": status.label,
@@ -563,39 +772,85 @@ function useTableRowStatus(config) {
 //#endregion
 //#region src/Table/plugins/selection.ts
 function rowId(row, idKey) {
+	if (typeof idKey === "function") return String(idKey(row));
 	return String(row[idKey] ?? "");
 }
 function useTableSelectionState(config) {
-	const selectable = computed(() => toValue(config.data));
-	return { selectionConfig: {
-		getIsItemSelected: (item) => toValue(config.selectedKeys).has(rowId(item, config.idKey)),
-		onSelectItem: ({ item, isSelected }) => {
-			const next = new Set(toValue(config.selectedKeys));
-			const id = rowId(item, config.idKey);
-			if (isSelected) next.add(id);
-			else next.delete(id);
-			config.setSelectedKeys(next);
-		},
-		onSelectAll: ({ isAllSelected }) => {
-			config.setSelectedKeys(isAllSelected ? new Set(toValue(config.data).map((item) => rowId(item, config.idKey))) : /* @__PURE__ */ new Set());
-		},
-		getIsAllSelected: () => {
-			const rows = toValue(config.data);
-			const selected = toValue(config.selectedKeys);
-			return rows.length > 0 && rows.every((item) => selected.has(rowId(item, config.idKey)));
-		},
-		getIsIndeterminate: () => {
-			const rows = toValue(config.data);
-			const selected = toValue(config.selectedKeys);
-			const count = rows.filter((item) => selected.has(rowId(item, config.idKey))).length;
-			return count > 0 && count < rows.length;
+	const rows = () => toValue(config.data);
+	const selectedKeys = () => toValue(config.selectedKeys);
+	const isSelectable = (item) => config.getIsItemSelectable?.(item) ?? true;
+	const isEnabled = (item) => config.getIsItemEnabled?.(item) ?? true;
+	/** 能勾的行：既显示复选框，又没被禁用。 */
+	const isTogglable = (item) => isSelectable(item) && isEnabled(item);
+	const keysOf = (items) => new Set(items.map((item) => rowId(item, config.idKey)));
+	/** 全选时要打开的键：已选中的加上所有能勾的行。 */
+	function selectableKeys() {
+		return keysOf(rows().filter(isTogglable));
+	}
+	/** 全选时要保留的键：不在可勾集合里的（点名选中、被禁用、不在当前数据里）一律保留。 */
+	function frozenKeys() {
+		const selectable = selectableKeys();
+		const frozen = /* @__PURE__ */ new Set();
+		for (const key of selectedKeys()) if (!selectable.has(key)) frozen.add(key);
+		return frozen;
+	}
+	function write(keys) {
+		config.setSelectedKeys(keys);
+	}
+	return {
+		selectionConfig: {
+			getIsItemSelected: (item) => selectedKeys().has(rowId(item, config.idKey)),
+			onSelectItem: ({ item, isSelected }) => {
+				const next = new Set(selectedKeys());
+				const id = rowId(item, config.idKey);
+				if (isSelected) next.add(id);
+				else next.delete(id);
+				write(next);
+			},
+			onSelectAll: ({ isAllSelected }) => {
+				if (!isAllSelected) {
+					write(frozenKeys());
+					return;
+				}
+				const next = new Set(selectedKeys());
+				for (const key of selectableKeys()) next.add(key);
+				write(next);
+			},
+			getIsAllSelected: () => {
+				const selectable = selectableKeys();
+				if (selectable.size === 0) return false;
+				const keys = selectedKeys();
+				for (const key of selectable) if (!keys.has(key)) return false;
+				return true;
+			},
+			getIsIndeterminate: () => {
+				const selectable = selectableKeys();
+				const keys = selectedKeys();
+				let count = 0;
+				for (const key of selectable) if (keys.has(key)) count += 1;
+				return count > 0 && count < selectable.size;
+			},
+			getIsItemSelectable: isSelectable,
+			getIsItemEnabled: isEnabled,
+			getRowLabel: config.getRowLabel,
+			hasRowHighlight: config.hasRowHighlight,
+			get rows() {
+				return rows();
+			}
 		},
-		getRowLabel: config.getRowLabel,
-		hasRowHighlight: config.hasRowHighlight,
-		get rows() {
-			return selectable.value;
+		selectionState: {
+			get selectedKeys() {
+				return selectedKeys();
+			},
+			get selectedCount() {
+				return selectedKeys().size;
+			},
+			get hasSelection() {
+				return selectedKeys().size > 0;
+			},
+			clearSelection: () => write(/* @__PURE__ */ new Set())
 		}
-	} };
+	};
 }
 function useTableSelection(config) {
 	return { selection: {
@@ -603,6 +858,7 @@ function useTableSelection(config) {
 		isIndeterminate: () => toValue(config).getIsIndeterminate?.() ?? false,
 		isSelected: (row) => toValue(config).getIsItemSelected(row),
 		isSelectable: (row) => toValue(config).getIsItemSelectable?.(row) ?? true,
+		isEnabled: (row) => toValue(config).getIsItemEnabled?.(row) ?? true,
 		selectAll: (selected) => toValue(config).onSelectAll({ isAllSelected: selected }),
 		selectRow: (row, selected) => toValue(config).onSelectItem({
 			item: row,
@@ -1028,8 +1284,101 @@ function useTableTreeState(config) {
 	};
 }
 //#endregion
+//#region src/Table/TableDataRenderers.ts
+/**
+* 渲染单元格内容：优先走列自己的 renderCell，没给就回退成纯文本。
+*/
+const CellContent = defineComponent({
+	name: "AstryxTableCellContent",
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		row: {
+			type: Object,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(cellProps) {
+		return () => {
+			const column = cellProps.column;
+			const row = cellProps.row;
+			const rendered = column.renderCell?.(row, cellProps.index);
+			if (rendered == null) return cellText(row[column.key]);
+			return rendered;
+		};
+	}
+});
+/**
+* 把外部传入的 render 函数包成组件，让模板里能直接当标签用。
+*/
+const RenderFn = defineComponent({
+	name: "AstryxTableRenderFn",
+	props: { render: {
+		type: Function,
+		required: true
+	} },
+	setup(renderProps) {
+		return () => renderProps.render();
+	}
+});
+/**
+* 表头单元格里留给插件的扩展位。
+*/
+const HeaderAddon = defineComponent({
+	name: "AstryxTableHeaderAddon",
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		plugins: {
+			type: Array,
+			required: true
+		}
+	},
+	setup(addonProps) {
+		return () => {
+			const column = addonProps.column;
+			const nodes = [];
+			for (const plugin of addonProps.plugins) {
+				const before = plugin.headerPatch?.(column)?.before?.();
+				if (before != null) nodes.push(before);
+			}
+			return nodes;
+		};
+	}
+});
+/**
+* 渲染插件挂在表格上方或下方的内容。
+*/
+const PluginFooter = defineComponent({
+	name: "AstryxTablePluginFooter",
+	props: {
+		plugin: {
+			type: Object,
+			required: true
+		},
+		place: {
+			type: String,
+			default: "below"
+		}
+	},
+	setup(footerProps) {
+		return () => {
+			const plugin = footerProps.plugin;
+			return (footerProps.place === "above" ? plugin.above?.() : plugin.below?.()) ?? null;
+		};
+	}
+});
+//#endregion
 //#region src/Table/TableFilterControl.vue
-const _hoisted_1$8 = { class: "astryx-table__filter" };
+const _hoisted_1$8 = ["data-variant"];
 const _hoisted_2$3 = { class: "astryx-table__filter-popover" };
 const _hoisted_3$2 = { class: "astryx-table__filter-actions" };
 const _sfc_main$11 = /*@__PURE__*/ defineComponent({
@@ -1038,69 +1387,209 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const messages = useAstryxMessages();
-		const draft = ref(typeof props.filter.value === "string" ? props.filter.value : "");
+		const draft = ref(props.filter.value);
+		const isCompact = computed(() => props.filter.variant === "inline-compact");
 		watch(() => props.filter.value, (value) => {
-			draft.value = typeof value === "string" ? value : "";
+			draft.value = value;
 		});
 		function commit(value) {
 			props.filter.onChange(value);
 		}
-		function onInlineInput(value) {
+		function textValue(value) {
+			return typeof value === "string" ? value : "";
+		}
+		function numberValue(value) {
+			return typeof value === "number" ? value : null;
+		}
+		function dateValue(value) {
+			if (typeof value !== "string" || value === "") return null;
+			const parsed = new Date(value);
+			return Number.isNaN(parsed.getTime()) ? null : parsed;
+		}
+		function listValue(value) {
+			return Array.isArray(value) ? value : [];
+		}
+		const options = computed(() => props.filter.field.options ?? []);
+		const step = computed(() => props.filter.field.step ?? (props.filter.field.isIntegerOnly ? 1 : null));
+		function onTextInput(value) {
 			draft.value = value;
 			commit(value === "" ? null : value);
 		}
+		function onNumberInput(value) {
+			draft.value = value;
+			commit(value);
+		}
+		function onDateInput(value) {
+			const next = value == null ? null : value.toISOString().slice(0, 10);
+			draft.value = next;
+			commit(next);
+		}
+		function onSingleSelect(value) {
+			const next = value == null || value === "" ? null : String(value);
+			draft.value = next;
+			commit(next);
+		}
+		function onMultiSelect(value) {
+			const next = value.map(String);
+			draft.value = next;
+			commit(next.length === 0 ? null : next);
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$8, [__props.filter.variant === "inline" && __props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$23, {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-table__filter",
+				"data-variant": __props.filter.variant
+			}, [__props.filter.variant === "inline" || __props.filter.variant === "inline-compact" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$26, {
 				key: 0,
-				"model-value": draft.value,
+				"model-value": textValue(draft.value),
 				label: __props.filter.field.label,
 				"is-label-hidden": "",
 				size: "sm",
 				placeholder: __props.filter.field.label,
-				"onUpdate:modelValue": onInlineInput
+				"onUpdate:modelValue": onTextInput
 			}, null, 8, [
 				"model-value",
 				"label",
 				"placeholder"
-			])) : __props.filter.variant === "inline" ? (openBlock(), createBlock(_sfc_main$22, {
+			])) : __props.filter.field.type === "number" ? (openBlock(), createBlock(_sfc_main$23, {
 				key: 1,
-				"model-value": draft.value || null,
+				"model-value": numberValue(draft.value),
+				label: __props.filter.field.label,
+				"is-label-hidden": "",
+				size: "sm",
+				placeholder: __props.filter.field.label,
+				min: __props.filter.field.min ?? null,
+				max: __props.filter.field.max ?? null,
+				step: step.value,
+				"is-integer-only": __props.filter.field.isIntegerOnly,
+				"has-clear": "",
+				"onUpdate:modelValue": onNumberInput
+			}, null, 8, [
+				"model-value",
+				"label",
+				"placeholder",
+				"min",
+				"max",
+				"step",
+				"is-integer-only"
+			])) : __props.filter.field.type === "date" ? (openBlock(), createBlock(_sfc_main$21, {
+				key: 2,
+				"model-value": dateValue(draft.value),
+				label: __props.filter.field.label,
+				"is-label-hidden": "",
+				size: "sm",
+				placeholder: __props.filter.field.label,
+				"has-clear": "",
+				"onUpdate:modelValue": onDateInput
+			}, null, 8, [
+				"model-value",
+				"label",
+				"placeholder"
+			])) : __props.filter.field.type === "multi-select" ? (openBlock(), createBlock(_sfc_main$22, {
+				key: 3,
+				"model-value": listValue(draft.value),
+				label: __props.filter.field.label,
+				"label-hidden": "",
+				size: "sm",
+				options: options.value,
+				placeholder: unref(messages).table.filterAll,
+				searchable: !isCompact.value,
+				"select-all": "",
+				"has-clear": "",
+				"onUpdate:modelValue": onMultiSelect
+			}, null, 8, [
+				"model-value",
+				"label",
+				"options",
+				"placeholder",
+				"searchable"
+			])) : (openBlock(), createBlock(_sfc_main$25, {
+				key: 4,
+				"model-value": textValue(draft.value) || null,
 				label: __props.filter.field.label,
+				"is-label-hidden": "",
 				size: "sm",
 				placeholder: unref(messages).table.filterAll,
-				options: __props.filter.field.options ?? [],
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => commit(value == null || value === "" ? null : String(value)))
+				options: options.value,
+				"onUpdate:modelValue": onSingleSelect
 			}, null, 8, [
 				"model-value",
 				"label",
 				"placeholder",
 				"options"
-			])) : (openBlock(), createBlock(_sfc_main$20, {
-				key: 2,
+			]))], 64)) : (openBlock(), createBlock(_sfc_main$20, {
+				key: 1,
 				label: __props.filter.field.label,
 				"has-close-button": false,
 				width: 240
 			}, {
-				content: withCtx(() => [createElementVNode("div", _hoisted_2$3, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$23, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_2$3, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$26, {
 					key: 0,
-					"model-value": draft.value,
+					"model-value": textValue(draft.value),
 					label: __props.filter.field.label,
 					"is-label-hidden": "",
 					size: "sm",
 					placeholder: __props.filter.field.label,
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => draft.value = value)
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => draft.value = value)
 				}, null, 8, [
 					"model-value",
 					"label",
 					"placeholder"
-				])) : (openBlock(), createBlock(_sfc_main$22, {
+				])) : __props.filter.field.type === "number" ? (openBlock(), createBlock(_sfc_main$23, {
 					key: 1,
-					"model-value": draft.value || null,
+					"model-value": numberValue(draft.value),
+					label: __props.filter.field.label,
+					"is-label-hidden": "",
+					size: "sm",
+					placeholder: __props.filter.field.label,
+					min: __props.filter.field.min ?? null,
+					max: __props.filter.field.max ?? null,
+					step: step.value,
+					"is-integer-only": __props.filter.field.isIntegerOnly,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => draft.value = value)
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder",
+					"min",
+					"max",
+					"step",
+					"is-integer-only"
+				])) : __props.filter.field.type === "date" ? (openBlock(), createBlock(_sfc_main$21, {
+					key: 2,
+					"model-value": dateValue(draft.value),
+					label: __props.filter.field.label,
+					"is-label-hidden": "",
+					size: "sm",
+					placeholder: __props.filter.field.label,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => draft.value = value == null ? null : value.toISOString().slice(0, 10))
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder"
+				])) : __props.filter.field.type === "multi-select" ? (openBlock(), createBlock(_sfc_main$22, {
+					key: 3,
+					"model-value": listValue(draft.value),
+					label: __props.filter.field.label,
+					"label-hidden": "",
+					size: "sm",
+					options: options.value,
+					placeholder: unref(messages).table.filterAll,
+					"select-all": "",
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => draft.value = value.length === 0 ? null : value.map(String))
+				}, null, 8, [
+					"model-value",
+					"label",
+					"options",
+					"placeholder"
+				])) : (openBlock(), createBlock(_sfc_main$25, {
+					key: 4,
+					"model-value": textValue(draft.value) || null,
 					label: __props.filter.field.label,
+					"is-label-hidden": "",
 					size: "sm",
 					placeholder: unref(messages).table.filterAll,
-					options: __props.filter.field.options ?? [],
-					"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => draft.value = value == null ? "" : String(value))
+					options: options.value,
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = (value) => draft.value = value == null ? null : String(value))
 				}, null, 8, [
 					"model-value",
 					"label",
@@ -1110,8 +1599,8 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					variant: "ghost",
 					size: "sm",
 					label: unref(messages).table.reset,
-					onClick: _cache[3] || (_cache[3] = ($event) => {
-						draft.value = "";
+					onClick: _cache[5] || (_cache[5] = ($event) => {
+						draft.value = null;
 						commit(null);
 					})
 				}, {
@@ -1121,12 +1610,12 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					variant: "primary",
 					size: "sm",
 					label: unref(messages).table.apply,
-					onClick: _cache[4] || (_cache[4] = ($event) => commit(draft.value === "" ? null : draft.value))
+					onClick: _cache[6] || (_cache[6] = ($event) => commit(draft.value))
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.apply), 1)]),
 					_: 1
 				}, 8, ["label"])])])]),
-				default: withCtx(() => [createVNode(_sfc_main$17, {
+				default: withCtx(() => [createVNode(_sfc_main$16, {
 					variant: "ghost",
 					size: "sm",
 					label: __props.filter.field.label
@@ -1138,7 +1627,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					_: 1
 				}, 8, ["label"])]),
 				_: 1
-			}, 8, ["label"]))]);
+			}, 8, ["label"]))], 8, _hoisted_1$8);
 		};
 	}
 });
@@ -1290,6 +1779,7 @@ const _hoisted_2$1 = [
 	"data-hover",
 	"data-overflow",
 	"data-valign",
+	"data-row-highlight",
 	"aria-rowcount"
 ];
 const _hoisted_3 = [
@@ -1311,7 +1801,14 @@ const _hoisted_9 = {
 	class: "astryx-table__sort-rank"
 };
 const _hoisted_10 = { key: 2 };
-const _hoisted_11 = ["onPointerdown"];
+const _hoisted_11 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"onPointerdown",
+	"onKeydown"
+];
 const _hoisted_12 = { key: 0 };
 const _hoisted_13 = ["colspan"];
 const _hoisted_14 = [
@@ -1324,6 +1821,7 @@ const _hoisted_15 = ["colspan"];
 const _hoisted_16 = ["data-column", "data-align"];
 const _hoisted_17 = ["data-variant"];
 const _hoisted_18 = ["colspan"];
+/** 收集这一行表头的宽度快照，用来算拖动后的宽度。 */
 const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	__name: "TableData",
 	props: {
@@ -1345,13 +1843,31 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const messages = useAstryxMessages();
-		const dragWidths = ref({});
 		const scrollRoot = ref(null);
+		useScrollbars(scrollRoot);
 		const menu = ref(null);
 		const resolvedColumns = computed(() => props.plugins.reduce((columns, plugin) => plugin.transformColumns?.(columns) ?? columns, [...props.columns]));
 		const widths = computed(() => resolveColumnWidths(resolvedColumns.value));
 		const selection = computed(() => props.plugins.find((plugin) => plugin.selection)?.selection);
 		const canResize = computed(() => props.plugins.some((plugin) => plugin.onColumnResizeEnd));
+		/**
+		* 一列参与拖动改宽的方式。第一个给出结果的插件说了算。
+		* 只实现了 `onColumnResizeEnd` 的老插件仍然拿到一个最朴素的把手：只管自己这一列，最窄 60px。
+		*/
+		function resizeContribution(column) {
+			for (const plugin of props.plugins) {
+				const contribution = plugin.resizeFor?.(column, resolvedColumns.value);
+				if (contribution != null) return contribution;
+			}
+			if (!canResize.value || column.resizable === false) return null;
+			return {
+				minWidth: 60,
+				maxWidth: Number.POSITIVE_INFINITY,
+				neighborKey: null,
+				hasHandle: true
+			};
+		}
+		const resizeContributions = computed(() => new Map(resolvedColumns.value.map((column) => [column.key, resizeContribution(column)])));
 		const layoutColumns = computed(() => selection.value ? [selectColumn(), ...resolvedColumns.value] : resolvedColumns.value);
 		const columnCount = computed(() => layoutColumns.value.length);
 		const trackRows = computed(() => props.rowCount != null || props.rowIndexStart != null);
@@ -1371,7 +1887,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 		});
 		function styleFor(column) {
 			const base = { ...widths.value.columns.get(column.key)?.style ?? {} };
-			const override = props.plugins.map((plugin) => plugin.widthFor?.(column)).find((value) => value != null) ?? dragWidths.value[column.key];
+			const override = props.plugins.map((plugin) => plugin.widthFor?.(column)).find((value) => value != null) ?? resizeContributions.value.get(column.key)?.currentWidth;
 			if (override != null) {
 				base.width = `${override}px`;
 				base.minWidth = `${override}px`;
@@ -1397,9 +1913,6 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			const id = row[props.idKey];
 			return id == null ? String(index) : String(id);
 		}
-		function selected(row) {
-			return selection.value?.isSelected(row) === true && selection.value.hasRowHighlight !== false;
-		}
 		function mergeCell(column, row, kind) {
 			const style = {};
 			const classes = [];
@@ -1488,99 +2001,153 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 				items
 			};
 		}
-		const CellContent = defineComponent({
-			name: "AstryxTableCellContent",
-			props: {
-				column: {
-					type: Object,
-					required: true
-				},
-				row: {
-					type: Object,
-					required: true
-				},
-				index: {
-					type: Number,
-					required: true
-				}
-			},
-			setup(cellProps) {
-				return () => {
-					const column = cellProps.column;
-					const row = cellProps.row;
-					const rendered = column.renderCell?.(row, cellProps.index);
-					if (rendered == null) return cellText(row[column.key]);
-					return rendered;
-				};
-			}
-		});
-		const RenderFn = defineComponent({
-			name: "AstryxTableRenderFn",
-			props: { render: {
-				type: Function,
-				required: true
-			} },
-			setup(renderProps) {
-				return () => renderProps.render();
-			}
-		});
-		const HeaderAddon = defineComponent({
-			name: "AstryxTableHeaderAddon",
-			props: { column: {
-				type: Object,
-				required: true
-			} },
-			setup(addonProps) {
-				return () => {
-					const column = addonProps.column;
-					const nodes = [];
-					for (const plugin of props.plugins) {
-						const before = plugin.headerPatch?.(column)?.before?.();
-						if (before != null) nodes.push(before);
-					}
-					return nodes;
-				};
+		function buildResizeState(cell, column) {
+			const row = cell.parentElement;
+			if (row == null) return null;
+			const table = cell.closest("table");
+			const dragged = resizeContributions.value.get(column.key);
+			const snapshots = [];
+			const elements = /* @__PURE__ */ new Map();
+			for (const child of Array.from(row.children)) {
+				if (!(child instanceof HTMLElement)) continue;
+				const key = child.dataset.column;
+				if (key == null) continue;
+				const contribution = resizeContributions.value.get(key);
+				if (contribution == null) continue;
+				const measured = child.getBoundingClientRect().width;
+				snapshots.push({
+					key,
+					initialWidth: contribution.currentWidth ?? (measured > 0 ? measured : 0),
+					minWidth: contribution.minWidth,
+					maxWidth: contribution.maxWidth
+				});
+				elements.set(key, child);
 			}
-		});
-		const PluginFooter = defineComponent({
-			name: "AstryxTablePluginFooter",
-			props: { plugin: {
-				type: Object,
-				required: true
-			} },
-			setup(footerProps) {
-				return () => footerProps.plugin.below?.() ?? null;
+			const resizeIndex = snapshots.findIndex((item) => item.key === column.key);
+			if (resizeIndex < 0) return null;
+			return {
+				snapshots,
+				resizeIndex,
+				neighborIndex: dragged?.neighborKey == null ? null : snapshots.findIndex((item) => item.key === dragged.neighborKey),
+				tableWidth: table?.getBoundingClientRect().width ?? 0,
+				direction: columnResizeDirectionSign(getComputedStyle(cell).direction),
+				elements
+			};
+		}
+		function applyResize(widths, state) {
+			state.snapshots.forEach((snapshot, index) => {
+				const element = state.elements.get(snapshot.key);
+				const width = widths[index];
+				if (element == null || width == null) return;
+				const pixels = `${width}px`;
+				element.style.width = pixels;
+				element.style.minWidth = pixels;
+				element.style.maxWidth = pixels;
+			});
+		}
+		function resetResizeStyles(state) {
+			for (const element of state.elements.values()) {
+				element.style.width = "";
+				element.style.minWidth = "";
+				element.style.maxWidth = "";
 			}
-		});
+		}
+		/** 算一次拖动结果：先把预览写到表头，再把变了的列交给插件。 */
+		function commitResize(state, delta) {
+			const widths = resizeColumnWidths(state, delta);
+			applyResize(widths, state);
+			const last = state.snapshots.length - 1;
+			const updates = {};
+			state.snapshots.forEach((snapshot, index) => {
+				const width = widths[index];
+				if (index !== last && width != null) updates[snapshot.key] = width;
+			});
+			if (Object.keys(updates).length === 0) return;
+			for (const plugin of props.plugins) plugin.onColumnResizeEnd?.(updates);
+		}
+		function resizeLabel(column) {
+			const header = typeof column.header === "string" && column.header.length > 0 ? column.header : column.key;
+			return messages.value.table.resizeColumn(header);
+		}
+		function resizeMax(contribution) {
+			const max = contribution?.maxWidth;
+			return max == null || !Number.isFinite(max) ? void 0 : max;
+		}
 		function startResize(event, column) {
-			const handle = event.currentTarget;
-			if (!(handle instanceof HTMLElement)) return;
-			const cell = handle.closest("th");
-			if (cell == null) return;
+			const target = event.currentTarget;
+			if (!(target instanceof HTMLElement) || event.button !== 0) return;
+			const cell = target.closest("th");
+			const state = cell == null ? null : buildResizeState(cell, column);
+			if (state == null || cell == null) return;
+			event.preventDefault();
+			const pointerId = event.pointerId;
 			const startX = event.clientX;
-			const startWidth = cell.getBoundingClientRect().width;
-			handle.setPointerCapture(event.pointerId);
+			const table = cell.closest("table");
+			const previousUserSelect = table?.style.userSelect ?? "";
+			if (table != null) table.style.userSelect = "none";
+			target.setAttribute("data-resizing", "true");
+			target.setPointerCapture(pointerId);
+			const listeners = new AbortController();
 			const move = (moveEvent) => {
-				if (!(moveEvent instanceof PointerEvent)) return;
-				const next = Math.max(60, startWidth + moveEvent.clientX - startX);
-				dragWidths.value = {
-					...dragWidths.value,
-					[column.key]: next
-				};
+				if (moveEvent.pointerId !== pointerId) return;
+				applyResize(resizeColumnWidths(state, (moveEvent.clientX - startX) * state.direction), state);
+			};
+			const finish = () => {
+				listeners.abort();
+				target.removeAttribute("data-resizing");
+				if (target.hasPointerCapture(pointerId)) target.releasePointerCapture(pointerId);
+				if (table != null) table.style.userSelect = previousUserSelect;
 			};
 			const stop = (upEvent) => {
-				handle.removeEventListener("pointermove", move);
-				handle.removeEventListener("pointerup", stop);
-				const width = dragWidths.value[column.key] ?? startWidth;
-				for (const plugin of props.plugins) plugin.onColumnResizeEnd?.(column.key, width);
-				if (upEvent instanceof PointerEvent && handle.hasPointerCapture(upEvent.pointerId)) handle.releasePointerCapture(upEvent.pointerId);
+				if (upEvent.pointerId !== pointerId) return;
+				finish();
+				commitResize(state, (upEvent.clientX - startX) * state.direction);
+			};
+			const cancel = (cancelEvent) => {
+				if (cancelEvent.pointerId !== pointerId) return;
+				finish();
+				resetResizeStyles(state);
 			};
-			handle.addEventListener("pointermove", move);
-			handle.addEventListener("pointerup", stop);
+			const options = { signal: listeners.signal };
+			target.addEventListener("pointermove", move, options);
+			target.addEventListener("pointerup", stop, options);
+			target.addEventListener("pointercancel", cancel, options);
+		}
+		function onResizeKeydown(event, column) {
+			const handle = event.currentTarget;
+			if (!(handle instanceof HTMLElement)) return;
+			const cell = handle.closest("th");
+			const state = cell == null ? null : buildResizeState(cell, column);
+			if (state == null) return;
+			const self = state.snapshots[state.resizeIndex];
+			if (self == null) return;
+			const step = columnResizeStep(event.shiftKey);
+			let delta = null;
+			switch (event.key) {
+				case "ArrowRight":
+					delta = step * state.direction;
+					break;
+				case "ArrowLeft":
+					delta = -step * state.direction;
+					break;
+				case "Home":
+					delta = self.minWidth - self.initialWidth;
+					break;
+				case "End": if (Number.isFinite(self.maxWidth)) delta = self.maxWidth - self.initialWidth;
+			}
+			if (delta == null) return;
+			event.preventDefault();
+			commitResize(state, delta);
 		}
 		function selectCellPatch(kind, row) {
 			return mergeCell(selectColumn(), row, kind);
 		}
+		function isSelected(row) {
+			return selection.value?.isSelected(row) === true;
+		}
+		function isEnabled(row) {
+			return selection.value?.isEnabled?.(row) ?? true;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "scrollRoot",
@@ -1589,6 +2156,13 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 				role: "group",
 				"aria-label": __props.label
 			}, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins.filter((item) => item.above), (plugin, index) => {
+					return openBlock(), createBlock(unref(PluginFooter), {
+						key: `above-${index}`,
+						plugin,
+						place: "above"
+					}, null, 8, ["plugin"]);
+				}), 128)),
 				createElementVNode("table", {
 					class: "astryx-table",
 					"data-density": __props.density,
@@ -1597,6 +2171,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					"data-hover": __props.hasHover || void 0,
 					"data-overflow": __props.textOverflow,
 					"data-valign": __props.verticalAlign,
+					"data-row-highlight": selection.value?.hasRowHighlight === false ? "off" : void 0,
 					"aria-rowcount": ariaRowCount.value,
 					style: normalizeStyle(__props.minWidth ? { minWidth: `${Math.max(__props.minWidth, widths.value.tableMinWidth)}px` } : { minWidth: `${widths.value.tableMinWidth}px` })
 				}, [createElementVNode("thead", null, [createElementVNode("tr", null, [selection.value ? (openBlock(), createElementBlock("th", mergeProps({
@@ -1619,43 +2194,58 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					}, { ref_for: true }, mergeCell(column, null, "header").attrs, {
 						style: headerStyle(column),
 						"aria-sort": sortFor(column)?.direction ?? void 0
-					}), [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(HeaderAddon), { column }, null, 8, ["column"]), sortFor(column) ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						type: "button",
-						class: "astryx-table__sort",
-						"data-align": column.align,
-						"aria-label": sortFor(column)?.label,
-						onClick: ($event) => sortFor(column)?.onClick($event)
-					}, [
-						column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 0 }, {
+					}), [
+						createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(HeaderAddon), {
+							column,
+							plugins: __props.plugins
+						}, null, 8, ["column", "plugins"]), sortFor(column) ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "astryx-table__sort",
+							"data-align": column.align,
+							"aria-label": sortFor(column)?.label,
+							onClick: ($event) => sortFor(column)?.onClick($event)
+						}, [
+							column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 0 }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
+								_: 2
+							}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(column.header ?? column.key), 1)),
+							createElementVNode("span", {
+								class: "astryx-table__sort-icon",
+								"data-active": sortFor(column)?.direction != null || void 0
+							}, [createVNode(_sfc_main$18, {
+								icon: sortFor(column)?.direction === "descending" ? "arrowDown" : "arrowUp",
+								size: "sm"
+							}, null, 8, ["icon"])], 8, _hoisted_8),
+							sortFor(column)?.rank ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(sortFor(column)?.rank), 1)) : createCommentVNode("v-if", true)
+						], 8, _hoisted_6)) : column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 1 }, {
 							default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
 							_: 2
-						}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(column.header ?? column.key), 1)),
-						createElementVNode("span", {
-							class: "astryx-table__sort-icon",
-							"data-active": sortFor(column)?.direction != null || void 0
-						}, [createVNode(_sfc_main$18, {
-							icon: sortFor(column)?.direction === "descending" ? "arrowDown" : "arrowUp",
-							size: "sm"
-						}, null, 8, ["icon"])], 8, _hoisted_8),
-						sortFor(column)?.rank ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(sortFor(column)?.rank), 1)) : createCommentVNode("v-if", true)
-					], 8, _hoisted_6)) : column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 1 }, {
-						default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
-						_: 2
-					}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(column.header ?? column.key), 1))]), filterFor(column) ? (openBlock(), createBlock(_sfc_main$11, {
-						key: 0,
-						filter: filterFor(column)
-					}, null, 8, ["filter"])) : createCommentVNode("v-if", true)]), canResize.value && column.resizable !== false ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: "astryx-table__resize",
-						onPointerdown: ($event) => startResize($event, column)
-					}, null, 40, _hoisted_11)) : createCommentVNode("v-if", true)], 16, _hoisted_3);
+						}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(column.header ?? column.key), 1))]), filterFor(column) ? (openBlock(), createBlock(_sfc_main$11, {
+							key: 0,
+							filter: filterFor(column)
+						}, null, 8, ["filter"])) : createCommentVNode("v-if", true)]),
+						createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- role=\"separator\" 是 WAI-ARIA 的分隔条：自己可聚焦，方向键也归它处理。 "),
+						resizeContributions.value.get(column.key)?.hasHandle ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: "astryx-table__resize",
+							role: "separator",
+							"aria-orientation": "vertical",
+							"aria-label": resizeLabel(column),
+							"aria-valuenow": resizeContributions.value.get(column.key)?.currentWidth ?? resizeContributions.value.get(column.key)?.minWidth,
+							"aria-valuemin": resizeContributions.value.get(column.key)?.minWidth,
+							"aria-valuemax": resizeMax(resizeContributions.value.get(column.key)),
+							tabindex: "0",
+							onPointerdown: ($event) => startResize($event, column),
+							onKeydown: ($event) => onResizeKeydown($event, column)
+						}, null, 40, _hoisted_11)) : createCommentVNode("v-if", true)
+					], 16, _hoisted_3);
 				}), 128))])]), createElementVNode("tbody", null, [__props.rows.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_12, [createElementVNode("td", {
 					class: "astryx-table__empty",
 					colspan: columnCount.value
 				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(messages).table.noData), 1)])], 8, _hoisted_13)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
 					return openBlock(), createElementBlock(Fragment, { key: entry.key }, [createElementVNode("tr", mergeProps({
-						"aria-selected": !entry.patch.group && selected(entry.row) ? "true" : void 0,
+						"aria-selected": !entry.patch.group && isSelected(entry.row) ? "true" : void 0,
 						"aria-rowindex": entry.rowIndex,
 						class: entry.patch.class
 					}, { ref_for: true }, entry.patch.attrs, {
@@ -1692,10 +2282,12 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 						label: selection.value.rowLabel?.(entry.row) ? unref(messages).table.selectRowNamed(selection.value.rowLabel(entry.row)) : unref(messages).table.selectRow,
 						"is-label-hidden": "",
 						size: "sm",
+						"is-disabled": !isEnabled(entry.row),
 						"onUpdate:modelValue": (value) => selection.value?.selectRow(entry.row, value === true)
 					}, null, 8, [
 						"model-value",
 						"label",
+						"is-disabled",
 						"onUpdate:modelValue"
 					])) : createCommentVNode("v-if", true)], 16)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
 						return openBlock(), createElementBlock("td", mergeProps({
@@ -1722,10 +2314,11 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 						colspan: columnCount.value
 					}, [createVNode(unref(RenderFn), { render: entry.patch.panel.render }, null, 8, ["render"])], 8, _hoisted_18)], 8, _hoisted_17)) : createCommentVNode("v-if", true)], 64);
 				}), 128))])], 12, _hoisted_2$1),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins, (plugin, index) => {
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins.filter((item) => item.below), (plugin, index) => {
 					return openBlock(), createBlock(unref(PluginFooter), {
-						key: index,
-						plugin
+						key: `below-${index}`,
+						plugin,
+						place: "below"
 					}, null, 8, ["plugin"]);
 				}), 128)),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [menu.value ? (openBlock(), createBlock(_sfc_main$9, {
@@ -1793,6 +2386,8 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 		const plugins = computed(() => Object.values(props.plugins ?? {}).filter((plugin) => plugin != null));
 		const dataMode = computed(() => props.data != null);
 		const columns = computed(() => props.columns ?? []);
+		const scrollEl = useTemplateRef("scroll");
+		useScrollbars(scrollEl);
 		return (_ctx, _cache) => {
 			return dataMode.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 0,
@@ -1833,6 +2428,7 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 				"row-count"
 			])) : (openBlock(), createElementBlock("div", {
 				key: 1,
+				ref: "scroll",
 				class: "astryx-table-scroll",
 				role: "group",
 				"aria-label": __props.label ?? unref(messages).table.label
@@ -1952,31 +2548,64 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/Table/TableSelectionToolbar.vue
-const _hoisted_1 = ["aria-label"];
+const _hoisted_1 = { class: "astryx-table-selection-toolbar__label" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxTableSelectionToolbar",
 	__name: "TableSelectionToolbar",
-	props: { count: {} },
+	props: {
+		count: { default: 0 },
+		selection: {},
+		label: {},
+		clearLabel: {},
+		size: { default: "sm" },
+		variant: { default: "muted" }
+	},
 	emits: ["clear"],
 	setup(__props, { emit: __emit }) {
+		const props = __props;
 		const emit = __emit;
 		const messages = useAstryxMessages();
+		/** 有 selection 就用它的计数，否则回落到 count。 */
+		const effectiveCount = computed(() => props.selection?.selectedCount ?? props.count);
+		/** 走 selection 时，一个都没选中就整条不渲染。 */
+		const isVisible = computed(() => props.selection == null || props.selection.hasSelection);
+		const resolvedLabel = computed(() => props.label ?? messages.value.table.bulkActionsLabel);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.table.clearAll);
+		const resolvedCountLabel = computed(() => messages.value.table.selectedCount(effectiveCount.value));
+		/** Toolbar 只有透明和弱化底，表面色这一档由本组件的类补上。 */
+		const toolbarVariant = computed(() => props.variant === "muted" ? "muted" : "transparent");
+		function clearSelection() {
+			props.selection?.clearSelection();
+			emit("clear");
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: "astryx-table-selection-toolbar",
-				role: "region",
-				"aria-label": unref(messages).table.bulkActionsLabel
-			}, [
-				createElementVNode("span", null, toDisplayString(unref(messages).table.selectedCount(__props.count)), 1),
-				renderSlot(_ctx.$slots, "default"),
-				createElementVNode("button", {
-					type: "button",
-					class: "astryx-table__sort",
-					onClick: _cache[0] || (_cache[0] = ($event) => emit("clear"))
-				}, toDisplayString(unref(messages).table.clearAll), 1)
-			], 8, _hoisted_1);
+			return isVisible.value ? (openBlock(), createBlock(_sfc_main$27, {
+				key: 0,
+				class: normalizeClass(["astryx-table-selection-toolbar", { "astryx-table-selection-toolbar--section": __props.variant === "section" }]),
+				label: resolvedLabel.value,
+				size: __props.size,
+				variant: toolbarVariant.value
+			}, createSlots({
+				end: withCtx(() => [createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "label", { count: effectiveCount.value }, () => [createTextVNode(toDisplayString(resolvedCountLabel.value), 1)])]), createVNode(_sfc_main$15, {
+					class: "astryx-table-selection-toolbar__clear",
+					label: resolvedClearLabel.value,
+					size: __props.size,
+					variant: "ghost",
+					onClick: clearSelection
+				}, null, 8, ["label", "size"])]),
+				_: 2
+			}, [_ctx.$slots.start || _ctx.$slots.default ? {
+				name: "start",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "start", {}, () => [renderSlot(_ctx.$slots, "default")])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"class",
+				"label",
+				"size",
+				"variant"
+			])) : createCommentVNode("v-if", true);
 		};
 	}
 });
 //#endregion
-export { useTableColumnSettings as A, resolveColumnWidths as B, isInteractiveRowClick as C, applyTableFilters as D, useTableGroupedRows as E, generateColumns as F, paginateData as I, pixel as L, useTableColumnResize as M, capitalize as N, useTableFilterState as O, cellText as P, proportional as R, useTablePagination as S, isTableGroupHeader as T, sortRows as V, useTableSelection as _, _sfc_main$4 as a, useTableRowIndex as b, _sfc_main$7 as c, useTableTreeState as d, resolveStickySide as f, useTableSortableState as g, useTableSortable as h, _sfc_main$3 as i, useTableColumnSettingsState as j, useTableFiltering as k, flattenTree as l, useTableStickyColumns as m, _sfc_main$1 as n, _sfc_main$5 as o, stickyOffsets as p, _sfc_main$2 as r, _sfc_main$6 as s, _sfc_main as t, useTableTreeData as u, useTableSelectionState as v, buildGroupedRows as w, useTableRowExpansion as x, useTableRowStatus as y, resolveColumnFloorWidths as z };
+export { useTableColumnSettings as A, generateColumns as B, isInteractiveRowClick as C, applyTableFilters as D, useTableGroupedRows as E, isProportionalColumnWidth as F, resolveColumnWidths as G, pixel as H, resizeColumnWidths as I, sortRows as K, useTableColumnResize as L, columnResizeDirectionSign as M, columnResizeMinWidth as N, useTableFilterState as O, columnResizeStep as P, capitalize as R, useTablePagination as S, isTableGroupHeader as T, proportional as U, paginateData as V, resolveColumnFloorWidths as W, useTableSelection as _, _sfc_main$4 as a, useTableRowIndex as b, _sfc_main$7 as c, useTableTreeState as d, resolveStickySide as f, useTableSortableState as g, useTableSortable as h, _sfc_main$3 as i, useTableColumnSettingsState as j, useTableFiltering as k, flattenTree as l, useTableStickyColumns as m, _sfc_main$1 as n, _sfc_main$5 as o, stickyOffsets as p, _sfc_main$2 as r, _sfc_main$6 as s, _sfc_main as t, useTableTreeData as u, useTableSelectionState as v, buildGroupedRows as w, useTableRowExpansion as x, useTableRowStatus as y, cellText as z };