vgapp 1.2.4 → 1.2.6

package/app/modules/vgalert/js/vgalert.js

@@ -3,64 +3,12 @@ import VGModal from "../../vgmodal";
 
 import { isElement, isVisible, makeRandomString, mergeDeepObject } from "../../../utils/js/functions";
 import { getSVG } from "../../module-fn";
-import { Classes} from "../../../utils/js/dom/manipulator";
+import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
 import EventHandler from "../../../utils/js/dom/event";
 import {lang_buttons, lang_messages} from "../../../utils/js/components/lang";
 import Html from "../../../utils/js/components/templater";
-
-/**
- * @typedef {Object} AjaxParams
- * @property {string} route - URL-адрес для AJAX-запроса.
- * @property {string} target - Селектор элемента, куда будет вставлен ответ.
- * @property {string} method - HTTP-метод ('get', 'post' и т.д.).
- * @property {boolean} loader - Показывать ли индикатор загрузки.
- * @property {boolean} once - Выполнить запрос только один раз.
- * @property {boolean} output - Выводить ли результат в целевой элемент.
- */
-
-/**
- * @typedef {Object} ModalParams
- * @property {boolean} centered - Центрировать ли модальное окно по вертикали.
- * @property {boolean|string} backdrop - Фоновая подложка ('static', true, false).
- * @property {boolean} overflow - Разрешить прокрутку фона при открытом окне.
- * @property {boolean} keyboard - Закрывать по нажатию Escape.
- * @property {boolean} dismiss - Закрывать при клике по подложке.
- * @property {Object} animation - Параметры анимации.
- * @property {boolean} animation.enable - Включить анимацию.
- * @property {string} animation.in - Класс анимации входа.
- * @property {string} animation.out - Класс анимации выхода.
- * @property {number} animation.delay - Задержка перед показом (мс).
- * @property {number} animation.duration - Длительность анимации (мс).
- */
-
-/**
- * @typedef {Object} ButtonConfig
- * @property {string} [element] - Готовый HTML-элемент кнопки.
- * @property {'button'|'a'} [tag='button'] - Тип элемента.
- * @property {string} [type='button'] - Атрибут type (для <button>).
- * @property {Object.<string, string>} [attr] - Дополнительные атрибуты.
- * @property {string} toggle - Атрибут данных для управления.
- * @property {string[]} class - CSS-классы кнопки.
- * @property {string} text - Текст кнопки.
- */
-
-/**
- * @typedef {Object} MessageConfig
- * @property {string} title - Заголовок сообщения.
- * @property {string} description - Описание/текст сообщения.
- */
-
-/**
- * @typedef {Object} AlertParams
- * @property {AjaxParams} ajax - Параметры AJAX-запроса.
- * @property {ModalParams} modal - Параметры модального окна.
- * @property {'confirm'|'info'} mode - Режим алерта: подтверждение или информационное.
- * @property {'danger'|'warning'|'success'|'info'} theme - Тема оформления.
- * @property {{agree: ButtonConfig, cancel: ButtonConfig}} buttons - Конфигурация кнопок.
- * @property {MessageConfig} message - Сообщение и заголовок.
- * @property {string} [icon] - SVG-иконка, соответствующая теме.
- */
+import Params from "../../../utils/js/components/params";
 
 /**
  * Константы
@@ -75,38 +23,14 @@ const NAME_KEY = "vg.alert";
 // Глобальная блокировка: предотвращаем открытие нескольких алертов
 let isAlertOpen = false;
 
-/**
- * Класс VGAlert — модальное окно подтверждения или информационное уведомление.
- *
- * @class
- * @example
- * VGAlert.call({
- *   mode: 'confirm',
- *   theme: 'danger',
- *   message: {
- *     title: 'Вы уверены?',
- *     description: 'Это действие нельзя отменить.'
- *   },
- *   buttons: {
- *     agree: { text: 'Удалить', class: ['btn-danger'] },
- *     cancel: { text: 'Отмена' }
- *   }
- * }).then(() => {
- *   console.log('Подтверждено');
- * }).catch(() => {
- *   console.log('Отменено');
- * });
- */
 class VGAlert {
-	/**
-	 * Создаёт экземпляр VGAlert.
-	 *
-	 * @param {AlertParams} params - Пользовательские параметры.
-	 * @param {'ru'|'en'} [lang='ru'] - Язык интерфейса.
-	 */
 	constructor(params = {}, lang = 'ru') {
 		this.lang = lang;
 		this._defaultParams = {
+			render: {
+				type: "modal", // modal or overlay,
+				dismiss: false,
+			},
 			ajax: {
 				route: "",
 				target: "",
@@ -169,29 +93,55 @@ class VGAlert {
 		this._params = this._setParams(params);
 	}
 
-	/**
-	 * Открывает алерт и возвращает Promise.
-	 *
-	 * @static
-	 * @param {AlertParams} options - Параметры алерта.
-	 * @param {'ru'|'en'} [lang='ru'] - Язык.
-	 * @returns {Promise<{accepted: boolean, timestamp: Date}>} Результат взаимодействия.
-	 * @throws {Error} Если алерт уже открыт.
-	 */
 	static call(options = {}, lang = 'ru') {
 		const context = new VGAlert(options, lang);
 
 		if (isAlertOpen) return Promise.reject({ accepted: false, reason: lang_messages(context.lang, NAME_KEY).reason });
 		isAlertOpen = true;
 
-		let modal = context._buildModal();
-		modal.show();
+		const getContainer = () => {
+			if (context._params.render.type === "overlay") {
+				const overlay = context._buildOverlay();
+				return {
+					element: overlay.element,
+					render: overlay.render,
+					type: 'overlay'
+				}
+			} else if (context._params.render.type === "modal") {
+				const modal = context._buildModal();
+				return {
+					element: modal._element,
+					render: modal,
+					type: 'modal'
+				}
+			}
+		};
+
+		const {element: container, render, type} = getContainer();
+
+		if (type === 'modal') {
+			render.show();
+		}
 
-		const container = modal._element;
 		const agreeBtn = Selectors.find(`[${DATA_AGREE}]`, container);
 		const cancelBtn = Selectors.find(`[${DATA_CANCEL}]`, container);
 
 		return new Promise((resolve, reject) => {
+			const closeAlert = (isHide = true) => {
+				if (type === 'modal') {
+					render.hide();
+					return;
+				}
+
+				if (type === 'overlay') {
+					container.remove();
+
+					if (context._params.render.dismiss && isHide) {
+						render.hide();
+					}
+				}
+			};
+
 			const handleAgree = (e) => {
 				e.preventDefault();
 				cleanup();
@@ -199,12 +149,17 @@ class VGAlert {
 					accepted: true,
 					timestamp: new Date(),
 				});
-				modal.hide();
+				closeAlert();
 			};
 
 			const handleCancel = (e) => {
 				e.preventDefault();
-				modal.hide();
+				cleanup();
+				reject({
+					accepted: false,
+					timestamp: new Date(),
+				});
+				closeAlert(false);
 			};
 
 			const handleKeydown = (e) => {
@@ -235,26 +190,21 @@ class VGAlert {
 			}
 
 			document.addEventListener("keydown", handleKeydown);
-			container.addEventListener("vg.modal.hide", () => {
-				cleanup();
-				reject({
-					accepted: false,
-					timestamp: new Date(),
-				});
-			});
+
+			if (type === 'modal') {
+				container.addEventListener("vg.modal.hide", () => {
+					cleanup();
+					reject({
+						accepted: false,
+						timestamp: new Date(),
+					});
+				}, {once: true});
+			}
 
 			container.focus();
 		});
 	}
 
-	/**
-	 * Инициирует алерт подтверждения на основе DOM-элемента.
-	 *
-	 * @static
-	 * @param {HTMLElement} elem - Элемент, вызвавший алерт.
-	 * @param {AlertParams} options - Параметры алерта.
-	 * @returns {void}
-	 */
 	static confirm(elem, options = {}) {
 		let lang = 'ru';
 
@@ -269,13 +219,6 @@ class VGAlert {
 		instance.run(VGAlert);
 	}
 
-	/**
-	 * Слияние пользовательских параметров с дефолтными.
-	 *
-	 * @private
-	 * @param {AlertParams} params - Пользовательские параметры.
-	 * @returns {AlertParams} Полный объект параметров.
-	 */
 	_setParams(params) {
 		const merged = mergeDeepObject(this._defaultParams, params);
 		merged.buttons = mergeDeepObject(this._elementsDefault.buttons, merged.buttons);
@@ -285,68 +228,88 @@ class VGAlert {
 		return merged;
 	}
 
-	/**
-	 * Создаёт и возвращает экземпляр модального окна с контентом алерта.
-	 *
-	 * @private
-	 * @returns {VGModal} Экземпляр модального окна.
-	 */
 	_buildModal() {
-		const id = `${CLASS_NAME_ALERT}-${crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : makeRandomString()}`;
-		const $modal = Selectors.find(`.${CLASS_NAME_ALERT}-modal`);
-		if ($modal) $modal.remove();
+		const id = `${CLASS_NAME_ALERT}-${makeRandomString()}`;
 
-		const html = Html('dom');
+		return VGModal.build(id, this._params.modal, (modal) => {
+			modal._element.classList.add(`${CLASS_NAME_ALERT}-modal`);
+			const body = Selectors.find(".vg-modal-body", modal._element);
+			body.append(this._buildContent());
+		});
+	}
 
-		return VGModal.build(id, this._params.modal, (modalInstance) => {
-			const element = modalInstance._element;
-			element.classList.add(`${CLASS_NAME_ALERT}-modal`);
-			element.setAttribute("role", "alertdialog");
-			element.setAttribute("aria-modal", "true");
+	_buildContent() {
+		const html = Html('dom');
 
-			const $body = Selectors.find(".vg-modal-body", element);
-			if (!$body) return;
+		let icon = null;
 
-			let icon = null;
-			if (this._params.icon) {
-				icon = html.div({class: `${CLASS_NAME_ALERT}-content--icon`}, this._params.icon, {isHTML: true});
-			}
+		if (this._params.icon) {
+			icon = html.div(
+				{class: `${CLASS_NAME_ALERT}-content--icon`},
+				this._params.icon,
+				{isHTML: true}
+			);
+		}
 
-			const buttons = document.createElement("div");
-			Classes.add(buttons, "vg-alert-buttons");
+		const buttons = document.createElement("div");
+		Classes.add(buttons, "vg-alert-buttons");
 
-			if (this._params.mode === "confirm") {
-				this._createButton(buttons, "cancel");
-				this._createButton(buttons, "agree");
-			}
+		if (this._params.mode === "confirm") {
+			this._createButton(buttons, "cancel");
+			this._createButton(buttons, "agree");
+		}
 
-			if (this._params.mode === "info") {
-				this._createButton(buttons, "cancel");
-			}
+		if (this._params.mode === "info") {
+			this._createButton(buttons, "cancel");
+		}
 
-			let wrapper = html.div({class: `${CLASS_NAME_ALERT}-wrapper ${CLASS_NAME_ALERT}-${this._params.theme}`}, [
-				html.div({class: `${CLASS_NAME_ALERT}-content`}, [
-					icon,
-					html.div({class: `${CLASS_NAME_ALERT}-content--message`}, [
-						html.div({class: `${CLASS_NAME_ALERT}-content--title`}, this._params.message.title),
-						html.div({class: `${CLASS_NAME_ALERT}-content--description`}, this._params.message.description),
-					])
-				]),
+		return html.div(
+			{class: `${CLASS_NAME_ALERT}-wrapper ${CLASS_NAME_ALERT}-${this._params.theme}`},
+			[
+				html.div(
+					{class: `${CLASS_NAME_ALERT}-content`},
+					[
+						icon,
+						html.div(
+							{class: `${CLASS_NAME_ALERT}-content--message`},
+							[
+								html.div(
+									{class: `${CLASS_NAME_ALERT}-content--title`},
+									this._params.message.title
+								),
+								html.div(
+									{class: `${CLASS_NAME_ALERT}-content--description`},
+									this._params.message.description
+								)
+							]
+						)
+					]
+				),
 				buttons
-			]);
+			]
+		);
+	}
 
-			$body.appendChild(wrapper);
-		});
+	_buildOverlay() {
+		let targetContainers = ['.vg-modal', '.vg-sidebar'];
+		const containerWrap = this._params.relatedTarget.closest(targetContainers.join(', '));
+
+		const modal = VGModal.getOrCreateInstance(containerWrap);
+		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
+
+		const overlay = document.createElement('div');
+
+		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		overlay.append(this._buildContent());
+
+		container.append(overlay);
+
+		return {
+			element: overlay,
+			render: modal,
+		};
 	}
 
-	/**
-	 * Создаёт кнопку и добавляет её в контейнер.
-	 *
-	 * @private
-	 * @param {HTMLElement} container - Родительский элемент.
-	 * @param {'agree'|'cancel'} key - Ключ кнопки.
-	 * @returns {void}
-	 */
 	_createButton(container, key) {
 		const button = this._params.buttons[key];
 		if (!button || button.element) {
@@ -385,51 +348,25 @@ const EVENT_KEY_ACCEPT  = `${NAME_KEY}.accept`;
 const EVENT_KEY_REJECT  = `${NAME_KEY}.reject`;
 const EVENT_KEY_FINALLY = `${NAME_KEY}.finally`;
 
-/**
- * Класс для работы с алертами по data-атрибутам.
- *
- * @class
- * @extends BaseModule
- * @example
- * <button data-vg-toggle="alert" data-ajax-route="/delete/1">Удалить</button>
- */
 class VGAlertConfirm extends BaseModule {
-	/**
-	 * Создаёт экземпляр VGAlertConfirm.
-	 *
-	 * @param {HTMLElement} element - DOM-элемент.
-	 * @param {AlertParams} options - Параметры.
-	 */
 	constructor(element, options = {}) {
 		super(element);
 		this._params = this._getParams(element, mergeDeepObject({}, options));
 	}
 
-	/**
-	 * Возвращает имя модуля.
-	 * @returns {string}
-	 */
 	static get NAME() {
 		return NAME;
 	}
 
-	/**
-	 * Возвращает ключевое имя с префиксом.
-	 * @returns {string}
-	 */
 	static get NAME_KEY() {
 		return NAME_KEY;
 	}
 
-	/**
-	 * Запускает логику алерта: вызывает модальное окно и обрабатывает результат.
-	 *
-	 * @param {typeof VGAlert} AlertClass - Класс алерта.
-	 * @returns {void}
-	 */
 	run(AlertClass) {
 		if (this._params.mode !== "confirm") return;
 
+		this._params.relatedTarget = this._element;
+
 		AlertClass.call(this._params)
 			.then((resolve) => {
 				if (!resolve.accepted) return Promise.reject(resolve);
@@ -447,12 +384,6 @@ class VGAlertConfirm extends BaseModule {
 			});
 	}
 
-	/**
-	 * Выполняет AJAX-запрос после подтверждения.
-	 *
-	 * @private
-	 * @returns {Promise<Object>} Ответ от сервера.
-	 */
 	_ajax() {
 		return new Promise((resolve) => {
 			this._route((status, data) => {
@@ -482,4 +413,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	});
 });
 
-export default VGAlert;
+export default VGAlert;

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/vgdynamictable/index.js

@@ -0,0 +1,5 @@
+import VGDynamicTable from "./js/vgdynamictable";
+import Editable from "./js/editable";
+
+export {Editable, VGDynamicTable};
+export default VGDynamicTable;