@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrDataTable/chunks/GrDataTable-CNvZg2HZ.js

@@ -0,0 +1,1055 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-bQwtZtYT.js";
+import { useVirtualList } from "../../../composables/useVirtualList.js";
+import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-CEcHIsXM.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { t as GrTable_default } from "../../GrTable/chunks/GrTable-f3qCWa99.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { n as insertionIndex, r as moveItem, t as useDragSort } from "../../../chunks/useDragSort-0l47h4yb.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { C as sortIconSizes, S as selectColumnWidths, _ as headerTextSizes, a as columnDropAfterClass, b as rowSelectedClass, c as columnHandleClass, d as columnPinnedRightEdgeClass, f as columnResizerClass, g as headerGaps, h as columnResizerLineClass, i as columnDraggingClass, l as columnPinnedClass, m as columnResizerLineActiveClass, o as columnDropBeforeClass, p as columnResizerHoverClass, r as cellPaddings, s as columnHandleActiveClass, u as columnPinnedLeftEdgeClass, v as placeholderPaddings, w as spinnerSizes, x as selectCheckboxSizes, y as rowHeightEstimates } from "../../../chunks/config-BJ7Bv_G2.js";
+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, withCtx, withModifiers } from "vue";
+//#region src/components/GrDataTable/grDataTableSort.ts
+/** Пустое значение ячейки: нечего сравнивать, место таким — в конце списка. */
+function isEmptyCell(value) {
+	if (value === null || value === void 0) return true;
+	return typeof value === "string" && value.trim() === "";
+}
+/**
+* Число, с которым имеет смысл сравнивать: сам `number`, числовая строка, `Date`
+* (по таймстампу), `boolean` (`false` < `true`). Иначе — `null`, и сравнение
+* уходит в строковую ветку.
+*/
+function toComparableNumber(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	if (typeof value === "boolean") return value ? 1 : 0;
+	if (typeof value === "bigint") return Number(value);
+	if (value instanceof Date) {
+		const time = value.getTime();
+		return Number.isNaN(time) ? null : time;
+	}
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		if (trimmed === "") return null;
+		const parsed = Number(trimmed);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+	return null;
+}
+/**
+* Сравнивает два значения ячейки. Возвращает готовую разницу с учётом `dir` —
+* кроме пустых значений: они всегда в конце, иначе «пустые» в `desc` уезжали бы
+* наверх и таблица выглядела бы сломанной.
+*/
+function compareCells(a, b, dir, locale) {
+	const aEmpty = isEmptyCell(a);
+	const bEmpty = isEmptyCell(b);
+	if (aEmpty || bEmpty) return aEmpty && bEmpty ? 0 : aEmpty ? 1 : -1;
+	const aNum = toComparableNumber(a);
+	const bNum = toComparableNumber(b);
+	const result = aNum !== null && bNum !== null ? aNum - bNum : String(a).localeCompare(String(b), locale, {
+		sensitivity: "base",
+		numeric: true
+	});
+	return dir === "asc" ? result : -result;
+}
+/**
+* Новый отсортированный массив. Исходный не мутируется: `rows` приходят пропом,
+* сортировка на месте меняла бы данные потребителя.
+*/
+function sortRows(rows, key, dir, locale) {
+	return [...rows].sort((a, b) => compareCells(a[key], b[key], dir, locale));
+}
+//#endregion
+//#region ~icons/lucide/arrow-down
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M12 5v14m7-7l-7 7l-7-7"
+	}, null, -1)])]);
+}
+var arrow_down_default = markRaw({
+	name: "lucide-arrow-down",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrDataTable/GrDataTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["aria-rowindex"];
+var _hoisted_3 = ["data-column-key", "aria-sort"];
+var _hoisted_4 = [
+	"tabindex",
+	"aria-label",
+	"disabled",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+];
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = { class: "sr-only" };
+var _hoisted_7 = {
+	class: "inline-flex",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "text-[var(--gr-muted-fg)]"
+};
+var _hoisted_9 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"onPointerdown",
+	"onKeydown",
+	"onDblclick"
+];
+var _hoisted_10 = {
+	key: 0,
+	"data-gr-datatable-loading": ""
+};
+var _hoisted_11 = ["colspan"];
+var _hoisted_12 = { class: "inline-flex items-center gap-2" };
+var _hoisted_13 = {
+	key: 1,
+	"data-gr-datatable-empty": ""
+};
+var _hoisted_14 = ["colspan"];
+var _hoisted_15 = {
+	key: 0,
+	"aria-hidden": "true",
+	"data-gr-datatable-spacer": "before",
+	style: { pointerEvents: "none" }
+};
+var _hoisted_16 = ["colspan"];
+var _hoisted_17 = [
+	"data-row-key",
+	"data-selected",
+	"aria-rowindex",
+	"onClick"
+];
+var _hoisted_18 = {
+	key: 1,
+	"aria-hidden": "true",
+	"data-gr-datatable-spacer": "after",
+	style: { pointerEvents: "none" }
+};
+var _hoisted_19 = ["colspan"];
+/**
+* `GrDataTable` — data-таблица поверх `GrTable` с сортировкой по клику
+* на заголовок и scoped-слотами ячеек (`#cell-<key>`), `#header-<key>`,
+* `#caption`, `#footer`, `#empty`, `#loading`.
+*
+* Сортировка, включая крайние случаи с пустыми и смешанными значениями, живёт
+* в `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({
+	__name: "GrDataTable",
+	props: {
+		rows: {},
+		columns: {},
+		rowKey: {
+			type: [String, Function],
+			default: "id"
+		},
+		initialSortKey: { default: void 0 },
+		initialSortDir: { default: "asc" },
+		sortKey: { default: void 0 },
+		sortDir: { default: void 0 },
+		sortCycle: { default: "asc-desc" },
+		externalSort: {
+			type: Boolean,
+			default: false
+		},
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		selected: { default: void 0 },
+		selectableRow: {
+			type: Function,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
+		emptyText: { default: void 0 },
+		rowClass: {
+			type: [String, Function],
+			default: void 0
+		},
+		rowProps: {
+			type: Function,
+			default: void 0
+		},
+		size: { default: void 0 },
+		caption: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		regionLabel: { default: void 0 },
+		stickyHeader: {
+			type: Boolean,
+			default: false
+		},
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		maxHeight: { default: void 0 },
+		reorderableColumns: {
+			type: Boolean,
+			default: false
+		},
+		columnOrder: { default: void 0 },
+		resizableColumns: {
+			type: Boolean,
+			default: false
+		},
+		columnWidths: { default: void 0 }
+	},
+	emits: [
+		"update:sortKey",
+		"update:sortDir",
+		"sortChange",
+		"update:selected",
+		"rowClick",
+		"update:columnOrder",
+		"columnReorder",
+		"update:columnWidths",
+		"columnResize"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t, locale } = useGranularityTranslations();
+		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;
+			}
+			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";
+		}
+		/**
+		* Подсказка «что сделает нажатие» — visually hidden текстом **после** подписи
+		* колонки, а не `aria-label`'ом на кнопке. `aria-label` подменял бы собой имя
+		* `<th>`, и AT при переходе по ячейкам вместо «Название» читала бы
+		* «Отсортировано по Название по возрастанию, нажмите…». Текущее состояние
+		* сортировки при этом объявляет `aria-sort` на самом `<th>`.
+		*/
+		function sortHint(col) {
+			if (currentSortKey.value !== col.key) return t("gr.dataTable.sortAsc", "Activate to sort ascending");
+			if (currentSortDir.value === "asc") return t("gr.dataTable.sortDesc", "Activate to sort descending");
+			return props.sortCycle === "asc-desc-none" ? t("gr.dataTable.sortNone", "Activate to remove sorting") : t("gr.dataTable.sortAsc", "Activate to sort ascending");
+		}
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrDataTable" });
+		const cellClass = computed(() => cellPaddings[resolvedSize.value]);
+		const placeholderClass = computed(() => placeholderPaddings[resolvedSize.value]);
+		const headerTextClass = computed(() => headerTextSizes[resolvedSize.value]);
+		const headerGapClass = computed(() => headerGaps[resolvedSize.value]);
+		const selectColumnClass = computed(() => selectColumnWidths[resolvedSize.value]);
+		const spinnerClass = computed(() => spinnerSizes[resolvedSize.value]);
+		const sortIconSize = computed(() => sortIconSizes[resolvedSize.value]);
+		const checkboxSize = computed(() => selectCheckboxSizes[resolvedSize.value]);
+		/**
+		* Номер строки и полное их число объявляем только при виртуализации: иначе
+		* диктор считает строки по разметке, а там всего окно. Заголовок — строка
+		* первая, поэтому строки набора начинаются со второй.
+		*/
+		const ariaRowCount = computed(() => props.virtual ? sortedRows.value.length + 1 : void 0);
+		function ariaRowIndex(index) {
+			return props.virtual ? index + 2 : void 0;
+		}
+		const isEmpty = computed(() => sortedRows.value.length === 0);
+		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);
+			}
+			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 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;
+			}
+			return total;
+		});
+		const columnKeys = computed(() => orderedColumns.value.map((col) => String(col.key)));
+		const tableProps = computed(() => ({
+			size: resolvedSize.value,
+			ariaLabel: props.ariaLabel,
+			ariaLabelledby: props.ariaLabelledby,
+			regionLabel: props.regionLabel,
+			stickyHeader: props.stickyHeader,
+			maxHeight: props.maxHeight,
+			rowCount: ariaRowCount.value,
+			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;
+		}
+		const columnHandleLabel = (col) => 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 не объявляет вовсе —
+		* а именно так вело себя `role="status"` внутри строки загрузки.
+		*/
+		const liveMessage = computed(() => {
+			if (props.loading) return resolvedLoadingText.value;
+			if (isEmpty.value) return resolvedEmptyText.value;
+			return "";
+		});
+		function cellValue(row, key) {
+			return row[key];
+		}
+		function rowClassName(row, index) {
+			const source = props.rowClass;
+			return typeof source === "function" ? source(row, index) : source;
+		}
+		function onRowClick(row, index, event) {
+			emit("rowClick", {
+				row,
+				index,
+				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 tableRef = ref(null);
+		const rootId = useId();
+		function rootEl() {
+			return tableRef.value?.$el ?? null;
+		}
+		/** Скролл-контейнер таблицы — он же элемент с `maxHeight`. */
+		function scrollEl() {
+			const root = rootEl();
+			return root?.matches("[data-gr-table-scroll]") ? root : root?.querySelector("[data-gr-table-scroll]") ?? null;
+		}
+		/**
+		* Виртуализация строк.
+		*
+		* Распорки здесь не псевдоэлементы, как у списочных компонентов: `<tbody>`
+		* игнорирует `padding`, а псевдоэлемент внутри группы строк не образует строку
+		* с управляемой высотой. Поэтому срезанное держат две служебные `<tr>` — той же
+		* формы, что строки загрузки и пустоты у `GrTable`.
+		*/
+		const scrollContainer = ref(null);
+		onMounted(() => {
+			scrollContainer.value = scrollEl();
+		});
+		const virtualizer = useVirtualList({
+			container: scrollContainer,
+			count: () => props.virtual ? sortedRows.value.length : 0,
+			source: () => sortedRows.value,
+			itemSize: () => rowHeightEstimates[resolvedSize.value],
+			viewportSize: () => typeof props.maxHeight === "number" ? props.maxHeight : void 0
+		});
+		/** Строки к отрисовке вместе с их абсолютной позицией в наборе. */
+		const renderedRows = computed(() => {
+			const rows = sortedRows.value;
+			if (!props.virtual) return rows.map((row, index) => ({
+				row,
+				index
+			}));
+			const { start, end } = virtualizer.range.value;
+			return rows.slice(start, end).map((row, offset) => ({
+				row,
+				index: start + offset
+			}));
+		});
+		const spacerBefore = computed(() => props.virtual ? virtualizer.offset.value : 0);
+		const spacerAfter = computed(() => props.virtual ? virtualizer.offsetEnd.value : 0);
+		/** Ширина колонки: число трактуем как пиксели. */
+		function columnWidthStyle(width) {
+			if (width === void 0) return void 0;
+			return { width: typeof width === "number" ? `${width}px` : width };
+		}
+		function scrollToRow(key, options) {
+			const target = String(key);
+			if (props.virtual) {
+				const index = sortedRows.value.findIndex((row) => String(rowKeyValue(row)) === target);
+				if (index < 0) return false;
+				virtualizer.scrollToIndex(index);
+				nextTick(() => {
+					findRowEl(target)?.scrollIntoView?.(options ?? { block: "nearest" });
+				});
+				return true;
+			}
+			const row = findRowEl(target);
+			if (!row) return false;
+			row.scrollIntoView(options ?? { block: "nearest" });
+			return true;
+		}
+		function findRowEl(rowKey) {
+			const rows = rootEl()?.querySelectorAll("[data-gr-datatable-row]") ?? [];
+			return Array.prototype.find.call(rows, (el) => el.dataset.rowKey === rowKey);
+		}
+		const scrollTo = (options) => {
+			scrollEl()?.scrollTo(options);
+		};
+		function clearSort() {
+			applySort("", "asc");
+		}
+		__expose({
+			/** Прокрутить к строке по её ключу. `false` — строки нет в DOM. */
+			scrollToRow,
+			/** Прокрутить скролл-контейнер таблицы. */
+			scrollTo,
+			/** Снять сортировку (эквивалент третьего состояния). */
+			clearSort,
+			/** Отметить/снять все выбираемые строки. */
+			toggleAll
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(GrTable_default, mergeProps(tableProps.value, {
+				ref_key: "tableRef",
+				ref: tableRef,
+				"data-gr-datatable": ""
+			}), createSlots({
+				caption: withCtx(() => [renderSlot(_ctx.$slots, "caption", {}, () => [createTextVNode(toDisplayString(__props.caption), 1)]), createElementVNode("span", {
+					id: `${unref(rootId)}-live`,
+					"data-gr-datatable-live": "",
+					role: "status",
+					"aria-live": "polite"
+				}, toDisplayString(liveMessage.value), 9, _hoisted_1)]),
+				header: withCtx(() => [createElementVNode("tr", {
+					"data-gr-datatable-header": "",
+					"aria-rowindex": __props.virtual ? 1 : void 0
+				}, [__props.selectable ? (openBlock(), createElementBlock("th", {
+					key: 0,
+					ref: (el) => registerEl(unref(headerCellEls), SELECT_COLUMN_KEY, el),
+					class: normalizeClass(["text-left", [
+						selectColumnClass.value,
+						cellClass.value,
+						hasPinnedLeft.value ? unref(columnPinnedClass) : ""
+					]]),
+					style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0),
+					scope: "col"
+				}, [createVNode(GrCheckbox_default, {
+					"data-gr-datatable-select-all": "",
+					"model-value": allSelected.value,
+					indeterminate: someSelected.value,
+					size: checkboxSize.value,
+					disabled: __props.loading || selectableRows.value.length === 0,
+					"aria-label": unref(t)("gr.dataTable.selectAll", "Select all rows"),
+					"onUpdate:modelValue": toggleAll
+				}, null, 8, [
+					"model-value",
+					"indeterminate",
+					"size",
+					"disabled",
+					"aria-label"
+				])], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
+					return openBlock(), createElementBlock("th", {
+						key: col.key,
+						ref_for: true,
+						ref: (el) => registerEl(unref(headerCellEls), String(col.key), el),
+						class: normalizeClass(["font-700", [
+							headerTextClass.value,
+							cellClass.value,
+							cellAlign(col),
+							__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
+							draggingColumnKey.value === String(col.key) ? unref(columnDraggingClass) : "",
+							columnDropClass(colIndex),
+							...pinnedCellClass(col, colIndex)
+						]]),
+						"data-column-key": col.key,
+						style: normalizeStyle({
+							...columnWidthStyle(widthOf(col)),
+							...pinnedStyleOf(col)
+						}),
+						"aria-sort": ariaSortFor(col),
+						scope: "col"
+					}, [createElementVNode("div", { class: normalizeClass(["inline-flex items-center", headerGapClass.value]) }, [__props.reorderableColumns ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						ref_for: true,
+						ref: (el) => registerEl(unref(columnHandleEls), String(col.key), el),
+						type: "button",
+						"data-gr-datatable-column-handle": "",
+						class: normalizeClass([unref(columnHandleClass), unref(columnSort).isActive.value ? unref(columnHandleActiveClass) : ""]),
+						tabindex: unref(columnRoving).tabindexFor(String(col.key)),
+						"aria-label": columnHandleLabel(col),
+						disabled: __props.loading,
+						onPointerdown: ($event) => unref(columnSort).startFrom(String(col.key))($event),
+						onKeydown: ($event) => 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), {
+						class: "block",
+						"aria-hidden": "true"
+					})], 42, _hoisted_4)) : createCommentVNode("", true), col.sortable ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						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)
+					}, [
+						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, {
+							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, {
+							key: 1,
+							size: sortIconSize.value
+						}, {
+							default: withCtx(() => [createVNode(unref(arrow_down_default))]),
+							_: 1
+						}, 8, ["size"])) : createCommentVNode("", true)])
+					], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]))], 2), __props.resizableColumns ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						"data-gr-datatable-column-resizer": "",
+						role: "separator",
+						tabindex: "0",
+						"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)),
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+					}, [createElementVNode("span", {
+						class: normalizeClass([
+							unref(columnResizerLineClass),
+							unref(columnResizerHoverClass),
+							resizingKey.value === String(col.key) ? unref(columnResizerLineActiveClass) : ""
+						]),
+						"aria-hidden": "true"
+					}, null, 2)], 42, _hoisted_9)) : createCommentVNode("", true)], 14, _hoisted_3);
+				}), 128))], 8, _hoisted_2)]),
+				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("tr", _hoisted_10, [createElementVNode("td", {
+					colspan: totalColumns.value,
+					class: normalizeClass(["text-center text-[var(--gr-muted-fg)]", placeholderClass.value])
+				}, [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("span", _hoisted_12, [createVNode(unref(loader_circle_default), {
+					class: normalizeClass(["block animate-spin", spinnerClass.value]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"]), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])], 10, _hoisted_11)])) : isEmpty.value ? (openBlock(), createElementBlock("tr", _hoisted_13, [createElementVNode("td", {
+					colspan: totalColumns.value,
+					class: normalizeClass(["text-center text-[var(--gr-muted-fg)]", placeholderClass.value])
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 10, _hoisted_14)])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+					__props.virtual && spacerBefore.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_15, [createElementVNode("td", {
+						colspan: totalColumns.value,
+						style: normalizeStyle({
+							height: `${spacerBefore.value}px`,
+							padding: "0",
+							border: "0"
+						})
+					}, null, 12, _hoisted_16)])) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, ({ row, index }) => {
+						return openBlock(), createElementBlock("tr", mergeProps({
+							key: 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)]],
+							"data-gr-datatable-row": "",
+							"data-row-key": rowKeyValue(row),
+							"data-selected": __props.selectable && 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) : ""
+							]]),
+							style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0)
+						}, [isRowSelectable(row) ? (openBlock(), createBlock(GrCheckbox_default, {
+							key: 0,
+							"data-gr-datatable-select-row": "",
+							"model-value": 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)
+						}, null, 8, [
+							"model-value",
+							"size",
+							"aria-label",
+							"onUpdate:modelValue"
+						])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
+							return openBlock(), createElementBlock("td", {
+								key: col.key,
+								class: normalizeClass([
+									cellClass.value,
+									cellAlign(col),
+									...pinnedCellClass(col, colIndex),
+									col.pinned && isRowSelected(row) ? unref(rowSelectedClass) : ""
+								]),
+								style: normalizeStyle({
+									...columnWidthStyle(widthOf(col)),
+									...pinnedStyleOf(col)
+								})
+							}, [renderSlot(_ctx.$slots, `cell-${col.key}`, {
+								row,
+								index
+							}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 6);
+						}), 128))], 16, _hoisted_17);
+					}), 128)),
+					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_18, [createElementVNode("td", {
+						colspan: totalColumns.value,
+						style: normalizeStyle({
+							height: `${spacerAfter.value}px`,
+							padding: "0",
+							border: "0"
+						})
+					}, null, 12, _hoisted_19)])) : createCommentVNode("", true)
+				], 64))]),
+				_: 2
+			}, [_ctx.$slots.footer ? {
+				name: "footer",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+				key: "0"
+			} : void 0]), 1040);
+		};
+	}
+});
+//#endregion
+export { GrDataTable_default as t };