npm - @feugene/granularity - Versions diffs - 0.16.0 → 0.19.0 - Mend

@feugene/granularity 0.16.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (425) hide show

package/dist/chunks/{ru-COWxgh2A.js → ru-9z8ix45c.js} RENAMED Viewed

@@ -26,7 +26,8 @@ var avatar = {
 var tree = {
 	"drag": "Перетащить",
 	"expand": "Развернуть",
-	"collapse": "Свернуть"
+	"collapse": "Свернуть",
+	"moved": "{label} перемещён"
 };
 var select = {
 	"customValuePlaceholder": "Добавить значение…",
@@ -44,7 +45,11 @@ var dataTable = {
 	"selectRow": "Выбрать строку",
 	"sortAsc": "Нажмите для сортировки по возрастанию",
 	"sortDesc": "Нажмите для сортировки по убыванию",
-	"sortNone": "Нажмите, чтобы снять сортировку"
+	"sortNone": "Нажмите, чтобы снять сортировку",
+	"moveColumn": "Переставить колонку {label}",
+	"columnMoved": "Колонка {label} перемещена на позицию {position} из {count}",
+	"resizeColumn": "Ширина колонки {label}",
+	"columnResized": "Ширина колонки {label} — {width} пикселей"
 };
 var breadcrumbs = {
 	"label": "Навигационная цепочка",
@@ -251,7 +256,17 @@ var kbd = {
 	"shift": "Shift",
 	"control": "Control",
 	"enter": "Enter",
-	"escape": "Escape"
+	"escape": "Escape",
+	"tab": "Tab",
+	"backspace": "Backspace",
+	"delete": "Delete",
+	"pageUp": "Page Up",
+	"pageDown": "Page Down",
+	"arrowUp": "стрелка вверх",
+	"arrowDown": "стрелка вниз",
+	"arrowLeft": "стрелка влево",
+	"arrowRight": "стрелка вправо",
+	"then": "затем"
 };
 var link = { "opensInNewTab": "откроется в новой вкладке" };
 var colorPicker = {
@@ -278,6 +293,15 @@ var bottomNav = {
 	"badge": "{count} новых"
 };
 var emptyState = { "title": "Пока пусто" };
+var sortable = {
+	"label": "Сортируемый список",
+	"handle": "Переставить",
+	"empty": "Пока нечего сортировать",
+	"grabbed": "Взято. Позиция {position} из {count}",
+	"moved": "Позиция {position} из {count}",
+	"dropped": "Отпущено на позиции {position} из {count}",
+	"cancelled": "Перенос отменён"
+};
 var ru_default = {
 	common,
 	loading,
@@ -325,7 +349,8 @@ var ru_default = {
 	timeline,
 	tabs,
 	bottomNav,
-	emptyState
+	emptyState,
+	sortable
 };
 //#endregion
-export { autocomplete, avatar, badgeWrap, bottomNav, breadcrumbs, button, collapse, colorPicker, colors, commandPalette, common, dataTable, ru_default as default, dialog, drawer, emptyState, fileUpload, fileValidation, form, formErrorBanner, formFile, imageViewer, input, inputTag, kbd, link, list, loading, modal, navbar, numberInput, pagination, rating, responseError, select, sidebar, slider, splitter, statistic, table, tabs, textarea, timeline, toaster, tree, treeSelect, uploadErrorBanner };
+export { autocomplete, avatar, badgeWrap, bottomNav, breadcrumbs, button, collapse, colorPicker, colors, commandPalette, common, dataTable, ru_default as default, dialog, drawer, emptyState, fileUpload, fileValidation, form, formErrorBanner, formFile, imageViewer, input, inputTag, kbd, link, list, loading, modal, navbar, numberInput, pagination, rating, responseError, select, sidebar, slider, sortable, splitter, statistic, table, tabs, textarea, timeline, toaster, tree, treeSelect, uploadErrorBanner };

package/dist/chunks/ru-9z8ix45c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ru-9z8ix45c.js","names":[],"sources":["../../src/i18n/locales/ru.json"],"sourcesContent":["{\n \"common\": {\n \"confirm\": \"Подтвердить\",\n \"cancel\": \"Отмена\",\n \"add\": \"Добавить\",\n \"clear\": \"Очистить\",\n \"close\": \"Закрыть\"\n },\n \"loading\": {\n \"defaultText\": \"Загрузка...\"\n },\n \"treeSelect\": {\n \"filterPlaceholder\": \"Поиск…\",\n \"empty\": \"Нет данных\",\n \"loading\": \"Загрузка…\"\n },\n \"badgeWrap\": {\n \"count\": \"{count} новых\"\n },\n \"avatar\": {\n \"group\": \"Участники\",\n \"groupOverflow\": \"и ещё {count}\",\n \"status\": {\n \"online\": \"в сети\",\n \"offline\": \"не в сети\",\n \"busy\": \"занят\",\n \"away\": \"отошёл\"\n }\n },\n \"tree\": {\n \"drag\": \"Перетащить\",\n \"expand\": \"Развернуть\",\n \"collapse\": \"Свернуть\",\n \"moved\": \"{label} перемещён\"\n },\n \"select\": {\n \"customValuePlaceholder\": \"Добавить значение…\",\n \"addOption\": \"Добавить «{value}»\",\n \"clearOption\": \"Не выбрано\",\n \"searchPlaceholder\": \"Поиск…\",\n \"loading\": \"Загрузка…\",\n \"noResults\": \"Ничего не найдено\",\n \"removeTag\": \"Удалить {label}\"\n },\n \"dataTable\": {\n \"loading\": \"Загрузка…\",\n \"empty\": \"Нет данных\",\n \"selectAll\": \"Выбрать все строки\",\n \"selectRow\": \"Выбрать строку\",\n \"sortAsc\": \"Нажмите для сортировки по возрастанию\",\n \"sortDesc\": \"Нажмите для сортировки по убыванию\",\n \"sortNone\": \"Нажмите, чтобы снять сортировку\",\n \"moveColumn\": \"Переставить колонку {label}\",\n \"columnMoved\": \"Колонка {label} перемещена на позицию {position} из {count}\",\n \"resizeColumn\": \"Ширина колонки {label}\",\n \"columnResized\": \"Ширина колонки {label} — {width} пикселей\"\n },\n \"breadcrumbs\": {\n \"label\": \"Навигационная цепочка\",\n \"expand\": \"Показать скрытые уровни\"\n },\n \"autocomplete\": {\n \"loading\": \"Загрузка…\",\n \"noResults\": \"Ничего не найдено\",\n \"addOption\": \"Добавить «{value}»\",\n \"removeValue\": \"Убрать {label}\",\n \"typeMore\": {\n \"one\": \"Введите минимум {n} символ\",\n \"few\": \"Введите минимум {n} символа\",\n \"many\": \"Введите минимум {n} символов\",\n \"other\": \"Введите минимум {n} символа\"\n }\n },\n \"form\": {\n \"required\": \"Обязательное поле\",\n \"min\": \"Минимум {min}\",\n \"max\": \"Максимум {max}\",\n \"len\": \"Длина должна быть {len}\",\n \"pattern\": \"Неверный формат\",\n \"email\": \"Введите корректный e-mail\",\n \"url\": \"Введите корректный URL\",\n \"file\": \"Некорректный файл\",\n \"invalid\": \"Некорректное значение\",\n \"readonly\": \"Только для чтения\",\n \"validating\": \"Проверяем…\"\n },\n \"dialog\": {\n \"confirm\": {\n \"title\": \"Подтверждение\"\n },\n \"prompt\": {\n \"title\": \"Введите значение\",\n \"label\": \"Значение\",\n \"required\": \"Введите значение.\"\n },\n \"ok\": \"ОК\"\n },\n \"switch\": {\n \"loading\": \"Сохраняем…\"\n },\n \"slider\": {\n \"min\": \"минимум\",\n \"max\": \"максимум\"\n },\n \"sidebar\": {\n \"expand\": \"Развернуть панель\",\n \"collapse\": \"Свернуть панель\"\n },\n \"splitter\": {\n \"label\": \"Изменить размер панелей\"\n },\n \"statistic\": {\n \"trendUp\": \"Рост\",\n \"trendDown\": \"Падение\",\n \"trendFlat\": \"Без изменений\"\n },\n \"pagination\": {\n \"label\": \"Пагинация\",\n \"pageSize\": \"Размер страницы\",\n \"prev\": \"Назад\",\n \"next\": \"Вперёд\",\n \"page\": \"Страница {n}\",\n \"first\": \"Первая страница\",\n \"last\": \"Последняя страница\",\n \"jumpTo\": \"Перейти к\",\n \"total\": \"{from}–{to} из {total}\",\n \"status\": \"Страница {page} из {count}\"\n },\n \"navbar\": {\n \"openMenu\": \"Открыть меню\"\n },\n \"responseError\": {\n \"networkTitle\": \"Нет связи с сервером\",\n \"networkMessage\": \"Проверьте подключение к интернету и попробуйте ещё раз.\",\n \"abortedTitle\": \"Запрос отменён\",\n \"abortedMessage\": \"Запрос был отменён.\",\n \"validationTitle\": \"Проверьте данные\",\n \"validationMessage\": \"Сервер вернул ошибку валидации. Исправьте поля и попробуйте снова.\",\n \"clientTitle\": \"Ошибка запроса\",\n \"clientMessage\": \"Сервер отклонил запрос.\",\n \"serverTitle\": \"Ошибка сервера\",\n \"serverMessage\": \"Произошла ошибка на сервере. Попробуйте ещё раз.\",\n \"unknownTitle\": \"Что-то пошло не так\",\n \"unknownMessage\": \"Не удалось выполнить операцию. Попробуйте ещё раз.\",\n \"statusLabel\": \"HTTP {status}\",\n \"retryLabel\": \"Повторить\",\n \"dismissLabel\": \"Скрыть\"\n },\n \"colors\": {\n \"neutral\": \"Нейтральный\",\n \"success\": \"Успех\",\n \"warning\": \"Предупреждение\",\n \"danger\": \"Опасность\",\n \"info\": \"Инфо\",\n \"primary\": \"Primary\",\n \"slate\": \"Сланцевый\",\n \"azure\": \"Лазурный\"\n },\n \"drawer\": {\n \"title\": \"Панель\"\n },\n \"modal\": {\n \"title\": \"Диалог\"\n },\n \"numberInput\": {\n \"increase\": \"Увеличить\",\n \"decrease\": \"Уменьшить\"\n },\n \"toaster\": {\n \"dismiss\": \"Закрыть\",\n \"region\": \"Уведомления\"\n },\n \"inputTag\": {\n \"removeTag\": \"Удалить тег\",\n \"removeTagNamed\": \"Удалить тег {tag}\",\n \"clearAll\": \"Удалить все теги\",\n \"added\": \"Добавлен тег: {tag}\",\n \"addedMany\": \"Добавлено тегов: {count}\",\n \"removed\": \"Удалён тег: {tag}\",\n \"cleared\": \"Все теги удалены\",\n \"limitReached\": \"Достигнут предел тегов\"\n },\n \"fileUpload\": {\n \"placeholder\": \"Перетащите файлы сюда или нажмите для выбора\",\n \"progress\": \"Прогресс загрузки\",\n \"uploading\": \"Загрузка…\",\n \"success\": \"Загрузка завершена\",\n \"error\": \"Не удалось загрузить\",\n \"remove\": \"Убрать {fileName}\",\n \"retry\": \"Повторить загрузку\",\n \"retryFile\": \"Повторить {fileName}\",\n \"abortFile\": \"Отменить загрузку {fileName}\",\n \"statusPending\": \"В очереди\",\n \"statusUploading\": \"Загружается\",\n \"statusSuccess\": \"Загружен\",\n \"statusError\": \"Ошибка\"\n },\n \"formFile\": {\n \"upload\": \"Загрузить файл\",\n \"change\": \"Заменить файл\",\n \"remove\": \"Удалить\",\n \"clearAll\": \"Очистить всё\",\n \"placeholder\": \"Файлы не выбраны\",\n \"validateError\": \"Не удалось проверить перетащенные файлы\",\n \"removeFile\": \"Убрать {fileName}\"\n },\n \"imageViewer\": {\n \"close\": \"Закрыть просмотрщик\",\n \"prev\": \"Предыдущее изображение\",\n \"next\": \"Следующее изображение\",\n \"zoomIn\": \"Увеличить\",\n \"zoomOut\": \"Уменьшить\",\n \"resetZoom\": \"Сбросить масштаб\",\n \"zoomToNatural\": \"Натуральный размер (1:1)\",\n \"rotateLeft\": \"Повернуть влево\",\n \"rotateRight\": \"Повернуть вправо\",\n \"download\": \"Скачать изображение\",\n \"empty\": \"Нет изображения\",\n \"label\": \"Просмотр изображений\",\n \"position\": \"Изображение {index} из {total}\"\n },\n \"formErrorBanner\": {\n \"validationTitle\": \"Проверьте поля формы\",\n \"validationMessage\": \"Сервер отклонил данные. Исправьте выделенные поля и попробуйте снова.\",\n \"clientTitle\": \"Не удалось сохранить\",\n \"serverTitle\": \"Ошибка сохранения\",\n \"serverMessage\": \"Не удалось сохранить данные. Попробуйте позже.\"\n },\n \"uploadErrorBanner\": {\n \"networkTitle\": \"Не удалось загрузить файлы\",\n \"networkMessage\": \"Проверьте подключение и попробуйте снова.\",\n \"validationTitle\": \"Файлы не прошли проверку\",\n \"validationMessage\": \"Некоторые файлы не соответствуют требованиям.\",\n \"serverTitle\": \"Ошибка загрузки на сервере\",\n \"serverMessage\": \"Сервер не смог обработать загрузку. Попробуйте снова.\"\n },\n \"input\": {\n \"clear\": \"Очистить\",\n \"showPassword\": \"Показать пароль\",\n \"hidePassword\": \"Скрыть пароль\",\n \"limitReached\": \"Достигнут предел символов\"\n },\n \"textarea\": {\n \"lines\": {\n \"one\": \"{n} строка\",\n \"few\": \"{n} строки\",\n \"many\": \"{n} строк\",\n \"other\": \"{n} строки\"\n }\n },\n \"rating\": {\n \"label\": \"Оценка\",\n \"valueText\": \"{value} из {max}\",\n \"valueTextWithLabel\": \"{value} из {max}, {label}\"\n },\n \"commandPalette\": {\n \"label\": \"Палитра команд\",\n \"placeholder\": \"Введите команду или запрос…\",\n \"empty\": \"Ничего не найдено\",\n \"recent\": \"Недавние\",\n \"loading\": \"Загрузка…\"\n },\n \"fileValidation\": {\n \"accept\": \"Файл «{fileName}» не подходит под accept=\\\"{accept}\\\"\",\n \"extension\": \"У файла «{fileName}» недопустимое расширение «.{extension}»\",\n \"mimeType\": \"У файла «{fileName}» недопустимый тип «{mimeType}»\",\n \"mimeTypeFallback\": \"У файла «{fileName}» неопределённый тип «{mimeType}»\",\n \"maxFileSize\": \"Файл «{fileName}» слишком большой ({size} байт), максимум {maxBytes}\",\n \"maxCount\": \"Выбрано слишком много файлов ({count}), максимум — {maxCount}\",\n \"maxTotalSize\": \"Суммарный размер файлов слишком большой ({total} байт), максимум {maxBytes}\"\n },\n \"kbd\": {\n \"command\": \"Command\",\n \"option\": \"Option\",\n \"shift\": \"Shift\",\n \"control\": \"Control\",\n \"enter\": \"Enter\",\n \"escape\": \"Escape\",\n \"tab\": \"Tab\",\n \"backspace\": \"Backspace\",\n \"delete\": \"Delete\",\n \"pageUp\": \"Page Up\",\n \"pageDown\": \"Page Down\",\n \"arrowUp\": \"стрелка вверх\",\n \"arrowDown\": \"стрелка вниз\",\n \"arrowLeft\": \"стрелка влево\",\n \"arrowRight\": \"стрелка вправо\",\n \"then\": \"затем\"\n },\n \"link\": {\n \"opensInNewTab\": \"откроется в новой вкладке\"\n },\n \"colorPicker\": {\n \"panelLabel\": \"Выбор цвета\",\n \"hue\": \"Оттенок\",\n \"saturation\": \"Насыщенность\",\n \"lightness\": \"Светлота\",\n \"opacity\": \"Непрозрачность\",\n \"hexLabel\": \"Значение hex\",\n \"presetsLabel\": \"Палитра\",\n \"swatchLabel\": \"Цвет {color}\"\n },\n \"collapse\": {\n \"empty\": \"Пока пусто\"\n },\n \"list\": {\n \"empty\": \"Пока пусто\"\n },\n \"button\": {\n \"loading\": \"Загрузка…\"\n },\n \"table\": {\n \"empty\": \"Пока пусто\"\n },\n \"timeline\": {\n \"empty\": \"Пока пусто\"\n },\n \"tabs\": {\n \"empty\": \"Пока пусто\",\n \"close\": \"Закрыть вкладку\"\n },\n \"bottomNav\": {\n \"label\": \"Нижняя навигация\",\n \"badge\": \"{count} новых\"\n },\n \"emptyState\": {\n \"title\": \"Пока пусто\"\n },\n \"sortable\": {\n \"label\": \"Сортируемый список\",\n \"handle\": \"Переставить\",\n \"empty\": \"Пока нечего сортировать\",\n \"grabbed\": \"Взято. Позиция {position} из {count}\",\n \"moved\": \"Позиция {position} из {count}\",\n \"dropped\": \"Отпущено на позиции {position} из {count}\",\n \"cancelled\": \"Перенос отменён\"\n }\n}\n"],"mappings":""}

package/dist/chunks/useDragSort-0l47h4yb.js ADDED Viewed

@@ -0,0 +1,265 @@
+import { useDragGesture } from "../composables/useDragGesture.js";
+import { computed, onScopeDispose, shallowRef } from "vue";
+//#region src/composables/internal/dragSortGeometry.ts
+/**
+* Какой элемент под указателем и в каком месте его.
+*
+* Промах не отбрасывается: между строками есть зазоры, а курсор уезжает за
+* край списка — и в обоих случаях перенос обязан продолжать показывать
+* ближайшую цель, иначе индикатор мигает на каждом пикселе между строками.
+*
+* Вырожденный отрезок (нулевая высота строки) даёт `fraction: 0` — цель
+* остаётся детерминированной, а не зависящей от направления подхода.
+*/
+function hitTest(spans, position) {
+	if (spans.length === 0) return null;
+	let nearestIndex = 0;
+	let nearestDistance = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < spans.length; index += 1) {
+		const span = spans[index];
+		if (position >= span.start && position <= span.end) return {
+			index,
+			fraction: fractionIn(span, position)
+		};
+		const distance = position < span.start ? span.start - position : position - span.end;
+		if (distance < nearestDistance) {
+			nearestDistance = distance;
+			nearestIndex = index;
+		}
+	}
+	const nearest = spans[nearestIndex];
+	return {
+		index: nearestIndex,
+		fraction: fractionIn(nearest, position)
+	};
+}
+function fractionIn(span, position) {
+	const size = span.end - span.start;
+	if (size <= 0) return 0;
+	return clamp((position - span.start) / size, 0, 1);
+}
+/**
+* Куда встанет элемент, если отпустить сейчас.
+*
+* Верхняя половина строки — «до неё», нижняя — «после». Индекс возвращается
+* **в терминах итогового массива**, то есть уже с поправкой на то, что
+* перетаскиваемый элемент из него временно вынут: без поправки перенос вниз
+* на одну позицию не двигал бы ничего.
+*/
+function insertionIndex(hit, from, count) {
+	if (count <= 0) return 0;
+	const base = hit.fraction < .5 ? hit.index : hit.index + 1;
+	return clamp(from < base ? base - 1 : base, 0, count - 1);
+}
+/**
+* На сколько прокрутить контейнер за кадр: отрицательное — к началу.
+*
+* Скорость растёт линейно по мере приближения к краю, а не включается
+* ступенькой: ступенька на длинном списке ощущается как рывок и промахивается
+* мимо цели.
+*/
+function autoScrollDelta(viewport, position, options = {}) {
+	const zone = options.zone ?? 32;
+	const speed = options.speed ?? 12;
+	if (zone <= 0 || speed <= 0) return 0;
+	if (viewport.end - viewport.start <= zone * 2) return 0;
+	if (position < viewport.start || position > viewport.end) return 0;
+	const fromStart = position - viewport.start;
+	if (fromStart < zone) return -Math.ceil((zone - fromStart) / zone * speed);
+	const fromEnd = viewport.end - position;
+	if (fromEnd < zone) return Math.ceil((zone - fromEnd) / zone * speed);
+	return 0;
+}
+/**
+* Перестановка без мутации входа: массив потребителя остаётся нетронутым,
+* наружу уходит новый. `v-model` с мутацией исходного набора ломает и
+* сравнение «было — стало», и историю в сторе потребителя.
+*/
+function moveItem(items, from, to) {
+	const next = items.slice();
+	if (from === to || from < 0 || from >= items.length) return next;
+	const [moved] = next.splice(from, 1);
+	next.splice(clamp(to, 0, next.length), 0, moved);
+	return next;
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+//#endregion
+//#region src/composables/useDragSort.ts
+function useDragSort(options) {
+	const source = shallowRef(null);
+	const target = shallowRef(null);
+	const mode = shallowRef(null);
+	const isActive = computed(() => mode.value !== null);
+	let pendingKey = null;
+	let originX = 0;
+	let originY = 0;
+	let lastPoint = null;
+	let scrollFrame = null;
+	const gesture = useDragGesture({
+		disabled: () => options.disabled?.() ?? false,
+		onStart: (event) => {
+			if (pendingKey === null) return false;
+			if (options.canDrag?.(pendingKey) === false) return false;
+			originX = event.clientX;
+			originY = event.clientY;
+			return true;
+		},
+		onMove: (event) => {
+			if (mode.value === null) {
+				if (Math.hypot(event.clientX - originX, event.clientY - originY) < (options.threshold?.() ?? 4)) return;
+				source.value = pendingKey;
+				mode.value = "pointer";
+				window.addEventListener("keydown", onWindowKeydown, true);
+				startScrolling();
+				notify();
+			}
+			event.preventDefault();
+			lastPoint = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			updateTarget(lastPoint);
+		},
+		onEnd: () => {
+			if (mode.value === "pointer") commit();
+			else reset();
+		},
+		onCancel: reset
+	});
+	function isVertical() {
+		return (options.orientation?.() ?? "vertical") === "vertical";
+	}
+	function spanOf(rect) {
+		return isVertical() ? {
+			start: rect.top,
+			end: rect.bottom
+		} : {
+			start: rect.left,
+			end: rect.right
+		};
+	}
+	function notify() {
+		options.onUpdate?.(source.value, target.value, mode.value);
+	}
+	function updateTarget(point) {
+		const current = source.value;
+		if (current === null) return;
+		const rendered = [];
+		options.items().forEach((key, index) => {
+			const el = options.elementFor(key);
+			if (el) rendered.push({
+				key,
+				index,
+				span: spanOf(el.getBoundingClientRect())
+			});
+		});
+		const hit = hitTest(rendered.map((entry) => entry.span), isVertical() ? point.y : point.x);
+		const entry = hit === null ? null : rendered[hit.index];
+		const next = entry === null || hit === null ? null : options.resolveTarget({
+			key: entry.key,
+			index: entry.index,
+			fraction: hit.fraction
+		}, current, target.value);
+		if (next === target.value) return;
+		target.value = next;
+		notify();
+	}
+	/**
+	* Автопрокрутка живёт в своём кадре, а не в обработчике движения: у края
+	* указатель обычно стоит неподвижно, событий больше нет — а список должен
+	* продолжать ехать.
+	*/
+	function tickScroll() {
+		scrollFrame = null;
+		const scroller = options.scroller?.();
+		const point = lastPoint;
+		if (!scroller || !point || mode.value !== "pointer") return;
+		const delta = autoScrollDelta(spanOf(scroller.getBoundingClientRect()), isVertical() ? point.y : point.x);
+		if (delta !== 0) {
+			if (isVertical()) scroller.scrollTop += delta;
+			else scroller.scrollLeft += delta;
+			updateTarget(point);
+		}
+		scrollFrame = requestAnimationFrame(tickScroll);
+	}
+	function startScrolling() {
+		if (scrollFrame !== null || !options.scroller?.()) return;
+		scrollFrame = requestAnimationFrame(tickScroll);
+	}
+	function stopScrolling() {
+		if (scrollFrame === null) return;
+		cancelAnimationFrame(scrollFrame);
+		scrollFrame = null;
+	}
+	function onWindowKeydown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		gesture.stop(false);
+	}
+	function reset() {
+		stopScrolling();
+		window.removeEventListener("keydown", onWindowKeydown, true);
+		pendingKey = null;
+		lastPoint = null;
+		source.value = null;
+		target.value = null;
+		mode.value = null;
+		notify();
+	}
+	function commit() {
+		const from = source.value;
+		const to = target.value;
+		if (from !== null && to !== null) options.onDrop(from, to);
+		reset();
+	}
+	function startFrom(key) {
+		return (event) => {
+			if (mode.value === "keyboard") return;
+			pendingKey = key;
+			gesture.start(event);
+		};
+	}
+	function grab(key) {
+		if (options.disabled?.() || options.canDrag?.(key) === false) return;
+		if (mode.value !== null) return;
+		source.value = key;
+		target.value = null;
+		mode.value = "keyboard";
+		notify();
+	}
+	function setTarget(next) {
+		if (mode.value !== "keyboard") return;
+		target.value = next;
+		notify();
+	}
+	function drop() {
+		if (mode.value !== "keyboard") return;
+		commit();
+	}
+	function cancel() {
+		if (mode.value === "pointer") {
+			gesture.stop(false);
+			return;
+		}
+		if (mode.value === "keyboard") reset();
+	}
+	onScopeDispose(() => {
+		stopScrolling();
+		window.removeEventListener("keydown", onWindowKeydown, true);
+	});
+	return {
+		source,
+		target,
+		mode,
+		isActive,
+		startFrom,
+		grab,
+		setTarget,
+		drop,
+		cancel
+	};
+}
+//#endregion
+export { insertionIndex as n, moveItem as r, useDragSort as t };

package/dist/chunks/useDragSort-0l47h4yb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDragSort-0l47h4yb.js","names":[],"sources":["../../src/composables/internal/dragSortGeometry.ts","../../src/composables/useDragSort.ts"],"sourcesContent":["/**\n * Геометрия перестановки: чистая арифметика без DOM и без реактивности.\n *\n * Вынесена отдельно, потому что ошибка здесь проявляется не исключением, а\n * «элемент встал не туда» — поймать это можно только тестом на числах.\n * Композабл `useDragSort` сводит `DOMRect` к отрезкам вдоль оси и зовёт эти\n * функции; какой смысл у попадания, решает уже компонент.\n */\n\n/** Отрезок, занимаемый элементом вдоль оси переноса. */\nexport interface DragSortSpan {\n start: number\n end: number\n}\n\nexport interface DragSortHitResult {\n /** Индекс элемента в переданном наборе. */\n index: number\n /** Доля вдоль элемента: 0 — его начало, 1 — конец. */\n fraction: number\n}\n\n/**\n * Какой элемент под указателем и в каком месте его.\n *\n * Промах не отбрасывается: между строками есть зазоры, а курсор уезжает за\n * край списка — и в обоих случаях перенос обязан продолжать показывать\n * ближайшую цель, иначе индикатор мигает на каждом пикселе между строками.\n *\n * Вырожденный отрезок (нулевая высота строки) даёт `fraction: 0` — цель\n * остаётся детерминированной, а не зависящей от направления подхода.\n */\nexport function hitTest(spans: readonly DragSortSpan[], position: number): DragSortHitResult | null {\n if (spans.length === 0) return null\n\n let nearestIndex = 0\n let nearestDistance = Number.POSITIVE_INFINITY\n\n for (let index = 0; index < spans.length; index += 1) {\n const span = spans[index]\n\n if (position >= span.start && position <= span.end)\n return { index, fraction: fractionIn(span, position) }\n\n const distance = position < span.start ? span.start - position : position - span.end\n if (distance < nearestDistance) {\n nearestDistance = distance\n nearestIndex = index\n }\n }\n\n const nearest = spans[nearestIndex]\n\n return { index: nearestIndex, fraction: fractionIn(nearest, position) }\n}\n\nfunction fractionIn(span: DragSortSpan, position: number): number {\n const size = span.end - span.start\n if (size <= 0) return 0\n\n return clamp((position - span.start) / size, 0, 1)\n}\n\n/**\n * Куда встанет элемент, если отпустить сейчас.\n *\n * Верхняя половина строки — «до неё», нижняя — «после». Индекс возвращается\n * **в терминах итогового массива**, то есть уже с поправкой на то, что\n * перетаскиваемый элемент из него временно вынут: без поправки перенос вниз\n * на одну позицию не двигал бы ничего.\n */\nexport function insertionIndex(hit: DragSortHitResult, from: number, count: number): number {\n if (count <= 0) return 0\n\n const base = hit.fraction < 0.5 ? hit.index : hit.index + 1\n const adjusted = from < base ? base - 1 : base\n\n return clamp(adjusted, 0, count - 1)\n}\n\nexport interface AutoScrollOptions {\n /** Ширина чувствительной полосы у каждого края, px. По умолчанию 32. */\n zone?: number\n /** Скорость на самом краю, px за кадр. По умолчанию 12. */\n speed?: number\n}\n\n/**\n * На сколько прокрутить контейнер за кадр: отрицательное — к началу.\n *\n * Скорость растёт линейно по мере приближения к краю, а не включается\n * ступенькой: ступенька на длинном списке ощущается как рывок и промахивается\n * мимо цели.\n */\nexport function autoScrollDelta(viewport: DragSortSpan, position: number, options: AutoScrollOptions = {}): number {\n const zone = options.zone ?? 32\n const speed = options.speed ?? 12\n\n if (zone <= 0 || speed <= 0) return 0\n // Вьюпорт короче двух зон: полосы наложились бы и тянули список в обе стороны.\n if (viewport.end - viewport.start <= zone * 2) return 0\n\n if (position < viewport.start || position > viewport.end) return 0\n\n const fromStart = position - viewport.start\n if (fromStart < zone)\n return -Math.ceil(((zone - fromStart) / zone) * speed)\n\n const fromEnd = viewport.end - position\n if (fromEnd < zone)\n return Math.ceil(((zone - fromEnd) / zone) * speed)\n\n return 0\n}\n\n/**\n * Перестановка без мутации входа: массив потребителя остаётся нетронутым,\n * наружу уходит новый. `v-model` с мутацией исходного набора ломает и\n * сравнение «было — стало», и историю в сторе потребителя.\n */\nexport function moveItem<T>(items: readonly T[], from: number, to: number): T[] {\n const next = items.slice()\n if (from === to || from < 0 || from >= items.length) return next\n\n const [moved] = next.splice(from, 1)\n next.splice(clamp(to, 0, next.length), 0, moved)\n\n return next\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n","import type { Ref } from 'vue'\nimport { computed, onScopeDispose, shallowRef } from 'vue'\n\nimport type { DragSortSpan } from './internal/dragSortGeometry'\nimport { autoScrollDelta, hitTest } from './internal/dragSortGeometry'\nimport { useDragGesture } from './useDragGesture'\n\n/**\n * Модель перестановки: перенос элемента указателем и с клавиатуры.\n *\n * Композабл владеет **механикой** — сессией жеста поверх `useDragGesture`,\n * порогом начала, попаданием в элемент, автопрокруткой у краёв и состоянием\n * переноса. **Смысл** остаётся у компонента: что считать целью (индекс вставки\n * у списка, «до / внутрь / после» у дерева), какими клавишами это делается и\n * что сказать в живой регион.\n *\n * Граница проведена так не из вкуса: у списка цель переноса — число, у дерева —\n * пара «узел и зона», а `Space` в дереве уже занят чекбоксом. Общая у них\n * механика, а не семантика; обобщать семантику значило бы завести опцию на\n * каждое расхождение.\n *\n * Данные композабл не меняет: он сообщает «источник и цель», перестановку\n * делает потребитель (`moveItem` из `internal/dragSortGeometry` — если она\n * обычная).\n *\n * ```ts\n * const sort = useDragSort<string, number>({\n * items: () => keys.value,\n * elementFor: key => rowEls.get(key),\n * scroller: () => scrollerEl.value,\n * resolveTarget: (hit, source) => insertionIndex(hit, indexOf(source), keys.value.length),\n * onDrop: (source, to) => emit('move', indexOf(source), to),\n * })\n * ```\n */\n\nexport type DragSortOrientation = 'vertical' | 'horizontal'\n\n/** Чем ведётся перенос: указателем или с клавиатуры. */\nexport type DragSortMode = 'pointer' | 'keyboard'\n\nexport interface DragSortHit<TKey> {\n key: TKey\n index: number\n /** Доля вдоль элемента: 0 — начало, 1 — конец. Зоны нарезает компонент. */\n fraction: number\n}\n\nexport interface UseDragSortOptions<TKey, TTarget> {\n items: () => readonly TKey[]\n elementFor: (key: TKey) => HTMLElement | null | undefined\n /** По умолчанию `vertical`. */\n orientation?: () => DragSortOrientation\n /** Скроллер для автопрокрутки у краёв. Не задан — автопрокрутки нет. */\n scroller?: () => HTMLElement | null | undefined\n disabled?: () => boolean\n canDrag?: (key: TKey) => boolean\n /** Сдвиг, после которого нажатие становится переносом. По умолчанию 4px. */\n threshold?: () => number\n /**\n * Попадание указателя → цель переноса. `null` — сюда положить нельзя.\n *\n * Третьим аргументом приходит прежняя цель: цели сравниваются по ссылке, и\n * объектной цели (как «узел плюс зона» у дерева) стоит вернуть **ту же**\n * ссылку, пока смысл не изменился, — иначе подсветка и объявления будут\n * дёргаться на каждом движении указателя.\n */\n resolveTarget: (hit: DragSortHit<TKey>, source: TKey, previous: TTarget | null) => TTarget | null\n /** Перенос состоялся. */\n onDrop: (source: TKey, target: TTarget) => void\n /** Состояние изменилось: подсветка строк и объявления — на этом. */\n onUpdate?: (source: TKey | null, target: TTarget | null, mode: DragSortMode | null) => void\n}\n\nexport interface UseDragSortReturn<TKey, TTarget> {\n source: Ref<TKey | null>\n target: Ref<TTarget | null>\n mode: Ref<DragSortMode | null>\n isActive: Ref<boolean>\n /** Вешается на `@pointerdown` ручки или строки. */\n startFrom: (key: TKey) => (event: PointerEvent) => void\n /** Клавиатурный перенос: взять элемент. */\n grab: (key: TKey) => void\n /** Клавиатурный перенос: назначить цель (двигать ведёт компонент). */\n setTarget: (target: TTarget | null) => void\n /** Положить: если цель есть — состоится `onDrop`. */\n drop: () => void\n /** Отменить: ничего не переносится. */\n cancel: () => void\n}\n\nexport function useDragSort<TKey, TTarget>(\n options: UseDragSortOptions<TKey, TTarget>,\n): UseDragSortReturn<TKey, TTarget> {\n const source = shallowRef<TKey | null>(null)\n const target = shallowRef<TTarget | null>(null)\n const mode = shallowRef<DragSortMode | null>(null)\n const isActive = computed(() => mode.value !== null)\n\n // Нажатая, но ещё не потянутая строка: между `pointerdown` и порогом это\n // остаётся обычным кликом, и объявлять перенос рано.\n let pendingKey: TKey | null = null\n let originX = 0\n let originY = 0\n let lastPoint: { x: number, y: number } | null = null\n let scrollFrame: number | null = null\n\n const gesture = useDragGesture({\n disabled: () => options.disabled?.() ?? false,\n onStart: (event) => {\n if (pendingKey === null) return false\n if (options.canDrag?.(pendingKey) === false) return false\n\n originX = event.clientX\n originY = event.clientY\n\n return true\n },\n onMove: (event) => {\n if (mode.value === null) {\n const moved = Math.hypot(event.clientX - originX, event.clientY - originY)\n if (moved < (options.threshold?.() ?? 4)) return\n\n source.value = pendingKey\n mode.value = 'pointer'\n // Esc отменяет перенос, но `pointercancel` браузер при этом не шлёт —\n // клавишу приходится слушать самим, в capture, до слоёв приложения.\n window.addEventListener('keydown', onWindowKeydown, true)\n startScrolling()\n notify()\n }\n\n // Против выделения текста под курсором во время переноса.\n event.preventDefault()\n\n lastPoint = { x: event.clientX, y: event.clientY }\n updateTarget(lastPoint)\n },\n onEnd: () => {\n if (mode.value === 'pointer') commit()\n else reset()\n },\n onCancel: reset,\n })\n\n function isVertical(): boolean {\n return (options.orientation?.() ?? 'vertical') === 'vertical'\n }\n\n function spanOf(rect: DOMRect): DragSortSpan {\n return isVertical() ? { start: rect.top, end: rect.bottom } : { start: rect.left, end: rect.right }\n }\n\n function notify(): void {\n options.onUpdate?.(source.value, target.value, mode.value)\n }\n\n function updateTarget(point: { x: number, y: number }): void {\n const current = source.value\n if (current === null) return\n\n // Отрисованы не все: список может быть под окном отсечения, ветка дерева —\n // свёрнута. Попадание считается по тому, что на экране есть.\n const rendered: { key: TKey, index: number, span: DragSortSpan }[] = []\n\n options.items().forEach((key, index) => {\n const el = options.elementFor(key)\n if (el) rendered.push({ key, index, span: spanOf(el.getBoundingClientRect()) })\n })\n\n const hit = hitTest(rendered.map(entry => entry.span), isVertical() ? point.y : point.x)\n const entry = hit === null ? null : rendered[hit.index]\n const next = entry === null || hit === null\n ? null\n : options.resolveTarget({ key: entry.key, index: entry.index, fraction: hit.fraction }, current, target.value)\n\n if (next === target.value) return\n\n target.value = next\n notify()\n }\n\n /**\n * Автопрокрутка живёт в своём кадре, а не в обработчике движения: у края\n * указатель обычно стоит неподвижно, событий больше нет — а список должен\n * продолжать ехать.\n */\n function tickScroll(): void {\n scrollFrame = null\n\n const scroller = options.scroller?.()\n const point = lastPoint\n if (!scroller || !point || mode.value !== 'pointer') return\n\n const delta = autoScrollDelta(spanOf(scroller.getBoundingClientRect()), isVertical() ? point.y : point.x)\n\n if (delta !== 0) {\n if (isVertical()) scroller.scrollTop += delta\n else scroller.scrollLeft += delta\n\n updateTarget(point)\n }\n\n scrollFrame = requestAnimationFrame(tickScroll)\n }\n\n function startScrolling(): void {\n if (scrollFrame !== null || !options.scroller?.()) return\n\n scrollFrame = requestAnimationFrame(tickScroll)\n }\n\n function stopScrolling(): void {\n if (scrollFrame === null) return\n\n cancelAnimationFrame(scrollFrame)\n scrollFrame = null\n }\n\n function onWindowKeydown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return\n\n event.preventDefault()\n gesture.stop(false)\n }\n\n function reset(): void {\n stopScrolling()\n window.removeEventListener('keydown', onWindowKeydown, true)\n\n pendingKey = null\n lastPoint = null\n source.value = null\n target.value = null\n mode.value = null\n notify()\n }\n\n function commit(): void {\n const from = source.value\n const to = target.value\n\n if (from !== null && to !== null) options.onDrop(from, to)\n\n reset()\n }\n\n function startFrom(key: TKey) {\n return (event: PointerEvent): void => {\n // Клавиатурный перенос идёт своим чередом: указатель его не перебивает.\n if (mode.value === 'keyboard') return\n\n pendingKey = key\n gesture.start(event)\n }\n }\n\n function grab(key: TKey): void {\n if (options.disabled?.() || options.canDrag?.(key) === false) return\n if (mode.value !== null) return\n\n source.value = key\n target.value = null\n mode.value = 'keyboard'\n notify()\n }\n\n function setTarget(next: TTarget | null): void {\n if (mode.value !== 'keyboard') return\n\n target.value = next\n notify()\n }\n\n function drop(): void {\n if (mode.value !== 'keyboard') return\n\n commit()\n }\n\n function cancel(): void {\n if (mode.value === 'pointer') {\n gesture.stop(false)\n return\n }\n\n if (mode.value === 'keyboard') reset()\n }\n\n onScopeDispose(() => {\n stopScrolling()\n window.removeEventListener('keydown', onWindowKeydown, true)\n })\n\n return { source, target, mode, isActive, startFrom, grab, setTarget, drop, cancel }\n}\n"],"mappings":"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"}

package/dist/chunks/{useModalOverlay-DCM4d3yA.js → useModalOverlay-DrQVYwwA.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { c as useGrThemeAttrs } from "./context-BSYR7RZs.js";
-import { t as usePortalTarget } from "./usePortalTarget-RyzEgNTb.js";
+import { t as usePortalTarget } from "./usePortalTarget-Cn-Wiz5d.js";
 import { n as markInert, t as inertableOutside } from "./inert-DIHCCn_1.js";
-import { t as useOverlayLayer } from "./useOverlayLayer-BupuP_hs.js";
+import { useOverlayLayer } from "../composables/useOverlayLayer.js";
 import { useFocusTrap } from "../composables/useFocusTrap.js";
 import { computed, onBeforeUnmount, onScopeDispose, ref, watch } from "vue";
 //#region src/composables/internal/useInertOthers.ts

package/dist/chunks/{useModalOverlay-DCM4d3yA.js.map → useModalOverlay-DrQVYwwA.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useModalOverlay-DCM4d3yA.js","names":[],"sources":["../../src/composables/internal/useInertOthers.ts","../../src/composables/internal/useOverlayPresence.ts","../../src/composables/internal/useScrollLock.ts","../../src/composables/internal/useModalOverlay.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { onScopeDispose, watch } from 'vue'\n\nimport { inertableOutside, markInert } from './inert'\n\n/*\n Пока слой активен, всё вне его ветки помечено `inert`: от корня оверлея вверх\n * до `<body>`, на каждом уровне — соседи.\n \n Это вторая половина модальности: `z-index` перекрывает страницу глазами,\n * `inert` — клавиатурой и скринридером.\n /\nexport function useInertOthers(root: Ref<HTMLElement \| null>, active: () => boolean): void {\n let release: (() => void) \| undefined\n\n function apply(): void {\n release?.()\n release = markInert(inertableOutside(root.value))\n }\n\n function clear(): void {\n release?.()\n release = undefined\n }\n\n watch(\n () => Boolean(active()) && Boolean(root.value),\n (isActive) => {\n if (isActive) apply()\n else clear()\n },\n { immediate: true, flush: 'post' },\n )\n\n onScopeDispose(clear)\n}\n","import type { Ref } from 'vue'\nimport { ref, watch } from 'vue'\n\nexport interface OverlayPresence {\n /* Смонтировано ли поддерево слоя: держится до конца leave-анимации. /\n mounted: Ref<boolean>\n /* Показан ли слой: этим переключаются `<Transition>` внутри. /\n visible: Ref<boolean>\n /* Вызывается из `@after-leave` панели. /\n onPanelAfterLeave: () => void\n}\n\n/\n Присутствие оверлея в DOM отдельно от его видимости.\n \n Штатный `<Transition>` анимирует свой элемент, но не координирует соседей:\n * убери обёртку по `v-if` — и подложка с панелью исчезнут мгновенно, без\n * leave-анимации. Поэтому присутствие поддерева и видимость слоя — два разных\n * флага: первый снимается только по концу leave-анимации панели.\n \n Видимость включается в том же такте, что и монтирование: содержимое окна\n * обязано появляться в DOM сразу после открытия — на этом стоит и код\n * потребителя, и внутренние компоненты, которые ищут в панели свои элементы.\n * Enter-анимацию это не отменяет: `<Transition appear>` проигрывает её и на\n * первом рендере ребёнка.\n /\nexport function useOverlayPresence(open: Ref<boolean>): OverlayPresence {\n const mounted = ref(open.value)\n const visible = ref(open.value)\n\n watch(open, (isOpen) => {\n if (isOpen) mounted.value = true\n visible.value = isOpen\n })\n\n function onPanelAfterLeave(): void {\n // Пока панель уезжала, слой могли открыть заново — тогда размонтировать\n // нечего и незачем.\n if (!open.value) mounted.value = false\n }\n\n return { mounted, visible, onPanelAfterLeave }\n}\n","/\n useScrollLock — общий reference-counted lock скролла `<body>` для оверлеев\n * (GrModal, GrDrawer, GrImageViewer).\n \n Зачем счётчик: состояние `<body>` принадлежит не оверлею, а их совокупности.\n * Держи каждый свой `savedBodyOverflow`, и закрытие A при ещё открытой B вернуло\n * бы странице прокрутку под открытым окном — закрывают не всегда в порядке\n * открытия. Поэтому состояние сохраняется один раз (переход счётчика 0→1) и\n * восстанавливается только когда закрыт последний оверлей (1→0).\n \n Плюс компенсация ширины скроллбара: при `overflow: hidden` скроллбар исчезает и\n * контент дёргается вправо — добавляем `padding-right` на его ширину.\n \n Отдельная ветка — iOS Safari: там `overflow: hidden` фон не держит, страница\n * продолжает «резинить» под открытым окном. Лечится тем же, чем лечил\n * HeadlessUI (`handleIOSLocking`): гасим `touchmove` вне скроллящихся областей\n * оверлея и возвращаем позицию прокрутки после снятия лока.\n /\n\ninterface SavedBodyStyle {\n overflow: string\n paddingRight: string\n overscrollBehavior: string\n}\n\nlet lockCount = 0\nlet saved: SavedBodyStyle \| null = null\nlet savedScrollY = 0\nlet releaseTouchGuard: (() => void) \| null = null\n\n/\n iOS определяем по платформе, а не по ширине экрана: лечение специфично для\n * движка, а не для размера. `maxTouchPoints` отличает iPadOS, который со времён\n * 13-й версии представляется десктопным Mac.\n /\nfunction isIOS(): boolean {\n if (typeof navigator === 'undefined') return false\n return /iP(?:hone\|ad\|od)/.test(navigator.platform)\n \|\| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n}\n\n/* Прокручиваемая область оверлея — единственное, чему `touchmove` разрешён. /\nfunction isScrollableOverlayArea(target: EventTarget \| null): boolean {\n if (!(target instanceof Element)) return false\n\n for (let node: Element \| null = target; node; node = node.parentElement) {\n if (!(node instanceof HTMLElement)) continue\n if (node.hasAttribute('data-gr-overlay-root')) return true\n }\n\n return false\n}\n\nfunction applyTouchGuard(): void {\n if (!isIOS()) return\n\n const onTouchMove = (event: TouchEvent): void => {\n // Внутри оверлея скролл законен (длинное окно, лента изображений), а всё\n // остальное — это и есть фон, который лок обязан держать.\n if (isScrollableOverlayArea(event.target)) return\n if (event.cancelable) event.preventDefault()\n }\n\n document.addEventListener('touchmove', onTouchMove, { passive: false })\n releaseTouchGuard = () => document.removeEventListener('touchmove', onTouchMove)\n}\n\nfunction getScrollbarWidth(): number {\n return window.innerWidth - document.documentElement.clientWidth\n}\n\nfunction applyLock(): void {\n const body = document.body\n saved = {\n overflow: body.style.overflow,\n paddingRight: body.style.paddingRight,\n overscrollBehavior: body.style.overscrollBehavior,\n }\n savedScrollY = window.scrollY\n\n // Ширину скроллбара считаем ДО `overflow: hidden` (после — `clientWidth` меняется).\n const scrollbarWidth = getScrollbarWidth()\n\n body.style.overflow = 'hidden'\n // Прокрутка, «доехавшая» до края внутри окна, не должна продолжаться фоном.\n body.style.overscrollBehavior = 'contain'\n if (scrollbarWidth > 0) {\n const currentPadding = Number.parseFloat(getComputedStyle(body).paddingRight) \|\| 0\n body.style.paddingRight = `${currentPadding + scrollbarWidth}px`\n }\n\n applyTouchGuard()\n}\n\nfunction releaseLock(): void {\n releaseTouchGuard?.()\n releaseTouchGuard = null\n\n if (!saved) return\n document.body.style.overflow = saved.overflow\n document.body.style.paddingRight = saved.paddingRight\n document.body.style.overscrollBehavior = saved.overscrollBehavior\n saved = null\n\n // iOS сдвигает страницу, пока фон заблокирован; возвращаем её на место.\n if (isIOS() && window.scrollY !== savedScrollY) window.scrollTo(0, savedScrollY)\n}\n\n/\n Возвращает пару `lock`/`unlock`, идемпотентную в пределах одного инстанса\n * (повторный `lock()` без `unlock()` не увеличивает глобальный счётчик дважды).\n * Глобальный счётчик разделяется всеми оверлеями.\n /\nexport function useScrollLock() {\n const isClient = typeof window !== 'undefined'\n let held = false\n\n function lock(): void {\n if (!isClient \|\| held) return\n held = true\n lockCount += 1\n if (lockCount === 1) applyLock()\n }\n\n function unlock(): void {\n if (!isClient \|\| !held) return\n held = false\n lockCount = Math.max(0, lockCount - 1)\n if (lockCount === 0) releaseLock()\n }\n\n return { lock, unlock }\n}\n\n/* Тестовая/служебная очистка глобального состояния. /\nexport function resetScrollLock(): void {\n lockCount = 0\n if (typeof document !== 'undefined') releaseLock()\n saved = null\n}\n","import type { ComputedRef, Ref } from 'vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { useGrThemeAttrs } from '../../components/GrConfigProvider/context'\nimport { useFocusTrap } from '../useFocusTrap'\nimport { useOverlayLayer } from '../useOverlayLayer'\nimport { usePortalTarget } from '../usePortalTarget'\nimport { useInertOthers } from './useInertOthers'\nimport { useOverlayPresence } from './useOverlayPresence'\nimport { useScrollLock } from './useScrollLock'\n\n/\n Модальный слой целиком: одна сборка на весь пакет.\n \n Модальность собиралась вручную в трёх компонентах (`GrModal`, `GrDrawer`,\n * `GrImageViewer`) из шести примитивов, и сборка повторялась дословно. Дело не\n * в объёме: в этой проводке сидят инварианты, каждый из которых при пропуске\n * даёт тихий баг доступности, а не заметную поломку. Здесь они собраны в одном\n * месте — забыть часть модального слоя больше нельзя.\n \n Что именно неочевидно:\n \n - `restoreFocus: false` у ловушки. Возврат фокуса принадлежит стеку\n * слоёв: у него правило строже — вернуть, только если на момент закрытия\n * фокус ещё был внутри слоя. Две системы возврата подрались бы за фокус.\n * - `containers: layer.rootsAbove`. Панель селекта, открытого ВНУТРИ окна,\n * телепортирована в `body` и лежит вне поддерева панели. Без этого списка\n * ловушка считала бы её «снаружи» и отбирала фокус.\n * - Ловушка и `inert` работают, только пока слой верхний. Иначе нижнее\n * окно ворует фокус у открытого поверх него, а `inert` гасит собственную\n * панель вместе со страницей.\n * - Клик по подложке считается только тот, что на ней и начался. Иначе\n * выделение текста мышью или перетаскивание, отпущенное за пределами панели,\n * закрывает слой.\n \n Чего композабл НЕ делает: не рисует разметку. Корневой `div`, подложка и\n * панель у трёх компонентов различаются по существу (обёртки скролла у окна,\n * сквозные клики у немодальной панели, слои хрома у просмотрщика), а классами\n * общий модуль владеть не вправе — пресет гранулярности подмешивает safelist\n * только по директориям выбранных компонентов.\n /\nexport interface UseModalOverlayOptions {\n /\n Модальный ли слой: блокирует страницу, держит фокус, гасит нижние окна.\n * Геттером — там, где модальность включается пропом (`GrDrawer`).\n /\n modal?: boolean \| (() => boolean)\n /* Закрывать ли по Esc. Геттер — проп компонента реактивен. /\n closeOnEscape?: () => boolean\n /* Закрывать ли по клику в подложку; читается обработчиками `backdrop`. /\n closeOnBackdrop?: () => boolean\n /* Панель слоя: контейнер ловушки фокуса и её запасной приёмник. /\n panel: Ref<HTMLElement \| null>\n /\n Свой корень слоя. У якорного оверлея (`GrPopover`) корень и панель — один\n * элемент: в портал уезжает сама панель, отдельной обёртки нет. Не задан —\n * композабл заводит корень сам, как у центрированных окон.\n /\n root?: Ref<HTMLElement \| null>\n /\n Точечное переопределение точки монтирования (проп `teleportTo`). По\n * умолчанию — общий портал оверлеев.\n /\n teleportTo?: () => string \| HTMLElement \| undefined\n /\n Кому отдать фокус при открытии. Не задан — первому фокусируемому внутри\n * панели (правило `useFocusTrap`): просмотрщику нужна именно кнопка тулбара,\n * а окну — сама панель, и оно передаёт её явно.\n /\n initialFocus?: () => HTMLElement \| null \| undefined\n /\n Блокировать ли скролл страницы. По умолчанию — пока слой открыт и модален:\n * немодальная панель существует ровно ради работы со страницей под ней.\n /\n lockScroll?: () => boolean\n}\n\nexport interface ModalOverlay {\n /* Корень слоя: цель `ref` в шаблоне, хозяин `inert` и корень для стека слоёв. /\n rootEl: Ref<HTMLElement \| null>\n /* Смонтировано ли поддерево: держится до конца leave-анимации панели. /\n isMounted: Ref<boolean>\n /* Показан ли слой: этим переключаются `<Transition>` внутри. /\n isVisible: Ref<boolean>\n /* Верхний ли это слой сейчас. /\n isTopmost: Ref<boolean>\n /* Значение атрибута `inert` для корня: слой перестал быть верхним. /\n inertAttr: ComputedRef<true \| undefined>\n portalTarget: ComputedRef<string \| HTMLElement>\n teleportEnabled: ComputedRef<boolean>\n /* `data-theme` на телепортированный корень: в DOM он вне обёртки провайдера. /\n themeAttrs: ComputedRef<{ 'data-theme'?: string }>\n /* Для `@after-leave` панели. Компонент оборачивает, если ему нужен эмит `closed`. /\n onPanelAfterLeave: () => void\n /\n Обработчики подложки вместе с guard'ом «клик начался на ней». Имена — под\n * `v-on=\"backdrop\"`: объектный синтаксис ждёт имена событий, а не пропов.\n */\n backdrop: {\n mousedown: (event: MouseEvent) => void\n click: (event: MouseEvent) => void\n }\n}\n\nexport function useModalOverlay(\n open: Ref<boolean>,\n onDismiss: () => void,\n options: UseModalOverlayOptions,\n): ModalOverlay {\n const isModal = (): boolean =>\n typeof options.modal === 'function' ? options.modal() : options.modal ?? true\n\n const rootEl = options.root ?? ref<HTMLElement \| null>(null)\n const isTopmost = ref(true)\n\n const inertAttr = computed(() => (open.value && isModal() && !isTopmost.value ? true : undefined))\n\n // Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n // рендер не совпадёт с серверным и сломается гидрация.\n const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(options.teleportTo)\n\n // Панель уезжает в `body`, то есть вне обёртки провайдера, и `data-theme` с\n // неё не наследуется. В дереве компонентов слой остаётся внутри — `inject`\n // доходит, и тему он ставит себе сам.\n const themeAttrs = useGrThemeAttrs()\n\n const { mounted: isMounted, visible: isVisible, onPanelAfterLeave } = useOverlayPresence(open)\n\n const layer = useOverlayLayer(open, onDismiss, {\n modal: isModal,\n closeOnEscape: options.closeOnEscape,\n onTopmostChange: (value) => { isTopmost.value = value },\n root: rootEl,\n })\n\n useFocusTrap(options.panel, {\n active: () => open.value && isModal() && isTopmost.value,\n initialFocus: options.initialFocus,\n fallbackFocus: () => options.panel.value,\n containers: layer.rootsAbove,\n restoreFocus: false,\n })\n\n useInertOthers(rootEl, () => open.value && isModal() && isTopmost.value)\n\n // Общий reference-counted lock: несколько открытых оверлеев снимают блокировку\n // независимо от порядка закрытия, ширина скроллбара компенсируется.\n const { lock, unlock } = useScrollLock()\n\n watch(\n () => options.lockScroll?.() ?? (open.value && isModal()),\n (locked) => {\n if (locked) lock()\n else unlock()\n },\n { immediate: true },\n )\n\n onBeforeUnmount(unlock)\n\n let pointerDownOnBackdrop = false\n\n return {\n rootEl,\n isMounted,\n isVisible,\n isTopmost,\n inertAttr,\n portalTarget,\n teleportEnabled,\n themeAttrs,\n onPanelAfterLeave,\n backdrop: {\n mousedown(event: MouseEvent): void {\n pointerDownOnBackdrop = event.target === event.currentTarget\n },\n click(event: MouseEvent): void {\n const startedHere = pointerDownOnBackdrop\n pointerDownOnBackdrop = false\n\n if (!startedHere \|\| event.target !== event.currentTarget) return\n if (options.closeOnBackdrop?.() === false) return\n\n onDismiss()\n },\n },\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useModalOverlay-DrQVYwwA.js","names":[],"sources":["../../src/composables/internal/useInertOthers.ts","../../src/composables/internal/useOverlayPresence.ts","../../src/composables/internal/useScrollLock.ts","../../src/composables/internal/useModalOverlay.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { onScopeDispose, watch } from 'vue'\n\nimport { inertableOutside, markInert } from './inert'\n\n/*\n Пока слой активен, всё вне его ветки помечено `inert`: от корня оверлея вверх\n * до `<body>`, на каждом уровне — соседи.\n \n Это вторая половина модальности: `z-index` перекрывает страницу глазами,\n * `inert` — клавиатурой и скринридером.\n /\nexport function useInertOthers(root: Ref<HTMLElement \| null>, active: () => boolean): void {\n let release: (() => void) \| undefined\n\n function apply(): void {\n release?.()\n release = markInert(inertableOutside(root.value))\n }\n\n function clear(): void {\n release?.()\n release = undefined\n }\n\n watch(\n () => Boolean(active()) && Boolean(root.value),\n (isActive) => {\n if (isActive) apply()\n else clear()\n },\n { immediate: true, flush: 'post' },\n )\n\n onScopeDispose(clear)\n}\n","import type { Ref } from 'vue'\nimport { ref, watch } from 'vue'\n\nexport interface OverlayPresence {\n /* Смонтировано ли поддерево слоя: держится до конца leave-анимации. /\n mounted: Ref<boolean>\n /* Показан ли слой: этим переключаются `<Transition>` внутри. /\n visible: Ref<boolean>\n /* Вызывается из `@after-leave` панели. /\n onPanelAfterLeave: () => void\n}\n\n/\n Присутствие оверлея в DOM отдельно от его видимости.\n \n Штатный `<Transition>` анимирует свой элемент, но не координирует соседей:\n * убери обёртку по `v-if` — и подложка с панелью исчезнут мгновенно, без\n * leave-анимации. Поэтому присутствие поддерева и видимость слоя — два разных\n * флага: первый снимается только по концу leave-анимации панели.\n \n Видимость включается в том же такте, что и монтирование: содержимое окна\n * обязано появляться в DOM сразу после открытия — на этом стоит и код\n * потребителя, и внутренние компоненты, которые ищут в панели свои элементы.\n * Enter-анимацию это не отменяет: `<Transition appear>` проигрывает её и на\n * первом рендере ребёнка.\n /\nexport function useOverlayPresence(open: Ref<boolean>): OverlayPresence {\n const mounted = ref(open.value)\n const visible = ref(open.value)\n\n watch(open, (isOpen) => {\n if (isOpen) mounted.value = true\n visible.value = isOpen\n })\n\n function onPanelAfterLeave(): void {\n // Пока панель уезжала, слой могли открыть заново — тогда размонтировать\n // нечего и незачем.\n if (!open.value) mounted.value = false\n }\n\n return { mounted, visible, onPanelAfterLeave }\n}\n","/\n useScrollLock — общий reference-counted lock скролла `<body>` для оверлеев\n * (GrModal, GrDrawer, GrImageViewer).\n \n Зачем счётчик: состояние `<body>` принадлежит не оверлею, а их совокупности.\n * Держи каждый свой `savedBodyOverflow`, и закрытие A при ещё открытой B вернуло\n * бы странице прокрутку под открытым окном — закрывают не всегда в порядке\n * открытия. Поэтому состояние сохраняется один раз (переход счётчика 0→1) и\n * восстанавливается только когда закрыт последний оверлей (1→0).\n \n Плюс компенсация ширины скроллбара: при `overflow: hidden` скроллбар исчезает и\n * контент дёргается вправо — добавляем `padding-right` на его ширину.\n \n Отдельная ветка — iOS Safari: там `overflow: hidden` фон не держит, страница\n * продолжает «резинить» под открытым окном. Лечится тем же, чем лечил\n * HeadlessUI (`handleIOSLocking`): гасим `touchmove` вне скроллящихся областей\n * оверлея и возвращаем позицию прокрутки после снятия лока.\n /\n\ninterface SavedBodyStyle {\n overflow: string\n paddingRight: string\n overscrollBehavior: string\n}\n\nlet lockCount = 0\nlet saved: SavedBodyStyle \| null = null\nlet savedScrollY = 0\nlet releaseTouchGuard: (() => void) \| null = null\n\n/\n iOS определяем по платформе, а не по ширине экрана: лечение специфично для\n * движка, а не для размера. `maxTouchPoints` отличает iPadOS, который со времён\n * 13-й версии представляется десктопным Mac.\n /\nfunction isIOS(): boolean {\n if (typeof navigator === 'undefined') return false\n return /iP(?:hone\|ad\|od)/.test(navigator.platform)\n \|\| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n}\n\n/* Прокручиваемая область оверлея — единственное, чему `touchmove` разрешён. /\nfunction isScrollableOverlayArea(target: EventTarget \| null): boolean {\n if (!(target instanceof Element)) return false\n\n for (let node: Element \| null = target; node; node = node.parentElement) {\n if (!(node instanceof HTMLElement)) continue\n if (node.hasAttribute('data-gr-overlay-root')) return true\n }\n\n return false\n}\n\nfunction applyTouchGuard(): void {\n if (!isIOS()) return\n\n const onTouchMove = (event: TouchEvent): void => {\n // Внутри оверлея скролл законен (длинное окно, лента изображений), а всё\n // остальное — это и есть фон, который лок обязан держать.\n if (isScrollableOverlayArea(event.target)) return\n if (event.cancelable) event.preventDefault()\n }\n\n document.addEventListener('touchmove', onTouchMove, { passive: false })\n releaseTouchGuard = () => document.removeEventListener('touchmove', onTouchMove)\n}\n\nfunction getScrollbarWidth(): number {\n return window.innerWidth - document.documentElement.clientWidth\n}\n\nfunction applyLock(): void {\n const body = document.body\n saved = {\n overflow: body.style.overflow,\n paddingRight: body.style.paddingRight,\n overscrollBehavior: body.style.overscrollBehavior,\n }\n savedScrollY = window.scrollY\n\n // Ширину скроллбара считаем ДО `overflow: hidden` (после — `clientWidth` меняется).\n const scrollbarWidth = getScrollbarWidth()\n\n body.style.overflow = 'hidden'\n // Прокрутка, «доехавшая» до края внутри окна, не должна продолжаться фоном.\n body.style.overscrollBehavior = 'contain'\n if (scrollbarWidth > 0) {\n const currentPadding = Number.parseFloat(getComputedStyle(body).paddingRight) \|\| 0\n body.style.paddingRight = `${currentPadding + scrollbarWidth}px`\n }\n\n applyTouchGuard()\n}\n\nfunction releaseLock(): void {\n releaseTouchGuard?.()\n releaseTouchGuard = null\n\n if (!saved) return\n document.body.style.overflow = saved.overflow\n document.body.style.paddingRight = saved.paddingRight\n document.body.style.overscrollBehavior = saved.overscrollBehavior\n saved = null\n\n // iOS сдвигает страницу, пока фон заблокирован; возвращаем её на место.\n if (isIOS() && window.scrollY !== savedScrollY) window.scrollTo(0, savedScrollY)\n}\n\n/\n Возвращает пару `lock`/`unlock`, идемпотентную в пределах одного инстанса\n * (повторный `lock()` без `unlock()` не увеличивает глобальный счётчик дважды).\n * Глобальный счётчик разделяется всеми оверлеями.\n /\nexport function useScrollLock() {\n const isClient = typeof window !== 'undefined'\n let held = false\n\n function lock(): void {\n if (!isClient \|\| held) return\n held = true\n lockCount += 1\n if (lockCount === 1) applyLock()\n }\n\n function unlock(): void {\n if (!isClient \|\| !held) return\n held = false\n lockCount = Math.max(0, lockCount - 1)\n if (lockCount === 0) releaseLock()\n }\n\n return { lock, unlock }\n}\n\n/* Тестовая/служебная очистка глобального состояния. /\nexport function resetScrollLock(): void {\n lockCount = 0\n if (typeof document !== 'undefined') releaseLock()\n saved = null\n}\n","import type { ComputedRef, Ref } from 'vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { useGrThemeAttrs } from '../../components/GrConfigProvider/context'\nimport { useFocusTrap } from '../useFocusTrap'\nimport { useOverlayLayer } from '../useOverlayLayer'\nimport { usePortalTarget } from '../usePortalTarget'\nimport { useInertOthers } from './useInertOthers'\nimport { useOverlayPresence } from './useOverlayPresence'\nimport { useScrollLock } from './useScrollLock'\n\n/\n Модальный слой целиком: одна сборка на весь пакет.\n \n Модальность собиралась вручную в трёх компонентах (`GrModal`, `GrDrawer`,\n * `GrImageViewer`) из шести примитивов, и сборка повторялась дословно. Дело не\n * в объёме: в этой проводке сидят инварианты, каждый из которых при пропуске\n * даёт тихий баг доступности, а не заметную поломку. Здесь они собраны в одном\n * месте — забыть часть модального слоя больше нельзя.\n \n Что именно неочевидно:\n \n - `restoreFocus: false` у ловушки. Возврат фокуса принадлежит стеку\n * слоёв: у него правило строже — вернуть, только если на момент закрытия\n * фокус ещё был внутри слоя. Две системы возврата подрались бы за фокус.\n * - `containers: layer.rootsAbove`. Панель селекта, открытого ВНУТРИ окна,\n * телепортирована в `body` и лежит вне поддерева панели. Без этого списка\n * ловушка считала бы её «снаружи» и отбирала фокус.\n * - Ловушка и `inert` работают, только пока слой верхний. Иначе нижнее\n * окно ворует фокус у открытого поверх него, а `inert` гасит собственную\n * панель вместе со страницей.\n * - Клик по подложке считается только тот, что на ней и начался. Иначе\n * выделение текста мышью или перетаскивание, отпущенное за пределами панели,\n * закрывает слой.\n \n Чего композабл НЕ делает: не рисует разметку. Корневой `div`, подложка и\n * панель у трёх компонентов различаются по существу (обёртки скролла у окна,\n * сквозные клики у немодальной панели, слои хрома у просмотрщика), а классами\n * общий модуль владеть не вправе — пресет гранулярности подмешивает safelist\n * только по директориям выбранных компонентов.\n /\nexport interface UseModalOverlayOptions {\n /\n Модальный ли слой: блокирует страницу, держит фокус, гасит нижние окна.\n * Геттером — там, где модальность включается пропом (`GrDrawer`).\n /\n modal?: boolean \| (() => boolean)\n /* Закрывать ли по Esc. Геттер — проп компонента реактивен. /\n closeOnEscape?: () => boolean\n /* Закрывать ли по клику в подложку; читается обработчиками `backdrop`. /\n closeOnBackdrop?: () => boolean\n /* Панель слоя: контейнер ловушки фокуса и её запасной приёмник. /\n panel: Ref<HTMLElement \| null>\n /\n Свой корень слоя. У якорного оверлея (`GrPopover`) корень и панель — один\n * элемент: в портал уезжает сама панель, отдельной обёртки нет. Не задан —\n * композабл заводит корень сам, как у центрированных окон.\n /\n root?: Ref<HTMLElement \| null>\n /\n Точечное переопределение точки монтирования (проп `teleportTo`). По\n * умолчанию — общий портал оверлеев.\n /\n teleportTo?: () => string \| HTMLElement \| undefined\n /\n Кому отдать фокус при открытии. Не задан — первому фокусируемому внутри\n * панели (правило `useFocusTrap`): просмотрщику нужна именно кнопка тулбара,\n * а окну — сама панель, и оно передаёт её явно.\n /\n initialFocus?: () => HTMLElement \| null \| undefined\n /\n Блокировать ли скролл страницы. По умолчанию — пока слой открыт и модален:\n * немодальная панель существует ровно ради работы со страницей под ней.\n /\n lockScroll?: () => boolean\n}\n\nexport interface ModalOverlay {\n /* Корень слоя: цель `ref` в шаблоне, хозяин `inert` и корень для стека слоёв. /\n rootEl: Ref<HTMLElement \| null>\n /* Смонтировано ли поддерево: держится до конца leave-анимации панели. /\n isMounted: Ref<boolean>\n /* Показан ли слой: этим переключаются `<Transition>` внутри. /\n isVisible: Ref<boolean>\n /* Верхний ли это слой сейчас. /\n isTopmost: Ref<boolean>\n /* Значение атрибута `inert` для корня: слой перестал быть верхним. /\n inertAttr: ComputedRef<true \| undefined>\n portalTarget: ComputedRef<string \| HTMLElement>\n teleportEnabled: ComputedRef<boolean>\n /* `data-theme` на телепортированный корень: в DOM он вне обёртки провайдера. /\n themeAttrs: ComputedRef<{ 'data-theme'?: string }>\n /* Для `@after-leave` панели. Компонент оборачивает, если ему нужен эмит `closed`. /\n onPanelAfterLeave: () => void\n /\n Обработчики подложки вместе с guard'ом «клик начался на ней». Имена — под\n * `v-on=\"backdrop\"`: объектный синтаксис ждёт имена событий, а не пропов.\n */\n backdrop: {\n mousedown: (event: MouseEvent) => void\n click: (event: MouseEvent) => void\n }\n}\n\nexport function useModalOverlay(\n open: Ref<boolean>,\n onDismiss: () => void,\n options: UseModalOverlayOptions,\n): ModalOverlay {\n const isModal = (): boolean =>\n typeof options.modal === 'function' ? options.modal() : options.modal ?? true\n\n const rootEl = options.root ?? ref<HTMLElement \| null>(null)\n const isTopmost = ref(true)\n\n const inertAttr = computed(() => (open.value && isModal() && !isTopmost.value ? true : undefined))\n\n // Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n // рендер не совпадёт с серверным и сломается гидрация.\n const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(options.teleportTo)\n\n // Панель уезжает в `body`, то есть вне обёртки провайдера, и `data-theme` с\n // неё не наследуется. В дереве компонентов слой остаётся внутри — `inject`\n // доходит, и тему он ставит себе сам.\n const themeAttrs = useGrThemeAttrs()\n\n const { mounted: isMounted, visible: isVisible, onPanelAfterLeave } = useOverlayPresence(open)\n\n const layer = useOverlayLayer(open, onDismiss, {\n modal: isModal,\n closeOnEscape: options.closeOnEscape,\n onTopmostChange: (value) => { isTopmost.value = value },\n root: rootEl,\n })\n\n useFocusTrap(options.panel, {\n active: () => open.value && isModal() && isTopmost.value,\n initialFocus: options.initialFocus,\n fallbackFocus: () => options.panel.value,\n containers: layer.rootsAbove,\n restoreFocus: false,\n })\n\n useInertOthers(rootEl, () => open.value && isModal() && isTopmost.value)\n\n // Общий reference-counted lock: несколько открытых оверлеев снимают блокировку\n // независимо от порядка закрытия, ширина скроллбара компенсируется.\n const { lock, unlock } = useScrollLock()\n\n watch(\n () => options.lockScroll?.() ?? (open.value && isModal()),\n (locked) => {\n if (locked) lock()\n else unlock()\n },\n { immediate: true },\n )\n\n onBeforeUnmount(unlock)\n\n let pointerDownOnBackdrop = false\n\n return {\n rootEl,\n isMounted,\n isVisible,\n isTopmost,\n inertAttr,\n portalTarget,\n teleportEnabled,\n themeAttrs,\n onPanelAfterLeave,\n backdrop: {\n mousedown(event: MouseEvent): void {\n pointerDownOnBackdrop = event.target === event.currentTarget\n },\n click(event: MouseEvent): void {\n const startedHere = pointerDownOnBackdrop\n pointerDownOnBackdrop = false\n\n if (!startedHere \|\| event.target !== event.currentTarget) return\n if (options.closeOnBackdrop?.() === false) return\n\n onDismiss()\n },\n },\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{usePortalTarget-RyzEgNTb.js → usePortalTarget-Cn-Wiz5d.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { s as useGrConfig } from "./context-BSYR7RZs.js";
-import { t as ensurePortalRoot } from "./portalRoot-CWD4zHBm.js";
+import { t as ensurePortalRoot } from "./portalRoot-CVhCgdG6.js";
 import { computed, onMounted, readonly, ref } from "vue";
 //#region src/composables/internal/useTeleportEnabled.ts
 /**

package/dist/chunks/{usePortalTarget-RyzEgNTb.js.map → usePortalTarget-Cn-Wiz5d.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePortalTarget-~~RyzEgNTb~~.js","names":[],"sources":["../../src/composables/internal/useTeleportEnabled.ts","../../src/composables/usePortalTarget.ts"],"sourcesContent":["import { onMounted, readonly, ref, type Ref } from 'vue'\n\n/*\n Можно ли телепортировать содержимое прямо сейчас.\n \n Возвращает `false` на сервере И на первом клиентском рендере, `true` — сразу\n * после монтирования. Использовать так:\n \n ```vue\n * <teleport to=\"body\" :disabled=\"!teleportEnabled\">…</teleport>\n * ```\n \n ## Зачем, если есть `typeof window !== 'undefined'`\n \n Проверка окружения выглядит достаточной, но именно она и ломала гидрацию.\n * `isClient` вычисляется в `setup`, поэтому получалось так:\n \n - сервер: `window` нет → телепорт выключен → содержимое остаётся НА МЕСТЕ\n * (`:disabled` означает «рендерить на месте», а не «не рендерить»);\n * - клиент, первый рендер: `window` есть → телепорт включён → содержимое сразу\n * уезжает в `body`.\n \n Структуры не совпадают, Vue сообщает `Hydration node mismatch`. В лучшем\n * случае это лишний варнинг и осиротевшая копия панели в DOM; в худшем —\n * панель «прилипает» к контейнеру приложения и пишет в него свои стили\n * (`position: fixed` + `display: none` у закрытой панели), после чего страница\n * исчезает целиком.\n \n Флаг, поднимаемый в `onMounted`, снимает проблему по построению: первый\n * клиентский рендер повторяет серверный, а телепорт включается уже после\n * гидрации. Для компонентов без SSR это ничего не меняет: панели закрыты\n * (`v-show`/`v-if`), а `onMounted` срабатывает в том же тике.\n \n Стенд, на котором это воспроизводится и проверяется, — `apps/playground-ssr`.\n /\nexport function useTeleportEnabled(): Readonly<Ref<boolean>> {\n const enabled = ref(false)\n\n onMounted(() => {\n enabled.value = true\n })\n\n return readonly(enabled)\n}\n","import type { ComputedRef } from 'vue'\nimport { computed } from 'vue'\n\nimport { useGrConfig } from '../components/GrConfigProvider/context'\nimport { ensurePortalRoot } from './internal/portalRoot'\nimport { useTeleportEnabled } from './internal/useTeleportEnabled'\n\nexport interface PortalTarget {\n /* Куда телепортировать: элемент портала либо селектор из конфига. /\n target: ComputedRef<string \| HTMLElement>\n /\n Можно ли телепортировать прямо сейчас. `false` на сервере и на первом\n * клиентском рендере — иначе разметка разъедется на гидрации.\n /\n enabled: ComputedRef<boolean>\n}\n\n/\n Куда монтируются оверлеи пакета.\n \n Приоритет: локальное переопределение компонента (`teleportTo`) →\n * `portalTarget` из `GrConfigProvider` → общий корень `#gr-portal`, который\n * создаётся при первом обращении.\n \n ```vue\n * const { target, enabled } = usePortalTarget(() => props.teleportTo)\n \n <teleport :to=\"target\" :disabled=\"!enabled\">…</teleport>\n * ```\n \n Композабл публичный: свой оверлей потребителя должен уезжать туда же, куда и\n * оверлеи библиотеки, — иначе он окажется вне ветки портала и будет помечен\n * `inert` вместе со страницей, как только откроется модалка.\n */\nexport function usePortalTarget(local?: () => string \| HTMLElement \| undefined): PortalTarget {\n const config = useGrConfig()\n const teleportEnabled = useTeleportEnabled()\n\n const target = computed<string \| HTMLElement>(() => {\n const explicit = local?.() ?? config.portalTarget?.value\n if (explicit) return explicit\n\n // Корень создаётся лениво и только на клиенте; до монтирования телепорт\n // выключен, поэтому `body` здесь — недостижимый запасной вариант, а не\n // рабочая ветка.\n return ensurePortalRoot() ?? 'body'\n })\n\n return { target, enabled: computed(() => teleportEnabled.value) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,qBAA6C;CAC3D,MAAM,UAAU,IAAI,KAAK;CAEzB,gBAAgB;EACd,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO,SAAS,OAAO;AACzB;;;;;;;;;;;;;;;;;;;;ACTA,SAAgB,gBAAgB,OAA8D;CAC5F,MAAM,SAAS,YAAY;CAC3B,MAAM,kBAAkB,mBAAmB;CAY3C,OAAO;EAAE,QAVM,eAAqC;GAClD,MAAM,WAAW,QAAQ,KAAK,OAAO,cAAc;GACnD,IAAI,UAAU,OAAO;GAKrB,OAAO,iBAAiB,KAAK;EAC/B,CAES;EAAQ,SAAS,eAAe,gBAAgB,KAAK;CAAE;AAClE"}
1	+ {"version":3,"file":"usePortalTarget-Cn-Wiz5d.js","names":[],"sources":["../../src/composables/internal/useTeleportEnabled.ts","../../src/composables/usePortalTarget.ts"],"sourcesContent":["import { onMounted, readonly, ref, type Ref } from 'vue'\n\n/*\n Можно ли телепортировать содержимое прямо сейчас.\n \n Возвращает `false` на сервере И на первом клиентском рендере, `true` — сразу\n * после монтирования. Использовать так:\n \n ```vue\n * <teleport to=\"body\" :disabled=\"!teleportEnabled\">…</teleport>\n * ```\n \n ## Зачем, если есть `typeof window !== 'undefined'`\n \n Проверка окружения выглядит достаточной, но именно она и ломала гидрацию.\n * `isClient` вычисляется в `setup`, поэтому получалось так:\n \n - сервер: `window` нет → телепорт выключен → содержимое остаётся НА МЕСТЕ\n * (`:disabled` означает «рендерить на месте», а не «не рендерить»);\n * - клиент, первый рендер: `window` есть → телепорт включён → содержимое сразу\n * уезжает в `body`.\n \n Структуры не совпадают, Vue сообщает `Hydration node mismatch`. В лучшем\n * случае это лишний варнинг и осиротевшая копия панели в DOM; в худшем —\n * панель «прилипает» к контейнеру приложения и пишет в него свои стили\n * (`position: fixed` + `display: none` у закрытой панели), после чего страница\n * исчезает целиком.\n \n Флаг, поднимаемый в `onMounted`, снимает проблему по построению: первый\n * клиентский рендер повторяет серверный, а телепорт включается уже после\n * гидрации. Для компонентов без SSR это ничего не меняет: панели закрыты\n * (`v-show`/`v-if`), а `onMounted` срабатывает в том же тике.\n \n Стенд, на котором это воспроизводится и проверяется, — `apps/playground-ssr`.\n /\nexport function useTeleportEnabled(): Readonly<Ref<boolean>> {\n const enabled = ref(false)\n\n onMounted(() => {\n enabled.value = true\n })\n\n return readonly(enabled)\n}\n","import type { ComputedRef } from 'vue'\nimport { computed } from 'vue'\n\nimport { useGrConfig } from '../components/GrConfigProvider/context'\nimport { ensurePortalRoot } from './internal/portalRoot'\nimport { useTeleportEnabled } from './internal/useTeleportEnabled'\n\nexport interface PortalTarget {\n /* Куда телепортировать: элемент портала либо селектор из конфига. /\n target: ComputedRef<string \| HTMLElement>\n /\n Можно ли телепортировать прямо сейчас. `false` на сервере и на первом\n * клиентском рендере — иначе разметка разъедется на гидрации.\n /\n enabled: ComputedRef<boolean>\n}\n\n/\n Куда монтируются оверлеи пакета.\n \n Приоритет: локальное переопределение компонента (`teleportTo`) →\n * `portalTarget` из `GrConfigProvider` → общий корень `#gr-portal`, который\n * создаётся при первом обращении.\n \n ```vue\n * const { target, enabled } = usePortalTarget(() => props.teleportTo)\n \n <teleport :to=\"target\" :disabled=\"!enabled\">…</teleport>\n * ```\n \n Композабл публичный: свой оверлей потребителя должен уезжать туда же, куда и\n * оверлеи библиотеки, — иначе он окажется вне ветки портала и будет помечен\n * `inert` вместе со страницей, как только откроется модалка.\n */\nexport function usePortalTarget(local?: () => string \| HTMLElement \| undefined): PortalTarget {\n const config = useGrConfig()\n const teleportEnabled = useTeleportEnabled()\n\n const target = computed<string \| HTMLElement>(() => {\n const explicit = local?.() ?? config.portalTarget?.value\n if (explicit) return explicit\n\n // Корень создаётся лениво и только на клиенте; до монтирования телепорт\n // выключен, поэтому `body` здесь — недостижимый запасной вариант, а не\n // рабочая ветка.\n return ensurePortalRoot() ?? 'body'\n })\n\n return { target, enabled: computed(() => teleportEnabled.value) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,qBAA6C;CAC3D,MAAM,UAAU,IAAI,KAAK;CAEzB,gBAAgB;EACd,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO,SAAS,OAAO;AACzB;;;;;;;;;;;;;;;;;;;;ACTA,SAAgB,gBAAgB,OAA8D;CAC5F,MAAM,SAAS,YAAY;CAC3B,MAAM,kBAAkB,mBAAmB;CAY3C,OAAO;EAAE,QAVM,eAAqC;GAClD,MAAM,WAAW,QAAQ,KAAK,OAAO,cAAc;GACnD,IAAI,UAAU,OAAO;GAKrB,OAAO,iBAAiB,KAAK;EAC/B,CAES;EAAQ,SAAS,eAAe,gBAAgB,KAAK;CAAE;AAClE"}