vgapp 1.5.4 → 1.5.6

package/app/modules/vgnav/js/vgnav.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
+ * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
 	execute,
@@ -29,7 +33,7 @@ const CLASS_NAME_ACTIVE    = 'active';
 /**
  * Constants toggle
  */
-const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' a';
+const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
 
 /**
  * Constants Events
@@ -215,34 +219,43 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	show(relatedTarget) {
-		let target = relatedTarget.relatedTarget;
-
-		if (!target || isDisabled(target)) return;
-
-		if (!target.closest('.dropdown-content')) {
-			target.classList.add('first');
-		}
-
-		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		let drop = Selectors.find('.dropdown-content', target),
-			link = target.firstElementChild;
+	show(relatedTarget) {
+		let target = relatedTarget.relatedTarget;
+
+		if (!target || isDisabled(target)) return;
+		const drop = Selectors.find(':scope > .dropdown-content', target);
+		if (!drop) return;
+
+		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		if (!target.closest('.dropdown-content')) {
+			target.classList.add('first');
+		}
+
+		const link = target.firstElementChild;
 
 		if (link) link.setAttribute('aria-expanded', 'true');
-		drop.classList.add(CLASS_NAME_SHOW);
-		target.classList.add(CLASS_NAME_ACTIVE);
-
-		const $placement = new Placement({
-			reference: target,
-			drop: drop,
-			placement: 'bottom-start',
-			fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
-			offset: [0, 6],
-			boundary: 'clippingParents',
-			autoFlip: true,
-			overflowProtection: true
+		drop.classList.add(CLASS_NAME_SHOW);
+		target.classList.add(CLASS_NAME_ACTIVE);
+		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
+		drop.style.bottom = 'auto';
+		drop.style.right = 'auto';
+		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
+
+		const $placement = new Placement({
+			reference: target,
+			drop: drop,
+			placement: openToSide ? 'right-start' : 'bottom-start',
+			fallbackPlacements: openToSide
+				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
+				: ['top-start', 'bottom-end', 'top-end'],
+			offset: openToSide ? [6, 0] : [0, 6],
+			boundary: 'clippingParents',
+			autoFlip: true,
+			overflowProtection: true,
+			clamp: true,
+			isMerge: false
 		});
 
 		$placement._setPlacement();
@@ -264,13 +277,8 @@ class VGNav extends BaseModule {
 		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
-	hide(relatedTarget) {
-		const _this = this;
-		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
-		}
+	hide(relatedTarget) {
+		const _this = this;
 
 		let element = relatedTarget.relatedTarget;
 
@@ -288,7 +296,7 @@ class VGNav extends BaseModule {
 				element.classList.remove('first');
 			}
 
-			[...Selectors.findAll('.' + CLASS_NAME_SHOW, element)].forEach(function (el, index) {
+			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
 				el.classList.remove(CLASS_NAME_FADE);
 
 				let parent = el.closest('.dropdown');
@@ -299,21 +307,14 @@ class VGNav extends BaseModule {
 				let link = el.previousElementSibling;
 				if (link) link.setAttribute('aria-expanded', 'false');
 
-				if (index === 0) {
-					const completeCallback = () => {
-						el.classList.remove(CLASS_NAME_SHOW);
-						EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
-					};
-
-					_this._queueCallback(completeCallback, el, true, 500);
-				}
-
-				const dropData = _this._openDrops.get(el);
-				if (dropData) {
-					window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-					window.removeEventListener('resize', dropData.resizeHandler);
-					_this._openDrops.delete(el);
-				}
+				const completeCallback = () => {
+					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
+					el.classList.remove(CLASS_NAME_SHOW);
+					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
+				};
+
+				_this._queueCallback(completeCallback, el, true, 500);
+				_this._cleanupDrop(el);
 			});
 		}
 	}
@@ -341,13 +342,16 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	_cleanupDrop(drop) {
-		const dropData = this._openDrops.get(drop);
-		if (dropData) {
-			window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-			window.removeEventListener('resize', dropData.resizeHandler);
-			this._openDrops.delete(drop);
-		}
+	_cleanupDrop(drop) {
+		const dropData = this._openDrops.get(drop);
+		if (dropData) {
+			this._openDrops.delete(drop);
+			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
+			if (!this._openDrops.size) {
+				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+				window.removeEventListener('resize', dropData.resizeHandler);
+			}
+		}
 	}
 
 	_isElementInViewport(el) {

package/app/modules/vgrangeslider/js/skins.js

@@ -1,4 +1,8 @@
-const SKIN_CLASS_DEFAULT = 'is-skin-default';
+/**
+ * Описание: визуальные режимы VGRangeSlider — default, ruler и status.
+ * Возможности: шкала с адаптивными координатами, активные отметки и пороговые цвета с текстовыми статусами.
+ */
+const SKIN_CLASS_DEFAULT = 'is-skin-default';
 const SKIN_CLASS_RULER = 'is-skin-ruler';
 const SKIN_CLASS_STATUS = 'is-skin-status';
 const SKIN_CLASS_RULER_DIM = 'is-ruler-dim-inactive';
@@ -206,8 +210,9 @@ const syncRangeSliderSkin = (skin, state, helpers) => {
 
 	const isRange = state.from !== state.to || helpers.isRange;
 
-	skin.ticks.forEach((tick, index) => {
-		const value = skin.values[index];
+	skin.ticks.forEach((tick, index) => {
+		const value = skin.values[index];
+		tick.style.left = `${helpers.toPositionPx(value)}px`;
 		const isActive = isRange
 			? value >= state.from && value <= state.to
 			: value <= state.from;

package/app/modules/vgrangeslider/js/vgrangeslider.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: одиночные и диапазонные слайдеры VGRangeSlider на нативных range-input.
+ * Возможности: Data API, шкала и статусы, форматирование, синхронизация формы, события и управление значениями.
+ */
+import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import { mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -259,9 +263,10 @@ class VGRangeSlider extends BaseModule {
 		this._dom.labelFrom = Selectors.find('.vg-range-slider__label--from', root);
 		this._dom.labelTo = Selectors.find('.vg-range-slider__label--to', root);
 		this._dom.labelSeparator = Selectors.find('.vg-range-slider__separator', root);
-		this._dom.hiddenMin = root.querySelector('input[data-vgrangeslider-hidden="min"]');
-		this._dom.hiddenMax = root.querySelector('input[data-vgrangeslider-hidden="max"]');
-		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
+		this._dom.hiddenMin ||= root.querySelector('input[data-vgrangeslider-hidden="min"]');
+		this._dom.hiddenMax ||= root.querySelector('input[data-vgrangeslider-hidden="max"]');
+		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
+			isRange: this._isRange,
 			formatValue: (value) => this._formatValue(value),
 			toPositionPx: (value) => this._toPositionPx(value),
 		});
@@ -338,11 +343,11 @@ class VGRangeSlider extends BaseModule {
 			root.appendChild(this._createLabels(this._isRange));
 		}
 
-		if (this._isRange) {
-			this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
-			this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
-		} else if (this._params.name?.min) {
-			this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
+		if (this._isRange) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
+			this._dom.hiddenMax = this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
+		} else if (this._params.name?.min) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
 		}
 
 		return root;
@@ -399,7 +404,8 @@ class VGRangeSlider extends BaseModule {
 			if (name) input.name = name;
 			root.appendChild(input);
 		}
-		input.setAttribute('data-vgrangeslider-hidden', role);
+		input.setAttribute('data-vgrangeslider-hidden', role);
+		return input;
 	}
 
 	_bindEvents() {
@@ -442,7 +448,8 @@ class VGRangeSlider extends BaseModule {
 		window.addEventListener('resize', this._handleResize);
 	}
 
-	_syncUI() {
+	_syncUI() {
+		if (!this._isRange) this._state.to = this._state.from;
 		const fromPercent = this._toPercent(this._state.from);
 		const toPercent = this._toPercent(this._isRange ? this._state.to : this._state.from);
 		const fromPosition = this._toPositionPx(this._state.from);
@@ -467,10 +474,11 @@ class VGRangeSlider extends BaseModule {
 		if (this._dom.labelSeparator) this._dom.labelSeparator.hidden = !this._isRange;
 
 		this._syncTargets();
-		syncRangeSliderSkin(this._dom.skin, this._state, {
-			isRange: this._isRange,
-			params: this._params,
-			dom: this._dom,
+		syncRangeSliderSkin(this._dom.skin, this._state, {
+			isRange: this._isRange,
+			params: this._params,
+			dom: this._dom,
+			toPositionPx: (value) => this._toPositionPx(value),
 		});
 	}
 
@@ -565,8 +573,12 @@ class VGRangeSlider extends BaseModule {
 		const numeric = Number(normalizeData(value));
 		const safeValue = Number.isFinite(numeric) ? numeric : fallback;
 		const clamped = Math.min(Math.max(safeValue, min), max);
-		const step = this._state?.step || this._params.step || 1;
-		const stepped = Math.round((clamped - min) / step) * step + min;
+		const configuredStep = Number(this._state?.step ?? this._params.step);
+		const step = Number.isFinite(configuredStep) && configuredStep > 0 ? configuredStep : 1;
+		// Округление не должно выводить значение за max или с нативной сетки шага.
+		const maxSteps = Math.floor((max - min) / step + 1e-9);
+		const steps = Math.min(Math.round((clamped - min) / step), maxSteps);
+		const stepped = steps * step + min;
 		return Number(stepped.toFixed(5));
 	}
 

package/app/modules/vgrollup/js/vgrollup.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: сворачивание текста и списков VGRollup.
+ * Возможности: ограничение высоты, строк и количества элементов, локализация кнопок, Data API, callbacks и события.
+ */
+import BaseModule from "../../base-module";
 import { execute, isDisabled, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -98,7 +102,7 @@ class VGRollup extends BaseModule {
 			}
 		};
 
-		let lang = Manipulator.get(element, 'data-lang') || ('lang' in params) ? params.lang : defaultParams.lang;
+		const lang = Manipulator.get(element, 'data-lang') || params.lang || defaultParams.lang;
 
 		// Локализация текстов кнопок
 		defaultParams.button.more = lang_buttons(lang, NAME)['show'];
@@ -288,7 +292,8 @@ class VGRollup extends BaseModule {
 
 		if (isEllipsis && line) {
 			Classes.add(element, this.classes.ellipsis);
-			element.style.lineClamp  = Number(line);
+			element.style.lineClamp  = Number(line);
+			element.style.setProperty('-webkit-line-clamp', String(Number(line)));
 		} else if (isEllipsis) {
 			console.error("Переменная [data-line] или параметр[line] не должны быть пустыми");
 		}
@@ -377,13 +382,14 @@ class VGRollup extends BaseModule {
 
 				if (this._params.ellipsis.line) {
 					Classes.add(el, this.classes.ellipsis);
-					el.style.lineClamp = this._params.ellipsis.line;
+					el.style.lineClamp = this._params.ellipsis.line;
+					el.style.setProperty('-webkit-line-clamp', String(this._params.ellipsis.line));
 				}
 
 				if (this._params.fade) Classes.add(el, this.classes.fade);
 				if (this._params.transition) Classes.add(el, this.classes.transition);
 
-				execute(this._params.callbacks.expand, [el, this])
+				execute(this._params.callbacks.collapse, [el, this])
 			} else if (content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
 				items.forEach((item, index) => {
@@ -399,7 +405,9 @@ class VGRollup extends BaseModule {
 		} else {
 			const { hidden, ellipsis, fade } = this.classes;
 			Classes.remove(el, [hidden, ellipsis, fade]);
-			Manipulator.remove(el, 'style');
+			el.style.removeProperty('height');
+			el.style.removeProperty('line-clamp');
+			el.style.removeProperty('-webkit-line-clamp');
 
 			if (this._params.content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
@@ -455,4 +463,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	VGRollup.toggle(target, this);
 });
 
-export default VGRollup;
+export default VGRollup;

package/app/modules/vgtable/js/_options.js

@@ -1,13 +1,13 @@
 /**
  * Описание: константы и параметры по умолчанию базовой таблицы VGTable.
- * Возможности: единая настройка Data API, i18n, wrapper, remote-запросов, фильтров, sticky-заголовка, колонок, строк, сортировки, выбора и пагинации.
- */
+ * Возможности: единая настройка Data API, i18n, wrapper, remote, фильтров, sticky, колонок, строк, выбора и адаптивной пагинации.
+ */
 
 /**
  * Служебные константы модуля.
  */
 // Имя компонента в публичном API. Варианты: фиксированное значение 'table'.
-const NAME = 'table';
+const NAME = 'table';
 // Ключ экземпляра в Data API. Варианты: фиксированное значение 'vg.table'.
 const NAME_KEY = `vg.${NAME}`;
 // Селектор автоматической инициализации. Варианты: элементы с атрибутом data-vg-table.
@@ -21,7 +21,16 @@ const TABLE_CONTAINER_SELECTOR = '.vg-table-container';
 // Маркер container, созданного компонентом. Варианты: пустой data-атрибут.
 const GENERATED_TABLE_CONTAINER_ATTRIBUTE = 'data-vg-table-generated-container';
 
-const DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS = {
+	/** Профили представления: базовые параметры + все достигнутые границы xs–xxl. */
+	responsive: {
+		// Включается явно; Data API: data-responsive-enabled.
+		enabled: false,
+		// Локальные переопределения границ общего Responsive; пустой объект сохраняет глобальные значения.
+		breakpoints: {},
+		// Профили принимают pagination: maxButtons, align, position, size.enabled/label, quick.enabled.
+		xs: {}, sm: {}, md: {}, lg: {}, xl: {}, xxl: {},
+	},
 	// Активная локаль встроенного интерфейса. Data API: data-locale. Варианты: 'ru' | 'en' | региональный BCP 47 код.
 	locale: 'ru',
 	// Пользовательские словари, объединяемые со встроенными ru/en. Data API отсутствует; варианты: объект {locale: {group: {key: value}}}.
@@ -359,7 +368,9 @@ const DEFAULT_OPTIONS = {
 		// Задаёт число страниц, после которого разрешены многоточие и quick='auto'. Варианты: целое число >= 1.
 		threshold: 5,
 		// Задаёт максимальное число соседних страниц между первой и последней. Варианты: целое число >= 1.
-		visible: 5,
+		visible: 5,
+		// Лимит номеров и многоточий без prev/next; null сохраняет visible/threshold. Data API: data-pagination-max-buttons.
+		maxButtons: null,
 
 		/** Поле и VGDropdown для выбора количества строк. */
 		size: {

package/app/modules/vgtable/js/_pagination.js

@@ -1,6 +1,6 @@
 /**
  * Описание: локальная и remote-пагинация строк базовой таблицы VGTable.
- * Возможности: выбор страницы и размера, серверная meta, многоточия, быстрый переход, сохранение, Fixed Header container и публичные события.
+ * Возможности: выбор страницы и размера, серверная meta, лимит кнопок, responsive-представление без запросов, многоточия, быстрый переход и сохранение.
  */
 import EventHandler from "../../../utils/js/dom/event";
 import VGDropdown from "../../vgdropdown";
@@ -16,7 +16,10 @@ class _pagination {
 		this._options = options;
 		this._host = table.closest('.vg-table-wrapper') || table.parentElement;
 		this._containers = [];
-		this._dropdowns = [];
+		this._dropdowns = [];
+		this._externalVisibility = new Map();
+		this._manageExternalVisibility = options.responsive === true;
+		this._updatingPresentation = false;
 		this._page = this._positiveInt(options.page, 1);
 		this._perPage = this._clampPerPage(options.per);
 		this._remote = options.remote === true;
@@ -29,20 +32,24 @@ class _pagination {
 		this._boundFocusOut = this._handleFocusOut.bind(this);
 	}
 
-	init() {
-		this._restoreState();
-		this._containers = this._resolveContainers();
-		this._containers.forEach((container) => {
+	init() {
+		this._restoreState();
+		this._containers = this._resolveContainers();
+		this._bindContainers();
+		this.refresh();
+	}
+
+	_bindContainers() {
+		this._containers.forEach((container) => {
 			container.addEventListener('click', this._boundClick);
 			container.addEventListener('change', this._boundChange);
 			container.addEventListener('keydown', this._boundKeydown);
 			container.addEventListener('focusin', this._boundFocusIn);
 			container.addEventListener('focusout', this._boundFocusOut);
 		});
-		this.refresh();
-	}
-
-	dispose() {
+	}
+
+	_releaseContainers() {
 		this._disposeDropdowns();
 		this._containers.forEach((container) => {
 			container.removeEventListener('click', this._boundClick);
@@ -50,15 +57,69 @@ class _pagination {
 			container.removeEventListener('keydown', this._boundKeydown);
 			container.removeEventListener('focusin', this._boundFocusIn);
 			container.removeEventListener('focusout', this._boundFocusOut);
-			if (container.hasAttribute(GENERATED_ATTRIBUTE)) container.remove();
-		});
+			if (container.hasAttribute(GENERATED_ATTRIBUTE)) container.remove();
+		});
+		this._containers = [];
+	}
+
+	dispose() {
+		this._releaseContainers();
+		this._externalVisibility.forEach((hidden, container) => { container.hidden = hidden; });
+		this._externalVisibility.clear();
 		this._rows().forEach((row) => {
 			row.hidden = row.getAttribute('data-vg-table-expand-hidden') === 'true'
 				|| row.hasAttribute('data-vg-table-filter-hidden');
 			row.removeAttribute('data-vg-table-page-row');
 		});
-		this._containers = [];
-	}
+		this._containers = [];
+	}
+
+	/** Обновляет только панели: не трогает строки, page/per, storage, scroll или onChange. */
+	updatePresentation(options) {
+		const focus = this._captureFocus();
+		const position = this._position();
+		this._updatingPresentation = true;
+		try {
+			this._options = {...this._options, ...options};
+			if (position !== this._position()) {
+				this._manageExternalVisibility = true;
+				this._releaseContainers();
+				this._containers = this._resolveContainers();
+				this._bindContainers();
+			}
+			this._renderControls();
+		} finally {
+			this._updatingPresentation = false;
+		}
+		this._restoreFocus(focus);
+	}
+
+	_captureFocus() {
+		const active = this._table.ownerDocument.activeElement;
+		const container = this._containers.find((item) => item.contains(active));
+		if (!container) return null;
+		const attribute = ['data-pagination-page', 'data-pagination-per-page', 'data-pagination-quick-input', 'data-pagination-quick-button']
+			.find((name) => active.hasAttribute(name));
+		return {
+			position: this._positionFor(container), attribute, value: attribute ? active.getAttribute(attribute) : null,
+			inputValue: active.tagName === 'INPUT' ? active.value : null,
+			start: active.selectionStart, end: active.selectionEnd,
+		};
+	}
+
+	_restoreFocus(focus) {
+		if (!focus) return;
+		const container = this._containers.find((item) => this._positionFor(item) === focus.position) || this._containers[0];
+		if (!container) return;
+		const matching = focus.attribute ? Array.from(container.querySelectorAll(`[${focus.attribute}]`))
+			.find((item) => !item.disabled && item.getAttribute(focus.attribute) === focus.value) : null;
+		const target = matching || container.querySelector('[aria-current="page"]');
+		target?.focus({preventScroll: true});
+		if (matching && focus.inputValue !== null) {
+			matching.value = focus.inputValue;
+			if (focus.start !== null && focus.start !== undefined) matching.setSelectionRange(focus.start, focus.end);
+		}
+	}
 
 	setPage(page, emit = false, source = 'api') {
 		const nextPage = this._clampPage(page);
@@ -131,7 +192,11 @@ class _pagination {
 			});
 		}
 
-		const markup = this._buildMarkup();
+		this._renderControls();
+	}
+
+	_renderControls() {
+		const markup = this._buildMarkup();
 		this._disposeDropdowns();
 		this._containers.forEach((container) => {
 			container.className = `vg-table-pagination vg-table-pagination--${this._positionFor(container)}`;
@@ -221,8 +286,10 @@ class _pagination {
 		return `<svg class="vg-table-page__ellipsis-chevron vg-table-page__ellipsis-chevron--${direction}" viewBox="0 0 20 20" focusable="false" aria-hidden="true">${paths}</svg>`;
 	}
 
-	_buildPages() {
-		const total = this._totalPages();
+	_buildPages() {
+		const total = this._totalPages();
+		const maxButtons = this._options.maxButtons;
+		if (Number.isInteger(maxButtons) && maxButtons >= 3) return this._buildLimitedPages(total, maxButtons);
 		const visible = Math.max(1, this._positiveInt(this._options.visible, 5));
 		const threshold = Math.max(1, this._positiveInt(this._options.threshold, 5));
 		if (this._options.ellipsis === false || total <= threshold || total <= visible + 2) {
@@ -237,8 +304,30 @@ class _pagination {
 		for (let page = start; page <= end; page += 1) pages.push(page);
 		if (end < total - 1) pages.push({direction: 'next'});
 		pages.push(total);
-		return pages;
-	}
+		return pages;
+	}
+
+	_buildLimitedPages(total, maximum) {
+		if (total <= maximum) return this._range(1, total);
+		if (maximum < 5 || this._options.ellipsis === false) {
+			const start = Math.max(1, Math.min(this._page - Math.floor(maximum / 2), total - maximum + 1));
+			return this._range(start, start + maximum - 1);
+		}
+		// Резервируем края и подбираем наибольшее окно, учитывая оба многоточия в лимите.
+		for (let count = maximum - 2; count >= 1; count -= 1) {
+			const start = Math.max(2, Math.min(this._page - Math.floor(count / 2), total - count));
+			const end = start + count - 1;
+			const pages = [1];
+			if (start === 3) pages.push(2);
+			else if (start > 3) pages.push({direction: 'prev'});
+			pages.push(...this._range(start, end));
+			if (end === total - 2) pages.push(total - 1);
+			else if (end < total - 2) pages.push({direction: 'next'});
+			pages.push(total);
+			if (pages.length <= maximum) return pages;
+		}
+		return [this._page];
+	}
 
 	_handleClick(event) {
 		const sizeOption = event.target.closest('[data-pagination-per-page-option]');
@@ -297,7 +386,8 @@ class _pagination {
 		if (input) input.value = String(this._perPage);
 	}
 
-	_handleFocusOut(event) {
+	_handleFocusOut(event) {
+		if (this._updatingPresentation) return;
 		const input = event.target.closest('[data-pagination-per-page]');
 		if (!input) return;
 		const related = event.relatedTarget instanceof Element ? event.relatedTarget : null;
@@ -323,10 +413,14 @@ class _pagination {
 	_resolveContainers() {
 		if (!this._host) return [];
 		const position = this._position();
-		const existing = Array.from(this._host.querySelectorAll('[data-vg-table-pagination]'));
-		if (existing.length) {
-			if (position === 'both') return existing;
-			return [existing.find((item) => item.getAttribute('data-position') === position) || existing[0]];
+		const existing = Array.from(this._host.querySelectorAll('[data-vg-table-pagination]'));
+		if (existing.length) {
+			const selected = position === 'both' ? existing : [existing.find((item) => item.getAttribute('data-position') === position) || existing[0]];
+			if (this._manageExternalVisibility) existing.forEach((container) => {
+				if (!this._externalVisibility.has(container)) this._externalVisibility.set(container, container.hidden);
+				container.hidden = !selected.includes(container);
+			});
+			return selected;
 		}
 
 		const positions = position === 'both' ? ['top', 'bottom'] : [position];