vgapp 1.2.4 → 1.2.5

package/app/modules/vgalert/readme.md

@@ -11,10 +11,12 @@
 - Полная **локализация** (настройка языка)
 - Гибкая **настройка кнопок** и сообщений
 - Поддержка **SVG-иконок** и тем стилей (`danger`, `warning`, `success`, `info`)
-- Работа как через **API**, так и через **`data`-атрибуты**
-- Интеграция с промисами (`Promise`)
-- Защита от **множественных одновременных вызовов**
-- Поддержка **клавиатурных сокращений** (Enter, Escape)
+- Работа как через **API**, так и через **`data`-атрибуты**
+- Интеграция с промисами (`Promise`)
+- Защита от **множественных одновременных вызовов**
+- Поддержка **клавиатурных сокращений** (Enter, Escape)
+- Два режима рендера: обычный **`modal`** и вложенный **`overlay`**
+- Возможность закрывать родительскую модалку/сайдбар через `render.dismiss`
 
 ---
 
@@ -27,15 +29,45 @@ import VGAlert from "./app/modules/vgalert/js/vgalert.js";
 
 ---
 
-## 🧩 Режимы работы
+## 🧩 Режимы работы
 
 ### 1. `confirm` — Подтверждение действия
 Показывает два действия: **Подтвердить** и **Отмена**.
 
-### 2. `info` — Информационное сообщение
-Показывает только кнопку **ОК** (или "Продолжить").
-
----
+### 2. `info` — Информационное сообщение
+Показывает только кнопку **ОК** (или "Продолжить").
+
+---
+
+## 🖼 Рендер (`render`)
+
+`VGAlert` поддерживает два варианта отображения:
+
+| Параметр | Значение | Описание |
+|--------|--------|----------|
+| `render.type` | `modal` | Обычный alert в отдельной модалке |
+| `render.type` | `overlay` | Alert-оверлей внутри текущей `.vg-modal` или `.vg-sidebar` |
+| `render.dismiss` | `true` / `false` | Для `overlay`: после закрытия alert дополнительно закрывает родительский контейнер |
+
+### Пример: alert поверх открытой модалки
+
+```js
+VGAlert.call({
+    render: {
+        type: "overlay",
+        dismiss: true
+    },
+    relatedTarget: button,
+    message: {
+        title: "Удалить запись",
+        description: "Действие будет выполнено в текущем окне."
+    }
+});
+```
+
+`relatedTarget` нужен для `overlay`, чтобы модуль нашёл ближайшую `.vg-modal` или `.vg-sidebar`, куда надо встроить alert.
+
+---
 
 ## 🎨 Темы (`theme`)
 | Значение | Иконка | Назначение |
@@ -76,9 +108,9 @@ VGAlert.call({
 });
 ```
 
-### Пример 2: Информационное сообщение
-```js
-VGAlert.call({ 
+### Пример 2: Информационное сообщение
+```js
+VGAlert.call({ 
     mode: "info",
     theme: "success",
     message: {
@@ -91,10 +123,26 @@ VGAlert.call({
             class: ["btn-success"] 
         } 
     } 
-});
-```
-
----
+});
+```
+
+### Пример 3: Обработка результата через `Promise`
+```js
+VGAlert.call({
+    message: {
+        title: "Подтвердите действие",
+        description: "Продолжить?"
+    }
+}).then((result) => {
+    console.log(result.accepted); // true
+    console.log(result.timestamp);
+}).catch((error) => {
+    console.log(error.accepted); // false
+    console.log(error.timestamp);
+});
+```
+
+---
 
 ## 🔌 Работа с AJAX
 
@@ -121,24 +169,30 @@ VGAlert.confirm(element, {
 
 ---
 
-## 🔔 События
-
-Модуль генерирует события:
-
-| Событие | Описание |
-|--------|--------|
-| `vg.alert.accept` | Пользователь подтвердил действие |
+## 🔔 События
+
+Модуль генерирует события на элементе-триггере, у которого есть `[data-vg-toggle="alert"]`:
+
+| Событие | Описание |
+|--------|--------|
+| `vg.alert.accept` | Пользователь подтвердил действие |
 | `vg.alert.reject` | Пользователь отменил действие |
-| `vg.alert.finally` | Действие завершено (в любом случае) |
-| `vg.alert.loaded` | Получен ответ от сервера (если был AJAX) |
-
-```js 
-document.addEventListener('vg.alert.accept', function(e) { 
-    console.log('Подтверждено:', e.vgalert); 
-});
-```
-
----
+| `vg.alert.finally` | Действие завершено (в любом случае) |
+| `vg.alert.loaded` | Получен ответ от сервера (если был AJAX) |
+
+```js 
+const buttons = document.querySelectorAll('[data-vg-toggle="alert"]');
+
+buttons.forEach((button) => {
+    button.addEventListener('vg.alert.accept', function (e) {
+        console.log('Подтверждено:', e.vgalert);
+    });
+});
+```
+
+Если нужен общий глобальный обработчик, событие можно слушать и на `document`, так как оно всплывает.
+
+---
 
 ## ⌨️ Клавиатурные комбинации
 
@@ -149,12 +203,16 @@ document.addEventListener('vg.alert.accept', function(e) {
 
 ## 🛠️ Конфигурация по умолчанию
 ```js
-{ 
-    mode: "confirm", 
-    theme: "danger", 
-    modal: { 
-        centered: false,
-        backdrop: true, 
+{ 
+    mode: "confirm", 
+    theme: "danger", 
+    render: {
+        type: "modal",
+        dismiss: false
+    },
+    modal: { 
+        centered: false,
+        backdrop: true, 
         keyboard: true,
         dismiss: true 
     }, 
@@ -191,12 +249,13 @@ VGAlert.call(params, 'en');
 
 ## 🧩 Кастомизация кнопок
 
-Поддерживает:
-- `tag: 'button' | 'a'`
-- `type` (для `<button>`)
-- `class` — массив CSS-классов
-- `attr` — любые дополнительные атрибуты
-- `element` — готовый HTML-код кнопки
+Поддерживает:
+- `tag: 'button' | 'a'`
+- `type` (для `<button>`)
+- `class` — массив CSS-классов
+- `attr` — любые дополнительные атрибуты
+- `element` — готовый HTML-код кнопки
+- `toggle` — служебный атрибут кнопки (`data-vg-alert-agree` / `data-vg-alert-cancel`), обычно задаётся модулем автоматически
 
 ### Пример: кнопка-ссылка
 ```js
@@ -239,4 +298,4 @@ MIT — свободно используйте и модифицируйте.
 ---
 
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgalert/scss/vgalert.scss

@@ -18,6 +18,24 @@
 		--vg-modal-margin: 65px !important;
 	}
 
+	&-overlay {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: rgba(0, 0, 0, 0.75);
+
+		.vg-alert-wrapper {
+			background-color: white;
+			width: 90%;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			top: 1rem;
+		}
+	}
+
 	&-wrapper {
 		@include mix-vars('alert', $alert-map);
 		@include mix-alert-color-mode($class: vg-alert);

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

@@ -184,11 +184,11 @@ class VGToast extends BaseModule {
 		this._dismissElement();
 		this._addEventListeners();
 
-		/** @private */
-		this._timeout = null;
-		this._hideTimeout = null;
-		this._isHiding = false;
-	}
+		/** @private */
+		this._timeout = null;
+		this._hideTimeout = null;
+		this._isHiding = false;
+	}
 
 	/**
 	 * Имя модуля
@@ -318,7 +318,7 @@ class VGToast extends BaseModule {
 	/**
 	 * Переключает состояние (показать/скрыть)
 	 * @param {Element} [relatedTarget] - Элемент, вызвавший тост.
-	 * @returns {VGToast}
+	 * @returns {void}
 	 */
 	toggle(relatedTarget) {
 		return this._isShown() ? this.hide() : this.show(relatedTarget);
@@ -329,105 +329,105 @@ class VGToast extends BaseModule {
 	 * @param {Element} [relatedTarget] - Элемент, инициировавший показ.
 	 * @returns {void}
 	 */
-	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);
-	}
+	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) || 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);
-	}
+	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() {
-		if (!this._element) return;
-
-		this._clearTimeout();
-		this._clearHideTimeout();
-		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();
 	}
 
 	/**
@@ -446,9 +446,9 @@ class VGToast extends BaseModule {
 	 * @private
 	 * @returns {boolean}
 	 */
-	_isShown() {
-		return !!this._element && this._element.classList.contains(CLASS_NAME_SHOW);
-	}
+	_isShown() {
+		return !!this._element && this._element.classList.contains(CLASS_NAME_SHOW);
+	}
 
 	/**
 	 * Возвращает список активных тостов с вертикальными смещениями
@@ -641,19 +641,19 @@ class VGToast extends BaseModule {
 		return effectValue.trim();
 	}
 
-	_clearTimeout() {
-		if (this._timeout) {
-			clearTimeout(this._timeout);
-			this._timeout = null;
-		}
-	}
-
-	_clearHideTimeout() {
-		if (this._hideTimeout) {
-			clearTimeout(this._hideTimeout);
-			this._hideTimeout = null;
-		}
-	}
+	_clearTimeout() {
+		if (this._timeout) {
+			clearTimeout(this._timeout);
+			this._timeout = null;
+		}
+	}
+
+	_clearHideTimeout() {
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+	}
 
 	/**
 	 * Назначает обработчики событий

package/app/modules/vgtooltip/index.js

@@ -0,0 +1,3 @@
+import VGTooltip from "./js/vgtooltip";
+
+export default VGTooltip;