@atscript/vue-table 0.1.58

package/dist/as-window-table-DE7_NyEP.cjs

@@ -0,0 +1,714 @@
+const require_use_table_state = require("./use-table-state-MU-vuzui.cjs");
+const require_as_table_status = require("./as-table-status-DWYoJIMC.cjs");
+const require_use_table_column_handlers = require("./use-table-column-handlers-CGYAY2xH.cjs");
+const require_get_cell_value = require("./get-cell-value-CZSVfDLg.cjs");
+let vue = require("vue");
+let _atscript_ui_table = require("@atscript/ui-table");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/internal/as-window-skeleton-row.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = {
+	key: 0,
+	class: "as-window-skeleton-cell"
+};
+const SHIMMER_DURATION_MS = 4200;
+//#endregion
+//#region src/components/internal/as-window-skeleton-row.vue
+var as_window_skeleton_row_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-window-skeleton-row",
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		rowHeight: {
+			type: Number,
+			required: true
+		},
+		hasSelect: {
+			type: Boolean,
+			required: false
+		},
+		errored: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const animationDelay = (0, vue.computed)(() => props.errored ? void 0 : `-${performance.now() % SHIMMER_DURATION_MS}ms`);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
+				class: (0, vue.normalizeClass)(__props.errored ? "as-window-empty-row" : "as-window-skeleton-row"),
+				style: (0, vue.normalizeStyle)({
+					height: `${__props.rowHeight}px`,
+					animationDelay: animationDelay.value
+				})
+			}, [
+				__props.hasSelect ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", _hoisted_1$3)) : (0, vue.createCommentVNode)("v-if", true),
+				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.columns, (col) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
+						key: col.path,
+						class: "as-window-skeleton-cell"
+					});
+				}), 128)),
+				(0, vue.createCommentVNode)(" Stretch filler cell — mirrors the data row's `<td class=\"as-td-filler\" />`\n         so the skeleton spans the full table width including the trailing\n         expander column. Without this, table-fixed layout would leave the\n         filler column blank on skeleton rows. "),
+				_cache[0] || (_cache[0] = (0, vue.createElementVNode)("td", { class: "as-td-filler" }, null, -1))
+			], 6);
+		};
+	}
+});
+//#endregion
+//#region src/components/internal/as-window-scrollbar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = {
+	key: 0,
+	class: "as-window-scrollbar"
+};
+const _hoisted_2$1 = ["data-active"];
+//#endregion
+//#region src/components/internal/as-window-scrollbar.vue
+var as_window_scrollbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-window-scrollbar",
+	props: {
+		topIndex: {
+			type: Number,
+			required: true
+		},
+		viewportRowCount: {
+			type: Number,
+			required: true
+		},
+		totalCount: {
+			type: Number,
+			required: true
+		},
+		thumbMinHeight: {
+			type: Number,
+			required: false,
+			default: 24
+		}
+	},
+	emits: ["top-index-change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const trackEl = (0, vue.ref)(null);
+		const { height: trackHeight } = (0, _vueuse_core.useElementSize)(trackEl);
+		const dragging = (0, vue.ref)(false);
+		let dragStartY = 0;
+		let dragStartTopIndex = 0;
+		let activePointerId = null;
+		const maxIndex = (0, vue.computed)(() => Math.max(0, props.totalCount - props.viewportRowCount));
+		const visible = (0, vue.computed)(() => maxIndex.value > 0);
+		const thumbHeight = (0, vue.computed)(() => {
+			if (props.totalCount <= 0 || trackHeight.value <= 0) return props.thumbMinHeight;
+			const ideal = props.viewportRowCount / props.totalCount * trackHeight.value;
+			return Math.max(props.thumbMinHeight, ideal);
+		});
+		const thumbY = (0, vue.computed)(() => {
+			if (maxIndex.value <= 0 || trackHeight.value <= 0) return 0;
+			return props.topIndex / maxIndex.value * (trackHeight.value - thumbHeight.value);
+		});
+		function clamp(n) {
+			return (0, _atscript_ui_table.clampTopIndex)(n, props.totalCount, props.viewportRowCount);
+		}
+		const topIndexBatch = require_as_table_status.useRafBatch((next) => {
+			if (next !== props.topIndex) emit("top-index-change", next);
+		});
+		function onThumbPointerDown(event) {
+			event.preventDefault();
+			dragging.value = true;
+			dragStartY = event.clientY;
+			dragStartTopIndex = props.topIndex;
+			activePointerId = event.pointerId;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+		}
+		function onThumbPointerMove(event) {
+			if (!dragging.value) return;
+			const span = trackHeight.value - thumbHeight.value;
+			if (span <= 0) return;
+			const delta = event.clientY - dragStartY;
+			const next = Math.round(dragStartTopIndex + delta * maxIndex.value / span);
+			topIndexBatch.schedule(clamp(next));
+		}
+		function endDrag(event) {
+			if (!dragging.value) return;
+			dragging.value = false;
+			if (event && activePointerId !== null) event.currentTarget.releasePointerCapture?.(activePointerId);
+			activePointerId = null;
+		}
+		function onTrackClick(event) {
+			if (dragging.value) return;
+			const rect = trackEl.value?.getBoundingClientRect();
+			if (!rect) return;
+			const direction = event.clientY - rect.top < thumbY.value + thumbHeight.value / 2 ? -1 : 1;
+			emit("top-index-change", clamp(props.topIndex + direction * props.viewportRowCount));
+		}
+		return (_ctx, _cache) => {
+			return visible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$2, [(0, vue.createElementVNode)("div", {
+				ref_key: "trackEl",
+				ref: trackEl,
+				class: "as-window-scrollbar-track",
+				role: "scrollbar",
+				"aria-orientation": "vertical",
+				onClick: onTrackClick
+			}, [(0, vue.createElementVNode)("div", {
+				class: "as-window-scrollbar-thumb",
+				"data-active": dragging.value || void 0,
+				style: (0, vue.normalizeStyle)({
+					height: `${thumbHeight.value}px`,
+					top: `${thumbY.value}px`
+				}),
+				onPointerdown: onThumbPointerDown,
+				onPointermove: onThumbPointerMove,
+				onPointerup: endDrag,
+				onPointercancel: endDrag
+			}, null, 44, _hoisted_2$1)], 512)])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/internal/as-window-table-base.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { class: "as-window-table-scroll-area" };
+const _hoisted_2 = ["aria-rowcount", "aria-multiselectable"];
+const _hoisted_3 = ["aria-activedescendant"];
+const _hoisted_4 = [
+	"id",
+	"aria-rowindex",
+	"aria-selected",
+	"onClick",
+	"onDblclick"
+];
+const _hoisted_5 = {
+	key: 0,
+	class: "as-td-select",
+	role: "gridcell"
+};
+const _hoisted_6 = ["aria-checked"];
+const _hoisted_7 = {
+	key: 0,
+	class: "as-table-checkbox-tick",
+	"aria-hidden": "true"
+};
+const _hoisted_8 = {
+	key: 0,
+	role: "gridcell"
+};
+//#endregion
+//#region src/components/internal/as-window-table-base.vue
+var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-window-table-base",
+	props: {
+		rowHeight: {
+			type: Number,
+			required: true
+		},
+		wheelRowsPerTick: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		columnMenu: {
+			type: Object,
+			required: false
+		},
+		reorderable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		resizable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		columnMinWidth: {
+			type: Number,
+			required: false,
+			default: 48
+		},
+		select: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		enterAction: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"row-click",
+		"row-dblclick",
+		"viewport-metrics-change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const { state } = require_use_table_state.useTableContext();
+		const { resolve: cellResolver, hasAnyCellBindings } = require_as_table_status.useCellResolver(() => state.tableDef.value);
+		const cellComponents = require_as_table_status.useCellComponents(() => state.columns.value);
+		const hasValue = (0, vue.computed)(() => props.select !== "none");
+		const hasActiveFilters = (0, vue.computed)(() => (0, _atscript_ui_table.filledFilterCount)(state.filters.value) > 0);
+		const selectAllState = (0, vue.computed)(() => {
+			if (props.select !== "multi") return void 0;
+			return state.selectedRows.value.length === 0 ? "none" : "some";
+		});
+		const cellSlotFlags = (0, vue.computed)(() => {
+			const out = {};
+			for (const c of state.columns.value) out[c.path] = !!slots[`cell-${c.path}`];
+			return out;
+		});
+		const rowStyle = (0, vue.computed)(() => ({ height: `${props.rowHeight}px` }));
+		const visibleSlots = (0, vue.computed)(() => {
+			const viewport = state.viewportRowCount.value;
+			if (viewport <= 0) return [];
+			const total = state.totalCount.value;
+			const count = Math.min(viewport, Math.max(total, 0));
+			const top = state.topIndex.value;
+			const rowValueFn = state.rowValueFn;
+			const hasSelection = props.select !== "none";
+			const selectedSet = hasSelection ? new Set(state.selectedRows.value) : null;
+			const out = [];
+			for (let s = 0; s < count; s++) {
+				const abs = top + s;
+				const row = state.dataAt(abs);
+				const pk = row === void 0 ? void 0 : rowValueFn(row);
+				const selected = selectedSet !== null && row !== void 0 && selectedSet.has(pk);
+				out.push({
+					s,
+					row,
+					pk,
+					errored: row === void 0 && state.errorAt(abs) !== null,
+					selected,
+					ariaSelected: hasSelection ? selected ? "true" : "false" : void 0
+				});
+			}
+			return out;
+		});
+		function clamp(n) {
+			return (0, _atscript_ui_table.clampTopIndex)(n, state.totalCount.value, state.viewportRowCount.value);
+		}
+		let pendingTopIndex = null;
+		const topIndexBatch = require_as_table_status.useRafBatch((next) => {
+			pendingTopIndex = null;
+			if (next !== state.topIndex.value) state.topIndex.value = next;
+		});
+		function scheduleTopIndex(next) {
+			if (next === (pendingTopIndex ?? state.topIndex.value)) return;
+			pendingTopIndex = next;
+			topIndexBatch.schedule(next);
+		}
+		const prevNavMode = state.navMode.value;
+		state.navMode.value = "window";
+		(0, vue.onBeforeUnmount)(() => {
+			state.viewportRowCount.value = 0;
+			state.navMode.value = prevNavMode;
+		});
+		function onWheel(event) {
+			event.preventDefault();
+			const delta = Math.sign(event.deltaY) * props.wheelRowsPerTick;
+			scheduleTopIndex(clamp((pendingTopIndex ?? state.topIndex.value) + delta));
+		}
+		function onKeydown(event) {
+			state.handleNavKey(event, {
+				enterAction: props.enterAction,
+				mode: props.select
+			});
+		}
+		(0, vue.watch)([() => state.activeIndex.value, () => state.viewportRowCount.value], ([idx, viewport]) => {
+			if (idx < 0) return;
+			if (viewport <= 0) return;
+			const top = pendingTopIndex ?? state.topIndex.value;
+			if (idx < top) scheduleTopIndex(clamp(idx));
+			else if (idx >= top + viewport) scheduleTopIndex(clamp(idx - viewport + 1));
+		});
+		let touchStartY = null;
+		let touchStartTopIndex = 0;
+		function onTouchStart(event) {
+			const touch = event.touches[0];
+			if (!touch) return;
+			touchStartY = touch.clientY;
+			touchStartTopIndex = state.topIndex.value;
+		}
+		function onTouchMove(event) {
+			const touch = event.touches[0];
+			if (touch === void 0 || touchStartY === null) return;
+			if (props.rowHeight <= 0) return;
+			const delta = touchStartY - touch.clientY;
+			const rowsDelta = Math.trunc(delta / props.rowHeight);
+			state.topIndex.value = clamp(touchStartTopIndex + rowsDelta);
+		}
+		function onTouchEnd() {
+			touchStartY = null;
+		}
+		function onRowClick(row, event, absIdx) {
+			emit("row-click", row, event);
+			state.setActive(absIdx);
+			if (props.select === "none") return;
+			state.toggleActiveSelection(props.select);
+		}
+		function onRowDblClick(row, event, absIdx) {
+			emit("row-dblclick", row, event);
+			state.setActive(absIdx);
+			state.requestMainAction(event);
+		}
+		function onSelectAllToggle(headerState) {
+			if (headerState === "none") {
+				const pks = [];
+				for (const row of state.windowCache.value.values()) pks.push(state.rowValueFn(row));
+				state.selectedRows.value = pks;
+			} else state.selectedRows.value = [];
+		}
+		const { onSort, onHide, onFilter, onFiltersOff, onResetWidth, onReorder, onClearFilters } = require_use_table_column_handlers.useTableColumnHandlers(state);
+		const wrapperRef = (0, vue.ref)(null);
+		const poolRef = (0, vue.ref)(null);
+		let recomputeScheduled = false;
+		function scheduleRecompute() {
+			if (recomputeScheduled) return;
+			recomputeScheduled = true;
+			(0, vue.nextTick)(() => {
+				recomputeScheduled = false;
+				recompute();
+			});
+		}
+		function recompute() {
+			const wrapper = wrapperRef.value;
+			const tbody = poolRef.value;
+			if (!wrapper) return;
+			const wrapperClient = wrapper.clientHeight;
+			const wrapperOffset = wrapper.offsetHeight;
+			const hScrollbar = Math.max(0, wrapperOffset - wrapperClient);
+			const tbodyHeight = tbody?.offsetHeight ?? 0;
+			const table = tbody?.parentElement;
+			const tableHeight = table?.offsetHeight ?? 0;
+			const theadHeight = table && tbody ? Math.max(0, tableHeight - tbodyHeight) : wrapper.querySelector("thead")?.offsetHeight ?? 0;
+			const chromePx = theadHeight + hScrollbar;
+			const usable = Math.max(0, wrapperClient - theadHeight);
+			const rowCount = tbody?.children.length ?? 0;
+			const rowHeightPx = (rowCount > 0 && tbodyHeight > 0 ? Math.ceil(tbodyHeight / rowCount) : 0) || props.rowHeight;
+			emit("viewport-metrics-change", {
+				fits: Math.max(0, Math.floor(usable / rowHeightPx)),
+				rowHeightPx,
+				chromePx
+			});
+		}
+		(0, _vueuse_core.useResizeObserver)(wrapperRef, scheduleRecompute);
+		(0, _vueuse_core.useResizeObserver)(poolRef, scheduleRecompute);
+		(0, vue.onMounted)(() => {
+			(0, vue.nextTick)(() => recompute());
+		});
+		(0, vue.watch)(() => [props.rowHeight, state.columns.value], scheduleRecompute);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.createElementVNode)("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: "as-window-table-wrapper"
+			}, [
+				(0, vue.createElementVNode)("table", {
+					class: "as-table as-table-stretch",
+					role: "grid",
+					"aria-rowcount": (0, vue.unref)(state).totalCount.value + 1,
+					"aria-multiselectable": __props.select === "multi" ? "true" : void 0
+				}, [(0, vue.createVNode)(require_as_table_status.as_table_header_default, {
+					columns: (0, vue.unref)(state).columns.value,
+					sorters: (0, vue.unref)(state).sorters.value,
+					filters: (0, vue.unref)(state).filters.value,
+					"column-menu": __props.columnMenu,
+					"column-widths": (0, vue.unref)(state).columnWidths.value,
+					reorderable: __props.reorderable,
+					resizable: __props.resizable,
+					"column-min-width": __props.columnMinWidth,
+					"has-select-column": hasValue.value,
+					"select-all-state": selectAllState.value,
+					"with-filler": true,
+					"enable-auto-fit": true,
+					"aria-rowindex": 1,
+					onSort: (0, vue.unref)(onSort),
+					onHide: (0, vue.unref)(onHide),
+					onFilter: (0, vue.unref)(onFilter),
+					onFiltersOff: (0, vue.unref)(onFiltersOff),
+					onResetWidth: (0, vue.unref)(onResetWidth),
+					onReorder: (0, vue.unref)(onReorder),
+					onResize: (0, vue.unref)(state).setColumnWidth,
+					onSelectAllToggle
+				}, (0, vue.createSlots)({ _: 2 }, [(0, vue.renderList)((0, vue.unref)(state).columns.value, (col) => {
+					return {
+						name: `header-${col.path}`,
+						fn: (0, vue.withCtx)((scope) => [(0, vue.renderSlot)(_ctx.$slots, `header-${col.path}`, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(scope)))])
+					};
+				})]), 1032, [
+					"columns",
+					"sorters",
+					"filters",
+					"column-menu",
+					"column-widths",
+					"reorderable",
+					"resizable",
+					"column-min-width",
+					"has-select-column",
+					"select-all-state",
+					"onSort",
+					"onHide",
+					"onFilter",
+					"onFiltersOff",
+					"onResetWidth",
+					"onReorder",
+					"onResize"
+				]), (0, vue.createElementVNode)("tbody", {
+					ref_key: "poolRef",
+					ref: poolRef,
+					class: "as-window-row-pool",
+					tabindex: "0",
+					"aria-activedescendant": (0, vue.unref)(state).activeIndex.value >= 0 ? (0, vue.unref)(state).rowId((0, vue.unref)(state).activeIndex.value) : "",
+					onWheel,
+					onKeydown,
+					onTouchstart: onTouchStart,
+					onTouchmove: (0, vue.withModifiers)(onTouchMove, ["prevent"]),
+					onTouchend: onTouchEnd
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleSlots.value, (slot) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: `slot-${slot.s}` }, [slot.row !== void 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
+						key: 0,
+						id: (0, vue.unref)(state).rowId((0, vue.unref)(state).topIndex.value + slot.s),
+						class: (0, vue.normalizeClass)(["as-window-data-row", { "as-table-row-active": (0, vue.unref)(state).activeIndex.value === (0, vue.unref)(state).topIndex.value + slot.s }]),
+						role: "row",
+						"aria-rowindex": (0, vue.unref)(state).topIndex.value + slot.s + 2,
+						"aria-selected": slot.ariaSelected,
+						style: (0, vue.normalizeStyle)(rowStyle.value),
+						onClick: ($event) => onRowClick(slot.row, $event, (0, vue.unref)(state).topIndex.value + slot.s),
+						onDblclick: ($event) => onRowDblClick(slot.row, $event, (0, vue.unref)(state).topIndex.value + slot.s)
+					}, [
+						hasValue.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", _hoisted_5, [(0, vue.createElementVNode)("span", {
+							class: (0, vue.normalizeClass)(["as-table-checkbox", { "as-table-checkbox-checked": slot.selected }]),
+							role: "checkbox",
+							tabindex: "0",
+							"aria-checked": slot.selected ? "true" : "false"
+						}, [slot.selected ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_6)])) : (0, vue.createCommentVNode)("v-if", true),
+						(0, vue.unref)(hasAnyCellBindings) ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)((0, vue.unref)(state).columns.value, (col) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: col.path }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)([(0, vue.unref)(cellResolver)(col, slot.row, (0, vue.unref)(state).topIndex.value + slot.s)], (bindings) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [cellSlotFlags.value[col.path] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", (0, vue.mergeProps)({
+									key: 0,
+									role: "gridcell"
+								}, { ref_for: true }, bindings), [(0, vue.renderSlot)(_ctx.$slots, `cell-${col.path}`, {
+									row: slot.row,
+									value: (0, vue.unref)(require_get_cell_value.getCellValue)(slot.row, col.path),
+									column: col
+								})], 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(cellComponents)[col.path]), (0, vue.mergeProps)({
+									key: 1,
+									row: slot.row,
+									column: col,
+									role: "gridcell"
+								}, { ref_for: true }, bindings), null, 16, ["row", "column"]))], 64);
+							}), 128))], 64);
+						}), 128)) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, (0, vue.renderList)((0, vue.unref)(state).columns.value, (col) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: col.path }, [cellSlotFlags.value[col.path] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, `cell-${col.path}`, {
+								row: slot.row,
+								value: (0, vue.unref)(require_get_cell_value.getCellValue)(slot.row, col.path),
+								column: col
+							})])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(cellComponents)[col.path]), {
+								key: 1,
+								row: slot.row,
+								column: col,
+								role: "gridcell"
+							}, null, 8, ["row", "column"]))], 64);
+						}), 128)),
+						_cache[1] || (_cache[1] = (0, vue.createElementVNode)("td", {
+							class: "as-td-filler",
+							role: "gridcell"
+						}, null, -1))
+					], 46, _hoisted_4)) : ((0, vue.openBlock)(), (0, vue.createBlock)(as_window_skeleton_row_default, {
+						key: 1,
+						columns: (0, vue.unref)(state).columns.value,
+						"row-height": __props.rowHeight,
+						"has-select": hasValue.value,
+						errored: slot.errored
+					}, null, 8, [
+						"columns",
+						"row-height",
+						"has-select",
+						"errored"
+					]))], 64);
+				}), 128))], 40, _hoisted_3)], 8, _hoisted_2),
+				(0, vue.createCommentVNode)(" Error / empty placeholders render INSIDE the wrapper so they cover\n           the empty pool body when there's nothing to show; suppressed during\n           a `querying` refresh because the full-table overlay covers that case. "),
+				(0, vue.createVNode)(require_as_table_status.as_table_status_default, {
+					"query-error": (0, vue.unref)(state).queryError.value,
+					"is-empty": (0, vue.unref)(state).totalCount.value === 0,
+					querying: (0, vue.unref)(state).querying.value,
+					columns: (0, vue.unref)(state).columns.value,
+					"search-term": (0, vue.unref)(state).searchTerm.value,
+					"has-active-filters": hasActiveFilters.value,
+					"on-clear-filters": (0, vue.unref)(onClearFilters),
+					"on-retry": (0, vue.unref)(state).query
+				}, {
+					error: (0, vue.withCtx)((scope) => [(0, vue.renderSlot)(_ctx.$slots, "error", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(scope)))]),
+					empty: (0, vue.withCtx)((scope) => [(0, vue.renderSlot)(_ctx.$slots, "empty", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(scope)))]),
+					_: 3
+				}, 8, [
+					"query-error",
+					"is-empty",
+					"querying",
+					"columns",
+					"search-term",
+					"has-active-filters",
+					"on-clear-filters",
+					"on-retry"
+				])
+			], 512), (0, vue.createVNode)(as_window_scrollbar_default, {
+				"top-index": (0, vue.unref)(state).topIndex.value,
+				"viewport-row-count": (0, vue.unref)(state).viewportRowCount.value,
+				"total-count": (0, vue.unref)(state).totalCount.value,
+				onTopIndexChange: _cache[0] || (_cache[0] = (v) => (0, vue.unref)(state).topIndex.value = v)
+			}, null, 8, [
+				"top-index",
+				"viewport-row-count",
+				"total-count"
+			])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/as-window-table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	key: 0,
+	class: "as-table-query-overlay"
+};
+//#endregion
+//#region src/components/as-window-table.vue
+var as_window_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-window-table",
+	props: {
+		rowHeight: {
+			type: Number,
+			required: false,
+			default: _atscript_ui_table.DEFAULT_ROW_HEIGHT_PX
+		},
+		wheelRowsPerTick: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		select: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		rows: {
+			type: Number,
+			required: false
+		},
+		minRows: {
+			type: Number,
+			required: false
+		},
+		maxRows: {
+			type: Number,
+			required: false
+		},
+		columnMenu: {
+			type: Object,
+			required: false
+		},
+		reorderable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		resizable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		columnMinWidth: {
+			type: Number,
+			required: false,
+			default: 48
+		},
+		enterAction: {
+			type: String,
+			required: false
+		},
+		rowDelete: {
+			type: [Boolean, Object],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"row-click",
+		"row-dblclick",
+		"main-action",
+		"error"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { state } = require_use_table_state.useTableContext();
+		(0, vue.watch)(() => props.rowDelete, (val) => {
+			state.rowDelete.value = val;
+		}, { immediate: true });
+		require_as_table_status.useSelectModeReset(state, () => props.select);
+		require_use_table_state.useRegisterMainActionListener(state, (req) => emit("main-action", req.row, req.absIndex, req.event), require_use_table_column_handlers.useHasEmitListener("onMainAction"));
+		const containerRef = (0, vue.ref)(null);
+		function onMetrics({ fits, rowHeightPx, chromePx }) {
+			const minR = props.rows ?? props.minRows;
+			const maxR = props.rows ?? props.maxRows;
+			let target = fits;
+			if (minR !== void 0 && target < minR) target = minR;
+			if (maxR !== void 0 && target > maxR) target = maxR;
+			state.viewportRowCount.value = target;
+			const clamped = (0, _atscript_ui_table.clampTopIndex)(state.topIndex.value, state.totalCount.value, target);
+			if (clamped !== state.topIndex.value) state.topIndex.value = clamped;
+			const container = containerRef.value;
+			if (!container) return;
+			const px = (n) => `${n * rowHeightPx + chromePx}px`;
+			container.style.minHeight = minR !== void 0 ? px(minR) : "";
+			container.style.maxHeight = maxR !== void 0 ? px(maxR) : "";
+		}
+		(0, vue.watch)(() => state.lastError.value, (info) => {
+			if (info) emit("error", info.error, info.kind);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "as-table-outer-wrap"
+			}, [(0, vue.createVNode)(as_window_table_base_default, {
+				"row-height": __props.rowHeight,
+				"wheel-rows-per-tick": __props.wheelRowsPerTick,
+				"column-menu": __props.columnMenu,
+				reorderable: __props.reorderable,
+				resizable: __props.resizable,
+				"column-min-width": __props.columnMinWidth,
+				select: __props.select,
+				"enter-action": __props.enterAction,
+				onRowClick: _cache[0] || (_cache[0] = (row, ev) => emit("row-click", row, ev)),
+				onRowDblclick: _cache[1] || (_cache[1] = (row, ev) => emit("row-dblclick", row, ev)),
+				onViewportMetricsChange: onMetrics
+			}, (0, vue.createSlots)({ _: 2 }, [(0, vue.renderList)(_ctx.$slots, (_, name) => {
+				return {
+					name,
+					fn: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, name, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(slotProps ?? {})))])
+				};
+			})]), 1032, [
+				"row-height",
+				"wheel-rows-per-tick",
+				"column-menu",
+				"reorderable",
+				"resizable",
+				"column-min-width",
+				"select",
+				"enter-action"
+			]), (0, vue.unref)(state).querying.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "query-loading", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("span", {
+				class: "as-table-query-overlay-icon",
+				"aria-hidden": "true"
+			}, null, -1))])])) : (0, vue.createCommentVNode)("v-if", true)], 512);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_window_table_default", {
+	enumerable: true,
+	get: function() {
+		return as_window_table_default;
+	}
+});