@atscript/vue-table 0.1.145 → 0.1.147

package/dist/{as-select-cell-BMptU5sQ.mjs → as-select-cell-Dl8fohIj.mjs}

@@ -1,7 +1,7 @@
-import { g as toggleRowAt, h as onSelectControlKeydown, o as useTableContextOptional } from "./use-table-state-DuY-Mf8e.mjs";
-import { t as useTableComponent } from "./use-table-component-DRMXTk9M.mjs";
-import { t as as_table_header_cell_default } from "./as-table-header-cell-Csv1KQDa.mjs";
-import { t as as_row_actions_default } from "./as-row-actions-ed1P6GEJ.mjs";
+import { g as toggleRowAt, h as onSelectControlKeydown, o as useTableContextOptional } from "./use-table-state-1OZfdhQi.mjs";
+import { t as useTableComponent } from "./use-table-component-DNGUvhf7.mjs";
+import { t as as_table_header_cell_default } from "./as-table-header-cell-DrVzYaof.mjs";
+import { t as as_row_actions_default } from "./as-row-actions-DyjIXePd.mjs";
 import { t as as_table_cell_value_default } from "./as-table-cell-value-DoH8Mieo.mjs";
 import { UI_TABLE_ATTR, UI_TABLE_CLASSES, UI_TABLE_FN_ATTR, UI_TABLE_FN_CLASSES, UI_TABLE_FN_STYLES, UI_TABLE_STYLES, getFieldMeta, parseStaticAttrs, resolveAttrs, resolveFieldProp } from "@atscript/ui";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withModifiers } from "vue";
@@ -486,6 +486,8 @@ var as_table_header_default = /* @__PURE__ */ defineComponent({
 		const HeaderCell = useTableComponent("headerCell", as_table_header_cell_default);
 		const props = __props;
 		const emit = __emit;
+		const tableState = useTableContextOptional()?.state;
+		const NO_OP = () => {};
 		const sortMap = computed(() => {
 			const map = {};
 			for (const s of props.sorters) map[s.field] = s.direction;
@@ -557,7 +559,10 @@ var as_table_header_default = /* @__PURE__ */ defineComponent({
 				__props.hasSelectColumn ? (openBlock(), createElementBlock("th", _hoisted_1$2, [renderSlot(_ctx.$slots, "header-__select", {
 					state: __props.selectAllState,
 					toggle: toggleSelectAll,
-					selectedCount: __props.selectedCount ?? 0
+					selectedCount: __props.selectedCount ?? 0,
+					mode: unref(tableState)?.querySelection.value ? "query" : "ids",
+					canSelectAllMatching: unref(tableState)?.canSelectAllMatching.value ?? false,
+					selectAllMatching: unref(tableState)?.selectAllMatching ?? NO_OP
 				}, () => [__props.selectAllState ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(["as-table-checkbox", {

package/dist/as-selection-banner-BI5gKHqW.cjs

@@ -0,0 +1,206 @@
+const require_use_table_state = require("./use-table-state-sDnqOi3b.cjs");
+let vue = require("vue");
+let _atscript_ui_table = require("@atscript/ui-table");
+//#region src/composables/use-row-actions-column.ts
+/**
+* The synthesised row-actions pseudo-column, shared by `<AsTable>` and
+* `<AsWindowTable>`. Returns the renderer's effective column list — the base
+* columns with a fixed `__actions` column prepended / appended per
+* `placement` — and opts the table into per-row `$actions` while the column
+* is shown.
+*/
+function useRowActionsColumn(state, opts) {
+	const cellActions = (0, vue.computed)(() => {
+		const r = require_use_table_state.resolveRowActions(state, void 0);
+		return [
+			...r.default ? [r.default] : [],
+			...r.others,
+			...r.rows,
+			...r.extra
+		];
+	});
+	(0, vue.watch)(() => {
+		const placement = opts.placement();
+		if (!placement) return false;
+		if (placement === "merge-select" && opts.select() !== "none") return false;
+		return cellActions.value.length > 0;
+	}, (on) => {
+		state.includeActions.value = on;
+	}, { immediate: true });
+	const actionsCol = (0, vue.computed)(() => {
+		const acts = cellActions.value;
+		return {
+			path: require_use_table_state.ROW_ACTIONS_PATH,
+			label: "",
+			type: require_use_table_state.ROW_ACTIONS_TYPE,
+			sortable: false,
+			filterable: false,
+			nullable: false,
+			order: 0,
+			fixed: true,
+			width: acts.length === 1 && !acts[0].icon ? "8em" : "4em"
+		};
+	});
+	return (0, vue.computed)(() => {
+		const base = opts.columns();
+		const placement = opts.placement();
+		if (placement === false || placement === void 0) return base;
+		if (cellActions.value.length === 0) return base;
+		if (placement === "first") return [actionsCol.value, ...base];
+		if (placement === "last") return [...base, actionsCol.value];
+		if (opts.select() === "none") return [actionsCol.value, ...base];
+		return base;
+	});
+}
+//#endregion
+//#region src/composables/use-table-column-handlers.ts
+/**
+* Pure pass-through handlers shared between the pagination renderer
+* (`<AsTable>`) and the window renderer (`<AsWindowTableBase>`). Selection
+* and row-mouse handlers stay in their owning components because their
+* semantics diverge meaningfully (window has no "all" state; standalone
+* vs Reka renderModes need different gating).
+*/
+function useTableColumnHandlers(state) {
+	return {
+		onSort(column, direction) {
+			state.sorters.value = direction === null ? [] : [{
+				field: column.path,
+				direction
+			}];
+		},
+		onHide(column) {
+			state.columnNames.value = state.columnNames.value.filter((n) => n !== column.path);
+		},
+		onFilter(column) {
+			state.openFilterDialog(column);
+		},
+		onFiltersOff(column) {
+			state.removeFieldFilter(column.path);
+		},
+		onResetWidth(column) {
+			state.resetColumnWidth(column.path);
+		},
+		onReorder(fromPath, toPath, position) {
+			state.columnNames.value = (0, _atscript_ui_table.reorderColumnNames)(state.columnNames.value, fromPath, toPath, position);
+		},
+		onClearFilters() {
+			state.resetFilters();
+			if (state.searchTerm.value) state.searchTerm.value = "";
+		}
+	};
+}
+//#endregion
+//#region src/components/internal/as-selection-banner.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-kind"];
+const _hoisted_2 = { class: "as-selection-banner-text" };
+const _hoisted_3 = { class: "as-selection-banner-text" };
+//#endregion
+//#region src/components/internal/as-selection-banner.vue
+var as_selection_banner_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-selection-banner",
+	props: { scope: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const { state } = require_use_table_state.useTableContext();
+		const kind = (0, vue.computed)(() => {
+			if (state.selectMode.value !== "multi") return null;
+			if (state.querySelection.value) return "query";
+			if (!state.canSelectAllMatching.value) return null;
+			const loaded = state.loadedEligiblePks.value.length;
+			return loaded > 0 && state.loadedSelectedCount.value === loaded ? "offer" : null;
+		});
+		const loadedCount = (0, vue.computed)(() => state.loadedEligiblePks.value.length);
+		const offerText = (0, vue.computed)(() => {
+			const n = loadedCount.value;
+			const where = props.scope === "page" ? "on this page" : "loaded";
+			return n === 1 ? `The 1 row ${where} is selected.` : `All ${n} rows ${where} are selected.`;
+		});
+		const queryText = (0, vue.computed)(() => {
+			const n = state.selectedCount.value;
+			return n === 1 ? "1 matching row is selected." : `All ${n} matching rows are selected.`;
+		});
+		const rootRef = (0, vue.ref)(null);
+		const btnRef = (0, vue.ref)(null);
+		/**
+		* Keep keyboard focus when the banner's button is swapped — on the new
+		* button, or, once the banner is gone, on the table's select-all checkbox.
+		*/
+		async function refocus(hadFocus) {
+			if (!hadFocus) return;
+			await (0, vue.nextTick)();
+			if (btnRef.value) {
+				btnRef.value.focus();
+				return;
+			}
+			rootRef.value?.parentElement?.querySelector(".as-th-select [role=checkbox][tabindex]")?.focus();
+		}
+		function hasFocus() {
+			return !!btnRef.value && btnRef.value === document.activeElement;
+		}
+		/** Run a banner action, keeping focus on the banner's button (see `refocus`). */
+		function keepingFocus(fn) {
+			return () => {
+				const focused = hasFocus();
+				fn();
+				refocus(focused);
+			};
+		}
+		const selectAllMatching = keepingFocus(() => state.selectAllMatching());
+		const clearSelection = keepingFocus(() => state.clearSelection());
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(state).selectMode.value === "multi" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				ref_key: "rootRef",
+				ref: rootRef,
+				role: "status",
+				"aria-live": "polite",
+				class: (0, vue.normalizeClass)(kind.value ? "as-selection-banner" : "sr-only"),
+				"data-kind": kind.value ?? void 0
+			}, [kind.value ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				selection: (0, vue.unref)(state).selection.value,
+				canSelectAllMatching: (0, vue.unref)(state).canSelectAllMatching.value,
+				selectAllMatching: (0, vue.unref)(selectAllMatching),
+				clearSelection: (0, vue.unref)(clearSelection),
+				loadedCount: loadedCount.value
+			}, () => [kind.value === "offer" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)(offerText.value), 1), (0, vue.createElementVNode)("button", {
+				ref_key: "btnRef",
+				ref: btnRef,
+				type: "button",
+				class: "as-selection-banner-btn",
+				"data-select-all-matching": "",
+				onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(selectAllMatching) && (0, vue.unref)(selectAllMatching)(...args))
+			}, " Select all " + (0, vue.toDisplayString)((0, vue.unref)(state).totalCount.value) + " matching ", 513)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createElementVNode)("span", _hoisted_3, (0, vue.toDisplayString)(queryText.value), 1), (0, vue.createElementVNode)("button", {
+				ref_key: "btnRef",
+				ref: btnRef,
+				type: "button",
+				class: "as-selection-banner-btn",
+				"data-clear-selection": "",
+				onClick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(clearSelection) && (0, vue.unref)(clearSelection)(...args))
+			}, " Clear selection ", 512)], 64))]) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_1)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_selection_banner_default", {
+	enumerable: true,
+	get: function() {
+		return as_selection_banner_default;
+	}
+});
+Object.defineProperty(exports, "useRowActionsColumn", {
+	enumerable: true,
+	get: function() {
+		return useRowActionsColumn;
+	}
+});
+Object.defineProperty(exports, "useTableColumnHandlers", {
+	enumerable: true,
+	get: function() {
+		return useTableColumnHandlers;
+	}
+});

package/dist/as-selection-banner-DBtLjulh.mjs

@@ -0,0 +1,189 @@
+import { B as ROW_ACTIONS_PATH, V as ROW_ACTIONS_TYPE, a as useTableContext, v as resolveRowActions } from "./use-table-state-1OZfdhQi.mjs";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, watch } from "vue";
+import { reorderColumnNames } from "@atscript/ui-table";
+//#region src/composables/use-row-actions-column.ts
+/**
+* The synthesised row-actions pseudo-column, shared by `<AsTable>` and
+* `<AsWindowTable>`. Returns the renderer's effective column list — the base
+* columns with a fixed `__actions` column prepended / appended per
+* `placement` — and opts the table into per-row `$actions` while the column
+* is shown.
+*/
+function useRowActionsColumn(state, opts) {
+	const cellActions = computed(() => {
+		const r = resolveRowActions(state, void 0);
+		return [
+			...r.default ? [r.default] : [],
+			...r.others,
+			...r.rows,
+			...r.extra
+		];
+	});
+	watch(() => {
+		const placement = opts.placement();
+		if (!placement) return false;
+		if (placement === "merge-select" && opts.select() !== "none") return false;
+		return cellActions.value.length > 0;
+	}, (on) => {
+		state.includeActions.value = on;
+	}, { immediate: true });
+	const actionsCol = computed(() => {
+		const acts = cellActions.value;
+		return {
+			path: ROW_ACTIONS_PATH,
+			label: "",
+			type: ROW_ACTIONS_TYPE,
+			sortable: false,
+			filterable: false,
+			nullable: false,
+			order: 0,
+			fixed: true,
+			width: acts.length === 1 && !acts[0].icon ? "8em" : "4em"
+		};
+	});
+	return computed(() => {
+		const base = opts.columns();
+		const placement = opts.placement();
+		if (placement === false || placement === void 0) return base;
+		if (cellActions.value.length === 0) return base;
+		if (placement === "first") return [actionsCol.value, ...base];
+		if (placement === "last") return [...base, actionsCol.value];
+		if (opts.select() === "none") return [actionsCol.value, ...base];
+		return base;
+	});
+}
+//#endregion
+//#region src/composables/use-table-column-handlers.ts
+/**
+* Pure pass-through handlers shared between the pagination renderer
+* (`<AsTable>`) and the window renderer (`<AsWindowTableBase>`). Selection
+* and row-mouse handlers stay in their owning components because their
+* semantics diverge meaningfully (window has no "all" state; standalone
+* vs Reka renderModes need different gating).
+*/
+function useTableColumnHandlers(state) {
+	return {
+		onSort(column, direction) {
+			state.sorters.value = direction === null ? [] : [{
+				field: column.path,
+				direction
+			}];
+		},
+		onHide(column) {
+			state.columnNames.value = state.columnNames.value.filter((n) => n !== column.path);
+		},
+		onFilter(column) {
+			state.openFilterDialog(column);
+		},
+		onFiltersOff(column) {
+			state.removeFieldFilter(column.path);
+		},
+		onResetWidth(column) {
+			state.resetColumnWidth(column.path);
+		},
+		onReorder(fromPath, toPath, position) {
+			state.columnNames.value = reorderColumnNames(state.columnNames.value, fromPath, toPath, position);
+		},
+		onClearFilters() {
+			state.resetFilters();
+			if (state.searchTerm.value) state.searchTerm.value = "";
+		}
+	};
+}
+//#endregion
+//#region src/components/internal/as-selection-banner.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-kind"];
+const _hoisted_2 = { class: "as-selection-banner-text" };
+const _hoisted_3 = { class: "as-selection-banner-text" };
+//#endregion
+//#region src/components/internal/as-selection-banner.vue
+var as_selection_banner_default = /* @__PURE__ */ defineComponent({
+	__name: "as-selection-banner",
+	props: { scope: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const { state } = useTableContext();
+		const kind = computed(() => {
+			if (state.selectMode.value !== "multi") return null;
+			if (state.querySelection.value) return "query";
+			if (!state.canSelectAllMatching.value) return null;
+			const loaded = state.loadedEligiblePks.value.length;
+			return loaded > 0 && state.loadedSelectedCount.value === loaded ? "offer" : null;
+		});
+		const loadedCount = computed(() => state.loadedEligiblePks.value.length);
+		const offerText = computed(() => {
+			const n = loadedCount.value;
+			const where = props.scope === "page" ? "on this page" : "loaded";
+			return n === 1 ? `The 1 row ${where} is selected.` : `All ${n} rows ${where} are selected.`;
+		});
+		const queryText = computed(() => {
+			const n = state.selectedCount.value;
+			return n === 1 ? "1 matching row is selected." : `All ${n} matching rows are selected.`;
+		});
+		const rootRef = ref(null);
+		const btnRef = ref(null);
+		/**
+		* Keep keyboard focus when the banner's button is swapped — on the new
+		* button, or, once the banner is gone, on the table's select-all checkbox.
+		*/
+		async function refocus(hadFocus) {
+			if (!hadFocus) return;
+			await nextTick();
+			if (btnRef.value) {
+				btnRef.value.focus();
+				return;
+			}
+			rootRef.value?.parentElement?.querySelector(".as-th-select [role=checkbox][tabindex]")?.focus();
+		}
+		function hasFocus() {
+			return !!btnRef.value && btnRef.value === document.activeElement;
+		}
+		/** Run a banner action, keeping focus on the banner's button (see `refocus`). */
+		function keepingFocus(fn) {
+			return () => {
+				const focused = hasFocus();
+				fn();
+				refocus(focused);
+			};
+		}
+		const selectAllMatching = keepingFocus(() => state.selectAllMatching());
+		const clearSelection = keepingFocus(() => state.clearSelection());
+		return (_ctx, _cache) => {
+			return unref(state).selectMode.value === "multi" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "rootRef",
+				ref: rootRef,
+				role: "status",
+				"aria-live": "polite",
+				class: normalizeClass(kind.value ? "as-selection-banner" : "sr-only"),
+				"data-kind": kind.value ?? void 0
+			}, [kind.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				selection: unref(state).selection.value,
+				canSelectAllMatching: unref(state).canSelectAllMatching.value,
+				selectAllMatching: unref(selectAllMatching),
+				clearSelection: unref(clearSelection),
+				loadedCount: loadedCount.value
+			}, () => [kind.value === "offer" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2, toDisplayString(offerText.value), 1), createElementVNode("button", {
+				ref_key: "btnRef",
+				ref: btnRef,
+				type: "button",
+				class: "as-selection-banner-btn",
+				"data-select-all-matching": "",
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(selectAllMatching) && unref(selectAllMatching)(...args))
+			}, " Select all " + toDisplayString(unref(state).totalCount.value) + " matching ", 513)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_3, toDisplayString(queryText.value), 1), createElementVNode("button", {
+				ref_key: "btnRef",
+				ref: btnRef,
+				type: "button",
+				class: "as-selection-banner-btn",
+				"data-clear-selection": "",
+				onClick: _cache[1] || (_cache[1] = (...args) => unref(clearSelection) && unref(clearSelection)(...args))
+			}, " Clear selection ", 512)], 64))]) : createCommentVNode("v-if", true)], 10, _hoisted_1)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { useTableColumnHandlers as n, useRowActionsColumn as r, as_selection_banner_default as t };

package/dist/as-table-B1FowaPF.cjs

@@ -0,0 +1,215 @@
+const require_use_table_state = require("./use-table-state-sDnqOi3b.cjs");
+const require_use_table_selection = require("./use-table-selection-Cs7-gjHg.cjs");
+const require_use_has_emit_listener = require("./use-has-emit-listener-BaGFZDyM.cjs");
+const require_as_selection_banner = require("./as-selection-banner-BI5gKHqW.cjs");
+const require_as_table_base = require("./as-table-base-LZ26YlWp.cjs");
+let vue = require("vue");
+//#region src/components/as-table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "as-table-outer-wrap" };
+const _hoisted_2 = {
+	key: 0,
+	class: "as-table-query-overlay"
+};
+//#endregion
+//#region src/components/as-table.vue
+var as_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-table",
+	props: {
+		rows: {
+			type: Array,
+			required: false
+		},
+		columns: {
+			type: Array,
+			required: false
+		},
+		stickyHeader: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		virtualRowHeight: {
+			type: Number,
+			required: false
+		},
+		virtualOverscan: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		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"
+		},
+		selectOn: {
+			type: String,
+			required: false,
+			default: "row"
+		},
+		rowDelete: {
+			type: [Boolean, Object],
+			required: false,
+			default: false
+		},
+		rowActionsColumn: {
+			type: [String, Boolean],
+			required: false,
+			default: false
+		},
+		headless: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		rowSelectable: {
+			type: Function,
+			required: false
+		},
+		rowClass: {
+			type: Function,
+			required: false
+		},
+		rowAttrs: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"row-click",
+		"row-dblclick",
+		"main-action"
+	],
+	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 });
+		(0, vue.watch)(() => props.rowSelectable, (val) => {
+			state.rowSelectable.value = val;
+		}, { immediate: true });
+		require_use_table_selection.useSelectModeReset(state, () => props.select);
+		const effectiveRows = (0, vue.computed)(() => state.applyLocalSort(props.rows ?? state.results.value));
+		const effectiveColumns = require_as_selection_banner.useRowActionsColumn(state, {
+			placement: () => props.rowActionsColumn,
+			select: () => props.select,
+			columns: () => props.columns ?? state.columns.value
+		});
+		require_use_table_state.useRegisterMainActionListener(state, (req) => emit("main-action", req.row, req.absIndex, req.event), require_use_has_emit_listener.useHasEmitListener("onMainAction"));
+		const { onSort, onHide, onFilter, onFiltersOff, onResetWidth, onReorder, onClearFilters } = require_as_selection_banner.useTableColumnHandlers(state);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [
+				(0, vue.createVNode)(require_as_selection_banner.as_selection_banner_default, { scope: "page" }, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots["selection-banner"] ? {
+					name: "default",
+					fn: (0, vue.withCtx)((bannerProps) => [(0, vue.renderSlot)(_ctx.$slots, "selection-banner", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(bannerProps)))]),
+					key: "0"
+				} : void 0]), 1024),
+				(0, vue.createVNode)(require_as_table_base.as_table_base_default, {
+					"render-mode": "standalone",
+					columns: (0, vue.unref)(effectiveColumns),
+					rows: effectiveRows.value,
+					sorters: (0, vue.unref)(state).sorters.value,
+					"selected-rows": (0, vue.unref)(state).selectedRows.value,
+					select: props.select,
+					"select-on": props.selectOn,
+					"row-value-fn": (0, vue.unref)(state).rowValueFn,
+					querying: (0, vue.unref)(state).querying.value,
+					"query-error": (0, vue.unref)(state).queryError.value,
+					"on-retry": (0, vue.unref)(state).query,
+					"sticky-header": __props.stickyHeader,
+					headless: __props.headless,
+					"virtual-row-height": __props.virtualRowHeight,
+					"virtual-overscan": __props.virtualOverscan,
+					filters: (0, vue.unref)(state).filters.value,
+					"search-term": (0, vue.unref)(state).searchTerm.value,
+					"on-clear-filters": (0, vue.unref)(onClearFilters),
+					"column-menu": __props.columnMenu,
+					reorderable: __props.reorderable,
+					resizable: __props.resizable,
+					"column-min-width": __props.columnMinWidth,
+					"column-widths": (0, vue.unref)(state).columnWidths.value,
+					"row-class": __props.rowClass,
+					"row-attrs": __props.rowAttrs,
+					onSort: (0, vue.unref)(onSort),
+					onHide: (0, vue.unref)(onHide),
+					onFilter: (0, vue.unref)(onFilter),
+					onFiltersOff: (0, vue.unref)(onFiltersOff),
+					onReorder: (0, vue.unref)(onReorder),
+					onResize: (0, vue.unref)(state).setColumnWidth,
+					onResetWidth: (0, vue.unref)(onResetWidth),
+					onRowClick: _cache[0] || (_cache[0] = (row, ev) => emit("row-click", row, ev)),
+					onRowDblclick: _cache[1] || (_cache[1] = (row, ev) => emit("row-dblclick", row, ev))
+				}, (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, [
+					"columns",
+					"rows",
+					"sorters",
+					"selected-rows",
+					"select",
+					"select-on",
+					"row-value-fn",
+					"querying",
+					"query-error",
+					"on-retry",
+					"sticky-header",
+					"headless",
+					"virtual-row-height",
+					"virtual-overscan",
+					"filters",
+					"search-term",
+					"on-clear-filters",
+					"column-menu",
+					"reorderable",
+					"resizable",
+					"column-min-width",
+					"column-widths",
+					"row-class",
+					"row-attrs",
+					"onSort",
+					"onHide",
+					"onFilter",
+					"onFiltersOff",
+					"onReorder",
+					"onResize",
+					"onResetWidth"
+				]),
+				(0, vue.unref)(state).querying.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [(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)
+			]);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_table_default", {
+	enumerable: true,
+	get: function() {
+		return as_table_default;
+	}
+});