vgapp 1.5.5 → 1.5.7

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];

package/app/modules/vgtable/js/_responsive.js

@@ -0,0 +1,79 @@
+/**
+ * Описание: адаптер общего Responsive для представления VGTable.
+ * Возможности: отбор безопасных параметров пагинации и события таблицы; границы, наследование и подписки делегируются Responsive.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+import {Responsive} from "../../../utils/js/components/responsive";
+
+const object = (value) => value && typeof value === 'object' && !Array.isArray(value);
+
+// Только представление: page/per, callbacks, storage и параметры запросов не принимаются.
+const paginationProfile = (value) => {
+	const result = {};
+	if (!object(value)) return result;
+	if (value.maxButtons === null || (Number.isInteger(value.maxButtons) && value.maxButtons >= 3)) result.maxButtons = value.maxButtons;
+	if (['left', 'center', 'right', 'between'].includes(value.align)) result.align = value.align;
+	if (['top', 'bottom', 'both'].includes(value.position)) result.position = value.position;
+	if (object(value.size)) {
+		result.size = {};
+		if (typeof value.size.enabled === 'boolean') result.size.enabled = value.size.enabled;
+		if (value.size.label === false || typeof value.size.label === 'string') result.size.label = value.size.label;
+	}
+	if (object(value.quick) && [true, false, 'auto'].includes(value.quick.enabled)) result.quick = {enabled: value.quick.enabled};
+	return result;
+};
+
+class _responsive {
+	constructor(table, options, onChange) {
+		this._table = table;
+		this._onChange = onChange;
+		this._responsive = new Responsive({breakpoints: options.breakpoints, window: table.ownerDocument.defaultView});
+		this._profiles = Object.fromEntries(Object.keys(this._responsive.breakpoints).map((name) => [name, paginationProfile(options[name]?.pagination)]));
+		this._breakpoint = null;
+		this._pagination = {};
+		this._width = 0;
+		this._valid = this._responsive.isValid();
+	}
+
+	init() {
+		if (!this._valid) {
+			console.warn('VGTable: responsive.breakpoints must start at xs: 0 and increase through xxl.');
+			return this;
+		}
+		this.refresh();
+		this._responsive.subscribe(() => this.refresh());
+		return this;
+	}
+
+	refresh(force = false) {
+		if (!this._valid || !this._responsive) return this.getState();
+		this._width = this._responsive.viewport().width;
+		const breakpoint = this._responsive.getBreakpointKey(this._width);
+		if (!force && breakpoint === this._breakpoint) return this.getState();
+		const previous = this._breakpoint;
+		this._breakpoint = breakpoint;
+		this._pagination = this._responsive.resolve(this._profiles, {}, this._width);
+		this._onChange();
+		if (previous !== null && previous !== breakpoint) {
+			EventHandler.trigger(this._table, 'responsivechange.vg.table', {...this.getState(), previous});
+		}
+		return this.getState();
+	}
+
+	getState() {
+		return {
+			breakpoint: this._breakpoint,
+			width: this._responsive?.viewport().width ?? this._width,
+			reason: this._valid ? null : 'invalid-breakpoints',
+			pagination: {...this._pagination, size: {...this._pagination.size}, quick: {...this._pagination.quick}},
+		};
+	}
+
+	dispose() {
+		this._width = this._responsive?.viewport().width ?? this._width;
+		this._responsive?.dispose();
+		this._responsive = null;
+	}
+}
+
+export default _responsive;

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

@@ -1,6 +1,6 @@
 /**
  * Описание: основной модуль базовых таблиц VGTable.
- * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, управление колонками и строками, сортировка, дерево, пагинация, выбор и panning.
+ * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, колонки и строки, сортировка, дерево, responsive-пагинация, выбор и panning.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -9,7 +9,8 @@ import Selectors from "../../../utils/js/dom/selectors";
 import _sorting from "./_sorting.js";
 import _panning from "./_panning.js";
 import _selection from "./_selection.js";
-import _pagination from "./_pagination.js";
+import _pagination from "./_pagination.js";
+import _responsive from "./_responsive.js";
 import _expandable from "./_expandable.js";
 import _stickyHeader from "./_sticky-header.js";
 import _fixedColumns from "./_fixed-columns.js";
@@ -63,7 +64,8 @@ class VGTable extends BaseModule {
 		this._panning = null;
 		this._selection = null;
 		this._expandable = null;
-		this._pagination = null;
+		this._pagination = null;
+		this._responsive = null;
 		this._filters = null;
 		this._search = null;
 		this._skeleton = null;
@@ -187,9 +189,17 @@ class VGTable extends BaseModule {
 			this._expandable.init();
 		}
 
-		// Включаем локальную или серверную пагинацию
-		if (!this._pagination && this._params.pagination.enabled === true) {
-			this._pagination = new _pagination(this._element, Object.assign({}, this._params.pagination, {
+		if (!this._responsive && this._params.responsive?.enabled === true) {
+			this._responsive = new _responsive(this._element, this._params.responsive, () => {
+				this._pagination?.updatePresentation(this._paginationOptions());
+			});
+			this._responsive.init();
+		}
+
+		// Включаем локальную или серверную пагинацию
+		if (!this._pagination && this._params.pagination.enabled === true) {
+			this._pagination = new _pagination(this._element, Object.assign({}, this._paginationOptions(), {
+				responsive: this._responsive?.getState().reason === null,
 				remote: this._isRemote,
 				onChange: (state) => this._handlePaginationChange(state),
 			}));
@@ -300,15 +310,27 @@ class VGTable extends BaseModule {
 		this._normalizeColumnsDataOptions();
 		this._normalizeRowReorderDataOptions();
 		if (this._remote) this._remote._options.labels = this._dictionary.remote || {};
-		this._pagination?.refresh?.();
+		this._pagination?.updatePresentation(this._paginationOptions());
 		this._expandable?.refresh?.();
 		this._columns?.refresh?.();
 		this._rowReorder?.refresh?.();
 		const state = this._states?.getState?.();
 		if (state) this._states.render(state.type);
 		EventHandler.trigger(this._element, 'localechange.vg.table', {locale: normalized});
-		return normalized;
-	}
+		return normalized;
+	}
+
+	/** Текущий брейкпоинт и накопленные переопределения; null при выключенном responsive. */
+	getResponsiveState() { return this._responsive?.getState() || null; }
+
+	/** Принудительно обновляет только адаптивное представление, без загрузки данных. */
+	refreshResponsive() { return this._responsive?.refresh(true) || null; }
+
+	_paginationOptions() {
+		const base = this._params.pagination;
+		const profile = this._responsive?.getState().pagination || {};
+		return {...base, ...profile, size: {...base.size, ...profile.size}, quick: {...base.quick, ...profile.quick}};
+	}
 
 	_mergeLocale(target, source) {
 		if (!target || !source || typeof source !== 'object') return target;
@@ -524,7 +546,11 @@ class VGTable extends BaseModule {
 		assign('ellipsis', (value) => { pagination.ellipsis = boolean(value); });
 		assign('ellipsis-hover', (value) => { pagination.ellipsisHover = boolean(value); });
 		assign('ellipsis-after', (value) => { pagination.threshold = number(value, pagination.threshold); });
-		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
+		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
+		assign('max-buttons', (value) => {
+			const parsed = Number(value);
+			pagination.maxButtons = Number.isInteger(parsed) && parsed >= 3 ? parsed : null;
+		});
 		assign('show-per-page', (value) => { pagination.size.enabled = boolean(value); });
 		assign('show-per-page-label', (value) => { pagination.size.label = boolean(value) ? 'Строк на странице' : false; });
 		assign('per-page-label', (value) => { pagination.size.label = value; });
@@ -1436,7 +1462,8 @@ class VGTable extends BaseModule {
 	/**
 	 * Очистка ресурсов
 	 */
-	dispose() {
+	dispose() {
+		this._responsive?.dispose();
 		if (this._remote) this._remote.dispose();
 		if (this._skeleton) this._skeleton.dispose();
 		if (this._urlState) this._urlState.dispose();

package/app/modules/vgtabs/js/vgtabs.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: вкладки VGTabs с декларативной и ручной инициализацией.
+ * Возможности: клавиатура, начальный hash, AJAX, отменяемые события и адаптивный индикатор.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import EventHandler from "../../../utils/js/dom/event";
 import {getNextActiveElement, isDisabled, mergeDeepObject} from "../../../utils/js/functions";
@@ -132,7 +136,7 @@ class VGTabs extends BaseModule {
 				once: true,
 				output: true,
 			},
-		}, this._params);
+		}, params || {});
 
 		this._parent = this._element.closest(SELECTOR.TAB_PANEL);
 		this._main_parent = this._parent?.closest(SELECTOR.TAB_CLASS) || null;
@@ -173,19 +177,19 @@ class VGTabs extends BaseModule {
 	show() {
 		const innerElem = this._element;
 
-		if (this._elemIsActive(innerElem)) return;
+		if (!innerElem || isDisabled(innerElem) || this._elemIsActive(innerElem)) return;
 
 		const activeElem = this._getActiveElem();
-		const relatedTarget = innerElem;
 
 		// События hide и show
-		const hideEvent = activeElem ? EventHandler.trigger(activeElem, EVENT_HIDE, {relatedTarget}) : null;
-		const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, {relatedTarget});
+		const hideEvent = activeElem ? EventHandler.trigger(activeElem, EVENT_HIDE, {relatedTarget: innerElem}) : null;
+		const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, {relatedTarget: activeElem});
 
 		if (showEvent.defaultPrevented || (hideEvent && hideEvent.defaultPrevented)) return;
 
 		this._deactivate(activeElem, innerElem);
-		this._activate(innerElem, relatedTarget);
+		this._activate(innerElem, activeElem);
+		this._updateSlider(innerElem);
 	}
 
 	/**
@@ -218,21 +222,28 @@ class VGTabs extends BaseModule {
 		const target = Selectors.getElementFromSelector(element);
 		if (target) this._activate(target, relatedTarget);
 
-		const complete = () => {
+		const complete = () => {
+			if (!this._element || !element.classList.contains(CLASS_NAME.ACTIVE)) return;
 			if (element.getAttribute('role') !== 'tab') {
 				element.classList.add(CLASS_NAME.SHOW);
 				return;
 			}
 
-			this._route((status, data) => {
-				EventHandler.trigger(this._element, EVENT_LOADED, { stats: status, data });
-			});
+			if (this._params.ajax.route && !this._isLoaded && !this._isLoading) {
+				this._isLoading = true;
+				const loaded = (status, data) => {
+					if (!this._element) return;
+					this._isLoading = false;
+					EventHandler.trigger(this._element, EVENT_LOADED, { stats: status, data });
+				};
+				this._route(loaded, error => loaded('error', error));
+			}
 
 			element.removeAttribute('tabindex');
 			element.setAttribute('aria-selected', 'true');
 			this._toggleDropDown(element, true);
 
-			EventHandler.trigger(element, EVENT_SHOWN, { relatedTarget }); // ← теперь relatedTarget определён
+			EventHandler.trigger(element, EVENT_SHOWN, { relatedTarget });
 		};
 
 		this._queueCallback(complete, element, element.classList.contains(CLASS_NAME.FADE));
@@ -252,7 +263,8 @@ class VGTabs extends BaseModule {
 		const target = Selectors.getElementFromSelector(element);
 		if (target) this._deactivate(target, relatedTarget);
 
-		const complete = () => {
+		const complete = () => {
+			if (!this._element || element.classList.contains(CLASS_NAME.ACTIVE)) return;
 			if (element.getAttribute('role') !== 'tab') {
 				element.classList.remove(CLASS_NAME.SHOW);
 				return;
@@ -300,13 +312,12 @@ class VGTabs extends BaseModule {
 	_setTabHash() {
 		if (!this._params.hash) return;
 
-		const url = document.location.toString();
-		if (!url.includes('#')) return;
-
-		const id = url.split('#')[1];
-		const element = Selectors.find(`[href="#${id}"]`, this._parent) ||
-			Selectors.find(`[data-vg-target="#${id}"]`, this._element) ||
-			null;
+		let hash = document.location.hash;
+		if (!hash) return;
+		try { hash = decodeURIComponent(hash); } catch { return; }
+		const element = this._getChildren().find(child =>
+			!isDisabled(child) && (child.getAttribute('href') === hash || child.getAttribute('data-vg-target') === hash)
+		);
 
 		if (element) {
 			VGTabs.getOrCreateInstance(element).show();
@@ -316,8 +327,8 @@ class VGTabs extends BaseModule {
 	/**
 	 * Инициализация слайдера-индикатора под вкладками
 	 */
-	_setInitialSlider() {
-		if (!this._params.slide) return;
+	_setInitialSlider() {
+		if (!this._params.slide || !this._main_parent) return;
 
 		let slider = Selectors.find(`.${CLASS_NAME.SLIDER}`, this._main_parent);
 		if (!slider) {
@@ -328,45 +339,58 @@ class VGTabs extends BaseModule {
 
 		this._main_parent.classList.add(CLASS_NAME.WITH_SLIDER);
 
-		const activeLink = Selectors.find(`.${CLASS_NAME.ACTIVE}`, this._parent);
-		if (!activeLink) return;
-
-		const {width, height} = window.getComputedStyle(activeLink);
-		activeLink.classList.add(CLASS_NAME.HOVER);
-
-		slider.style.width = width;
-		slider.style.height = height;
-		slider.style.left = `${activeLink.offsetLeft}px`;
-
-		// Наведение
-		EventHandler.on(this._main_parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, (event) => {
-			const target = event.target;
-			if (['A', 'AREA'].includes(target.tagName)) event.preventDefault();
-			if (isDisabled(target)) return;
-
-			const hover = Selectors.find(`.${CLASS_NAME.HOVER}`, this._parent);
-			if (hover) hover.classList.remove(CLASS_NAME.HOVER);
-			target.classList.add(CLASS_NAME.HOVER);
-
-			const {width, height} = window.getComputedStyle(target);
-			slider.style.width = width;
-			slider.style.height = height;
-			slider.style.left = `${target.offsetLeft}px`;
-		});
-
-		// Уход курсора
-		EventHandler.on(this._main_parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, () => {
-			const active = Selectors.find(`.${CLASS_NAME.ACTIVE}`, this._parent);
-			const {width, height} = window.getComputedStyle(active);
-
-			Selectors.findAll(`.${CLASS_NAME.HOVER}`, this._parent).forEach(el => el.classList.remove(CLASS_NAME.HOVER));
-			active.classList.add(CLASS_NAME.HOVER);
-
-			slider.style.width = width;
-			slider.style.height = height;
-			slider.style.left = `${active.offsetLeft}px`;
-		});
-	}
+		this._updateSlider(this._getActiveElem());
+		this._sliderOver = event => {
+			const target = event.delegateTarget;
+			if (target.closest(SELECTOR.TAB_PANEL) === this._parent && !isDisabled(target)) this._updateSlider(target);
+		};
+		this._sliderOut = () => this._updateSlider(this._getActiveElem());
+		// Только один владелец общих обработчиков на группу вкладок.
+		const owner = this._getChildren().some(child => VGTabs.getInstance(child)?._sliderOver && child !== this._element);
+		if (owner) {
+			this._sliderOver = null;
+			this._sliderOut = null;
+			return;
+		}
+		EventHandler.on(this._main_parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
+		EventHandler.on(this._main_parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
+		this._sliderResize = () => this._updateSlider(this._getActiveElem());
+		window.addEventListener('resize', this._sliderResize);
+		if (typeof ResizeObserver !== 'undefined') {
+			this._sliderObserver = new ResizeObserver(this._sliderResize);
+			this._sliderObserver.observe(this._parent);
+			this._getChildren().forEach(child => this._sliderObserver.observe(child));
+		}
+	}
+
+	_updateSlider(target) {
+		if (!target || !this._main_parent) return;
+		const slider = this._main_parent.querySelector(`.${CLASS_NAME.SLIDER}`);
+		if (!slider) return;
+		this._getChildren().forEach(child => child.classList.toggle(CLASS_NAME.HOVER, child === target));
+		const {width, height} = window.getComputedStyle(target);
+		Object.assign(slider.style, {width, height, left: `${target.offsetLeft}px`, top: `${target.offsetTop}px`});
+	}
+
+	dispose() {
+		if (!this._element) return;
+		const parent = this._main_parent;
+		const successor = this._sliderOver && this._getChildren()
+			.map(child => VGTabs.getInstance(child))
+			.find(instance => instance && instance !== this && instance._params.slide);
+		if (this._sliderOver) {
+			EventHandler.off(parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
+			EventHandler.off(parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
+			window.removeEventListener('resize', this._sliderResize);
+			this._sliderObserver?.disconnect();
+		}
+		super.dispose();
+		if (successor) successor._setInitialSlider();
+		else if (parent && !Selectors.findAll(SELECTOR.DATA_TOGGLE, parent).some(child => VGTabs.getInstance(child)?._params.slide)) {
+			parent.querySelector(`.${CLASS_NAME.SLIDER}`)?.remove();
+			parent.classList.remove(CLASS_NAME.WITH_SLIDER);
+		}
+	}
 
 	/**
 	 * Устанавливает базовые ARIA-атрибуты родителю
@@ -391,9 +415,9 @@ class VGTabs extends BaseModule {
 		if (outerElem !== child) {
 			this._setAttributeIfNotExists(outerElem, 'role', 'presentation');
 		}
-		if (!isActive) {
-			child.setAttribute('tabindex', '-1');
-		}
+		if (!isActive) {
+			child.setAttribute('tabindex', '-1');
+		} else child.removeAttribute('tabindex');
 		this._setAttributeIfNotExists(child, 'role', 'tab');
 		this._setInitialAttributesOnTargetPanel(child);
 	}
@@ -429,7 +453,8 @@ class VGTabs extends BaseModule {
 	 * @returns {HTMLElement[]}
 	 */
 	_getChildren() {
-		return Selectors.findAll(SELECTOR.INNER_ELEM, this._parent);
+		return Selectors.findAll(SELECTOR.INNER_ELEM, this._parent)
+			.filter(child => child.closest(SELECTOR.TAB_PANEL) === this._parent);
 	}
 
 	/**
@@ -490,4 +515,4 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
 	});
 });
 
-export default VGTabs;
+export default VGTabs;