vgapp 0.7.7 → 0.7.8

package/app/modules/vgformsender/readme.md

@@ -0,0 +1,221 @@
+# VGFormSender — Модуль отправки форм
+
+Модуль `VGFormSender` позволяет легко и гибко управлять отправкой форм на сайте. Он поддерживает как нативную, так и **AJAX-отправку**, валидацию, отображение уведомлений (через **VGModal** или **VGCollapse**), работу с паролями, спиннеры на кнопках и многое другое.
+
+---
+
+## ✅ Основные возможности
+
+- 📤 **Отправка форм через AJAX или нативно**
+- ✅ **HTML5-валидация** с подсветкой ошибок
+- 🔔 **Уведомления** — в виде модального окна или collapse-блока
+- 🔐 **Показ/скрытие пароля** (с иконкой "глаз")
+- 🔁 **Спиннеры на кнопке отправки**
+- 🔄 **Редиректы** после успешной или неудачной отправки
+- 🧩 **Интерцепторы** (`beforeSend`, `success`, `error`) — полный контроль
+- 🌐 **Мультиязычность** (поддержка `ru`, легко расширяемо)
+- 📢 **События** (`before`, `success`, `error`) для внешнего контроля
+- ⚙️ **Кастомизация** через параметры и `data-*` атрибуты
+
+---
+
+## 🧱 Подключение
+
+### Через JavaScript
+```js
+import VGFormSender from './app/modules/vgformsender/js/vgformsender.js';
+```
+Или подключите как часть сборки.
+
+---
+## 🛠️ Инициализация
+
+### 1. Через JavaScript
+```js 
+VGFormSender.init(document.getElementById('contactForm'), { 
+    validate: true, // включить валидацию
+    ajax: { 
+        route: '/api/send', // URL для отправки 
+        method: 'post' 
+    }, 
+    alert: { 
+        type: 'modal', // 'modal' или 'collapse' 
+        enabled: true, 
+        delay: 5000 // ожидание открытия, через 5 секунд 
+    }, 
+    callback: { 
+        afterSuccess: (form, instance, event, data) => { 
+            console.log('Форма отправлена!', data); 
+        }, 
+        afterError: (form, instance, event, data) => { 
+            console.error('Ошибка:', data); 
+        } 
+    }
+});
+```
+
+### 2. Через HTML (`data-*` атрибуты)
+```html
+    <form action="/api/send" method="post" id="contactForm" data-vgformsender 
+          data-validate="true" 
+          data-alert-type="modal"
+    >
+        <!-- ... -->
+        <button type="submit" data-button-send="Отправляем..." data-button-spinner-enabled="true">Отправить</button>
+    </form>
+```
+
+---
+
+## ⚙️ Параметры модуля
+
+| Параметр                  | Тип                     | По умолчанию                       | Описание                                                             |
+|---------------------------|-------------------------|------------------------------------|----------------------------------------------------------------------|
+| `validate`                | `boolean`               | `false`                            | Включить HTML5-валидацию                                             |
+| `response.enabled`        | `boolean`               | `false`                            | Нативная обработка ответа (без AJAX)                                 |
+| `submit`                  | `boolean`               | `false`                            | Отправлять нативно (без AJAX)                                        |
+| `fields`                  | `Array`                 | `[]`                               | Доп. данные для отправки                                             |
+| `pass.enabled`            | `boolean`               | `true`                             | Показывать иконку глаза у паролей                                    |
+| `alert.enabled`           | `boolean`               | `true`                             | Показывать уведомления                                               |
+| `alert.type`              | `'modal' \| 'collapse'` | `'modal'`                          | Тип уведомления                                                      |
+| `alert.errors`            | `boolean`               | `true`                             | Показывать детали ошибок                                             |
+| `alert.delay`             | `number`                | `0`                                | Задержка закрытия (мс), `0` — не закрывать                           |
+| `ajax.route`              | `string`                | `''`                               | URL отправки (переопределяет `action`)                               |
+| `ajax.method`             | `string`                | `'get'`                            | HTTP-метод (`post`, `put`, и т.д.)                                   |
+| `ajax.target`             | `string`                | `''`                               | Указывается ID целевого блока, для AJAX-ответа                       |
+| `ajax.output`             | `boolean`               | `false`                            | Разрешает или запрещает добавление контента с сервера в целевой блок |
+| `button.spinner.enabled`  | `boolean`               | `false`                            | Показывать спиннер на кнопке                                         |
+| `button.spinner.element`  | `string`                | `<span class="spinner-border...">` | HTML спиннера                                                        |
+| `button.send`             | `string`                | `'Отправляем...'`                  | Текст кнопки при отправке                                            |
+| `button.initial`          | `string`                | `'Отправить'`                      | Исходный текст кнопки                                                |
+| `redirect.success`        | `string`                | `''`                               | Редирект после успеха                                                |
+| `redirect.error`          | `string`                | `''`                               | Редирект после ошибки                                                |
+| `lang`                    | `string`                | `'ru'`                             | Язык сообщений                                                       |
+| `interceptors.beforeSend` | `Function`              | `Promise.resolve()`                | Выполняется перед отправкой                                          |
+| `interceptors.success`    | `Function\|false`       | `false`                            | Кастомная обработка успеха                                           |
+| `interceptors.error`      | `Function\|false`       | `false`                            | Кастомная обработка ошибки                                           |
+| `callback.afterInit`      | `Function`              | `noop`                             | После инициализации                                                  |
+| `callback.afterSuccess`   | `Function`              | `noop`                             | После успеха                                                         |
+| `callback.afterError`     | `Function`              | `noop`                             | После ошибки                                                         |
+| `callback.afterSend`      | `Function`              | `noop`                             | После любого ответа                                                  |
+
+---
+
+## 🔔 События
+
+Модуль генерирует события на DOM-элементе формы.
+
+### Доступные события
+
+| Событие | Данные | Описание |
+|--------|--------|---------|
+| `vg.fs.before` | `{ instance }` | Перед отправкой |
+| `vg.fs.success` | `{ event, self, data }` | Успешная отправка |
+| `vg.fs.error` | `{ event, self, data }` | Ошибка при отправке |
+
+### Пример прослушивания
+
+```js
+document.getElementById('contactForm').addEventListener('vg.fs.success', (e) => { 
+    const { data } = e.vgformsender; 
+    console.log('Ответ сервера:', data); 
+});
+```
+---
+
+## 💬 Языки
+
+Поддерживается русский (`ru`) по умолчанию. Вы можете расширить поддержку:
+```js
+// В lang.js lang_messages('en', 'errors').went_wrong = 'Something went wrong'; lang_titles('en', 'errors').title = 'Error';
+```
+---
+
+## 🖼️ Типы уведомлений
+
+### 1. Модальное окно (`modal`)
+```js
+alert: {
+    type: 'modal', 
+    enabled: true
+}
+```
+Автоматически закрывает другие модальные окна (включая Bootstrap и VGModal).
+
+### 2. Collapse-блок
+```js 
+alert: { 
+    type: 'collapse', 
+    enabled: true
+}
+```
+Уведомление появляется в начале формы.
+
+---
+
+## 🔄 Интерцепторы
+
+Полный контроль над процессом:
+```js
+interceptors: { 
+    beforeSend: () => {
+        return new Promise((resolve, reject) => { 
+            if (confirm('Отправить форму?')) {
+                resolve(); 
+            } else {
+                reject(); 
+            } 
+        });
+    },
+    success: (form, instance, data) => { // кастомная логика, отключает стандартное поведение 
+        console.log('Кастомный успех'); 
+        return false; // важно: вернуть false, чтобы отключить стандартный alert 
+    } 
+}
+```
+---
+
+## 🖱️ Статические методы
+
+### `VGFormSender.init(element, params)`
+Инициализирует форму.
+
+### `VGFormSender.buttonClick(formID, callback, status)`
+Подписывается на нажатие кнопки.
+
+```js 
+VGFormSender.buttonClick('#contactForm', (form, instance) => { 
+    console.log('Кнопка нажата до отправки'); 
+}, 'before');
+```
+---
+
+## 🎨 CSS-классы
+
+| Класс | Назначение |
+|------|-----------|
+| `.vg-form-sender` | Базовый класс формы |
+| `.vg-form-sender--content` | Обёртка полей |
+| `.vg-form-sender-alert` | Блок уведомления |
+| `.vg-form-sender-modal` | Модальное уведомление |
+| `.vg-form-sender-collapse` | Collapse-уведомление |
+
+---
+
+## 📦 Зависимости
+- `BaseModule` — базовый класс
+- `VGModal`, `VGCollapse` — компоненты интерфейса
+- `VGHideShowPass` — показ/скрытие пароля
+- `utils/js/dom/*` — утилиты DOM
+- `utils/js/functions` — вспомогательные функции
+
+---
+
+## 📄 Лицензия
+
+MIT — свободно используйте и модифицируйте.
+
+---
+
+> 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
+> 📍 Поддерживается в проектах на VEGAS / SberTech

package/app/modules/vgformsender/scss/vgformsender.scss

@@ -49,13 +49,20 @@
 
 .vg-form-sender-alert {
 	@include mix-alert-color-mode($class: vg-form-sender-alert);
-
 	background-color: var(--vg-form-sender-alert-background-color);
 	border: 1px solid var(--vg-form-sender-alert-border-color) ;
 	border-radius: var(--vg-border-radius);
 
-	&.vg-form-sender-alert-modal {
-		height: 260px;
+	.vg-btn-close {
+		svg {
+			path {
+				fill: var(--vg-form-sender-alert-close)
+			}
+		}
+	}
+
+	.vg-form-sender-alert-modal {
+		min-height: 260px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -65,6 +72,7 @@
 			flex-direction: column;
 			align-items: center;
 			gap: 1.5rem;
+			padding: 1rem;
 		}
 
 		.vg-form-sender-alert-content--text {

package/app/modules/vgnav/js/vgnav.js

@@ -23,7 +23,7 @@ const CLASS_NAME_ACTIVE    = 'active';
 /**
  * Constants toggle
  */
-const SELECTOR_DATA_TOGGLE = '.'+ CLASS_NAME +' a';
+const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' a';
 
 /**
  * Constants Events
@@ -55,7 +55,8 @@ class VGNav extends BaseModule {
 				enable: true,
 				always: false,
 				title: '',
-				body: null
+				body: null,
+				target: '#sidebar-nav'
 			},
 			callbacks: {
 				afterInit: noop,
@@ -87,8 +88,12 @@ class VGNav extends BaseModule {
 		this.navigation = '.' + this._classes.wrapper;
 
 		if (this._params.animation.enable === false) {
-			this._params.animation.timeout = 10
+			this._params.animation.timeout = 10;
 		}
+
+		this._openDrops = new Map();
+		this._handleScroll = this._handleScroll.bind(this);
+		this._handleResize = this._handleResize.bind(this);
 	}
 
 	static get NAME() {
@@ -138,7 +143,7 @@ class VGNav extends BaseModule {
 					hamburger = '<span class="' + classes.hamburger + '--lines"><span></span><span></span><span></span></span>';
 
 				if (params.hamburger.title) {
-					mobileNavTitle = '<span class="' + classes.hamburger + '--title">'+ params.hamburger.title +'</span>';
+					mobileNavTitle = '<span class="' + classes.hamburger + '--title">' + params.hamburger.title + '</span>';
 				}
 
 				if (params.hamburger.body !== null) {
@@ -163,8 +168,8 @@ class VGNav extends BaseModule {
 			if ($dropdown_a.length) {
 				$dropdown_a.forEach(function (elem) {
 					if (!elem.querySelector('.toggle') && !elem.closest('.dots')) {
-						elem.setAttribute('aria-expanded', 'false')
-						elem.insertAdjacentHTML('beforeend', toggle)
+						elem.setAttribute('aria-expanded', 'false');
+						elem.insertAdjacentHTML('beforeend', toggle);
 					}
 				});
 			}
@@ -195,15 +200,32 @@ class VGNav extends BaseModule {
 		target.classList.add(CLASS_NAME_ACTIVE);
 
 		const $placement = new Placement({
-			drop: drop
-		})
+			reference: target,
+			drop: drop,
+			placement: 'bottom-start',
+			fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
+			offset: [0, 6],
+			boundary: 'clippingParents',
+			autoFlip: true,
+			overflowProtection: true
+		});
 
 		$placement._setPlacement();
 
+		this._openDrops.set(drop, {
+			reference: target,
+			placement: $placement,
+			scrollHandler: this._handleScroll,
+			resizeHandler: this._handleResize
+		});
+
+		window.addEventListener('scroll', this._handleScroll, { passive: true, capture: true });
+		window.addEventListener('resize', this._handleResize);
+
 		const completeCallBack = () => {
 			drop.classList.add(CLASS_NAME_FADE);
-			EventHandler.trigger(target, EVENT_KEY_SHOWN, relatedTarget)
-		}
+			EventHandler.trigger(target, EVENT_KEY_SHOWN, relatedTarget);
+		};
 		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
@@ -218,7 +240,7 @@ class VGNav extends BaseModule {
 		let element = relatedTarget.relatedTarget;
 
 		if ('elm' in relatedTarget && relatedTarget.elm) {
-			element = relatedTarget.elm
+			element = relatedTarget.elm;
 		}
 
 		if (element) {
@@ -245,15 +267,65 @@ class VGNav extends BaseModule {
 				if (index === 0) {
 					const completeCallback = () => {
 						el.classList.remove(CLASS_NAME_SHOW);
-						EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget)
-					}
+						EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
+					};
 
 					_this._queueCallback(completeCallback, el, true, 500);
 				}
+
+				const dropData = _this._openDrops.get(el);
+				if (dropData) {
+					window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+					window.removeEventListener('resize', dropData.resizeHandler);
+					_this._openDrops.delete(el);
+				}
 			});
 		}
 	}
 
+	_handleScroll() {
+		for (const [drop, data] of this._openDrops.entries()) {
+			if (drop.offsetParent === null) {
+				this._cleanupDrop(drop);
+				continue;
+			}
+
+			data.placement._setPlacement();
+
+			if (!this._isElementInViewport(drop)) {
+				const target = data.reference;
+				this.hide({ relatedTarget: target });
+			}
+		}
+	}
+
+	_handleResize() {
+		for (const [drop, data] of this._openDrops.entries()) {
+			if (drop.offsetParent === null) continue;
+			data.placement._setPlacement();
+		}
+	}
+
+	_cleanupDrop(drop) {
+		const dropData = this._openDrops.get(drop);
+		if (dropData) {
+			window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+			window.removeEventListener('resize', dropData.resizeHandler);
+			this._openDrops.delete(drop);
+		}
+	}
+
+	_isElementInViewport(el) {
+		const rect = el.getBoundingClientRect();
+		const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+		const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+
+		const vertInView = (rect.top <= viewHeight) && ((rect.top + rect.height) >= 0);
+		const horInView = (rect.left <= viewWidth) && ((rect.left + rect.width) >= 0);
+
+		return vertInView && horInView;
+	}
+
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
 		instance.build();
@@ -276,7 +348,7 @@ class VGNav extends BaseModule {
 
 					let relatedTarget = {
 						relatedTarget: target
-					}
+					};
 
 					instance.show(relatedTarget);
 				});
@@ -293,9 +365,9 @@ class VGNav extends BaseModule {
 					}
 
 					currentElem = null;
-					instance.hide({relatedTarget: relatedTarget, elm: elm});
-				})
-			})
+					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+				});
+			});
 		}
 
 		const vgNavSidebar = document.getElementById('sidebar-nav');
@@ -314,16 +386,16 @@ class VGNav extends BaseModule {
 
 	static clearDrops(event) {
 		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
-			return
+			return;
 		}
 
-		VGNav.hideOpenDrops(event)
+		VGNav.hideOpenDrops(event);
 	}
 
 	static hideOpenDrops(event) {
-		[... Selectors.findAll('.dropdown:not(.disabled):not(:disabled).active')].forEach((el) => {
+		[...Selectors.findAll('.dropdown:not(.disabled):not(:disabled).active')].forEach((el) => {
 			let target = event.target,
-				drop   = target.closest('.dropdown');
+				drop = target.closest('.dropdown');
 
 			if (el !== drop) {
 				const nav = el.closest('.vg-nav');
@@ -337,9 +409,9 @@ class VGNav extends BaseModule {
 					return;
 				}
 
-				const relatedTarget = { relatedTarget: el }
+				const relatedTarget = { relatedTarget: el };
 
-				context.hide(relatedTarget)
+				context.hide(relatedTarget);
 			}
 		});
 	}
@@ -375,16 +447,16 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
 	if (dropContent && isFirst) {
 		if (drop.classList.contains('active')) {
-			instance.hide({relatedTarget: drop});
+			instance.hide({ relatedTarget: drop });
 			return;
 		}
 	} else {
 		[...Selectors.findAll('.active', nav)].forEach(function (el) {
-			instance.hide({relatedTarget: el})
+			instance.hide({ relatedTarget: el });
 		});
 	}
 
-	instance.show({relatedTarget: drop});
+	instance.show({ relatedTarget: drop });
 });
 
 export default VGNav;

package/app/modules/vgnav/scss/_placement.scss

@@ -1,44 +1,6 @@
 &.vg-nav-horizontal {
 	.vg-nav-wrapper {
 		flex-direction: row;
-
-		.dropdown {
-			> .dropdown-content {
-				&.left, .left {
-					left: 0;
-				}
-
-				&.right, .right {
-					right: 0;
-				}
-
-				&.top, .top {
-					top: 0;
-				}
-
-				&.bottom, .bottom {
-					bottom: 0;
-				}
-
-				.dropdown {
-					ul.left {
-						left: 100%;
-					}
-
-					ul.right {
-						right: 100%;
-					}
-
-					ul.top {
-						top: 100%;
-					}
-
-					ul.bottom {
-						bottom: 100%;
-					}
-				}
-			}
-		}
 	}
 }
 
@@ -46,64 +8,17 @@
 	.vg-nav-wrapper {
 		flex-direction: column;
 
-		.dropdown {
-			> ul {
-				&.left, .left {
-					left: 100%;
-				}
-
-				&.right, .right {
-					right: 100%;
-				}
-
-				&.top, .top {
-					top: 100%;
-				}
-
-				&.bottom, .bottom {
-					bottom: 100%;
-				}
-
-				&.fade {
-					&.top {
-						top: 0;
-					}
-					&.bottom {
-						bottom: 0;
-					}
-				}
-			}
-
-			&.show {
-				&.top {
-					> ul {
-						top: 0;
-					}
-				}
-				&.bottom {
-					> ul {
-						bottom: 0;
-					}
-				}
-			}
+		[data-vg-placement=top-start], [data-vg-placement=bottom-start] {
+			left: 100%;
 		}
 
-		.dropdown-mega {
-			position: relative;
-
-			.dropdown-mega-container {
-				left: 100%;
-				top: 100%;
-
-				&.fade {
-					&.top {
-						top: 0;
-					}
+		[data-vg-placement^=bottom] {
+			top: 0;
+		}
 
-					&.bottom {
-						bottom: 0;
-					}
-				}
+		[data-vg-placement^=bottom] {
+			[data-vg-placement=top-start] {
+				bottom: 0;
 			}
 		}
 	}

package/app/modules/vgnav/scss/vgnav.scss

@@ -115,7 +115,6 @@
 
 				.dropdown-content {
 					position: absolute;
-					left: 0;
 					transition: var(--vg-nav-drop-mega-transition);
 					width: var(--vg-nav-drop-mega-width);
 					min-height: var(--vg-nav-drop-mega-min-height);