vgapp 1.5.6 → 1.5.7

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

package/app/modules/vgtoast/js/vgtoast.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: уведомления VGToast через Data API и JavaScript.
+ * Возможности: стек, AJAX, анимации, автоскрытие, перетаскивание и изменение размера.
+ */
+import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import {dismissTrigger, getSVG} from "../../module-fn";
 import Sanitize from "../../../utils/js/components/sanitize";
@@ -331,6 +335,7 @@ class VGToast extends BaseModule {
 	 */
 	show(relatedTarget) {
 		if (isDisabled(this._element)) return;
+		if (this._isShown() && !this._isHiding) return;
 
 		const element = this._element;
 		this._clearTimeout();
@@ -466,7 +471,7 @@ class VGToast extends BaseModule {
 		const elmsShown = Selectors.findAll(`.vg-toast.show.${stackClass}`)
 			.filter(el => {
 				const instance = VGToast.getInstance(el);
-				return instance?._params.stack.enable;
+				return instance && !instance._isHiding;
 			});
 
 		if (!this._params.stack.enable) {
@@ -478,8 +483,9 @@ class VGToast extends BaseModule {
 		}
 
 		// Ограничиваем по max
-		if (elmsShown.length >= this._params.stack.max) {
-			const excess = elmsShown.slice(0, elmsShown.length - this._params.stack.max + 1);
+		const max = Math.max(1, Number(this._params.stack.max) || 5);
+		if (elmsShown.length > max) {
+			const excess = elmsShown.slice(0, elmsShown.length - max);
 			excess.forEach(el => VGToast.getInstance(el).hide());
 		}
 
@@ -507,7 +513,7 @@ class VGToast extends BaseModule {
 		const visibleStack = Selectors.findAll(`.vg-toast.show.${stackClass}`)
 			.filter(el => {
 				const instance = VGToast.getInstance(el);
-				return instance?._params.stack.enable;
+				return instance && !instance._isHiding;
 			});
 		const elms = visibleStack.length ? visibleStack : stackItems.map(item => item.el);
 		let offset = 0;

package/app/modules/vgtooltip/js/vgtooltip.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: всплывающие подсказки и информационные popover VGApp.
+ * Возможности: Data API, позиционирование, события и очистка при удалении триггера.
+ */
+import BaseModule from "../../base-module";
 import {isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -80,8 +84,13 @@ class VGTooltip extends BaseModule {
 	constructor(element, params = {}) {
 		super(element, params);
 
-		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
-		this._tooltip = null;
+		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
+		// Геометрические массивы заменяются целиком, а не дополняют defaults.
+		const dataParams = this._getParams(element, {});
+		['offset', 'fallbackPlacements'].forEach(key => {
+			this._params[key] = [...(dataParams[key] ?? params[key] ?? defaultParams[key])];
+		});
+		this._tooltip = null;
 		this._isHiding = false;
 		this._showTimeout = null;
 		this._hideTimeout = null;
@@ -249,10 +258,11 @@ class VGTooltip extends BaseModule {
 			tooltip.classList.add('vg-tooltip-popover');
 		}
 
-		const inner = document.createElement('div');
-		inner.classList.add('vg-tooltip-inner');
-
-		if (this._params.content) {
+		const inner = document.createElement('div');
+		inner.classList.add('vg-tooltip-inner');
+		const content = this._params.content || this._element.dataset.vgContent || '';
+
+		if (content) {
 			const titleBlock = document.createElement('div');
 			titleBlock.classList.add('vg-tooltip-inner--title');
 
@@ -261,10 +271,10 @@ class VGTooltip extends BaseModule {
 
 			if (this._params.html) {
 				titleBlock.innerHTML = title;
-				contentBlock.innerHTML = this._params.content;
+				contentBlock.innerHTML = content;
 			} else {
 				titleBlock.textContent = title;
-				contentBlock.textContent = this._params.content;
+				contentBlock.textContent = content;
 			}
 
 			inner.append(titleBlock);

package/app/utils/js/components/file-icon.js

@@ -1,4 +1,8 @@
-const FILE_ICON_BY_EXT = {
+/**
+ * Описание: определение категории файла и соответствующей SVG-иконки.
+ * Возможности: распознаёт MIME-тип и расширение, поддерживает явные имена иконок и общий fallback.
+ */
+const FILE_ICON_BY_EXT = {
 	pdf: 'file-pdf',
 	doc: 'file-word',
 	docx: 'file-word',
@@ -34,7 +38,8 @@ const FILE_ICON_BY_EXT = {
 	tiff: 'file-image',
 	heic: 'file-image',
 	heif: 'file-image',
-	avif: 'file-image',
+	avif: 'file-image',
+	ico: 'file-image',
 	mp3: 'file-audio',
 	wav: 'file-audio',
 	ogg: 'file-audio',