vgapp 1.5.6 → 1.5.8

package/app/modules/vgsidebar/scss/_variables.scss

@@ -1,6 +1,6 @@
-@use "../../../utils/scss" as vg;
-
-$sidebar-map: (
+@use "../../../utils/scss" as vg;
+
+$sidebar-map: (
 		horizontal: (
 				width: 400px,
 				height: 100vh,
@@ -9,13 +9,13 @@ $sidebar-map: (
 				width: 100vw,
 				height: 30vh,
 		),
-		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
-		color:                     var(--vg-text-color, #{vg.$color}),
-		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
+		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-height:             60px,
 		footer-height:             70px,
 		padding:                   1rem,
-		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
-		z-index:                   vg.$sidebar-index,
-		transition:                vg.$transition-base,
-) !default;
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		z-index:                   vg.$sidebar-index,
+		transition:                vg.$transition-base,
+) !default;

package/app/modules/vgsidebar/scss/vgsidebar.scss

@@ -6,12 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-sidebar {
-	@include vg.mix-vars('sidebar', vars.$sidebar-map);
+	@include vg.mix-vars('sidebar', vars.$sidebar-map);
 	position: fixed;
 	width: auto;
 	height: auto;
@@ -90,4 +90,4 @@
 		padding: var(--vg-sidebar-padding);
 		border-top: var(--vg-sidebar-border);
 	}
-}
+}

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

@@ -1,5 +1,9 @@
+/**
+ * Описание: отслеживание активных секций и навигация по якорям.
+ * Возможности: Data API, нативная и виртуальная прокрутка, вложенные меню и обновление секций.
+ */
 import BaseModule from "../../base-module";
-import { mergeDeepObject, getElement, isDisabled, isVisible } from "../../../utils/js/functions";
+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()
 			)
 		);
 
@@ -134,10 +139,22 @@ class VGSpy extends BaseModule {
 		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._process(null);
 		this._initializeTargetsAndObservables();
 		this._updateRootElement();
 		this._maybeEnableSmoothScroll();
@@ -164,7 +181,7 @@ 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;
+				if (!this._element || this._scrollbar) return;
 				this._updateSmoothScrollbar();
 				if (this._scrollbar) this._setupScrollbarTracking();
 			}, 0);
@@ -357,6 +374,8 @@ class VGSpy extends BaseModule {
 	}
 
 	dispose() {
+		if (!this._element) return;
+		this._process(null);
 		if (this._observer) {
 			this._observer.disconnect();
 		}
@@ -416,6 +435,7 @@ class VGSpy extends BaseModule {
 			// don't hijack the click; allow UI to reveal it, then retry.
 			if (!isVisible(section)) {
 				setTimeout(() => {
+					if (!this._element) return;
 					const revealed = Selectors.findID(id);
 					if (!revealed || !isVisible(revealed)) return;
 
@@ -507,7 +527,7 @@ class VGSpy extends BaseModule {
 
 		for (const entry of entries) {
 			if (!entry.isIntersecting) {
-				this._clearActiveClass(getTargetLink(entry));
+				if (getTargetLink(entry) === this._activeTarget) this._process(null);
 				continue;
 			}
 
@@ -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) {
@@ -605,6 +625,7 @@ class VGSpy extends BaseModule {
 
 	_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/_filters.js

@@ -2,7 +2,8 @@
  * Описание: форма локальных и remote-фильтров VGTable.
  * Возможности: auto/manual применение, debounce, операторы, reset и публичное состояние.
  */
-import EventHandler from "../../../utils/js/dom/event";
+import EventHandler from "../../../utils/js/dom/event";
+import VGSelect from "../../vgselect/js/vgselect";
 
 const EVENT_CHANGE = 'filterschange.vg.table';
 
@@ -112,11 +113,14 @@ class _filters {
 		return this.getState();
 	}
 
-	reset(options = {}) {
-		this._controls.forEach((control) => this._resetControl(control));
-		if (options.emit !== false) this._emit(String(options.source || 'reset'));
-		return this.getState();
-	}
+	reset(options = {}) {
+		this._controls.forEach((control) => {
+			this._resetControl(control);
+			if (control.tagName === 'SELECT') VGSelect.updateUI(control);
+		});
+		if (options.emit !== false) this._emit(String(options.source || 'reset'));
+		return this.getState();
+	}
 
 	_handleInput(event) {
 		if (!this._isControl(event.target) || this._isManual()) return;

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,16 +21,16 @@ const TABLE_CONTAINER_SELECTOR = '.vg-table-container';
 // Маркер container, созданного компонентом. Варианты: пустой data-атрибут.
 const GENERATED_TABLE_CONTAINER_ATTRIBUTE = 'data-vg-table-generated-container';
 
-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: {},
-	},
+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}}}.
@@ -368,9 +368,9 @@ const DEFAULT_OPTIONS = {
 		// Задаёт число страниц, после которого разрешены многоточие и quick='auto'. Варианты: целое число >= 1.
 		threshold: 5,
 		// Задаёт максимальное число соседних страниц между первой и последней. Варианты: целое число >= 1.
-		visible: 5,
-		// Лимит номеров и многоточий без prev/next; null сохраняет visible/threshold. Data API: data-pagination-max-buttons.
-		maxButtons: null,
+		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, лимит кнопок, responsive-представление без запросов, многоточия, быстрый переход и сохранение.
+ * Возможности: выбор страницы и размера, серверная meta, лимит кнопок, responsive-представление без запросов, многоточия, быстрый переход и сохранение.
  */
 import EventHandler from "../../../utils/js/dom/event";
 import VGDropdown from "../../vgdropdown";
@@ -16,10 +16,10 @@ class _pagination {
 		this._options = options;
 		this._host = table.closest('.vg-table-wrapper') || table.parentElement;
 		this._containers = [];
-		this._dropdowns = [];
-		this._externalVisibility = new Map();
-		this._manageExternalVisibility = options.responsive === true;
-		this._updatingPresentation = false;
+		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;
@@ -32,24 +32,24 @@ class _pagination {
 		this._boundFocusOut = this._handleFocusOut.bind(this);
 	}
 
-	init() {
-		this._restoreState();
-		this._containers = this._resolveContainers();
-		this._bindContainers();
-		this.refresh();
-	}
-
-	_bindContainers() {
-		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);
 		});
-	}
-
-	_releaseContainers() {
+	}
+
+	_releaseContainers() {
 		this._disposeDropdowns();
 		this._containers.forEach((container) => {
 			container.removeEventListener('click', this._boundClick);
@@ -57,69 +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();
-		});
-		this._containers = [];
-	}
-
-	dispose() {
-		this._releaseContainers();
-		this._externalVisibility.forEach((hidden, container) => { container.hidden = hidden; });
-		this._externalVisibility.clear();
+			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 = [];
-	}
-
-	/** Обновляет только панели: не трогает строки, 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);
-		}
-	}
+		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);
@@ -192,11 +192,11 @@ class _pagination {
 			});
 		}
 
-		this._renderControls();
-	}
-
-	_renderControls() {
-		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)}`;
@@ -286,10 +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();
-		const maxButtons = this._options.maxButtons;
-		if (Number.isInteger(maxButtons) && maxButtons >= 3) return this._buildLimitedPages(total, maxButtons);
+	_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) {
@@ -304,30 +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;
-	}
-
-	_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];
-	}
+		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]');
@@ -386,8 +386,8 @@ class _pagination {
 		if (input) input.value = String(this._perPage);
 	}
 
-	_handleFocusOut(event) {
-		if (this._updatingPresentation) return;
+	_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;
@@ -413,14 +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) {
-			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 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];