vgapp 1.5.5 → 1.5.7

package/app/modules/vgselect/js/vgselect.js

@@ -1,9 +1,14 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: кастомный select с синхронизацией исходного поля и выпадающего списка.
+ * Возможности: поиск, группы, дерево, теги, AJAX-пагинация, события и освобождение ресурсов.
+ */
+import BaseModule from "../../base-module";
 import {
 	isDisabled,
 	isEmptyObj,
 	mergeDeepObject,
-	normalizeData,
+	normalizeData,
+	transliterate,
 } from "../../../utils/js/functions";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
@@ -73,10 +78,10 @@ class VGSelect extends BaseModule {
 			autosearch: true,
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
-			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
+			// - auto (default): choose top/bottom based on available space in overflow ancestor/viewport
 			// - top: force open upwards
 			// - bottom: force open downwards
-			position: 'none',
+			position: 'auto',
 			search: {
 				enabled: false,
 				route: '',
@@ -104,7 +109,9 @@ class VGSelect extends BaseModule {
 		}, params));
 
 		this._observer = null;
-		this._observerTimeout = null;
+		this._observerTimeout = null;
+		this._searchTimeout = null;
+		this._disposed = false;
 		this._visibilityTransitionId = 0;
 		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
 		this._searchTerm = '';
@@ -152,8 +159,9 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop, params = {}) {
-		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+	static buildListOptions(selector, drop, params = {}) {
+		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const controls = list ? [...list.querySelectorAll(`.${CLASS_NAME_LOAD_MORE}, .${CLASS_NAME_LOADING}`)] : [];
 		if (!list) {
 			list = document.createElement('ul');
 			Classes.add(list, CLASS_NAME_LIST);
@@ -190,7 +198,8 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		return list;
+		controls.forEach(control => list.appendChild(control));
+		return list;
 	}
 
 	/**
@@ -459,17 +468,16 @@ class VGSelect extends BaseModule {
 		search.appendChild(searchInput);
 		this._drop.insertBefore(search, this._drop.firstChild);
 
-		let searchTimeout;
-		searchInput.addEventListener('input', (e) => {
+		searchInput.addEventListener('input', (e) => {
 			const term = e.target.value.trim();
 			const params = this._params;
 
 			this._callCallback('onSearch', { term });
 			if (params.search.remote && params.search.route) {
-				if (term.length < (params.search.minterm || 1)) return;
-
-				clearTimeout(searchTimeout);
-				searchTimeout = setTimeout(() => {
+				clearTimeout(this._searchTimeout);
+				this._remoteSearchAbortController?.abort();
+				if (term.length < (params.search.minterm || 1)) return;
+				this._searchTimeout = setTimeout(() => {
 					this._fetchRemoteData(term);
 				}, params.search.delay || 300);
 			} else {
@@ -520,7 +528,7 @@ class VGSelect extends BaseModule {
 		if (searchInput) searchInput.focus();
 
 		return this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId || !this._isShown()) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId || !this._isShown()) return;
 			this._updateDropdownPlacement();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 			this._triggerEvent(EVENT_KEY_OPEN);
@@ -552,7 +560,7 @@ class VGSelect extends BaseModule {
 		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
 
 		this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId) return;
 			this._element.classList.remove(CLASS_NAME_SHOW);
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
 			this._triggerEvent(EVENT_KEY_CLOSE);
@@ -646,16 +654,21 @@ class VGSelect extends BaseModule {
 	/**
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
-	dispose() {
+	dispose() {
+		if (this._disposed) return;
 		this._visibilityTransitionId++;
 		if (this._observer) {
 			this._observer.disconnect();
 			this._observer = null;
 		}
 		clearTimeout(this._observerTimeout);
-		this._observerTimeout = null;
-		this._teardownDropdownPlacement();
-		super.dispose();
+		this._observerTimeout = null;
+		clearTimeout(this._searchTimeout);
+		this._remoteSearchAbortController?.abort();
+		if (this._isShown() && 'ontouchstart' in document.documentElement) document.body.style.pointerEvents = '';
+		this._teardownDropdownPlacement();
+		super.dispose();
+		this._disposed = true;
 	}
 
 	_setupDropdownPlacement() {
@@ -691,9 +704,9 @@ class VGSelect extends BaseModule {
 
 	_getPositionMode() {
 		const raw = this._params?.position;
-		const mode = raw == null ? 'none' : String(raw).trim().toLowerCase();
+		const mode = raw == null ? 'auto' : String(raw).trim().toLowerCase();
 		if (mode === 'auto' || mode === 'top' || mode === 'bottom' || mode === 'none') return mode;
-		return 'none';
+		return 'auto';
 	}
 
 	_getOverflowAncestor(startEl) {
@@ -764,23 +777,28 @@ class VGSelect extends BaseModule {
 	 */
 	static destroy(select) {
 		const container = select.nextElementSibling;
-		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
-			container.remove();
-		}
+		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
+			VGSelect.getInstance(container)?.dispose();
+			container.remove();
+		}
+		delete select.dataset.inited;
 	}
 
 	/**
 	 * Обновляет отображаемое значение (текст, теги)
 	 * @param {HTMLSelectElement} select - Исходный <select>
 	 */
-	static updateUI(select) {
+	static updateUI(select) {
 		const container = select.nextElementSibling;
 		if (!container || !container.classList.contains(CLASS_NAME_CONTAINER)) return;
 
 		const current = container.querySelector(SELECTOR_CURRENT);
 		const placeholder = select.dataset.placeholder || '';
 		const isMultiple = select.multiple;
-		const instance = VGSelect.getInstance(container);
+		const instance = VGSelect.getInstance(container);
+		container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(item => {
+			item.classList.toggle('selected', !!select.options[Number(item.dataset.index)]?.selected);
+		});
 
 		if (isMultiple) {
 			const tags = current.querySelector(`.${CLASS_NAME_TAGS}`);
@@ -797,8 +815,12 @@ class VGSelect extends BaseModule {
 				instance?._callCallback('onClear');
 			}
 
-			if (selected.length === 0) {
-				input.placeholder = placeholder;
+			if (selected.length === 0) {
+				input.placeholder = placeholder;
+				const label = document.createElement('span');
+				label.className = CLASS_NAME_PLACEHOLDER;
+				label.textContent = placeholder;
+				tags.insertBefore(label, input);
 			} else {
 				input.placeholder = '';
 				selected.forEach(opt => {
@@ -983,15 +1005,16 @@ class VGSelect extends BaseModule {
 	_initLoadMoreButton() {
 		if (!this._params.search?.pagination || !this._params.search.remote) return;
 
-		const list = this._element.querySelector(SELECTOR_LIST);
-		if (!list) return;
+		const list = this._element.querySelector(SELECTOR_LIST);
+		if (!list) return;
+		if (list.querySelector(SELECTOR_LOAD_MORE_BTN)) return;
 
 		const btn = document.createElement('li');
 		btn.className = CLASS_NAME_LOAD_MORE;
 		btn.style.textAlign = 'center';
 		btn.style.padding = '8px';
 		btn.style.cursor = 'pointer';
-		btn.style.color = '#007bff';
+		btn.style.color = 'var(--vg-primary-color, #007bff)';
 		btn.style.fontSize = '14px';
 		btn.style.fontWeight = '500';
 		btn.textContent = this._params.search.loadMoreText;
@@ -1042,9 +1065,10 @@ class VGSelect extends BaseModule {
 	 * Загружает следующую страницу данных по клику
 	 * @private
 	 */
-	async _loadNextPage() {
+	async _loadNextPage() {
 		const { route, pageParam = 'page', termParam = 'q', perpage = 20 } = this._params.search;
-		const nextPage = this._currentPage + 1;
+		const nextPage = this._currentPage + 1;
+		const requestId = this._remoteSearchRequestId;
 
 		const url = new URL(route, window.location.origin);
 		url.searchParams.set(termParam, this._searchTerm);
@@ -1055,9 +1079,11 @@ class VGSelect extends BaseModule {
 		this._showLoading(true);
 		this._hideLoadMoreButton(true);
 
-		try {
-			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
-			const data = await res.json();
+		try {
+			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = await res.json();
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 
 			if (Array.isArray(data.results)) {
 				VGSelect.addOptions(this._element.previousElementSibling, data, { preserve: true });
@@ -1072,13 +1098,16 @@ class VGSelect extends BaseModule {
 				this._callCallback('onLoadNext', { page: this._currentPage, data });
 				this._triggerEvent(EVENT_KEY_LOAD_NEXT, { page: this._currentPage, term: this._searchTerm });
 			}
-		} catch (err) {
+		} catch (err) {
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 			console.error('VGSelect: Failed to load next page', err);
 			this._triggerEvent(EVENT_KEY_ERROR, { error: 'Pagination fetch failed', term: this._searchTerm });
 			this._hideLoadMoreButton(false); // оставить кнопку при ошибке
-		} finally {
-			this._showLoading(false);
-			this._loading = false;
+		} finally {
+			if (!this._disposed && requestId === this._remoteSearchRequestId) {
+				this._showLoading(false);
+				this._loading = false;
+			}
 		}
 	}
 
@@ -1100,7 +1129,8 @@ class VGSelect extends BaseModule {
 		// Обновляем текущее "желательное" состояние
 		this._searchTerm = term;
 		this._currentPage = 1;
-		this._totalPages = null;
+		this._totalPages = null;
+		this._loading = false;
 
 		// Отменяем предыдущий запрос (если ещё летит)
 		if (this._remoteSearchAbortController) {
@@ -1120,10 +1150,14 @@ class VGSelect extends BaseModule {
 			headers: { 'Content-Type': 'application/json' },
 			signal
 		})
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.json();
+			})
 			.then(data => {
 				// Если прилетел не самый свежий ответ — игнорируем
-				if (requestId !== this._remoteSearchRequestId) return;
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+				if (!Array.isArray(data.results)) throw new Error('Invalid results');
 
 				// Если пользователь уже ввёл другой текст — тоже игнорируем
 				const liveTerm = searchInput ? searchInput.value.trim() : '';
@@ -1172,7 +1206,8 @@ class VGSelect extends BaseModule {
 					this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_ACTIVE);
 				}
 			})
-			.catch(err => {
+			.catch(err => {
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 				// Abort — нормальная ситуация при быстром вводе
 				if (err && (err.name === 'AbortError')) return;
 
@@ -1182,7 +1217,7 @@ class VGSelect extends BaseModule {
 			})
 			.finally(() => {
 				// Лоадер убираем только для последнего актуального запроса
-				if (requestId === this._remoteSearchRequestId) {
+				if (!this._disposed && requestId === this._remoteSearchRequestId) {
 					this._showLoading(false);
 				}
 			});
@@ -1281,8 +1316,9 @@ class VGSelect extends BaseModule {
 
 		if (isRebuild) {
 			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop, instance?._params || {});
-			instance?._syncSearch();
+			VGSelect.buildListOptions(select, drop, instance?._params || {});
+			instance?._syncSearch();
+			this.updateUI(select);
 			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);
@@ -1294,21 +1330,29 @@ class VGSelect extends BaseModule {
 	 * @param {string} term - Поисковый запрос
 	 * @private
 	 */
-	_filterLocalOptions(term) {
-		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
-		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-
-		if (!term) {
-			options.forEach(el => el.hidden = false);
-			return;
-		}
-
-		term = term.toLowerCase();
-		options.forEach(el => {
-			const text = el.textContent.toLowerCase();
-			el.hidden = !text.includes(term);
-		});
-	}
+	_filterLocalOptions(term) {
+		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
+		term = term.toLowerCase();
+		const search = [term, transliterate(term), transliterate(term, true)];
+		let results = 0;
+		options.forEach(el => {
+			const text = el.textContent.toLowerCase();
+			const option = this._element.previousElementSibling.options[Number(el.dataset.index)];
+			const empty = option?.value === '' && text.trim() === '';
+			const visible = !empty && (!term || search.some(value => text.includes(value)));
+			el.hidden = !visible;
+			el.style.display = visible ? '' : 'none';
+			if (visible) results++;
+		});
+		list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`).forEach(group => {
+			const visible = [...group.querySelectorAll(`.${CLASS_NAME_OPTION}`)].some(option => !option.hidden);
+			group.hidden = !visible;
+			group.style.display = visible ? '' : 'none';
+		});
+		this._triggerEvent(`${NAME_KEY}.search`, {query: term, results});
+		this._callCallback('onSearch', {query: term, results});
+	}
 }
 
 _handlersVGSelect();

package/app/modules/vgselect/scss/vgselect.scss

@@ -11,7 +11,7 @@
 @use "variables" as vars;
 
 select {
-	&.vg-select {
+	&.vg-select[data-inited="true"] {
 		position: absolute;
 		left: 0;
 		top: 0;

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: боковые панели VGSidebar с декларативным и программным управлением.
+ * Возможности: четыре стороны экрана, backdrop, прокрутка, URL-хэш, AJAX, события и доступность.
+ */
+import BaseModule from "../../base-module";
 import { isDisabled, isVisible, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import { dismissTrigger } from "../../module-fn";
@@ -211,7 +215,8 @@ class VGSidebar extends BaseModule {
 			EventHandler.on(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
 
-		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.removeAttribute('aria-hidden');
 		document.body.classList.add(CLASS_NAME_OPEN);
 
 		const completeCallback = () => {
@@ -237,7 +242,8 @@ class VGSidebar extends BaseModule {
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-hidden', 'true');
 		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
 		if (!remainingOpenSidebars.length) {
 			document.body.classList.remove(CLASS_NAME_OPEN);
@@ -288,13 +294,17 @@ class VGSidebar extends BaseModule {
 	 * Очищает ресурсы модуля.
 	 * @override
 	 */
-	dispose() {
-		super.dispose();
-		EventHandler.off(this._element, EVENT_KEYS.HIDE);
+	dispose() {
+		if (!this._element) return;
+		EventHandler.off(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
+		EventHandler.off(this._element, EVENT_KEYS.HIDE);
 		if (this._showPopstateHandler) {
 			EventHandler.off(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
-		this._scrollBar.reset();
+		if (!VGSidebar.getOpenSidebars(this._element).length && !Backdrop.isActive()) {
+			this._scrollBar.reset();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -311,15 +321,16 @@ class VGSidebar extends BaseModule {
 	 * @private
 	 */
 	_addEventListeners() {
-		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, (event) => {
-			if (event.key !== 'Escape') return;
+		this._keydownHandler = (event) => {
+			if (event.key !== 'Escape' || !this._isShown()) return;
 
 			if (this._params.keyboard) {
 				this.hide();
 			} else {
 				EventHandler.trigger(this._element, EVENT_KEYS.HIDE_PREVENTED);
 			}
-		});
+		};
+		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
 	}
 }
 

package/app/modules/vgspy/js/vgspy.js

@@ -1,5 +1,9 @@
-import BaseModule from "../../base-module";
-import { mergeDeepObject, getElement, isDisabled, isVisible } from "../../../utils/js/functions";
+/**
+ * Описание: отслеживание активных секций и навигация по якорям.
+ * Возможности: Data API, нативная и виртуальная прокрутка, вложенные меню и обновление секций.
+ */
+import BaseModule from "../../base-module";
+import { getElement, isDisabled, isVisible, normalizeData } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 
@@ -52,7 +56,7 @@ class VGSpy extends BaseModule {
 		 * @property {number[]|string} threshold - пороги видимости (0.1, 0.5, 1)
 		 */
 		this._params = this._configAfterMerge(
-			mergeDeepObject(
+			Object.assign(
 				{
 					offset: null, // Устаревшее, для обратной совместимости
 					rootMargin: '0px 0px -25%',
@@ -60,7 +64,8 @@ class VGSpy extends BaseModule {
 					target: this._element,
 					threshold: [0.1, 0.5, 1],
 				},
-				params
+				params,
+				this._getDataOptions()
 			)
 		);
 
@@ -130,15 +135,27 @@ class VGSpy extends BaseModule {
 	 * Ключ модуля (для хранения в data)
 	 * @returns {string}
 	 */
-	static get NAME_KEY() {
-		return NAME_KEY;
-	}
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	_getDataOptions() {
+		const options = {};
+		for (const name of ['target', 'offset', 'rootMargin', 'smoothScroll', 'threshold']) {
+			const attribute = `data-${name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
+			if (this._element.hasAttribute(attribute)) {
+				options[name] = normalizeData(this._element.getAttribute(attribute));
+			}
+		}
+		return options;
+	}
 
 	/**
 	 * Инициализирует или перезапускает модуль: находит ссылки и секции, создаёт observer
 	 */
-	refresh() {
-		this._initializeTargetsAndObservables();
+	refresh() {
+		this._process(null);
+		this._initializeTargetsAndObservables();
 		this._updateRootElement();
 		this._maybeEnableSmoothScroll();
 
@@ -163,8 +180,8 @@ class VGSpy extends BaseModule {
 
 		// Smooth Scrollbar can be initialized after the spy; retry once on the next tick.
 		if (this._rootElement && !this._isScrollableSelf(this._rootElement) && window.Scrollbar) {
-			setTimeout(() => {
-				if (this._scrollbar) return;
+			setTimeout(() => {
+				if (!this._element || this._scrollbar) return;
 				this._updateSmoothScrollbar();
 				if (this._scrollbar) this._setupScrollbarTracking();
 			}, 0);
@@ -356,7 +373,9 @@ class VGSpy extends BaseModule {
 		return window.scrollY || document.documentElement.scrollTop || 0;
 	}
 
-	dispose() {
+	dispose() {
+		if (!this._element) return;
+		this._process(null);
 		if (this._observer) {
 			this._observer.disconnect();
 		}
@@ -415,8 +434,9 @@ class VGSpy extends BaseModule {
 			// If the target section is currently hidden (tabs/collapses/lazy layout),
 			// don't hijack the click; allow UI to reveal it, then retry.
 			if (!isVisible(section)) {
-				setTimeout(() => {
-					const revealed = Selectors.findID(id);
+				setTimeout(() => {
+					if (!this._element) return;
+					const revealed = Selectors.findID(id);
 					if (!revealed || !isVisible(revealed)) return;
 
 					this._targetLinks.set(revealed.id, link);
@@ -505,10 +525,10 @@ class VGSpy extends BaseModule {
 		const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop;
 		this._previousScrollData.parentScrollTop = parentScrollTop;
 
-		for (const entry of entries) {
-			if (!entry.isIntersecting) {
-				this._clearActiveClass(getTargetLink(entry));
-				continue;
+		for (const entry of entries) {
+			if (!entry.isIntersecting) {
+				if (getTargetLink(entry) === this._activeTarget) this._process(null);
+				continue;
 			}
 
 			const entryTop = this._getSectionTop(entry.target);
@@ -516,7 +536,7 @@ class VGSpy extends BaseModule {
 			const shouldActivate =
 				(userScrollsDown && isEntryBelow) || (!userScrollsDown && !isEntryBelow);
 
-			if (shouldActivate) {
+			if (shouldActivate || !this._activeTarget) {
 				this._previousScrollData.visibleEntryTop = entryTop;
 				this._process(getTargetLink(entry));
 			}
@@ -595,7 +615,7 @@ class VGSpy extends BaseModule {
 		parent.classList.remove(CLASS_NAME_ACTIVE);
 
 		const activeLinks = Selectors.findAll(
-			`[href].${CLASS_NAME_ACTIVE}, [data-vg-target].${CLASS_NAME_ACTIVE}`,
+			`[href].${CLASS_NAME_ACTIVE}, [data-vg-target].${CLASS_NAME_ACTIVE}, ${SELECTOR_DROPDOWN_TOGGLE}.${CLASS_NAME_ACTIVE}`,
 			parent
 		);
 		for (const link of activeLinks) {
@@ -603,8 +623,9 @@ class VGSpy extends BaseModule {
 		}
 	}
 
-	_getTargetIdFromTrigger(trigger) {
-		if (!trigger || typeof trigger.getAttribute !== 'function') return null;
+	_getTargetIdFromTrigger(trigger) {
+		if (!trigger || typeof trigger.getAttribute !== 'function') return null;
+		if (isDisabled(trigger) || trigger.matches(SELECTOR_DROPDOWN_TOGGLE)) return null;
 
 		const dataTarget = (trigger.getAttribute('data-vg-target') || '').trim();
 		const href = (trigger.getAttribute('href') || '').trim();

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: {