@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{Table-hqZMmzfU.js → Table-BcrrylMX.js}

@@ -1,19 +1,24 @@
-import { t as _sfc_main$14 } from "./VisuallyHidden-C7NN3VEP.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 _sfc_main$18 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$19 } from "./CheckboxInput-BS9J6edf.js";
-import { t as _sfc_main$20 } from "./Popover-CtoBfVlD.js";
-import { t as _sfc_main$21 } from "./DateInput-u2XKccpK.js";
-import { t as _sfc_main$22 } from "./MultiSelector-BeV98x7X.js";
-import { t as _sfc_main$23 } from "./NumberInput-AZ9x3oja.js";
-import { t as _sfc_main$24 } from "./Pagination-Cc4BrjQg.js";
-import { t as _sfc_main$25 } from "./Selector-DuVozKNq.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, watch, withCtx, withModifiers } from "vue";
+import { t as _sfc_main$15 } from "./VisuallyHidden-C7NN3VEP.js";
+import { t as _sfc_main$16 } from "./Button-ONOoHdkg.js";
+import { n as useLayerTeleportTarget } from "./useLayerMountTarget-BmZyeKWE.js";
+import { n as firstCharacter } from "./characters-wTnzjkkR.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { n as useCollator } from "./locale-CabGJlGp.js";
+import { t as useScrollableArea } from "./useScrollableArea-BE8b3qm7.js";
+import { t as _sfc_main$17 } from "./Tooltip-sAM8i1eO.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$18 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$19 } from "./CheckboxInput-DJHCbwgC.js";
+import { t as _sfc_main$20 } from "./Popover-78dFjTb9.js";
+import { t as _sfc_main$21 } from "./DateInput-BjLdmYor.js";
+import { t as _sfc_main$22 } from "./MultiSelector-DuVatmq5.js";
+import { t as _sfc_main$23 } from "./NumberInput-B0vzOg3N.js";
+import { t as _sfc_main$24 } from "./Pagination-Bfe12018.js";
+import { t as _sfc_main$25 } from "./Selector-CPISLzp7.js";
+import { t as _sfc_main$26 } from "./TextInput-CI96einV.js";
+import { t as _sfc_main$27 } from "./Toolbar-C0pMWL4S.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, shallowRef, toDisplayString, toValue, unref, useAttrs, watch, withCtx, withModifiers } from "vue";
+import "../styles/layer.css";
 import "../styles/table.css";
 function proportional(value = 1, options) {
 	return {
@@ -74,6 +79,118 @@ function resolveColumnFloorWidths(columns) {
 	}
 	return widths;
 }
+const MAX_COMPATIBLE_FUNCTION = /^(?:calc|min|max|clamp|var)\(/i;
+const PX_LENGTH = /^(\d+(?:\.\d+)?)px$/i;
+const LENGTH_UNITS = /* @__PURE__ */ new Set([
+	"px",
+	"em",
+	"rem",
+	"lh",
+	"rlh",
+	"ex",
+	"rex",
+	"ch",
+	"rch",
+	"cap",
+	"rcap",
+	"ic",
+	"ric",
+	"vw",
+	"vh",
+	"vi",
+	"vb",
+	"vmin",
+	"vmax",
+	"svw",
+	"svh",
+	"svi",
+	"svb",
+	"svmin",
+	"svmax",
+	"lvw",
+	"lvh",
+	"lvi",
+	"lvb",
+	"lvmin",
+	"lvmax",
+	"dvw",
+	"dvh",
+	"dvi",
+	"dvb",
+	"dvmin",
+	"dvmax",
+	"cqw",
+	"cqh",
+	"cqi",
+	"cqb",
+	"cqmin",
+	"cqmax",
+	"cm",
+	"mm",
+	"q",
+	"in",
+	"pt",
+	"pc",
+	"%"
+]);
+function isZeroLength(value) {
+	const magnitude = value.trim().replace(/[a-z%]+$/i, "");
+	if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(magnitude)) return false;
+	return Number(magnitude) === 0;
+}
+function isCssMaxLength(value) {
+	if (value.endsWith("%")) return /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value.slice(0, -1));
+	const unit = value.match(/[a-z]+$/i)?.[0]?.toLowerCase();
+	if (unit == null || !LENGTH_UNITS.has(unit)) return false;
+	return /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value.slice(0, -unit.length));
+}
+/**
+* 数据表的内联最小宽度：列宽下限和调用方写的 `minWidth` 里较大的那个。
+*
+* 数字、0 和 px 直接比较。其它长度、百分比、`calc()` / `var()` 交给 CSS `max()`。
+* `auto`、`max-content` 这类关键字不能放进 `max()`，这时列宽下限胜出。
+*/
+function resolveTableMinWidth(consumer, floorPx) {
+	const floor = `${floorPx}px`;
+	if (consumer == null) return floor;
+	if (typeof consumer === "number") return `${Math.max(consumer, floorPx)}px`;
+	const value = consumer.trim();
+	if (value === "" || isZeroLength(value)) return floor;
+	const px = PX_LENGTH.exec(value);
+	if (px) return `${Math.max(Number(px[1]), floorPx)}px`;
+	if (isCssMaxLength(value) || MAX_COMPATIBLE_FUNCTION.test(value)) return `max(${value}, ${floor})`;
+	return floor;
+}
+/** 把样式里的 `minWidth` 拆出来，剩下的继续留给滚动容器。字符串样式拆不开，原样返回。 */
+function splitStyleMinWidth(style) {
+	if (style == null || typeof style === "string") return {
+		minWidth: void 0,
+		style
+	};
+	if (Array.isArray(style)) {
+		let minWidth;
+		const next = style.map((item) => {
+			const split = splitStyleMinWidth(item);
+			if (split.minWidth != null) minWidth = split.minWidth;
+			return split.style;
+		});
+		return {
+			minWidth,
+			style: next
+		};
+	}
+	if (typeof style === "object") {
+		const { minWidth, ...rest } = style;
+		return {
+			minWidth,
+			style: rest
+		};
+	}
+	return {
+		minWidth: void 0,
+		style
+	};
+}
 function resolveColumnWidths(columns) {
 	const { totalProportion, pixelTotal, maxProportionalSpace } = planColumnSpace(columns);
 	const result = /* @__PURE__ */ new Map();
@@ -97,7 +214,8 @@ function resolveColumnWidths(columns) {
 }
 function capitalize(value) {
 	if (value.length === 0) return value;
-	return value.charAt(0).toUpperCase() + value.slice(1);
+	const first = firstCharacter(value);
+	return first.toUpperCase() + value.slice(first.length);
 }
 function cellText(value) {
 	if (value == null) return "";
@@ -139,7 +257,7 @@ function generateColumns(data) {
 		};
 	});
 }
-function sortRows(rows, sort, columns = []) {
+function sortRows(rows, sort, columns = [], collator) {
 	if (sort.length === 0) return [...rows];
 	const comparators = /* @__PURE__ */ new Map();
 	for (const column of columns) {
@@ -151,19 +269,21 @@ function sortRows(rows, sort, columns = []) {
 	copy.sort((a, b) => {
 		for (const entry of sort) {
 			const custom = comparators.get(entry.sortKey);
-			const result = custom ? custom(a, b) : compareValues(a[entry.sortKey], b[entry.sortKey]);
+			const result = custom ? custom(a, b) : compareValues(a[entry.sortKey], b[entry.sortKey], collator);
 			if (result !== 0) return entry.direction === "ascending" ? result : -result;
 		}
 		return 0;
 	});
 	return copy;
 }
-function compareValues(a, b) {
+function compareValues(a, b, collator) {
 	if (a == null && b == null) return 0;
 	if (a == null) return 1;
 	if (b == null) return -1;
 	if (typeof a === "number" && typeof b === "number") return a - b;
-	return String(a).localeCompare(String(b));
+	const left = String(a);
+	const right = String(b);
+	return collator ? collator.compare(left, right) : left.localeCompare(right);
 }
 //#endregion
 //#region src/Table/plugins/columnResize.ts
@@ -587,8 +707,8 @@ function useTablePagination(config) {
 }
 //#endregion
 //#region src/Table/TableExpansionChevron.vue
-const _hoisted_1$10 = ["aria-expanded", "aria-label"];
-const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+const _hoisted_1$11 = ["aria-expanded", "aria-label"];
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTableExpansionChevron",
 	__name: "TableExpansionChevron",
 	props: { expanded: { type: Boolean } },
@@ -606,7 +726,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 			}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": __props.expanded }]) }, [createVNode(_sfc_main$18, {
 				icon: "chevronRight",
 				size: "xsm"
-			})], 2)], 8, _hoisted_1$10);
+			})], 2)], 8, _hoisted_1$11);
 		};
 	}
 });
@@ -627,7 +747,7 @@ function useTableRowExpansion(config) {
 					const current = toValue(config);
 					if (!(current.getIsItemExpandable?.(item) ?? true)) return null;
 					const key = current.getRowKey(item);
-					return h(_sfc_main$13, {
+					return h(_sfc_main$14, {
 						expanded: current.expandedKeys.has(key),
 						onToggle: () => current.onToggle(key)
 					});
@@ -870,9 +990,10 @@ function useTableSelection(config) {
 //#endregion
 //#region src/Table/plugins/sortable.ts
 function useTableSortableState(options) {
-	const sort = ref(options.defaultSort ?? []);
+	const sort = ref(toValue(options.defaultSort) ?? []);
+	const collator = useCollator({ numeric: true });
 	return {
-		sortedData: computed(() => sortRows(toValue(options.data), sort.value, toValue(options.columns) ?? [])),
+		sortedData: computed(() => sortRows(toValue(options.data), sort.value, toValue(options.columns) ?? [], collator.value)),
 		sort,
 		sortConfig: {
 			get sort() {
@@ -1052,13 +1173,13 @@ function selectColumn() {
 }
 //#endregion
 //#region src/Table/TableTreeCell.vue
-const _hoisted_1$9 = ["aria-expanded", "aria-label"];
-const _hoisted_2$4 = {
+const _hoisted_1$10 = ["aria-expanded", "aria-label"];
+const _hoisted_2$3 = {
 	key: 1,
 	class: "astryx-table__tree-spacer"
 };
 const _hoisted_3$3 = { class: "astryx-table__tree-label" };
-const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTableTreeCell",
 	__name: "TableTreeCell",
 	props: {
@@ -1095,12 +1216,19 @@ const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 			}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": __props.expanded }]) }, [createVNode(_sfc_main$18, {
 				icon: "chevronRight",
 				size: "xsm"
-			})], 2)], 8, _hoisted_1$9)) : (openBlock(), createElementBlock("span", _hoisted_2$4)), createElementVNode("span", _hoisted_3$3, [renderSlot(_ctx.$slots, "default")])], 4);
+			})], 2)], 8, _hoisted_1$10)) : (openBlock(), createElementBlock("span", _hoisted_2$3)), createElementVNode("span", _hoisted_3$3, [renderSlot(_ctx.$slots, "default")])], 4);
 		};
 	}
 });
 //#endregion
 //#region src/Table/plugins/tree.ts
+/**
+* config 本身和里面的字段都可能是 ref 或 getter，两层都要解开。
+* 只解数据类字段：`idKey` 这类回调字段是函数，`toValue` 会把它当 getter 调用掉。
+*/
+function fieldValue(value) {
+	return value === void 0 ? void 0 : toValue(value);
+}
 function itemId(item, idKey) {
 	return typeof idKey === "function" ? String(idKey(item)) : String(item[idKey]);
 }
@@ -1124,7 +1252,7 @@ function flattenTree(config, expandedIds) {
 			expandablePath.delete(id);
 		}
 	};
-	walkAll(config.data);
+	walkAll(fieldValue(config.data) ?? []);
 	const path = /* @__PURE__ */ new Set();
 	const walk = (items, level) => {
 		const siblings = config.sortSiblings ? config.sortSiblings([...items]) : items;
@@ -1147,7 +1275,7 @@ function flattenTree(config, expandedIds) {
 			}
 		}
 	};
-	walk(config.data, 0);
+	walk(fieldValue(config.data) ?? [], 0);
 	return {
 		rows,
 		meta,
@@ -1184,7 +1312,7 @@ function useTableTreeData(config) {
 						const meta = live.getRowMeta(item);
 						const body = original?.(item, index) ?? cellText(item[column.key]);
 						if (meta == null) return body;
-						return h(_sfc_main$12, {
+						return h(_sfc_main$13, {
 							level: meta.level,
 							hasChildren: meta.hasChildren,
 							expanded: meta.isExpanded,
@@ -1237,8 +1365,8 @@ function useTableTreeData(config) {
 }
 function useTableTreeState(config) {
 	const initial = toValue(config);
-	const internal = ref(new Set(initial.defaultExpandedIds ?? []));
-	const expandedIds = computed(() => toValue(config).expandedIds ?? internal.value);
+	const internal = ref(new Set(fieldValue(initial.defaultExpandedIds) ?? []));
+	const expandedIds = computed(() => fieldValue(toValue(config).expandedIds) ?? internal.value);
 	const flat = computed(() => flattenTree(toValue(config), expandedIds.value));
 	const isAllExpanded = computed(() => expansionState(flat.value.expandableIds, expandedIds.value));
 	function commit(next) {
@@ -1283,6 +1411,72 @@ function useTableTreeState(config) {
 	};
 }
 //#endregion
+//#region src/Table/rowPatch.ts
+/**
+* 把多个插件的行事件合成一个处理器，按插件顺序依次调用。
+* 每个事件单独合并，插件只给其中一个事件时其余事件不受影响。
+*/
+function mergeListeners(sources) {
+	if (sources.length === 0) return void 0;
+	const enters = sources.map((source) => source.onMouseenter).filter((handler) => handler != null);
+	const leaves = sources.map((source) => source.onMouseleave).filter((handler) => handler != null);
+	const focuses = sources.map((source) => source.onFocus).filter((handler) => handler != null);
+	const blurs = sources.map((source) => source.onBlur).filter((handler) => handler != null);
+	const merged = {};
+	if (enters.length > 0) merged.onMouseenter = (event) => {
+		for (const handler of enters) handler(event);
+	};
+	if (leaves.length > 0) merged.onMouseleave = (event) => {
+		for (const handler of leaves) handler(event);
+	};
+	if (focuses.length > 0) merged.onFocus = (event) => {
+		for (const handler of focuses) handler(event);
+	};
+	if (blurs.length > 0) merged.onBlur = (event) => {
+		for (const handler of blurs) handler(event);
+	};
+	return merged;
+}
+/**
+* 收集所有插件对这一行的贡献。分组头、展开面板、是否参与选择这类二选一的字段以第一个给出
+* 结果的插件为准，类名、属性、事件、行元素回调、右键菜单则依次叠加。
+*/
+function mergeRowPatches(plugins, row, index, columnCount) {
+	const classes = [];
+	const clicks = [];
+	const refs = [];
+	const menus = [];
+	const listeners = [];
+	const merged = {};
+	for (const plugin of plugins) {
+		const patch = plugin.rowPatch?.(row, index, columnCount);
+		if (patch == null) continue;
+		if (patch.group && merged.group == null) merged.group = patch.group;
+		if (patch.panel && merged.panel == null) merged.panel = patch.panel;
+		if (patch.suppressSelection) merged.suppressSelection = true;
+		if (patch.skipRowIndex) merged.skipRowIndex = true;
+		if (patch.class) classes.push(patch.class);
+		if (patch.attrs) merged.attrs = {
+			...merged.attrs,
+			...patch.attrs
+		};
+		if (patch.onClick) clicks.push(patch.onClick);
+		if (patch.ref) refs.push(patch.ref);
+		if (patch.listeners) listeners.push(patch.listeners);
+		if (patch.menu) menus.push(...patch.menu);
+	}
+	merged.class = classes.join(" ") || void 0;
+	merged.menu = menus;
+	merged.listeners = mergeListeners(listeners);
+	if (clicks.length > 0) merged.onClick = (event) => {
+		for (const click of clicks) click(event);
+	};
+	if (refs.length > 0) merged.ref = (element) => {
+		for (const callback of refs) callback(element);
+	};
+	return merged;
+}
+//#endregion
 //#region src/Table/TableDataRenderers.ts
 /**
 * 渲染单元格内容：优先走列自己的 renderCell，没给就回退成纯文本。
@@ -1377,10 +1571,11 @@ const PluginFooter = defineComponent({
 });
 //#endregion
 //#region src/Table/TableFilterControl.vue
-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({
+const _hoisted_1$9 = ["data-variant"];
+const _hoisted_2$2 = ["aria-label", "data-active"];
+const _hoisted_3$2 = { class: "astryx-table__filter-popover" };
+const _hoisted_4$2 = { class: "astryx-table__filter-actions" };
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 	__name: "TableFilterControl",
 	props: { filter: {} },
 	setup(__props) {
@@ -1388,6 +1583,11 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const draft = ref(props.filter.value);
 		const isCompact = computed(() => props.filter.variant === "inline-compact");
+		/** 有生效的筛选值时漏斗用强调色，一眼看出这一列被筛过。 */
+		const hasValue = computed(() => {
+			const value = props.filter.value;
+			return value != null && value !== "" && !(Array.isArray(value) && value.length === 0);
+		});
 		watch(() => props.filter.value, (value) => {
 			draft.value = value;
 		});
@@ -1521,7 +1721,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 				"has-close-button": false,
 				width: 240
 			}, {
-				content: withCtx(() => [createElementVNode("div", _hoisted_2$3, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$26, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_3$2, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$26, {
 					key: 0,
 					"model-value": textValue(draft.value),
 					label: __props.filter.field.label,
@@ -1594,7 +1794,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					"label",
 					"placeholder",
 					"options"
-				])), createElementVNode("div", _hoisted_3$2, [createVNode(_sfc_main$15, {
+				])), createElementVNode("div", _hoisted_4$2, [createVNode(_sfc_main$16, {
 					variant: "ghost",
 					size: "sm",
 					label: unref(messages).table.reset,
@@ -1605,7 +1805,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.reset), 1)]),
 					_: 1
-				}, 8, ["label"]), createVNode(_sfc_main$15, {
+				}, 8, ["label"]), createVNode(_sfc_main$16, {
 					variant: "primary",
 					size: "sm",
 					label: unref(messages).table.apply,
@@ -1614,33 +1814,32 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.apply), 1)]),
 					_: 1
 				}, 8, ["label"])])])]),
-				default: withCtx(() => [createVNode(_sfc_main$16, {
-					variant: "ghost",
-					size: "sm",
-					label: __props.filter.field.label
-				}, {
-					default: withCtx(() => [createVNode(_sfc_main$18, {
-						icon: "funnel",
-						size: "sm"
-					})]),
-					_: 1
-				}, 8, ["label"])]),
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: "astryx-table__filter-trigger",
+					"aria-label": __props.filter.field.label,
+					"data-active": hasValue.value || void 0
+				}, [createVNode(_sfc_main$18, {
+					icon: "funnel",
+					size: "xsm",
+					color: hasValue.value ? "accent" : "secondary"
+				}, null, 8, ["color"])], 8, _hoisted_2$2)]),
 				_: 1
-			}, 8, ["label"]))], 8, _hoisted_1$8);
+			}, 8, ["label"]))], 8, _hoisted_1$9);
 		};
 	}
 });
 //#endregion
 //#region src/Table/TableGroupHeader.vue
-const _hoisted_1$7 = ["data-pinned"];
-const _hoisted_2$2 = [
+const _hoisted_1$8 = ["data-pinned"];
+const _hoisted_2$1 = [
 	"data-pinned",
 	"aria-expanded",
 	"aria-label"
 ];
 const _hoisted_3$1 = { class: "astryx-table__group-label" };
 const _hoisted_4$1 = { class: "astryx-table__group-count" };
-const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTableGroupHeader",
 	__name: "TableGroupHeader",
 	props: {
@@ -1667,19 +1866,19 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 			}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": !__props.collapsed }]) }, [createVNode(_sfc_main$18, {
 				icon: "chevronRight",
 				size: "sm"
-			})], 2)], 8, _hoisted_2$2), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_3$1, [createTextVNode(toDisplayString(__props.groupKey) + " ", 1), createElementVNode("span", _hoisted_4$1, "(" + toDisplayString(__props.count) + ")", 1)])])], 8, _hoisted_1$7);
+			})], 2)], 8, _hoisted_2$1), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_3$1, [createTextVNode(toDisplayString(__props.groupKey) + " ", 1), createElementVNode("span", _hoisted_4$1, "(" + toDisplayString(__props.count) + ")", 1)])])], 8, _hoisted_1$8);
 		};
 	}
 });
 //#endregion
 //#region src/Table/TableRowMenu.vue
-const _hoisted_1$6 = [
+const _hoisted_1$7 = [
 	"tabindex",
 	"onClick",
 	"onFocusin",
 	"onMouseenter"
 ];
-const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTableRowMenu",
 	__name: "TableRowMenu",
 	props: {
@@ -1691,6 +1890,7 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const teleportTarget = useLayerTeleportTarget();
 		const root = ref(null);
 		const active = ref(0);
 		function focusItem(index) {
@@ -1738,10 +1938,10 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 			document.removeEventListener("pointerdown", onPointerDown);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
+			return openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [createElementVNode("div", {
 				ref_key: "root",
 				ref: root,
-				class: "astryx-table-menu",
+				class: "astryx-table-menu astryx-layer",
 				role: "menu",
 				tabindex: "-1",
 				style: normalizeStyle({
@@ -1763,15 +1963,208 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 					key: 0,
 					icon: item.icon,
 					size: "xsm"
-				}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 40, _hoisted_1$6);
-			}), 128))], 36);
+				}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 40, _hoisted_1$7);
+			}), 128))], 36)], 8, ["to"]);
 		};
 	}
 });
 //#endregion
+//#region src/Table/TableScroll.vue
+const _hoisted_1$6 = ["aria-label", "tabindex"];
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "TableScroll",
+	props: { label: {} },
+	emits: ["viewport"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const attrs = useAttrs();
+		const scroll = useScrollableArea({
+			axis: "inline",
+			overscroll: "contain",
+			keyboardAccess: { owner: "content" }
+		});
+		const viewportEl = shallowRef(null);
+		function bindViewport(element) {
+			scroll.viewport(element);
+			const node = element instanceof HTMLElement ? element : null;
+			viewportEl.value = node;
+			emit("viewport", node);
+		}
+		useScrollbars(viewportEl);
+		const tabindex = computed(() => scroll.state.value.inline.isScrollable ? 0 : void 0);
+		const rootClass = computed(() => ["astryx-table-scroll", attrs.class]);
+		const rootStyle = computed(() => [attrs.style, scroll.viewportStyle.value]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref: bindViewport,
+				class: rootClass.value,
+				role: "group",
+				"aria-label": __props.label,
+				tabindex: tabindex.value
+			}, unref(scroll).viewportAttrs.value, { style: rootStyle.value }), [createElementVNode("div", {
+				ref: unref(scroll).content,
+				"data-scroll-content": ""
+			}, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$6);
+		};
+	}
+});
+//#endregion
+//#region src/Table/useTableColumnResizeSession.ts
+/**
+* 表头列宽把手的指针拖动和键盘步进。
+* 宽度怎么分给相邻列由 `resizeColumnWidths` 决定，这里只负责会话和预览。
+*/
+function useTableColumnResizeSession(options) {
+	function buildResizeState(cell, column) {
+		const row = cell.parentElement;
+		if (row == null) return null;
+		const table = cell.closest("table");
+		const contributions = options.contributions();
+		const dragged = contributions.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 = contributions.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 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 options.plugins()) plugin.onColumnResizeEnd?.(updates);
+	}
+	function resizeLabel(column) {
+		const header = typeof column.header === "string" && column.header.length > 0 ? column.header : column.key;
+		return options.resizeColumnLabel(header);
+	}
+	function resizeMax(contribution) {
+		const max = contribution?.maxWidth;
+		return max == null || !Number.isFinite(max) ? void 0 : max;
+	}
+	function startResize(event, column) {
+		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 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.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) => {
+			if (upEvent.pointerId !== pointerId) return;
+			finish();
+			commitResize(state, (upEvent.clientX - startX) * state.direction);
+		};
+		const cancel = (cancelEvent) => {
+			if (cancelEvent.pointerId !== pointerId) return;
+			finish();
+			resetResizeStyles(state);
+		};
+		const listenerOptions = { signal: listeners.signal };
+		target.addEventListener("pointermove", move, listenerOptions);
+		target.addEventListener("pointerup", stop, listenerOptions);
+		target.addEventListener("pointercancel", cancel, listenerOptions);
+	}
+	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);
+	}
+	return {
+		startResize,
+		onResizeKeydown,
+		resizeLabel,
+		resizeMax
+	};
+}
+//#endregion
 //#region src/Table/TableData.vue
-const _hoisted_1$5 = ["aria-label"];
-const _hoisted_2$1 = [
+const _hoisted_1$5 = [
 	"data-density",
 	"data-dividers",
 	"data-striped",
@@ -1781,26 +2174,26 @@ const _hoisted_2$1 = [
 	"data-row-highlight",
 	"aria-rowcount"
 ];
-const _hoisted_3 = [
+const _hoisted_2 = [
 	"data-column",
 	"data-align",
 	"aria-sort"
 ];
-const _hoisted_4 = { class: "astryx-table__header" };
-const _hoisted_5 = { class: "astryx-table__header-line" };
-const _hoisted_6 = [
+const _hoisted_3 = { class: "astryx-table__header" };
+const _hoisted_4 = { class: "astryx-table__header-line" };
+const _hoisted_5 = [
 	"data-align",
 	"aria-label",
 	"onClick"
 ];
-const _hoisted_7 = { key: 1 };
-const _hoisted_8 = ["data-active"];
-const _hoisted_9 = {
+const _hoisted_6 = { key: 1 };
+const _hoisted_7 = ["data-active"];
+const _hoisted_8 = {
 	key: 2,
 	class: "astryx-table__sort-rank"
 };
-const _hoisted_10 = { key: 2 };
-const _hoisted_11 = [
+const _hoisted_9 = { key: 2 };
+const _hoisted_10 = [
 	"aria-label",
 	"aria-valuenow",
 	"aria-valuemin",
@@ -1808,20 +2201,24 @@ const _hoisted_11 = [
 	"onPointerdown",
 	"onKeydown"
 ];
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = ["colspan"];
-const _hoisted_14 = [
+const _hoisted_11 = { key: 0 };
+const _hoisted_12 = ["colspan"];
+const _hoisted_13 = [
 	"aria-selected",
 	"aria-rowindex",
+	"onBlur",
 	"onClick",
-	"onContextmenu"
+	"onContextmenu",
+	"onFocus",
+	"onMouseenter",
+	"onMouseleave"
 ];
-const _hoisted_15 = ["colspan"];
-const _hoisted_16 = ["data-column", "data-align"];
-const _hoisted_17 = ["data-variant"];
-const _hoisted_18 = ["colspan"];
-/** 收集这一行表头的宽度快照，用来算拖动后的宽度。 */
+const _hoisted_14 = ["colspan"];
+const _hoisted_15 = ["data-column", "data-align"];
+const _hoisted_16 = ["data-variant"];
+const _hoisted_17 = ["colspan"];
 const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "TableData",
 	props: {
 		rows: {},
@@ -1836,14 +2233,15 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 		textOverflow: {},
 		verticalAlign: {},
 		rowIndexStart: {},
-		rowCount: {},
-		minWidth: {}
+		rowCount: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const attrs = useAttrs();
 		const messages = useAstryxMessages();
 		const scrollRoot = ref(null);
 		const menu = ref(null);
+		const scrollStyle = computed(() => splitStyleMinWidth(attrs.style).style);
 		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);
@@ -1866,6 +2264,12 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			};
 		}
 		const resizeContributions = computed(() => new Map(resolvedColumns.value.map((column) => [column.key, resizeContribution(column)])));
+		const { startResize, onResizeKeydown, resizeLabel, resizeMax } = useTableColumnResizeSession({
+			plugins: () => props.plugins,
+			contributions: () => resizeContributions.value,
+			resizeColumnLabel: (header) => messages.value.table.resizeColumn(header)
+		});
+		const tableStyle = computed(() => ({ minWidth: resolveTableMinWidth(splitStyleMinWidth(attrs.style).minWidth, widths.value.tableMinWidth) }));
 		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);
@@ -1876,10 +2280,12 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 		function bindScroll(element) {
 			for (const plugin of props.plugins) plugin.bindScrollRoot?.(element);
 		}
-		watch(scrollRoot, (element, previous) => {
-			if (previous) bindScroll(null);
-			if (element) bindScroll(element);
-		});
+		function onViewport(element) {
+			if (scrollRoot.value === element) return;
+			if (scrollRoot.value != null) bindScroll(null);
+			scrollRoot.value = element;
+			if (element != null) bindScroll(element);
+		}
 		onBeforeUnmount(() => {
 			bindScroll(null);
 		});
@@ -1906,6 +2312,16 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			}
 			return null;
 		}
+		const filterContributions = computed(() => new Map(resolvedColumns.value.map((column) => [column.key, filterFor(column)])));
+		/**
+		* 取某一列落在指定位置的筛选控件。
+		* `popover` 是一个漏斗按钮，跟标题、排序图标同一行；`inline` 系列是输入框，垫在标题下面。
+		*/
+		function filterAt(column, place) {
+			const filter = filterContributions.value.get(column.key) ?? null;
+			if (filter == null) return null;
+			return (filter.variant === "popover" ? "line" : "below") === place ? filter : null;
+		}
 		function rowKey(row, index) {
 			if (typeof props.idKey === "function") return props.idKey(row);
 			const id = row[props.idKey];
@@ -1944,38 +2360,19 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			if (column.verticalAlign) style.verticalAlign = column.verticalAlign;
 			return style;
 		}
-		function mergeRow(row, index) {
-			const classes = [];
-			const clicks = [];
-			const menus = [];
-			const merged = {};
-			for (const plugin of props.plugins) {
-				const patch = plugin.rowPatch?.(row, index, columnCount.value);
-				if (patch == null) continue;
-				if (patch.group && merged.group == null) merged.group = patch.group;
-				if (patch.panel && merged.panel == null) merged.panel = patch.panel;
-				if (patch.suppressSelection) merged.suppressSelection = true;
-				if (patch.skipRowIndex) merged.skipRowIndex = true;
-				if (patch.class) classes.push(patch.class);
-				if (patch.attrs) merged.attrs = {
-					...merged.attrs,
-					...patch.attrs
-				};
-				if (patch.onClick) clicks.push(patch.onClick);
-				if (patch.menu) menus.push(...patch.menu);
-			}
-			merged.class = classes.join(" ") || void 0;
-			merged.menu = menus;
-			if (clicks.length > 0) merged.onClick = (event) => {
-				for (const click of clicks) click(event);
+		/** Vue 的 ref 回调拿到的是更宽的 `Element`，收窄成 `<tr>` 再交给插件。 */
+		function rowRefBinding(patch) {
+			const callback = patch.ref;
+			if (callback == null) return void 0;
+			return (element) => {
+				callback(element);
 			};
-			return merged;
 		}
 		const entries = computed(() => {
 			let ordinal = 0;
 			const start = props.rowIndexStart ?? 1;
 			return props.rows.map((row, index) => {
-				const patch = mergeRow(row, index);
+				const patch = mergeRowPatches(props.plugins, row, index, columnCount.value);
 				let rowIndex;
 				if (trackRows.value && !patch.skipRowIndex) {
 					rowIndex = start + ordinal;
@@ -1986,6 +2383,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 					row,
 					index,
 					patch,
+					ref: rowRefBinding(patch),
 					rowIndex
 				};
 			});
@@ -1999,144 +2397,6 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 				items
 			};
 		}
-		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 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 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 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.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) => {
-				if (upEvent.pointerId !== pointerId) return;
-				finish();
-				commitResize(state, (upEvent.clientX - startX) * state.direction);
-			};
-			const cancel = (cancelEvent) => {
-				if (cancelEvent.pointerId !== pointerId) return;
-				finish();
-				resetResizeStyles(state);
-			};
-			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);
 		}
@@ -2147,197 +2407,215 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			return selection.value?.isEnabled?.(row) ?? true;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "scrollRoot",
-				ref: scrollRoot,
-				class: "astryx-table-scroll",
-				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,
-					"data-dividers": __props.dividers,
-					"data-striped": __props.isStriped || void 0,
-					"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({
-					key: 0,
-					class: ["astryx-table__select", selectCellPatch("header", null).class],
-					scope: "col"
-				}, selectCellPatch("header", null).attrs, { style: selectCellPatch("header", null).style }), [createVNode(_sfc_main$19, {
-					"model-value": selection.value.isIndeterminate() ? "indeterminate" : selection.value.isAllSelected(),
-					label: unref(messages).table.selectAllRows,
-					"is-label-hidden": "",
-					size: "sm",
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => selection.value?.selectAll(value === true))
-				}, null, 8, ["model-value", "label"])], 16)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
-					return openBlock(), createElementBlock("th", mergeProps({
-						key: column.key,
-						scope: "col",
-						"data-column": column.key,
-						"data-align": column.align,
-						class: mergeCell(column, null, "header").class
-					}, { 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,
-							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_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 && isSelected(entry.row) ? "true" : void 0,
-						"aria-rowindex": entry.rowIndex,
-						class: entry.patch.class
-					}, { ref_for: true }, entry.patch.attrs, {
-						onClick: ($event) => entry.patch.onClick?.($event),
-						onContextmenu: ($event) => openMenu($event, entry.patch.menu)
-					}), [entry.patch.group ? (openBlock(), createElementBlock("td", {
-						key: 0,
-						class: "astryx-table__group",
-						colspan: columnCount.value
-					}, [createVNode(_sfc_main$10, {
-						"group-key": entry.patch.group.groupKey,
-						count: entry.patch.group.count,
-						collapsed: entry.patch.group.collapsed,
-						custom: entry.patch.group.render != null,
-						onToggle: ($event) => entry.patch.group.onToggle()
-					}, {
-						default: withCtx(() => [entry.patch.group.render ? (openBlock(), createBlock(unref(RenderFn), {
-							key: 0,
-							render: entry.patch.group.render
-						}, null, 8, ["render"])) : createCommentVNode("v-if", true)]),
-						_: 2
-					}, 1032, [
-						"group-key",
-						"count",
-						"collapsed",
-						"custom",
-						"onToggle"
-					])], 8, _hoisted_15)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selection.value && !entry.patch.suppressSelection ? (openBlock(), createElementBlock("td", mergeProps({
-						key: 0,
-						class: ["astryx-table__select", selectCellPatch("body", entry.row).class]
-					}, { ref_for: true }, selectCellPatch("body", entry.row).attrs, { style: selectCellPatch("body", entry.row).style }), [selection.value.isSelectable?.(entry.row) !== false ? (openBlock(), createBlock(_sfc_main$19, {
+			return openBlock(), createBlock(_sfc_main$9, {
+				class: normalizeClass(unref(attrs).class),
+				style: normalizeStyle(scrollStyle.value),
+				label: __props.label,
+				onViewport
+			}, {
+				default: withCtx(() => [
+					(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,
+						"data-dividers": __props.dividers,
+						"data-striped": __props.isStriped || void 0,
+						"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(tableStyle.value)
+					}, [createElementVNode("thead", null, [createElementVNode("tr", null, [selection.value ? (openBlock(), createElementBlock("th", mergeProps({
 						key: 0,
-						"model-value": selection.value.isSelected(entry.row),
-						label: selection.value.rowLabel?.(entry.row) ? unref(messages).table.selectRowNamed(selection.value.rowLabel(entry.row)) : unref(messages).table.selectRow,
+						class: ["astryx-table__select", selectCellPatch("header", null).class],
+						scope: "col"
+					}, selectCellPatch("header", null).attrs, { style: selectCellPatch("header", null).style }), [createVNode(_sfc_main$19, {
+						"model-value": selection.value.isIndeterminate() ? "indeterminate" : selection.value.isAllSelected(),
+						label: unref(messages).table.selectAllRows,
 						"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({
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => selection.value?.selectAll(value === true))
+					}, null, 8, ["model-value", "label"])], 16)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
+						return openBlock(), createElementBlock("th", mergeProps({
 							key: column.key,
+							scope: "col",
 							"data-column": column.key,
 							"data-align": column.align,
-							class: mergeCell(column, entry.row, "body").class
-						}, { ref_for: true }, mergeCell(column, entry.row, "body").attrs, { style: bodyStyle(column, entry.row) }), [createVNode(unref(CellContent), {
-							column,
-							row: entry.row,
-							index: entry.index
+							class: mergeCell(column, null, "header").class
+						}, { ref_for: true }, mergeCell(column, null, "header").attrs, {
+							style: headerStyle(column),
+							"aria-sort": sortFor(column)?.direction ?? void 0
+						}), [
+							createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
+								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$15, { key: 0 }, {
+										default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
+										_: 2
+									}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_6, 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_7),
+									sortFor(column)?.rank ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(sortFor(column)?.rank), 1)) : createCommentVNode("v-if", true)
+								], 8, _hoisted_5)) : column.headerHidden ? (openBlock(), createBlock(_sfc_main$15, { key: 1 }, {
+									default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
+									_: 2
+								}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(column.header ?? column.key), 1)),
+								filterAt(column, "line") ? (openBlock(), createBlock(_sfc_main$12, {
+									key: 3,
+									filter: filterAt(column, "line")
+								}, null, 8, ["filter"])) : createCommentVNode("v-if", true)
+							]), filterAt(column, "below") ? (openBlock(), createBlock(_sfc_main$12, {
+								key: 0,
+								filter: filterAt(column, "below")
+							}, 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": unref(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": unref(resizeMax)(resizeContributions.value.get(column.key)),
+								tabindex: "0",
+								onPointerdown: ($event) => unref(startResize)($event, column),
+								onKeydown: ($event) => unref(onResizeKeydown)($event, column)
+							}, null, 40, _hoisted_10)) : createCommentVNode("v-if", true)
+						], 16, _hoisted_2);
+					}), 128))])]), createElementVNode("tbody", null, [__props.rows.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_11, [createElementVNode("td", {
+						class: "astryx-table__empty",
+						colspan: columnCount.value
+					}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(messages).table.noData), 1)])], 8, _hoisted_12)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
+						return openBlock(), createElementBlock(Fragment, { key: entry.key }, [createElementVNode("tr", mergeProps({
+							ref_for: true,
+							ref: entry.ref,
+							"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, {
+							onBlur: ($event) => entry.patch.listeners?.onBlur?.($event),
+							onClick: ($event) => entry.patch.onClick?.($event),
+							onContextmenu: ($event) => openMenu($event, entry.patch.menu),
+							onFocus: ($event) => entry.patch.listeners?.onFocus?.($event),
+							onMouseenter: ($event) => entry.patch.listeners?.onMouseenter?.($event),
+							onMouseleave: ($event) => entry.patch.listeners?.onMouseleave?.($event)
+						}), [entry.patch.group ? (openBlock(), createElementBlock("td", {
+							key: 0,
+							class: "astryx-table__group",
+							colspan: columnCount.value
+						}, [createVNode(_sfc_main$11, {
+							"group-key": entry.patch.group.groupKey,
+							count: entry.patch.group.count,
+							collapsed: entry.patch.group.collapsed,
+							custom: entry.patch.group.render != null,
+							onToggle: ($event) => entry.patch.group.onToggle()
+						}, {
+							default: withCtx(() => [entry.patch.group.render ? (openBlock(), createBlock(unref(RenderFn), {
+								key: 0,
+								render: entry.patch.group.render
+							}, null, 8, ["render"])) : createCommentVNode("v-if", true)]),
+							_: 2
+						}, 1032, [
+							"group-key",
+							"count",
+							"collapsed",
+							"custom",
+							"onToggle"
+						])], 8, _hoisted_14)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selection.value && !entry.patch.suppressSelection ? (openBlock(), createElementBlock("td", mergeProps({
+							key: 0,
+							class: ["astryx-table__select", selectCellPatch("body", entry.row).class]
+						}, { ref_for: true }, selectCellPatch("body", entry.row).attrs, { style: selectCellPatch("body", entry.row).style }), [selection.value.isSelectable?.(entry.row) !== false ? (openBlock(), createBlock(_sfc_main$19, {
+							key: 0,
+							"model-value": selection.value.isSelected(entry.row),
+							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, [
-							"column",
-							"row",
-							"index"
-						])], 16, _hoisted_16);
-					}), 128))], 64))], 16, _hoisted_14), entry.patch.panel ? (openBlock(), createElementBlock("tr", {
+							"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({
+								key: column.key,
+								"data-column": column.key,
+								"data-align": column.align,
+								class: mergeCell(column, entry.row, "body").class
+							}, { ref_for: true }, mergeCell(column, entry.row, "body").attrs, { style: bodyStyle(column, entry.row) }), [createVNode(unref(CellContent), {
+								column,
+								row: entry.row,
+								index: entry.index
+							}, null, 8, [
+								"column",
+								"row",
+								"index"
+							])], 16, _hoisted_15);
+						}), 128))], 64))], 16, _hoisted_13), entry.patch.panel ? (openBlock(), createElementBlock("tr", {
+							key: 0,
+							"data-expansion-panel": "",
+							class: "astryx-table__panel-row",
+							"data-variant": entry.patch.panel.variant
+						}, [createElementVNode("td", {
+							class: "astryx-table__panel",
+							colspan: columnCount.value
+						}, [createVNode(unref(RenderFn), { render: entry.patch.panel.render }, null, 8, ["render"])], 8, _hoisted_17)], 8, _hoisted_16)) : createCommentVNode("v-if", true)], 64);
+					}), 128))])], 12, _hoisted_1$5),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins.filter((item) => item.below), (plugin, index) => {
+						return openBlock(), createBlock(unref(PluginFooter), {
+							key: `below-${index}`,
+							plugin,
+							place: "below"
+						}, null, 8, ["plugin"]);
+					}), 128)),
+					menu.value ? (openBlock(), createBlock(_sfc_main$10, {
 						key: 0,
-						"data-expansion-panel": "",
-						class: "astryx-table__panel-row",
-						"data-variant": entry.patch.panel.variant
-					}, [createElementVNode("td", {
-						class: "astryx-table__panel",
-						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.filter((item) => item.below), (plugin, index) => {
-					return openBlock(), createBlock(unref(PluginFooter), {
-						key: `below-${index}`,
-						plugin,
-						place: "below"
-					}, null, 8, ["plugin"]);
-				}), 128)),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [menu.value ? (openBlock(), createBlock(_sfc_main$9, {
-					key: 0,
-					x: menu.value.x,
-					y: menu.value.y,
-					items: menu.value.items,
-					onClose: _cache[1] || (_cache[1] = ($event) => menu.value = null)
-				}, null, 8, [
-					"x",
-					"y",
-					"items"
-				])) : createCommentVNode("v-if", true)]))
-			], 8, _hoisted_1$5);
+						x: menu.value.x,
+						y: menu.value.y,
+						items: menu.value.items,
+						onClose: _cache[1] || (_cache[1] = ($event) => menu.value = null)
+					}, null, 8, [
+						"x",
+						"y",
+						"items"
+					])) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"style",
+				"label"
+			]);
 		};
 	}
 });
 //#endregion
 //#region src/Table/Table.vue
-const _hoisted_1$4 = ["aria-label"];
-const _hoisted_2 = [
+const _hoisted_1$4 = [
 	"data-density",
 	"data-dividers",
 	"data-striped",
@@ -2422,21 +2700,22 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 				"vertical-align",
 				"row-index-start",
 				"row-count"
-			])) : (openBlock(), createElementBlock("div", {
+			])) : (openBlock(), createBlock(_sfc_main$9, {
 				key: 1,
-				class: "astryx-table-scroll",
-				role: "group",
-				"aria-label": __props.label ?? unref(messages).table.label
-			}, [createElementVNode("table", {
-				class: normalizeClass(["astryx-table", _ctx.$attrs.class]),
-				style: normalizeStyle(_ctx.$attrs.style),
-				"data-density": __props.density,
-				"data-dividers": __props.dividers,
-				"data-striped": __props.isStriped || void 0,
-				"data-hover": __props.hasHover || void 0,
-				"data-overflow": __props.textOverflow,
-				"data-valign": __props.verticalAlign
-			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_2)], 8, _hoisted_1$4));
+				label: __props.label ?? unref(messages).table.label
+			}, {
+				default: withCtx(() => [createElementVNode("table", {
+					class: normalizeClass(["astryx-table", _ctx.$attrs.class]),
+					style: normalizeStyle(_ctx.$attrs.style),
+					"data-density": __props.density,
+					"data-dividers": __props.dividers,
+					"data-striped": __props.isStriped || void 0,
+					"data-hover": __props.hasHover || void 0,
+					"data-overflow": __props.textOverflow,
+					"data-valign": __props.verticalAlign
+				}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1$4)]),
+				_: 3
+			}, 8, ["label"]));
 		};
 	}
 });
@@ -2581,7 +2860,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				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, {
+				end: withCtx(() => [createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "label", { count: effectiveCount.value }, () => [createTextVNode(toDisplayString(resolvedCountLabel.value), 1)])]), createVNode(_sfc_main$16, {
 					class: "astryx-table-selection-toolbar__clear",
 					label: resolvedClearLabel.value,
 					size: __props.size,