vgapp 1.2.2 → 1.2.3

package/app/modules/vgspy/readme.md

@@ -47,10 +47,10 @@
 |--------|------|-------------|----------|
 | `offset` | `number` | `null` | *(устарело)* Смещение активации (в пикселях). Используйте `rootMargin` вместо этого. |
 | `rootMargin` | `string` | `'0px 0px -25%'` | Отступы для `IntersectionObserver`. Управляет, насколько "внутрь" должна зайти секция, чтобы стать активной. |
-| `smoothScroll` | `boolean` | `true` | Включить плавную прокрутку при клике на якорные ссылки. |
-| `target` | `HTMLElement \| string` | элемент с `data-vg-toggle="spy"` | Контейнер, внутри которого происходит прокрутка. Если не указан — используется `window`. |
-| `scrollbar` | `Object \| null` | `null` | Инстанс `smooth-scrollbar` или Scrollbar API (если `smooth-scrollbar` импортирован как модуль и не лежит в `window.Scrollbar`). |
-| `threshold` | `number[] \| string` | `[0.1, 0.5, 1]` | Пороги видимости (от 0 до 1), при которых срабатывает активация. Можно передать строку: `'0.1, 0.5, 1'`. |
+| `smoothScroll` | `boolean` | `true` | Включить плавную прокрутку при клике на якорные ссылки. |
+| `target` | `HTMLElement \| string` | элемент с `data-vg-toggle="spy"` | Контейнер, внутри которого происходит прокрутка. Если не указан — используется `window`. |
+| `scrollbar` | `Object \| null` | `null` | Инстанс `smooth-scrollbar` или Scrollbar API (если `smooth-scrollbar` импортирован как модуль и не лежит в `window.Scrollbar`). |
+| `threshold` | `number[] \| string` | `[0.1, 0.5, 1]` | Пороги видимости (от 0 до 1), при которых срабатывает активация. Можно передать строку: `'0.1, 0.5, 1'`. |
 
 ---
 
@@ -86,29 +86,29 @@
 
 ---
 
-## 📚 Заметки
-
-- Убедитесь, что все целевые секции имеют `id`, соответствующий `href` ссылки.
-- Секции должны быть видимы (`display: block`, `visibility: visible`).
-- Работает с динамически добавленным контентом, но требует вызова `refresh()` после вставки.
-- Если прокрутка виртуальная (например, `smooth-scrollbar`), передайте `target` как контейнер, на который был инициализирован `smooth-scrollbar`, и при модульном импорте также передайте `scrollbar`.
-
-Пример (модульный импорт `smooth-scrollbar`):
-
-```js
-import Scrollbar from 'smooth-scrollbar';
-import VGSpy from './app/modules/vgspy';
-
-const scrollRoot = document.querySelector('.my-scroll-root');
-Scrollbar.init(scrollRoot);
-
-VGSpy.getOrCreateInstance(document.querySelector('[data-vg-toggle="spy"]'), {
-  target: scrollRoot,
-  scrollbar: Scrollbar,
-});
-```
-
----
+## 📚 Заметки
+
+- Убедитесь, что все целевые секции имеют `id`, соответствующий `href` ссылки.
+- Секции должны быть видимы (`display: block`, `visibility: visible`).
+- Работает с динамически добавленным контентом, но требует вызова `refresh()` после вставки.
+- Если прокрутка виртуальная (например, `smooth-scrollbar`), передайте `target` как контейнер, на который был инициализирован `smooth-scrollbar`, и при модульном импорте также передайте `scrollbar`.
+
+Пример (модульный импорт `smooth-scrollbar`):
+
+```js
+import Scrollbar from 'smooth-scrollbar';
+import VGSpy from './app/modules/vgspy';
+
+const scrollRoot = document.querySelector('.my-scroll-root');
+Scrollbar.init(scrollRoot);
+
+VGSpy.getOrCreateInstance(document.querySelector('[data-vg-toggle="spy"]'), {
+  target: scrollRoot,
+  scrollbar: Scrollbar,
+});
+```
+
+---
 
 
 ## 📝 Лицензия
@@ -119,4 +119,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

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

@@ -1,11 +1,11 @@
 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";
-import {execute, isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
-import Selectors from "../../../utils/js/dom/selectors";
-import VGToastDrag from "./vgtoast.drag";
-import VGToastResize from "./vgtoast.resize";
+import EventHandler from "../../../utils/js/dom/event";
+import {dismissTrigger, getSVG} from "../../module-fn";
+import Sanitize from "../../../utils/js/components/sanitize";
+import {execute, isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
+import Selectors from "../../../utils/js/dom/selectors";
+import VGToastDrag from "./vgtoast.drag";
+import VGToastResize from "./vgtoast.resize";
 
 /**
  * @constant {string} NAME - Имя модуля.
@@ -55,15 +55,15 @@ const EVENT_KEY_LOADED   = `${NAME_KEY}.loaded`;
 const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
 const EVENT_KEY_HIDE_PREVENTED  = `hidePrevented.${NAME_KEY}`;
 const EVENT_KEY_CLICK_DATA_API  = `click.${NAME_KEY}.data.api`;
-const EVENT_KEY_POINTERDOWN_INTERACTION = `pointerdown.interaction.${NAME_KEY}`;
-const EVENT_KEY_POINTERUP_INTERACTION = `pointerup.interaction.${NAME_KEY}`;
-const EVENT_KEY_POINTERCANCEL_INTERACTION = `pointercancel.interaction.${NAME_KEY}`;
-const TOAST_ICON_MAP = {
-	success: 'success',
-	error: 'danger',
-	warning: 'warning',
-	info: 'info',
-};
+const EVENT_KEY_POINTERDOWN_INTERACTION = `pointerdown.interaction.${NAME_KEY}`;
+const EVENT_KEY_POINTERUP_INTERACTION = `pointerup.interaction.${NAME_KEY}`;
+const EVENT_KEY_POINTERCANCEL_INTERACTION = `pointercancel.interaction.${NAME_KEY}`;
+const TOAST_ICON_MAP = {
+	success: 'success',
+	error: 'danger',
+	warning: 'warning',
+	info: 'info',
+};
 
 /**
  * @typedef {Object} ToastParams
@@ -72,13 +72,13 @@ const TOAST_ICON_MAP = {
  * @property {boolean} autohide - Автоматически скрывать.
  * @property {number} delay - Задержка перед авто-скрытием (мс).
  * @property {boolean} enableClickToast - Закрывать по клику на тост.
- * @property {boolean} enableButtonClose - Добавить кнопку закрытия.
- * @property {boolean} keyboard - Закрывать по Esc.
- * @property {string} theme - Тема: 'dark', 'light' и т.д.
- * @property {('success'|'error'|'warning'|'info'|null)} type - Тип уведомления для вывода иконки.
- * @property {Object} stack - Настройки стека уведомлений.
- * @property {boolean} stack.enable - Разрешить стек.
- * @property {number} stack.max - Макс. количество тостов одновременно.
+ * @property {boolean} enableButtonClose - Добавить кнопку закрытия.
+ * @property {boolean} keyboard - Закрывать по Esc.
+ * @property {string} theme - Тема: 'dark', 'light' и т.д.
+ * @property {('success'|'error'|'warning'|'info'|null)} type - Тип уведомления для вывода иконки.
+ * @property {Object} stack - Настройки стека уведомлений.
+ * @property {boolean} stack.enable - Разрешить стек.
+ * @property {number} stack.max - Макс. количество тостов одновременно.
  * @property {Object} animation - Анимация.
  * @property {boolean} animation.enable - Включить анимацию.
  * @property {string} animation.in - Анимация входа (Animate.css).
@@ -104,13 +104,13 @@ const defaultParams = {
 	autohide: false,
 	delay: 3000,
 	enableClickToast: true,
-	enableButtonClose: false,
-	keyboard: true,
-	theme: 'dark',
-	type: null,
-	stack: {
-		enable: true,
-		max: 5
+	enableButtonClose: false,
+	keyboard: true,
+	theme: 'dark',
+	type: null,
+	stack: {
+		enable: true,
+		max: 5
 	},
 	drag: {
 		enable: false,
@@ -184,9 +184,11 @@ class VGToast extends BaseModule {
 		this._dismissElement();
 		this._addEventListeners();
 
-		/** @private */
-		this._timeout = null;
-	}
+		/** @private */
+		this._timeout = null;
+		this._hideTimeout = null;
+		this._isHiding = false;
+	}
 
 	/**
 	 * Имя модуля
@@ -248,24 +250,24 @@ class VGToast extends BaseModule {
 		const wrapper = document.createElement('div');
 		wrapper.classList.add('vg-toast-wrapper');
 
-		// Иконка (если задан тип)
-		if (params.type) {
-			const iconName = TOAST_ICON_MAP[params.type];
-			const iconSvg = iconName ? getSVG(iconName) : '';
-
-			if (iconSvg) {
-				const icon = document.createElement('div');
-				icon.classList.add('vg-toast-icon');
-				const safeIconSvg = Sanitize.toSafeHtmlString(iconSvg);
-				const fragment = document.createRange().createContextualFragment(safeIconSvg);
-				const svgElement = fragment.firstElementChild;
-
-				if (svgElement) {
-					icon.append(svgElement);
-				}
-				wrapper.append(icon);
-			}
-		}
+		// Иконка (если задан тип)
+		if (params.type) {
+			const iconName = TOAST_ICON_MAP[params.type];
+			const iconSvg = iconName ? getSVG(iconName) : '';
+
+			if (iconSvg) {
+				const icon = document.createElement('div');
+				icon.classList.add('vg-toast-icon');
+				const safeIconSvg = Sanitize.toSafeHtmlString(iconSvg);
+				const fragment = document.createRange().createContextualFragment(safeIconSvg);
+				const svgElement = fragment.firstElementChild;
+
+				if (svgElement) {
+					icon.append(svgElement);
+				}
+				wrapper.append(icon);
+			}
+		}
 
 		const content = document.createElement('div');
 		content.classList.add('vg-toast-content');
@@ -289,14 +291,14 @@ class VGToast extends BaseModule {
 
 		wrapper.append(content);
 
-		// Кнопка закрытия
-		if (params.enableButtonClose) {
-			target.classList.add('vg-toast-has-button');
-			const button = document.createElement('div');
-			button.classList.add('vg-toast-button');
-			button.innerHTML = '<button class="vg-btn-close" data-vg-dismiss="toast"></button>';
-			wrapper.append(button);
-		}
+		// Кнопка закрытия
+		if (params.enableButtonClose) {
+			target.classList.add('vg-toast-has-button');
+			const button = document.createElement('div');
+			button.classList.add('vg-toast-button');
+			button.innerHTML = '<button class="vg-btn-close" data-vg-dismiss="toast"></button>';
+			wrapper.append(button);
+		}
 
 		target.append(wrapper);
 		document.body.append(target);
@@ -327,83 +329,105 @@ class VGToast extends BaseModule {
 	 * @param {Element} [relatedTarget] - Элемент, инициировавший показ.
 	 * @returns {void}
 	 */
-	show(relatedTarget) {
-		if (isDisabled(this._element)) return;
-
-		this._clearTimeout();
-		this._disableInteractionHandlers();
-
-		this._params = this._getParams(relatedTarget || {}, this._params);
-		this._route((status, data) => {
-			EventHandler.trigger(this._element, EVENT_KEY_LOADED, { stats: status, data });
-		});
-
-		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		this._element.classList.remove(CLASS_NAME_SHOWN);
-		this._element.classList.add(CLASS_NAME_SHOW);
-		document.body.classList.add(CLASS_NAME_OPEN);
-
-		this._setPlacement();
-
-		const completeCallBack = () => {
-			this._element.classList.add(CLASS_NAME_SHOWN);
-			this._toggleInteractionHandlers();
-			this._syncInteractiveBounds();
-			this._scheduleHide();
-			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
-		};
-
-		this._queueCallback(completeCallBack, this._element, true, this._params.animation.delay);
-	}
+	show(relatedTarget) {
+		if (isDisabled(this._element)) return;
+
+		const element = this._element;
+		this._clearTimeout();
+		this._clearHideTimeout();
+		this._isHiding = false;
+		this._disableInteractionHandlers();
+
+		this._params = this._getParams(relatedTarget || {}, this._params);
+		this._route((status, data) => {
+			if (this._element !== element) return;
+			EventHandler.trigger(element, EVENT_KEY_LOADED, { stats: status, data });
+		});
+
+		const showEvent = EventHandler.trigger(element, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		element.classList.remove(CLASS_NAME_SHOWN);
+		element.classList.add(CLASS_NAME_SHOW);
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		this._setPlacement();
+
+		const completeCallBack = () => {
+			if (this._element !== element || this._isHiding) return;
+
+			element.classList.add(CLASS_NAME_SHOWN);
+			this._toggleInteractionHandlers();
+			this._syncInteractiveBounds();
+			this._scheduleHide();
+			EventHandler.trigger(element, EVENT_KEY_SHOWN, { relatedTarget });
+		};
+
+		this._queueCallback(completeCallBack, element, true, this._params.animation.delay);
+	}
 
 	/**
 	 * Скрывает тост
 	 * @returns {void}
 	 */
-	hide() {
-		if (isDisabled(this._element)) return;
-		this._clearTimeout();
-
-		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
-		if (hideEvent.defaultPrevented) return;
-
-		this._element.classList.remove(CLASS_NAME_SHOWN);
-		this._disableInteractionHandlers();
-
-		setTimeout(() => {
-			this._element.classList.remove(CLASS_NAME_SHOW);
-			if (this._params.stack.enable) {
-				this._setPlacement();
-			}
-
-			const completeCallback = () => {
-				if (!Selectors.find('.vg-toast.show')) {
-					document.body.classList.remove(CLASS_NAME_OPEN);
-				}
-				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
-
-				if (!this._params.static) {
-					this.dispose();
-				}
-			};
-
-			this._queueCallback(completeCallback, this._element, false, this._params.animation.delay);
-		}, this._params.animation.delay);
-	}
+	hide() {
+		if (isDisabled(this._element) || this._isHiding) return;
+
+		const element = this._element;
+		this._clearTimeout();
+		this._clearHideTimeout();
+
+		const hideEvent = EventHandler.trigger(element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		this._isHiding = true;
+		element.classList.remove(CLASS_NAME_SHOWN);
+		this._disableInteractionHandlers();
+
+		this._hideTimeout = setTimeout(() => {
+			this._hideTimeout = null;
+			if (this._element !== element) return;
+
+			element.classList.remove(CLASS_NAME_SHOW);
+			if (this._params.stack.enable) {
+				this._setPlacement();
+			}
+
+			const completeCallback = () => {
+				if (this._element !== element) return;
+
+				if (!Selectors.find('.vg-toast.show')) {
+					document.body.classList.remove(CLASS_NAME_OPEN);
+				}
+
+				const shouldDispose = !this._params.static;
+				this._isHiding = false;
+				EventHandler.trigger(element, EVENT_KEY_HIDDEN);
+
+				if (this._element !== element) return;
+				if (shouldDispose) {
+					this.dispose();
+				}
+			};
+
+			this._queueCallback(completeCallback, element, false, this._params.animation.delay);
+		}, this._params.animation.delay);
+	}
 
 	/**
 	 * Удаляет тост из DOM и снимает обработчики
 	 * @override
 	 */
-	dispose() {
-		this._clearTimeout();
-		this._disableInteractionHandlers();
-		if (!this._params.static) {
-			this._element.remove();
-		}
-		super.dispose();
+	dispose() {
+		if (!this._element) return;
+
+		this._clearTimeout();
+		this._clearHideTimeout();
+		this._disableInteractionHandlers();
+		if (!this._params.static) {
+			this._element.remove();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -422,9 +446,9 @@ class VGToast extends BaseModule {
 	 * @private
 	 * @returns {boolean}
 	 */
-	_isShown() {
-		return this._element.classList.contains(CLASS_NAME_SHOW);
-	}
+	_isShown() {
+		return !!this._element && this._element.classList.contains(CLASS_NAME_SHOW);
+	}
 
 	/**
 	 * Возвращает список активных тостов с вертикальными смещениями
@@ -617,12 +641,19 @@ class VGToast extends BaseModule {
 		return effectValue.trim();
 	}
 
-	_clearTimeout() {
-		if (this._timeout) {
-			clearTimeout(this._timeout);
-			this._timeout = null;
-		}
-	}
+	_clearTimeout() {
+		if (this._timeout) {
+			clearTimeout(this._timeout);
+			this._timeout = null;
+		}
+	}
+
+	_clearHideTimeout() {
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+	}
 
 	/**
 	 * Назначает обработчики событий

package/app/modules/vgtoast/readme.md

@@ -66,9 +66,9 @@ VGToast.run('Ошибка подключения', {
 | `animation.enable` | `boolean` | `true` | Включить анимации |
 | `animation.in` | `string` | `'animate__backInUp'` | Анимация появления |
 | `animation.out` | `string` | `'animate__backOutDown'` | Анимация исчезновения |
-| `animation.delay` | `number` | `300` | Длительность анимации (мс) |
-| `animation.effect` | `string \| string[]` | `'none'` | Доп. CSS-эффект отображения: `none`, `fade`, `zoom`, `blur`, `slide-up`, `slide-down` или кастомный класс |
-| `ajax.route` | `string` | `''` | URL для загрузки |
+| `animation.delay` | `number` | `300` | Длительность анимации (мс) |
+| `animation.effect` | `string \| string[]` | `'none'` | Доп. CSS-эффект отображения: `none`, `fade`, `zoom`, `blur`, `slide-up`, `slide-down` или кастомный класс |
+| `ajax.route` | `string` | `''` | URL для загрузки |
 | `ajax.target` | `string` | `''` | Селектор контейнера (если используется) |
 | `ajax.method` | `string` | `'get'` | HTTP-метод |
 | `ajax.loader` | `boolean` | `false` | Показывать лоадер |
@@ -90,20 +90,20 @@ VGToast.run('Появилось!', {
 });
 ```
 
-### 2. AJAX-уведомление
-### 2.1. Дополнительные эффекты отображения
-```js
-VGToast.run('Сообщение', {
-    animation: {
-        in: 'animate__fadeIn',
-        out: 'animate__fadeOut',
-        effect: ['zoom', 'blur']
-    }
-});
-```
-
-```js
-VGToast.run('Загрузка...', { 
+### 2. AJAX-уведомление
+### 2.1. Дополнительные эффекты отображения
+```js
+VGToast.run('Сообщение', {
+    animation: {
+        in: 'animate__fadeIn',
+        out: 'animate__fadeOut',
+        effect: ['zoom', 'blur']
+    }
+});
+```
+
+```js
+VGToast.run('Загрузка...', { 
     ajax: { 
         route: '/api/notify', 
         method: 'post', 
@@ -153,4 +153,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgtoast/scss/vgtoast.scss

@@ -11,7 +11,7 @@
 @import "../../../utils/scss/variables";
 @import "variables";
 
-.vg-toast {
+.vg-toast {
 	@include mix-vars('toast', $toast-map);
 	@include mix-alert-color-mode($class: vg-toast);
 	position: fixed;
@@ -64,52 +64,52 @@
 		font-weight: var(--vg-toast-body-font-weight);
 	}
 
-	&-pointer {
-		cursor: pointer;
-	}
-
-	&[class*='vg-toast-effect-'] {
-		.vg-toast-wrapper {
-			transition: opacity .25s ease, transform .25s ease, filter .25s ease;
-			will-change: opacity, transform, filter;
-		}
-	}
-
-	&.vg-toast-effect-fade {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-		}
-	}
-
-	&.vg-toast-effect-zoom {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: scale(.92);
-		}
-	}
-
-	&.vg-toast-effect-blur {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			filter: blur(6px);
-		}
-	}
-
-	&.vg-toast-effect-slide-up {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: translateY(14px);
-		}
-	}
-
-	&.vg-toast-effect-slide-down {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: translateY(-14px);
-		}
-	}
-
-	&-button {
+	&-pointer {
+		cursor: pointer;
+	}
+
+	&[class*='vg-toast-effect-'] {
+		.vg-toast-wrapper {
+			transition: opacity .25s ease, transform .25s ease, filter .25s ease;
+			will-change: opacity, transform, filter;
+		}
+	}
+
+	&.vg-toast-effect-fade {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+		}
+	}
+
+	&.vg-toast-effect-zoom {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: scale(.92);
+		}
+	}
+
+	&.vg-toast-effect-blur {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			filter: blur(6px);
+		}
+	}
+
+	&.vg-toast-effect-slide-up {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: translateY(14px);
+		}
+	}
+
+	&.vg-toast-effect-slide-down {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: translateY(-14px);
+		}
+	}
+
+	&-button {
 		width: auto;
 		height: 100%;
 		display: flex;
@@ -136,4 +136,4 @@
 			}
 		}
 	}
-}
+}