@feugene/granularity 0.45.0 → 0.47.0

package/dist/components/GrDataTable/chunks/{GrDataTable-xNSmO_I-.js → GrDataTable-Dp9Fp_P5.js}

@@ -14,6 +14,34 @@ import { C as sortIconSizes, S as selectColumnWidths, T as summaryRowClass, _ as
 import { t as arrow_up_default } from "../../../chunks/arrow-up-C_G4jg8M.js";
 import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, watch, watchEffect, withCtx, withModifiers } from "vue";
+//#region src/components/GrDataTable/composables/useDataTableRowKeys.ts
+function useDataTableRowKeys(options) {
+	const syntheticKeys = /* @__PURE__ */ new WeakMap();
+	let syntheticKeyCounter = 0;
+	let missingKeyWarned = false;
+	function syntheticRowKey(row) {
+		const existing = syntheticKeys.get(row);
+		if (existing !== void 0) return existing;
+		syntheticKeyCounter += 1;
+		const generated = `gr-row-${syntheticKeyCounter}`;
+		syntheticKeys.set(row, generated);
+		if (!missingKeyWarned && process.env.NODE_ENV !== "production") {
+			missingKeyWarned = true;
+			console.warn(`[GrDataTable] У строки нет значения по ключу "${String(options.rowKey())}". Задайте \`rowKey\` (поле или функцию) — иначе выбор строк и переиспользование DOM работают по синтетическому ключу, который не переживёт перезагрузку данных.`);
+		}
+		return generated;
+	}
+	function rowKeyValue(row) {
+		const rk = options.rowKey();
+		if (typeof rk === "function") return rk(row);
+		const value = row[rk];
+		if (typeof value === "string" && value !== "") return value;
+		if (typeof value === "number") return value;
+		return syntheticRowKey(row);
+	}
+	return { rowKeyValue };
+}
+//#endregion
 //#region src/components/GrDataTable/grDataTableSort.ts
 /** Пустое значение ячейки: нечего сравнивать, место таким — в конце списка. */
 function isEmptyCell(value) {
@@ -66,6 +94,448 @@ function sortRows(rows, key, dir, locale) {
 	return [...rows].sort((a, b) => compareCells(a[key], b[key], dir, locale));
 }
 //#endregion
+//#region src/components/GrDataTable/composables/useDataTableSort.ts
+function useDataTableSort(options) {
+	const internalSortKey = ref(options.initialSortKey() ?? "");
+	const internalSortDir = ref(options.initialSortDir());
+	const isSortKeyControlled = computed(() => options.sortKey() !== void 0);
+	const isSortDirControlled = computed(() => options.sortDir() !== void 0);
+	const currentSortKey = computed(() => options.sortKey() ?? internalSortKey.value);
+	const currentSortDir = computed(() => options.sortDir() ?? internalSortDir.value);
+	function applySort(key, dir) {
+		if (!isSortKeyControlled.value) internalSortKey.value = key;
+		if (!isSortDirControlled.value) internalSortDir.value = dir;
+		options.onSortChange(key, dir);
+	}
+	const sortedRows = computed(() => {
+		if (options.externalSort()) return [...options.rows()];
+		const key = currentSortKey.value;
+		if (!key) return [...options.rows()];
+		return sortRows(options.rows(), key, currentSortDir.value, options.locale());
+	});
+	function toggleSort(col) {
+		if (!col.sortable) return;
+		if (currentSortKey.value !== col.key) {
+			applySort(col.key, "asc");
+			return;
+		}
+		if (currentSortDir.value === "asc") {
+			applySort(col.key, "desc");
+			return;
+		}
+		if (options.sortCycle() === "asc-desc-none") {
+			applySort("", "asc");
+			return;
+		}
+		applySort(col.key, "asc");
+	}
+	function clearSort() {
+		applySort("", "asc");
+	}
+	function ariaSortFor(col) {
+		if (!col.sortable) return void 0;
+		if (currentSortKey.value !== col.key) return "none";
+		return currentSortDir.value === "asc" ? "ascending" : "descending";
+	}
+	return {
+		currentSortKey,
+		currentSortDir,
+		sortedRows,
+		toggleSort,
+		clearSort,
+		ariaSortFor
+	};
+}
+//#endregion
+//#region src/components/GrDataTable/composables/useDataTableSelection.ts
+function useDataTableSelection(options) {
+	const internalSelected = ref([]);
+	const isSelectedControlled = computed(() => options.selected() !== void 0);
+	const selectedKeys = computed(() => new Set(options.selected() ?? internalSelected.value));
+	function isRowSelectable(row) {
+		const predicate = options.selectableRow();
+		return predicate ? predicate(row) : true;
+	}
+	function isRowSelected(row) {
+		return selectedKeys.value.has(options.rowKeyValue(row));
+	}
+	/** «Выбрать все» работает по видимым и выбираемым строкам — они же считают состояние шапки. */
+	const selectableRows = computed(() => options.rows().filter(isRowSelectable));
+	const allSelected = computed(() => selectableRows.value.length > 0 && selectableRows.value.every(isRowSelected));
+	const someSelected = computed(() => selectableRows.value.some(isRowSelected) && !allSelected.value);
+	function emitSelected(next) {
+		if (!isSelectedControlled.value) internalSelected.value = [...next];
+		options.onSelectedChange([...next]);
+	}
+	function toggleRow(row) {
+		if (!isRowSelectable(row)) return;
+		const key = options.rowKeyValue(row);
+		const next = new Set(selectedKeys.value);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		emitSelected(next);
+	}
+	function toggleAll() {
+		const next = new Set(selectedKeys.value);
+		if (allSelected.value) {
+			for (const row of selectableRows.value) next.delete(options.rowKeyValue(row));
+			emitSelected(next);
+			return;
+		}
+		for (const row of selectableRows.value) next.add(options.rowKeyValue(row));
+		emitSelected(next);
+	}
+	return {
+		selectedKeys,
+		isRowSelectable,
+		isRowSelected,
+		selectableRows,
+		allSelected,
+		someSelected,
+		toggleRow,
+		toggleAll
+	};
+}
+//#endregion
+//#region src/components/GrDataTable/composables/useDataTableColumnOrder.ts
+function useDataTableColumnOrder(options) {
+	/** Uncontrolled-состояние; в controlled-режиме перекрывается пропом `columnOrder`. */
+	const internalColumnOrder = ref(options.columns().map((col) => String(col.key)));
+	/**
+	* Колонки в пользовательском порядке.
+	*
+	* Состав задаёт `columns`, порядок — только порядок: ключ, которого в наборе
+	* нет, игнорируется, а колонка, которой нет в порядке (её только что
+	* добавили), встаёт в конец. Иначе правка `columns` теряла бы колонки молча.
+	*/
+	const orderedColumns = computed(() => {
+		const order = options.columnOrder() ?? internalColumnOrder.value;
+		const remaining = new Map(options.columns().map((col) => [String(col.key), col]));
+		const ordered = [];
+		for (const key of order) {
+			const col = remaining.get(key);
+			if (!col) continue;
+			remaining.delete(key);
+			ordered.push(col);
+		}
+		for (const col of options.columns()) if (remaining.has(String(col.key))) ordered.push(col);
+		return ordered.sort((a, b) => pinGroupOf(a) - pinGroupOf(b));
+	});
+	/** Группа закрепления: 0 — слева, 1 — обычная колонка, 2 — справа. */
+	function pinGroupOf(col) {
+		if (col.pinned === "left") return 0;
+		if (col.pinned === "right") return 2;
+		return 1;
+	}
+	const columnKeys = computed(() => orderedColumns.value.map((col) => String(col.key)));
+	function indexOfColumn(key) {
+		return columnKeys.value.indexOf(key);
+	}
+	function sameGroup(from, to) {
+		const cols = orderedColumns.value;
+		if (!cols[from] || !cols[to]) return false;
+		return pinGroupOf(cols[from]) === pinGroupOf(cols[to]);
+	}
+	function applyColumnMove(from, to) {
+		const keys = columnKeys.value;
+		if (from < 0 || to < 0 || to >= keys.length || from === to) return;
+		if (!sameGroup(from, to)) return;
+		const key = keys[from];
+		const label = orderedColumns.value[from]?.label ?? key;
+		const next = moveItem(keys, from, to);
+		internalColumnOrder.value = next;
+		options.onOrderChange(next, {
+			key,
+			from,
+			to
+		});
+		options.announceMove(label, to + 1, keys.length);
+	}
+	const columnSort = useDragSort({
+		items: () => columnKeys.value,
+		elementFor: (key) => options.headerCellEls.get(key) ?? null,
+		orientation: () => "horizontal",
+		disabled: () => !options.reorderableColumns() || options.loading(),
+		resolveTarget: (hit, source) => {
+			const to = insertionIndex(hit, indexOfColumn(source), columnKeys.value.length);
+			return sameGroup(indexOfColumn(source), to) ? to : null;
+		},
+		onDrop: (source, to) => applyColumnMove(indexOfColumn(source), to)
+	});
+	/**
+	* Кольцо роверного фокуса по ручкам: одна остановка `Tab` на всю шапку.
+	* Иначе таблица из десяти колонок добавляла бы десять таб-стопов подряд.
+	*/
+	const columnRoving = useRovingFocus({
+		items: () => options.reorderableColumns() ? columnKeys.value : [],
+		elementFor: (key) => options.columnHandleEls.get(key) ?? null,
+		orientation: () => "horizontal",
+		wrap: () => false
+	});
+	async function onColumnHandleKeydown(event, key) {
+		if (!options.reorderableColumns()) return;
+		if (event.shiftKey && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			event.preventDefault();
+			const from = indexOfColumn(key);
+			applyColumnMove(from, event.key === "ArrowLeft" ? from - 1 : from + 1);
+			await nextTick();
+			await columnRoving.focusKey(key);
+			return;
+		}
+		columnRoving.handleNavigationKeys(event);
+	}
+	const draggingColumnKey = computed(() => columnSort.mode.value === null ? null : columnSort.source.value);
+	/** Полоса места вставки — на колонке-соседе, со стороны движения. */
+	function columnDropClass(index) {
+		const target = columnSort.target.value;
+		if (!columnSort.isActive.value || target === null || target !== index) return "";
+		const active = columnSort.source.value === null ? -1 : indexOfColumn(columnSort.source.value);
+		if (index === active) return "";
+		return target < active ? columnDropBeforeClass : columnDropAfterClass;
+	}
+	return {
+		orderedColumns,
+		columnKeys,
+		pinGroupOf,
+		indexOfColumn,
+		draggingColumnKey,
+		columnDropClass,
+		onColumnHandleKeydown,
+		columnSort,
+		columnRoving
+	};
+}
+/** Шаг клавиатуры и крупный шаг — как у `GrSplitter`. */
+var RESIZE_STEP = 16;
+var RESIZE_BIG_STEP = 48;
+function useDataTableColumnWidths(options) {
+	const internalColumnWidths = ref({});
+	const columnWidths = computed(() => options.columnWidths() ?? internalColumnWidths.value);
+	/** Фактические ширины шапки: заполняются замером раскладки. */
+	const measuredColumnWidths = ref({});
+	function setMeasuredWidths(widths) {
+		measuredColumnWidths.value = widths;
+	}
+	/** Ширина колонки: заданная пользователем сильнее объявленной в `columns`. */
+	function widthOf(col) {
+		return columnWidths.value[String(col.key)] ?? col.width;
+	}
+	/**
+	* Сумма заданных ширин — минимальная ширина таблицы.
+	*
+	* Без неё фиксированная раскладка вписывает таблицу в контейнер и делит место
+	* пропорционально: колонка, которую пользователь растянул, ужимается обратно, а
+	* горизонтальной прокрутки — той самой, ради которой закрепляют колонки, — не
+	* возникает. Считается, только когда ширина известна у **всех** колонок: с
+	* одной неизвестной сумма врала бы.
+	*/
+	const tableMinWidth = computed(() => {
+		const cols = options.orderedColumns();
+		if (cols.length === 0) return void 0;
+		let total = 0;
+		for (const col of cols) {
+			const width = widthOf(col);
+			if (typeof width !== "number") return void 0;
+			total += width;
+		}
+		return total;
+	});
+	const resizingKey = ref(null);
+	let pendingResizeKey = null;
+	let resizeStartX = 0;
+	let resizeStartWidth = 0;
+	let widthBeforeResize;
+	function commitWidths(next) {
+		internalColumnWidths.value = next;
+		options.onWidthsChange(next);
+	}
+	function setColumnWidth(key, width) {
+		commitWidths({
+			...columnWidths.value,
+			[key]: Math.max(48, Math.round(width))
+		});
+	}
+	function announceWidth(key) {
+		const col = options.orderedColumns().find((item) => String(item.key) === key);
+		if (!col) return;
+		options.announceWidth(col.label, columnWidths.value[key] ?? 0);
+	}
+	const resizeGesture = useDragGesture({
+		disabled: () => !options.resizableColumns() || options.loading(),
+		onStart: (event) => {
+			const key = pendingResizeKey;
+			const el = key === null ? null : options.headerCellEls.get(key);
+			if (key === null || !el) return false;
+			resizeStartX = event.clientX;
+			resizeStartWidth = el.getBoundingClientRect().width;
+			widthBeforeResize = columnWidths.value[key];
+			resizingKey.value = key;
+		},
+		onMove: (event) => {
+			if (resizingKey.value === null) return;
+			event.preventDefault();
+			setColumnWidth(resizingKey.value, resizeStartWidth + (event.clientX - resizeStartX));
+		},
+		onEnd: () => {
+			const key = resizingKey.value;
+			resizingKey.value = null;
+			if (key === null) return;
+			options.onColumnResize(key, columnWidths.value[key] ?? Math.round(resizeStartWidth));
+			announceWidth(key);
+		},
+		onCancel: () => {
+			const key = resizingKey.value;
+			resizingKey.value = null;
+			if (key === null) return;
+			const next = { ...columnWidths.value };
+			if (widthBeforeResize === void 0) delete next[key];
+			else next[key] = widthBeforeResize;
+			commitWidths(next);
+		}
+	});
+	function onResizerPointerDown(event, key) {
+		pendingResizeKey = key;
+		resizeGesture.start(event);
+	}
+	/** Сброс к авторазметке: колонка снова считается по содержимому. */
+	function resetColumnWidth(key) {
+		if (columnWidths.value[key] === void 0) return;
+		const next = { ...columnWidths.value };
+		delete next[key];
+		commitWidths(next);
+		options.onColumnResize(key, 0);
+	}
+	function resizeByKeyboard(key, delta) {
+		const measured = options.headerCellEls.get(key)?.getBoundingClientRect().width ?? 48;
+		const current = columnWidths.value[key] ?? measured;
+		setColumnWidth(key, current + delta);
+		options.onColumnResize(key, columnWidths.value[key] ?? current);
+		announceWidth(key);
+	}
+	function onResizerKeydown(event, key) {
+		if (!options.resizableColumns() || options.loading()) return;
+		const step = event.shiftKey ? RESIZE_BIG_STEP : RESIZE_STEP;
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			event.preventDefault();
+			resizeByKeyboard(key, event.key === "ArrowLeft" ? -step : step);
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			resetColumnWidth(key);
+		}
+	}
+	/**
+	* Ручка ресайза — фокусируемый `separator`, а значит обязана называть текущее
+	* значение с первого рендера, до всякого перетаскивания. Заданной ширины у
+	* колонки может не быть вовсе (авторазметка), поэтому за значением идём к
+	* измеренной; до замера остаётся объявленная в `columns`, а её тоже может не
+	* быть — тогда минимум.
+	*/
+	function resizerValue(col) {
+		const key = String(col.key);
+		const declared = typeof col.width === "number" ? col.width : void 0;
+		return columnWidths.value[key] ?? measuredColumnWidths.value[key] ?? declared ?? 48;
+	}
+	return {
+		columnWidths,
+		measuredColumnWidths,
+		setMeasuredWidths,
+		widthOf,
+		tableMinWidth,
+		resizingKey,
+		onResizerPointerDown,
+		onResizerKeydown,
+		resetColumnWidth,
+		resizerValue
+	};
+}
+//#endregion
+//#region src/components/GrDataTable/composables/useDataTableLayout.ts
+/** Служебная колонка выбора в реестре ячеек: своего ключа у неё нет. */
+var SELECT_COLUMN_KEY = "__select__";
+function useDataTableLayout(options) {
+	const hasPinnedLeft = computed(() => options.orderedColumns().some((col) => col.pinned === "left"));
+	const pinnedOffsets = ref({});
+	/**
+	* Смещения липких колонок считаются по **измеренным** ширинам соседей: колонка
+	* может жить на авторазметке, и тогда взять смещение больше неоткуда. Отсюда же
+	* порядок: замер после отрисовки, а не в вычислении.
+	*/
+	function measurePinnedOffsets() {
+		const next = {};
+		const cols = options.orderedColumns();
+		let left = options.selectable() && hasPinnedLeft.value ? options.headerCellEls.get("__select__")?.getBoundingClientRect().width ?? 0 : 0;
+		for (const col of cols) {
+			if (col.pinned !== "left") continue;
+			next[String(col.key)] = left;
+			left += options.headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
+		}
+		let right = 0;
+		for (let index = cols.length - 1; index >= 0; index -= 1) {
+			const col = cols[index];
+			if (col.pinned !== "right") continue;
+			next[String(col.key)] = right;
+			right += options.headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
+		}
+		pinnedOffsets.value = next;
+	}
+	function measureColumnWidths() {
+		if (!options.resizableColumns()) return;
+		const next = {};
+		for (const col of options.orderedColumns()) {
+			const key = String(col.key);
+			const width = options.headerCellEls.get(key)?.getBoundingClientRect().width;
+			if (width) next[key] = Math.round(width);
+		}
+		options.onMeasuredWidths(next);
+	}
+	function measureLayout() {
+		measurePinnedOffsets();
+		measureColumnWidths();
+	}
+	function pinnedStyleOf(col) {
+		if (!col.pinned) return void 0;
+		const offset = pinnedOffsets.value[String(col.key)] ?? 0;
+		return col.pinned === "left" ? { left: `${offset}px` } : { right: `${offset}px` };
+	}
+	/** Тень рисует только крайняя колонка группы — иначе полос было бы столько же, сколько колонок. */
+	function pinnedEdgeClass(col, index) {
+		const cols = options.orderedColumns();
+		if (col.pinned === "left") return cols[index + 1]?.pinned === "left" ? "" : columnPinnedLeftEdgeClass;
+		if (col.pinned === "right") return cols[index - 1]?.pinned === "right" ? "" : columnPinnedRightEdgeClass;
+		return "";
+	}
+	function pinnedCellClass(col, index) {
+		if (!col.pinned) return [];
+		return [columnPinnedClass, pinnedEdgeClass(col, index)];
+	}
+	/**
+	* Ширину колонки меняет не только правка пропов: окно, шрифт и содержимое
+	* ячейки двигают её сами. `ResizeObserver` — единственный способ узнать об этом;
+	* в jsdom и на сервере его нет, там хватает пересчёта по изменению данных.
+	*/
+	let layoutObserver = null;
+	onMounted(() => {
+		measureLayout();
+		if (typeof ResizeObserver === "undefined") return;
+		layoutObserver = new ResizeObserver(() => measureLayout());
+		const el = options.headerCellEls.get("__select__") ?? options.headerCellEls.get(options.columnKeys()[0]);
+		if (el?.parentElement) layoutObserver.observe(el.parentElement);
+	});
+	onUnmounted(() => {
+		layoutObserver?.disconnect();
+		layoutObserver = null;
+	});
+	watch(options.watchSources, () => void nextTick(measureLayout));
+	return {
+		hasPinnedLeft,
+		pinnedStyleOf,
+		pinnedCellClass,
+		measureLayout
+	};
+}
+//#endregion
 //#region ~icons/lucide/arrow-down
 var _hoisted_1$1 = {
 	viewBox: "0 0 24 24",
@@ -112,6 +582,7 @@ var _hoisted_8 = {
 var _hoisted_9 = [
 	"aria-label",
 	"aria-valuenow",
+	"aria-valuemin",
 	"aria-valuetext",
 	"onPointerdown",
 	"onKeydown",
@@ -150,27 +621,6 @@ var _hoisted_18 = {
 var _hoisted_19 = ["colspan"];
 var _hoisted_20 = ["aria-rowindex"];
 var _hoisted_21 = ["data-column-key"];
-/**
-* `GrDataTable` — data-таблица поверх `GrTable` с сортировкой по клику
-* на заголовок и scoped-слотами ячеек (`#cell-<key>`), `#header-<key>`,
-* `#caption`, `#footer`, `#empty`, `#loading`.
-*
-* Итоговая строка объявляется пропом `summaryRow` и оформляется слотами
-* `#summary-<key>`: она встаёт по той же колоночной сетке, что и тело.
-*
-* `#footer` — для свободной разметки под итогом: несколько строк, примечание,
-* `colspan`. Рендерится внутрь того же `<tfoot>`, то есть его содержимое тоже
-* строки таблицы (`<tr><td>`), а скоуп отдаёт `columns` (в текущем порядке) и
-* `totalColumns` (с колонкой выбора).
-*
-* Сортировка, включая крайние случаи с пустыми и смешанными значениями, живёт
-* в `grDataTableSort.ts` — см. `docs/components/GrDataTable.md`.
-*/
-var MIN_COLUMN_WIDTH = 48;
-/** Шаг клавиатуры и крупный шаг — как у `GrSplitter`. */
-var RESIZE_STEP = 16;
-var RESIZE_BIG_STEP = 48;
-var SELECT_COLUMN_KEY = "__select__";
 //#endregion
 //#region src/components/GrDataTable/GrDataTable.vue
 var GrDataTable_default = /* @__PURE__ */ defineComponent({
@@ -262,85 +712,30 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		const { announce } = useAnnouncer();
 		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.dataTable.loading", "Loading…"));
 		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.dataTable.empty", "No data"));
-		const internalSortKey = ref(props.initialSortKey ?? "");
-		const internalSortDir = ref(props.initialSortDir);
-		const isSortKeyControlled = computed(() => props.sortKey !== void 0);
-		const isSortDirControlled = computed(() => props.sortDir !== void 0);
-		const currentSortKey = computed(() => props.sortKey ?? internalSortKey.value);
-		const currentSortDir = computed(() => props.sortDir ?? internalSortDir.value);
-		function applySort(key, dir) {
-			if (!isSortKeyControlled.value) internalSortKey.value = key;
-			if (!isSortDirControlled.value) internalSortDir.value = dir;
-			emit("update:sortKey", key);
-			emit("update:sortDir", dir);
-			emit("sortChange", {
-				key,
-				dir
-			});
-		}
-		const sortedRows = computed(() => {
-			if (props.externalSort) return [...props.rows];
-			const key = currentSortKey.value;
-			if (!key) return [...props.rows];
-			return sortRows(props.rows, key, currentSortDir.value, locale.value);
-		});
-		function toggleSort(col) {
-			if (!col.sortable) return;
-			if (currentSortKey.value !== col.key) {
-				applySort(col.key, "asc");
-				return;
-			}
-			if (currentSortDir.value === "asc") {
-				applySort(col.key, "desc");
-				return;
-			}
-			if (props.sortCycle === "asc-desc-none") {
-				applySort("", "asc");
-				return;
+		const { currentSortKey, currentSortDir, sortedRows, toggleSort, clearSort, ariaSortFor } = useDataTableSort({
+			rows: () => props.rows,
+			sortKey: () => props.sortKey,
+			sortDir: () => props.sortDir,
+			initialSortKey: () => props.initialSortKey,
+			initialSortDir: () => props.initialSortDir,
+			externalSort: () => props.externalSort,
+			sortCycle: () => props.sortCycle,
+			locale: () => locale.value,
+			onSortChange: (key, dir) => {
+				emit("update:sortKey", key);
+				emit("update:sortDir", dir);
+				emit("sortChange", {
+					key,
+					dir
+				});
 			}
-			applySort(col.key, "asc");
-		}
+		});
 		function cellAlign(col) {
 			if (col.align === "right") return "text-right";
 			if (col.align === "center") return "text-center";
 			return "text-left";
 		}
-		/**
-		* Синтетические ключи для строк, у которых поле `rowKey` пустое.
-		*
-		* Без них строка получила бы `String(undefined ?? '')` — **один и тот же** ключ
-		* на всю таблицу: Vue переиспользовал бы DOM не по назначению, а выбор одной
-		* строки помечал бы выбранными все. Ключ привязан к идентичности объекта,
-		* поэтому переживает сортировку и не зависит от индекса.
-		*/
-		const syntheticKeys = /* @__PURE__ */ new WeakMap();
-		let syntheticKeyCounter = 0;
-		const missingKeyWarned = ref(false);
-		function syntheticRowKey(row) {
-			const existing = syntheticKeys.get(row);
-			if (existing !== void 0) return existing;
-			syntheticKeyCounter += 1;
-			const generated = `gr-row-${syntheticKeyCounter}`;
-			syntheticKeys.set(row, generated);
-			if (!missingKeyWarned.value && process.env.NODE_ENV !== "production") {
-				missingKeyWarned.value = true;
-				console.warn(`[GrDataTable] У строки нет значения по ключу "${String(props.rowKey)}". Задайте \`rowKey\` (поле или функцию) — иначе выбор строк и переиспользование DOM работают по синтетическому ключу, который не переживёт перезагрузку данных.`);
-			}
-			return generated;
-		}
-		function rowKeyValue(row) {
-			const rk = props.rowKey;
-			if (typeof rk === "function") return rk(row);
-			const value = row[rk];
-			if (typeof value === "string" && value !== "") return value;
-			if (typeof value === "number") return value;
-			return syntheticRowKey(row);
-		}
-		function ariaSortFor(col) {
-			if (!col.sortable) return void 0;
-			if (currentSortKey.value !== col.key) return "none";
-			return currentSortDir.value === "asc" ? "ascending" : "descending";
-		}
+		const { rowKeyValue } = useDataTableRowKeys({ rowKey: () => props.rowKey });
 		/**
 		* Подсказка «что сделает нажатие» — visually hidden текстом **после** подписи
 		* колонки, а не `aria-label`'ом на кнопке. `aria-label` подменял бы собой имя
@@ -391,55 +786,72 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			return props.summaryRow?.[key];
 		}
 		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0));
-		/** Uncontrolled-состояние; в controlled-режиме перекрывается пропом `columnOrder`. */
-		const internalColumnOrder = ref(props.columns.map((col) => String(col.key)));
 		/**
-		* Колонки в пользовательском порядке.
-		*
-		* Состав задаёт `columns`, порядок — только порядок: ключ, которого в наборе
-		* нет, игнорируется, а колонка, которой нет в порядке (её только что добавили),
-		* встаёт в конец. Иначе правка `columns` теряла бы колонки молча.
+		* Карты живут в компоненте, а не в модуле: наполняет их шаблон, а читают все
+		* три колоночных модуля — порядок тянет за ячейку, ширина её замеряет,
+		* раскладка считает по ней смещения закрепления.
 		*/
-		const orderedColumns = computed(() => {
-			const order = props.columnOrder ?? internalColumnOrder.value;
-			const remaining = new Map(props.columns.map((col) => [String(col.key), col]));
-			const ordered = [];
-			for (const key of order) {
-				const col = remaining.get(key);
-				if (!col) continue;
-				remaining.delete(key);
-				ordered.push(col);
+		const headerCellEls = /* @__PURE__ */ new Map();
+		const columnHandleEls = /* @__PURE__ */ new Map();
+		function registerEl(store, key, el) {
+			if (el instanceof HTMLElement) {
+				store.set(key, el);
+				return;
 			}
-			for (const col of props.columns) if (remaining.has(String(col.key))) ordered.push(col);
-			return ordered.sort((a, b) => pinGroupOf(a) - pinGroupOf(b));
-		});
-		/** Группа закрепления: 0 — слева, 1 — обычная колонка, 2 — справа. */
-		function pinGroupOf(col) {
-			if (col.pinned === "left") return 0;
-			if (col.pinned === "right") return 2;
-			return 1;
+			const previous = store.get(key);
+			if (previous && !previous.isConnected) store.delete(key);
 		}
-		/**
-		* Сумма заданных ширин — минимальная ширина таблицы.
-		*
-		* Без неё фиксированная раскладка вписывает таблицу в контейнер и делит место
-		* пропорционально: колонка, которую пользователь растянул, ужимается обратно, а
-		* горизонтальной прокрутки — той самой, ради которой закрепляют колонки, — не
-		* возникает. Считается, только когда ширина известна у **всех** колонок: с
-		* одной неизвестной сумма врала бы.
-		*/
-		const tableMinWidth = computed(() => {
-			const cols = orderedColumns.value;
-			if (cols.length === 0) return void 0;
-			let total = 0;
-			for (const col of cols) {
-				const width = widthOf(col);
-				if (typeof width !== "number") return void 0;
-				total += width;
+		const { orderedColumns, columnKeys, draggingColumnKey, columnDropClass, onColumnHandleKeydown, columnSort, columnRoving } = useDataTableColumnOrder({
+			columns: () => props.columns,
+			columnOrder: () => props.columnOrder,
+			reorderableColumns: () => props.reorderableColumns,
+			loading: () => props.loading,
+			headerCellEls,
+			columnHandleEls,
+			onOrderChange: (order, moved) => {
+				emit("update:columnOrder", order);
+				emit("columnReorder", moved);
+			},
+			announceMove: (label, position, count) => {
+				announce(t("gr.dataTable.columnMoved", "Column {label} moved to position {position} of {count}", {
+					label,
+					position,
+					count
+				}));
 			}
-			return total;
 		});
-		const columnKeys = computed(() => orderedColumns.value.map((col) => String(col.key)));
+		const { columnWidths, setMeasuredWidths, widthOf, tableMinWidth, resizingKey, onResizerPointerDown, onResizerKeydown, resetColumnWidth, resizerValue } = useDataTableColumnWidths({
+			orderedColumns: () => orderedColumns.value,
+			columnWidths: () => props.columnWidths,
+			resizableColumns: () => props.resizableColumns,
+			loading: () => props.loading,
+			headerCellEls,
+			onWidthsChange: (widths) => emit("update:columnWidths", widths),
+			onColumnResize: (key, width) => emit("columnResize", {
+				key,
+				width
+			}),
+			announceWidth: (label, width) => {
+				announce(t("gr.dataTable.columnResized", "Column {label} is {width} pixels wide", {
+					label,
+					width
+				}));
+			}
+		});
+		const { hasPinnedLeft, pinnedStyleOf, pinnedCellClass } = useDataTableLayout({
+			orderedColumns: () => orderedColumns.value,
+			columnKeys: () => columnKeys.value,
+			selectable: () => props.selectable,
+			resizableColumns: () => props.resizableColumns,
+			headerCellEls,
+			watchSources: () => [
+				orderedColumns.value,
+				columnWidths.value,
+				props.loading,
+				props.rows.length
+			],
+			onMeasuredWidths: setMeasuredWidths
+		});
 		const tableProps = computed(() => ({
 			size: resolvedSize.value,
 			ariaLabel: props.ariaLabel,
@@ -451,288 +863,13 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			fixedLayout: props.virtual || props.resizableColumns,
 			tableMinWidth: tableMinWidth.value
 		}));
-		function indexOfColumn(key) {
-			return columnKeys.value.indexOf(key);
-		}
-		const headerCellEls = /* @__PURE__ */ new Map();
-		const columnHandleEls = /* @__PURE__ */ new Map();
-		function registerEl(store, key, el) {
-			if (el instanceof HTMLElement) {
-				store.set(key, el);
-				return;
-			}
-			const previous = store.get(key);
-			if (previous && !previous.isConnected) store.delete(key);
-		}
-		function applyColumnMove(from, to) {
-			const keys = columnKeys.value;
-			if (from < 0 || to < 0 || to >= keys.length || from === to) return;
-			if (!sameGroup(from, to)) return;
-			const key = keys[from];
-			const label = orderedColumns.value[from]?.label ?? key;
-			const next = moveItem(keys, from, to);
-			internalColumnOrder.value = next;
-			emit("update:columnOrder", next);
-			emit("columnReorder", {
-				key,
-				from,
-				to
-			});
-			announce(t("gr.dataTable.columnMoved", "Column {label} moved to position {position} of {count}", {
-				label,
-				position: to + 1,
-				count: keys.length
-			}));
-		}
-		const columnSort = useDragSort({
-			items: () => columnKeys.value,
-			elementFor: (key) => headerCellEls.get(key) ?? null,
-			orientation: () => "horizontal",
-			disabled: () => !props.reorderableColumns || props.loading,
-			resolveTarget: (hit, source) => {
-				const to = insertionIndex(hit, indexOfColumn(source), columnKeys.value.length);
-				return sameGroup(indexOfColumn(source), to) ? to : null;
-			},
-			onDrop: (source, to) => applyColumnMove(indexOfColumn(source), to)
-		});
-		function sameGroup(from, to) {
-			const cols = orderedColumns.value;
-			if (!cols[from] || !cols[to]) return false;
-			return pinGroupOf(cols[from]) === pinGroupOf(cols[to]);
-		}
-		/**
-		* Кольцо роверного фокуса по ручкам: одна остановка `Tab` на всю шапку.
-		* Иначе таблица из десяти колонок добавляла бы десять таб-стопов подряд.
-		*/
-		const columnRoving = useRovingFocus({
-			items: () => props.reorderableColumns ? columnKeys.value : [],
-			elementFor: (key) => columnHandleEls.get(key) ?? null,
-			orientation: () => "horizontal",
-			wrap: () => false
-		});
-		async function onColumnHandleKeydown(event, key) {
-			if (!props.reorderableColumns) return;
-			if (event.shiftKey && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
-				event.preventDefault();
-				const from = indexOfColumn(key);
-				applyColumnMove(from, event.key === "ArrowLeft" ? from - 1 : from + 1);
-				await nextTick();
-				await columnRoving.focusKey(key);
-				return;
-			}
-			columnRoving.handleNavigationKeys(event);
-		}
-		const draggingColumnKey = computed(() => columnSort.mode.value === null ? null : columnSort.source.value);
-		/** Полоса места вставки — на колонке-соседе, со стороны движения. */
-		function columnDropClass(index) {
-			const target = columnSort.target.value;
-			if (!columnSort.isActive.value || target === null || target !== index) return "";
-			const active = columnSort.source.value === null ? -1 : indexOfColumn(columnSort.source.value);
-			if (index === active) return "";
-			return target < active ? columnDropBeforeClass : columnDropAfterClass;
-		}
 		function columnHandleLabel(col) {
 			return t("gr.dataTable.moveColumn", "Move column {label}", { label: col.label });
 		}
-		/** Уже колонки не бывает: в неё перестаёт помещаться даже стрелка сортировки. */
-		const internalColumnWidths = ref({});
-		const columnWidths = computed(() => props.columnWidths ?? internalColumnWidths.value);
-		/** Фактические ширины шапки: заполняются замером, см. `measureLayout`. */
-		const measuredColumnWidths = ref({});
-		/** Ширина колонки: заданная пользователем сильнее объявленной в `columns`. */
-		function widthOf(col) {
-			return columnWidths.value[String(col.key)] ?? col.width;
-		}
-		const resizingKey = ref(null);
-		let pendingResizeKey = null;
-		let resizeStartX = 0;
-		let resizeStartWidth = 0;
-		let widthBeforeResize;
-		function setColumnWidth(key, width) {
-			const next = {
-				...columnWidths.value,
-				[key]: Math.max(MIN_COLUMN_WIDTH, Math.round(width))
-			};
-			internalColumnWidths.value = next;
-			emit("update:columnWidths", next);
-		}
-		function announceWidth(key) {
-			const col = orderedColumns.value.find((item) => String(item.key) === key);
-			if (!col) return;
-			announce(t("gr.dataTable.columnResized", "Column {label} is {width} pixels wide", {
-				label: col.label,
-				width: columnWidths.value[key] ?? 0
-			}));
-		}
-		const resizeGesture = useDragGesture({
-			disabled: () => !props.resizableColumns || props.loading,
-			onStart: (event) => {
-				const key = pendingResizeKey;
-				const el = key === null ? null : headerCellEls.get(key);
-				if (key === null || !el) return false;
-				resizeStartX = event.clientX;
-				resizeStartWidth = el.getBoundingClientRect().width;
-				widthBeforeResize = columnWidths.value[key];
-				resizingKey.value = key;
-			},
-			onMove: (event) => {
-				if (resizingKey.value === null) return;
-				event.preventDefault();
-				setColumnWidth(resizingKey.value, resizeStartWidth + (event.clientX - resizeStartX));
-			},
-			onEnd: () => {
-				const key = resizingKey.value;
-				resizingKey.value = null;
-				if (key === null) return;
-				emit("columnResize", {
-					key,
-					width: columnWidths.value[key] ?? Math.round(resizeStartWidth)
-				});
-				announceWidth(key);
-			},
-			onCancel: () => {
-				const key = resizingKey.value;
-				resizingKey.value = null;
-				if (key === null) return;
-				const next = { ...columnWidths.value };
-				if (widthBeforeResize === void 0) delete next[key];
-				else next[key] = widthBeforeResize;
-				internalColumnWidths.value = next;
-				emit("update:columnWidths", next);
-			}
-		});
-		function onResizerPointerDown(event, key) {
-			pendingResizeKey = key;
-			resizeGesture.start(event);
-		}
-		/** Сброс к авторазметке: колонка снова считается по содержимому. */
-		function resetColumnWidth(key) {
-			if (columnWidths.value[key] === void 0) return;
-			const next = { ...columnWidths.value };
-			delete next[key];
-			internalColumnWidths.value = next;
-			emit("update:columnWidths", next);
-			emit("columnResize", {
-				key,
-				width: 0
-			});
-		}
-		function resizeByKeyboard(key, delta) {
-			const measured = headerCellEls.get(key)?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH;
-			const current = columnWidths.value[key] ?? measured;
-			setColumnWidth(key, current + delta);
-			emit("columnResize", {
-				key,
-				width: columnWidths.value[key] ?? current
-			});
-			announceWidth(key);
-		}
-		function onResizerKeydown(event, key) {
-			if (!props.resizableColumns || props.loading) return;
-			const step = event.shiftKey ? RESIZE_BIG_STEP : RESIZE_STEP;
-			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-				event.preventDefault();
-				resizeByKeyboard(key, event.key === "ArrowLeft" ? -step : step);
-				return;
-			}
-			if (event.key === "Enter") {
-				event.preventDefault();
-				resetColumnWidth(key);
-			}
-		}
 		function resizerLabel(col) {
 			return t("gr.dataTable.resizeColumn", "Width of column {label}", { label: col.label });
 		}
-		/**
-		* Ручка ресайза — фокусируемый `separator`, а значит обязана называть текущее
-		* значение с первого рендера, до всякого перетаскивания. Заданной ширины у
-		* колонки может не быть вовсе (авторазметка), поэтому за значением идём к
-		* измеренной; до замера остаётся объявленная в `columns`, а её тоже может не
-		* быть — тогда минимум.
-		*/
-		function resizerValue(col) {
-			const key = String(col.key);
-			const declared = typeof col.width === "number" ? col.width : void 0;
-			return columnWidths.value[key] ?? measuredColumnWidths.value[key] ?? declared ?? MIN_COLUMN_WIDTH;
-		}
-		/** Служебная колонка выбора в реестре ячеек: своего ключа у неё нет. */
-		const hasPinnedLeft = computed(() => orderedColumns.value.some((col) => col.pinned === "left"));
-		const pinnedOffsets = ref({});
-		/**
-		* Смещения липких колонок считаются по **измеренным** ширинам соседей: колонка
-		* может жить на авторазметке, и тогда взять смещение больше неоткуда. Отсюда же
-		* порядок: замер после отрисовки, а не в вычислении.
-		*/
-		function measurePinnedOffsets() {
-			const next = {};
-			const cols = orderedColumns.value;
-			let left = props.selectable && hasPinnedLeft.value ? headerCellEls.get(SELECT_COLUMN_KEY)?.getBoundingClientRect().width ?? 0 : 0;
-			for (const col of cols) {
-				if (col.pinned !== "left") continue;
-				next[String(col.key)] = left;
-				left += headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
-			}
-			let right = 0;
-			for (let index = cols.length - 1; index >= 0; index -= 1) {
-				const col = cols[index];
-				if (col.pinned !== "right") continue;
-				next[String(col.key)] = right;
-				right += headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
-			}
-			pinnedOffsets.value = next;
-		}
-		function measureColumnWidths() {
-			if (!props.resizableColumns) return;
-			const next = {};
-			for (const col of orderedColumns.value) {
-				const key = String(col.key);
-				const width = headerCellEls.get(key)?.getBoundingClientRect().width;
-				if (width) next[key] = Math.round(width);
-			}
-			measuredColumnWidths.value = next;
-		}
-		function measureLayout() {
-			measurePinnedOffsets();
-			measureColumnWidths();
-		}
-		function pinnedStyleOf(col) {
-			if (!col.pinned) return void 0;
-			const offset = pinnedOffsets.value[String(col.key)] ?? 0;
-			return col.pinned === "left" ? { left: `${offset}px` } : { right: `${offset}px` };
-		}
-		/** Тень рисует только крайняя колонка группы — иначе полос было бы столько же, сколько колонок. */
-		function pinnedEdgeClass(col, index) {
-			if (col.pinned === "left") return orderedColumns.value[index + 1]?.pinned === "left" ? "" : columnPinnedLeftEdgeClass;
-			if (col.pinned === "right") return orderedColumns.value[index - 1]?.pinned === "right" ? "" : columnPinnedRightEdgeClass;
-			return "";
-		}
-		function pinnedCellClass(col, index) {
-			if (!col.pinned) return [];
-			return [columnPinnedClass, pinnedEdgeClass(col, index)];
-		}
-		/**
-		* Ширину колонки меняет не только правка пропов: окно, шрифт и содержимое
-		* ячейки двигают её сами. `ResizeObserver` — единственный способ узнать об этом;
-		* в jsdom и на сервере его нет, там хватает пересчёта по изменению данных.
-		*/
-		let layoutObserver = null;
-		onMounted(() => {
-			measureLayout();
-			if (typeof ResizeObserver === "undefined") return;
-			layoutObserver = new ResizeObserver(() => measureLayout());
-			const el = headerCellEls.get(SELECT_COLUMN_KEY) ?? headerCellEls.get(columnKeys.value[0]);
-			if (el?.parentElement) layoutObserver.observe(el.parentElement);
-		});
-		onUnmounted(() => {
-			layoutObserver?.disconnect();
-			layoutObserver = null;
-		});
-		watch(() => [
-			orderedColumns.value,
-			columnWidths.value,
-			props.loading,
-			props.rows.length
-		], () => void nextTick(measureLayout));
+		/** Уже колонки не бывает: в неё перестаёт помещаться даже стрелка сортировки. */
 		/**
 		* Живой регион существует с первого рендера и пуст, пока объявлять нечего.
 		* Регион, который появляется уже с текстом, часть AT не объявляет вовсе —
@@ -757,41 +894,13 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 				event
 			});
 		}
-		const internalSelected = ref([]);
-		const isSelectedControlled = computed(() => props.selected !== void 0);
-		const selectedKeys = computed(() => new Set(props.selected ?? internalSelected.value));
-		function isRowSelectable(row) {
-			return props.selectableRow ? props.selectableRow(row) : true;
-		}
-		function isRowSelected(row) {
-			return selectedKeys.value.has(rowKeyValue(row));
-		}
-		/** «Выбрать все» работает по видимым и выбираемым строкам — они же считают состояние шапки. */
-		const selectableRows = computed(() => sortedRows.value.filter(isRowSelectable));
-		const allSelected = computed(() => selectableRows.value.length > 0 && selectableRows.value.every(isRowSelected));
-		const someSelected = computed(() => selectableRows.value.some(isRowSelected) && !allSelected.value);
-		function emitSelected(next) {
-			if (!isSelectedControlled.value) internalSelected.value = [...next];
-			emit("update:selected", [...next]);
-		}
-		function toggleRow(row) {
-			if (!isRowSelectable(row)) return;
-			const key = rowKeyValue(row);
-			const next = new Set(selectedKeys.value);
-			if (next.has(key)) next.delete(key);
-			else next.add(key);
-			emitSelected(next);
-		}
-		function toggleAll() {
-			const next = new Set(selectedKeys.value);
-			if (allSelected.value) {
-				for (const row of selectableRows.value) next.delete(rowKeyValue(row));
-				emitSelected(next);
-				return;
-			}
-			for (const row of selectableRows.value) next.add(rowKeyValue(row));
-			emitSelected(next);
-		}
+		const { isRowSelectable, isRowSelected, selectableRows, allSelected, someSelected, toggleRow, toggleAll } = useDataTableSelection({
+			rows: () => sortedRows.value,
+			selected: () => props.selected,
+			selectableRow: () => props.selectableRow,
+			rowKeyValue,
+			onSelectedChange: (keys) => emit("update:selected", keys)
+		});
 		const tableRef = ref(null);
 		const rootId = useId();
 		function rootEl() {
@@ -864,9 +973,6 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		function scrollTo(options) {
 			scrollEl()?.scrollTo(options);
 		}
-		function clearSort() {
-			applySort("", "asc");
-		}
 		__expose({
 			/** Прокрутить к строке по её ключу. `false` — строки нет в DOM. */
 			scrollToRow,
@@ -904,29 +1010,30 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					"aria-rowindex": __props.virtual ? 1 : void 0
 				}, [__props.selectable ? (openBlock(), createElementBlock("th", {
 					key: 0,
-					ref: (el) => registerEl(unref(headerCellEls), SELECT_COLUMN_KEY, el),
+					ref: (el) => registerEl(unref(headerCellEls), unref(SELECT_COLUMN_KEY), el),
 					class: normalizeClass(["text-left", [
 						selectColumnClass.value,
 						cellClass.value,
-						hasPinnedLeft.value ? unref(columnPinnedClass) : ""
+						unref(hasPinnedLeft) ? unref(columnPinnedClass) : ""
 					]]),
-					style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0),
+					style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0),
 					scope: "col"
 				}, [createVNode(GrCheckbox_default, {
 					"data-gr-datatable-select-all": "",
-					"model-value": allSelected.value,
-					indeterminate: someSelected.value,
+					"model-value": unref(allSelected),
+					indeterminate: unref(someSelected),
 					size: checkboxSize.value,
-					disabled: __props.loading || selectableRows.value.length === 0,
+					disabled: __props.loading || unref(selectableRows).length === 0,
 					"aria-label": unref(t)("gr.dataTable.selectAll", "Select all rows"),
-					"onUpdate:modelValue": toggleAll
+					"onUpdate:modelValue": unref(toggleAll)
 				}, null, 8, [
 					"model-value",
 					"indeterminate",
 					"size",
 					"disabled",
-					"aria-label"
-				])], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
+					"aria-label",
+					"onUpdate:modelValue"
+				])], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
 					return openBlock(), createElementBlock("th", {
 						key: col.key,
 						ref_for: true,
@@ -936,16 +1043,16 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 							cellClass.value,
 							cellAlign(col),
 							__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
-							draggingColumnKey.value === String(col.key) ? unref(columnDraggingClass) : "",
-							columnDropClass(colIndex),
-							...pinnedCellClass(col, colIndex)
+							unref(draggingColumnKey) === String(col.key) ? unref(columnDraggingClass) : "",
+							unref(columnDropClass)(colIndex),
+							...unref(pinnedCellClass)(col, colIndex)
 						]]),
 						"data-column-key": col.key,
 						style: normalizeStyle({
-							...columnWidthStyle(widthOf(col)),
-							...pinnedStyleOf(col)
+							...columnWidthStyle(unref(widthOf)(col)),
+							...unref(pinnedStyleOf)(col)
 						}),
-						"aria-sort": ariaSortFor(col),
+						"aria-sort": unref(ariaSortFor)(col),
 						scope: "col"
 					}, [createElementVNode("div", { class: normalizeClass(["inline-flex items-center", headerGapClass.value]) }, [__props.reorderableColumns ? (openBlock(), createElementBlock("button", {
 						key: 0,
@@ -958,7 +1065,7 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						"aria-label": columnHandleLabel(col),
 						disabled: __props.loading,
 						onPointerdown: ($event) => unref(columnSort).startFrom(String(col.key))($event),
-						onKeydown: ($event) => onColumnHandleKeydown($event, String(col.key)),
+						onKeydown: ($event) => unref(onColumnHandleKeydown)($event, String(col.key)),
 						onFocus: ($event) => unref(columnRoving).setActive(String(col.key)),
 						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
 					}, [createVNode(unref(grip_vertical_default), {
@@ -969,17 +1076,17 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						type: "button",
 						"data-gr-datatable-sort": "",
 						class: normalizeClass(["inline-flex items-center text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)]", headerGapClass.value]),
-						onClick: ($event) => toggleSort(col)
+						onClick: ($event) => unref(toggleSort)(col)
 					}, [
 						createElementVNode("span", null, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]),
 						createElementVNode("span", _hoisted_6, toDisplayString(sortHint(col)), 1),
-						createElementVNode("span", _hoisted_7, [currentSortKey.value === col.key && currentSortDir.value === "asc" ? (openBlock(), createBlock(GrIcon_default, {
+						createElementVNode("span", _hoisted_7, [unref(currentSortKey) === col.key && unref(currentSortDir) === "asc" ? (openBlock(), createBlock(GrIcon_default, {
 							key: 0,
 							size: sortIconSize.value
 						}, {
 							default: withCtx(() => [createVNode(unref(arrow_up_default))]),
 							_: 1
-						}, 8, ["size"])) : currentSortKey.value === col.key && currentSortDir.value === "desc" ? (openBlock(), createBlock(GrIcon_default, {
+						}, 8, ["size"])) : unref(currentSortKey) === col.key && unref(currentSortDir) === "desc" ? (openBlock(), createBlock(GrIcon_default, {
 							key: 1,
 							size: sortIconSize.value
 						}, {
@@ -994,18 +1101,18 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						"aria-orientation": "vertical",
 						class: normalizeClass(unref(columnResizerClass)),
 						"aria-label": resizerLabel(col),
-						"aria-valuenow": resizerValue(col),
-						"aria-valuemin": MIN_COLUMN_WIDTH,
-						"aria-valuetext": `${resizerValue(col)}px`,
-						onPointerdown: ($event) => onResizerPointerDown($event, String(col.key)),
-						onKeydown: ($event) => onResizerKeydown($event, String(col.key)),
-						onDblclick: ($event) => resetColumnWidth(String(col.key)),
+						"aria-valuenow": unref(resizerValue)(col),
+						"aria-valuemin": unref(48),
+						"aria-valuetext": `${unref(resizerValue)(col)}px`,
+						onPointerdown: ($event) => unref(onResizerPointerDown)($event, String(col.key)),
+						onKeydown: ($event) => unref(onResizerKeydown)($event, String(col.key)),
+						onDblclick: ($event) => unref(resetColumnWidth)(String(col.key)),
 						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
 					}, [createElementVNode("span", {
 						class: normalizeClass([
 							unref(columnResizerLineClass),
 							unref(columnResizerHoverClass),
-							resizingKey.value === String(col.key) ? unref(columnResizerLineActiveClass) : ""
+							unref(resizingKey) === String(col.key) ? unref(columnResizerLineActiveClass) : ""
 						]),
 						"aria-hidden": "true"
 					}, null, 2)], 42, _hoisted_9)) : createCommentVNode("", true)], 14, _hoisted_3);
@@ -1030,48 +1137,48 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					}, null, 12, _hoisted_16)])) : createCommentVNode("", true),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, ({ row, index }) => {
 						return openBlock(), createElementBlock("tr", mergeProps({
-							key: rowKeyValue(row),
+							key: unref(rowKeyValue)(row),
 							ref_for: true,
 							ref: (el) => __props.virtual && unref(virtualizer).measure(index, el),
-							class: ["border-t border-[var(--gr-brd)]", [isRowSelected(row) ? unref(rowSelectedClass) : "", rowClassName(row, index)]],
+							class: ["border-t border-[var(--gr-brd)]", [unref(isRowSelected)(row) ? unref(rowSelectedClass) : "", rowClassName(row, index)]],
 							"data-gr-datatable-row": "",
-							"data-row-key": rowKeyValue(row),
-							"data-selected": __props.selectable && isRowSelected(row) ? "true" : void 0,
+							"data-row-key": unref(rowKeyValue)(row),
+							"data-selected": __props.selectable && unref(isRowSelected)(row) ? "true" : void 0,
 							"aria-rowindex": ariaRowIndex(index)
 						}, { ref_for: true }, __props.rowProps?.(row, index), { onClick: ($event) => onRowClick(row, index, $event) }), [__props.selectable ? (openBlock(), createElementBlock("td", {
 							key: 0,
 							class: normalizeClass(["text-left", [
 								selectColumnClass.value,
 								cellClass.value,
-								hasPinnedLeft.value ? unref(columnPinnedClass) : "",
-								hasPinnedLeft.value && isRowSelected(row) ? unref(rowSelectedClass) : ""
+								unref(hasPinnedLeft) ? unref(columnPinnedClass) : "",
+								unref(hasPinnedLeft) && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
 							]]),
-							style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0)
-						}, [isRowSelectable(row) ? (openBlock(), createBlock(GrCheckbox_default, {
+							style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0)
+						}, [unref(isRowSelectable)(row) ? (openBlock(), createBlock(GrCheckbox_default, {
 							key: 0,
 							"data-gr-datatable-select-row": "",
-							"model-value": isRowSelected(row),
+							"model-value": unref(isRowSelected)(row),
 							size: checkboxSize.value,
 							"aria-label": unref(t)("gr.dataTable.selectRow", "Select row"),
 							onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
-							"onUpdate:modelValue": ($event) => toggleRow(row)
+							"onUpdate:modelValue": ($event) => unref(toggleRow)(row)
 						}, null, 8, [
 							"model-value",
 							"size",
 							"aria-label",
 							"onUpdate:modelValue"
-						])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
+						])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
 							return openBlock(), createElementBlock("td", {
 								key: col.key,
 								class: normalizeClass([
 									cellClass.value,
 									cellAlign(col),
-									...pinnedCellClass(col, colIndex),
-									col.pinned && isRowSelected(row) ? unref(rowSelectedClass) : ""
+									...unref(pinnedCellClass)(col, colIndex),
+									col.pinned && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
 								]),
 								style: normalizeStyle({
-									...columnWidthStyle(widthOf(col)),
-									...pinnedStyleOf(col)
+									...columnWidthStyle(unref(widthOf)(col)),
+									...unref(pinnedStyleOf)(col)
 								})
 							}, [renderSlot(_ctx.$slots, `cell-${col.key}`, {
 								row,
@@ -1101,28 +1208,28 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass([
 						selectColumnClass.value,
 						cellClass.value,
-						hasPinnedLeft.value ? unref(columnPinnedClass) : ""
+						unref(hasPinnedLeft) ? unref(columnPinnedClass) : ""
 					]),
-					style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0)
-				}, null, 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
+					style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0)
+				}, null, 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
 					return openBlock(), createElementBlock("td", {
 						key: col.key,
 						"data-column-key": col.key,
 						class: normalizeClass([
 							cellClass.value,
 							cellAlign(col),
-							...pinnedCellClass(col, colIndex)
+							...unref(pinnedCellClass)(col, colIndex)
 						]),
 						style: normalizeStyle({
-							...columnWidthStyle(widthOf(col)),
-							...pinnedStyleOf(col)
+							...columnWidthStyle(unref(widthOf)(col)),
+							...unref(pinnedStyleOf)(col)
 						})
 					}, [renderSlot(_ctx.$slots, `summary-${col.key}`, {
 						value: summaryValue(col.key),
 						column: col
 					}, () => [createElementVNode("span", null, toDisplayString(summaryValue(col.key)), 1)])], 14, _hoisted_21);
 				}), 128))], 10, _hoisted_20)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
-					columns: orderedColumns.value,
+					columns: unref(orderedColumns),
 					totalColumns: totalColumns.value
 				})]),
 				key: "0"