vgapp 0.6.9 → 0.7.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# VEGAS-APP 0.6.9 - 0.7.0 (Ноябрь, 21, 2025)
+* Изменения коснулись модуля vgformsender в частности кнопку submit, дата атрибуты можно вешать на нее или на саму форму 
+  1. Опциональное состояние кнопки(submit) data-button-enabled="false" - никаких действий с текстом кнопки не будет
+  2. data-button-disabled - по умолчанию `true`, блокирует кнопку при отправке 
+  3. data-button-spinner-enabled - по умолчанию `false`, добавляет спиннер загрузки в кнопку
+  4. data-button-spinner-element - добавит код по умолчанию `<span class="spinner-border spinner-border-sm me-2"></span>`, можно придумать свой
+  5. data-button-initial - можно вписать текст, или он сам возьмет содержимое кнопки.
+  6. data-button-send - текст во время отправки, по умолчанию `Отправляем...`
+
+* Исправлены ошибки в разных модулях
+
+---
+
 # VEGAS-APP 0.6.6 - 0.6.8 (Ноябрь, 17, 2025)
 * isLeaveBackDrop (boolean) - для методов .hide() модулей VGModal и VGSidebar. Если программно нужно сменить модалки или сайдбары и/или одно на другое при этом не будет затронут задний фон Backdrop
 * Исправлены ошибки в разных модулях

package/app/modules/base-module.js

@@ -34,48 +34,50 @@ class BaseModule {
 	}
 
 	_route(callback) {
-		const _this = this;
-		let $content = null;
+		let $content = null,
+			timeout = this._params.ajax.timeout || 0;
 
-		if (_this._isLoaded) return;
+		if (this._isLoaded) return;
 
 		const setData = (data) => {
 			if ($content) $content.innerHTML = data;
 		};
 
-		if (!_this._params.hasOwnProperty('ajax')) {
+		if (!this._params.hasOwnProperty('ajax')) {
 			return;
 		}
 
-		if (!_this._params.ajax.route) {
+		if (!this._params.ajax.route) {
 			return;
 		}
 
-		if (!'method' in _this._params.ajax) {
-			_this._params.ajax.method = 'get';
+		if (!'method' in this._params.ajax) {
+			this._params.ajax.method = 'get';
 		}
 
-		if ('target' in _this._params.ajax && _this._params.ajax.target) {
-			$content = Selectors.find(_this._params.ajax.target);
+		if ('target' in this._params.ajax && this._params.ajax.target) {
+			$content = Selectors.find(this._params.ajax.target);
 		}
 
-		if ('loader' in _this._params.ajax && _this._params.ajax.loader) {
-			if ('output' in _this._params.ajax && _this._params.ajax.output) {
+		if ('loader' in this._params.ajax && this._params.ajax.loader) {
+			if ('output' in this._params.ajax && this._params.ajax.output) {
 				setData('<div class="vg-loader"></div>');
 			}
 		}
 
-		Ajax[_this._params.ajax.method](_this._params.ajax.route, _this._params.ajax.data || {}, function (status, data) {
-			if ('once' in _this._params.ajax && _this._params.ajax.once) {
-				_this._isLoaded = true;
-			}
+		setTimeout(() => {
+			Ajax[this._params.ajax.method](this._params.ajax.route, this._params.ajax.data || {}, (status, data) => {
+				if ('once' in this._params.ajax && this._params.ajax.once) {
+					this._isLoaded = true;
+				}
 
-			if ('output' in _this._params.ajax && _this._params.ajax.output) {
-				setData(data.response);
-			}
+				if ('output' in this._params.ajax && this._params.ajax.output) {
+					setData(data.response);
+				}
 
-			execute(callback, [status, data, $content]);
-		});
+				execute(callback, [status, data, $content]);
+			});
+		}, timeout)
 	}
 
 	_dismissElement() {

package/app/modules/vgformsender/js/vgformsender.js

@@ -3,7 +3,7 @@ import {Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
 import VGModal from "../../vgmodal/js/vgmodal";
 import {
-	execute,
+	execute, getDeepestLastChild,
 	isObject,
 	isVisible,
 	makeRandomString,
@@ -16,6 +16,12 @@ import VGCollapse from "../../vgcollapse/js/vgcollapse";
 import {getSVG} from "../../module-fn";
 import VGHideShowPass from "./hideshowpass";
 
+/**
+ * TODO
+ * доделай динамическое добавление полей в форму,
+ * но не меняй место их получения (их нужно получить прямо перед отправкой, после того как выполнился промис beforeSend)
+ */
+
 /**
  * Constants
  */
@@ -66,6 +72,7 @@ class VGFormSender extends BaseModule {
 				route: '',
 				target: '',
 				method: 'get',
+				timeout: 1000,
 			},
 			classes: {
 				general: 'vg-form-sender',
@@ -81,9 +88,20 @@ class VGFormSender extends BaseModule {
 				afterError: noop,
 			},
 			interceptors: {
+				beforeSend: () => new Promise((resolve, reject) => resolve()),
 				success: false,
 				error: false
-			}
+			},
+			button: {
+				enabled: true,
+				disabled: true,
+				send: 'Отправляем...',
+				initial: 'Отправить',
+				spinner: {
+					enabled: false,
+					element: '<span class="spinner-border spinner-border-sm me-2"></span>'
+				}
+			},
 		}, params));
 
 		this._params.ajax.route = Manipulator.get(this._element, 'action').toLowerCase();
@@ -93,6 +111,9 @@ class VGFormSender extends BaseModule {
 		this._params.isBtnText   = Manipulator.get(this._element, 'data-btn-text') !== 'false';
 		this._params.isJsonParse = Manipulator.get(this._element, 'data-json-parse') !== 'false';
 		this._params.isShowPass  = Manipulator.get(this._element, 'data-show-pass') === 'true';
+
+		this._params = this._getParams(this._button, this._params);
+		this._params.button.initial = this._button.innerHTML || this._params.button.initial;
 	}
 
 	static get NAME() {
@@ -133,40 +154,45 @@ class VGFormSender extends BaseModule {
 
 		_this._alertBefore();
 
-		_this._params.ajax.data = data;
+		const submit = () => {
+			_this._params.ajax.data = new FormData(_this._element);
+			_this._route(function (status, data) {
+				_this._element.classList.remove('was-validated');
 
-		_this._route(function (status, data) {
-			_this._element.classList.remove('was-validated');
-
-			if (_this._params.response.enabled) {
-				data.response = _this._params.response;
-			}
+				if (_this._params.response.enabled) {
+					data.response = _this._params.response;
+				}
 
-			if (_this._params.alert.enabled) {
-				if (typeof status === 'string' && status === 'error') {
-					if (_this._params.redirect.error) {
-						window.location.href = _this._params.redirect.error;
-					} else {
-						if (!_this._params.interceptors.error) {
-							_this._alertError(event, data);
-							execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
+				if (_this._params.alert.enabled) {
+					if (typeof status === 'string' && status === 'error') {
+						if (_this._params.redirect.error) {
+							window.location.href = _this._params.redirect.error;
 						} else {
-							execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
+							if (!_this._params.interceptors.error) {
+								_this._alertError(event, data);
+								execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
+							} else {
+								execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
+							}
 						}
-					}
-				} else if (typeof status === 'string' && status === 'success') {
-					if (_this._params.redirect.success) {
-						window.location.href = _this._params.redirect.success;
-					} else {
-						if (!_this._params.interceptors.success) {
-							_this._alertSuccess(event, data);
-							execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
+					} else if (typeof status === 'string' && status === 'success') {
+						if (_this._params.redirect.success) {
+							window.location.href = _this._params.redirect.success;
 						} else {
-							execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
+							if (!_this._params.interceptors.success) {
+								_this._alertSuccess(event, data);
+								execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
+							} else {
+								execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
+							}
 						}
 					}
 				}
-			}
+			});
+		};
+
+		_this._params.interceptors.beforeSend().then(() => {
+			submit();
 		});
 	}
 
@@ -202,55 +228,35 @@ class VGFormSender extends BaseModule {
 	}
 
 	_statusButton(status) {
-		const _this = this;
-
-		if (!_this._button) return;
+		if (!this._button) return;
 
-		let btnSubmitText = _this._button,
-			btnText = {
-			send: 'Отправляем...',
-			text: 'Отправить'
-		};
-
-		if (Manipulator.has(_this._button, 'data-spinner') && status === 'before') {
-			_this._button.insertAdjacentHTML('afterbegin', '<span class="spinner-border spinner-border-sm me-2"></span>');
-		}
+		if (status === 'before') {
+			const button = getDeepestLastChild(this._button) || this._button;
 
-		if (Manipulator.has(_this._button, 'data-text')) {
-			btnText.text = Manipulator.get(_this._button, 'data-text');
-		} else {
-			let $btnText = _this._button.querySelector('[data-text]');
-			if ($btnText) {
-				btnText.text = Manipulator.get($btnText, 'data-text');
-				btnSubmitText = $btnText;
+			if (this._params.button.spinner.enabled) {
+				this._button.insertAdjacentHTML('afterbegin', this._params.button.spinner.element);
 			}
-		}
 
-		if (Manipulator.has(_this._button, 'data-text-send')) {
-			btnText.send = Manipulator.get(_this._button, 'data-text-send');
-		} else {
-			let $btnTextSend = _this._button.querySelector('[data-text-send]');
-			if ($btnTextSend) {
-				btnText.send = Manipulator.get($btnTextSend, 'data-text-send');
-				btnSubmitText = $btnTextSend;
+			if (this._params.button.enabled) {
+				button.innerHTML = this._params.button.send
 			}
-		}
 
-		if (status === 'before') {
-			if (_this._params.isBtnText) {
-				btnSubmitText.innerHTML = btnText.send;
+			if (this._params.button.disabled) {
+				Manipulator.set(this._button,'disabled', 'disabled');
 			}
-			Manipulator.set(_this._button,'disabled', 'disabled');
 		}
 
 		if (status === 'after') {
-			if (_this._params.isBtnText) {
-				btnSubmitText.innerHTML = btnText.text;
+			if (this._params.button.enabled) {
+				this._button.innerHTML = this._params.button.initial;
+			}
+			if (this._params.button.disabled) {
+				Manipulator.remove(this._button,'disabled');
+			}
+			if (this._params.button.spinner.enabled) {
+				let spinner = this._button.querySelector('.spinner-border');
+				if (spinner) spinner.remove();
 			}
-			Manipulator.remove(_this._button,'disabled');
-
-			let spinner = _this._button.querySelector('.spinner-border');
-			if (spinner) spinner.remove();
 		}
 	}
 
@@ -523,7 +529,7 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 		}
 	}
 
-	const collectData = function(data, fields) {
+	/*const collectData = function(data, fields) {
 		for (let name in fields) {
 			if (typeof fields[name] === 'object') {
 				for (let key in fields[name]) {
@@ -538,19 +544,19 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 		}
 
 		return data;
-	}
+	}*/
 
 	if (!instance._params.submit) {
 		event.preventDefault();
 
-		let data = new FormData(instance._element);
+		//let data = new FormData(instance._element);
 
 		// TODO доделать
 		/*if (Array.isArray(instance._params.ajax.fields) && instance._params.ajax.fields.length) {
 			data = collectData(data, instance._params.ajax.fields);
 		}*/
 
-		return instance.request(data, event);
+		return instance.request(event);
 	}
 })
 

package/app/utils/js/components/params.js

@@ -17,24 +17,30 @@ class Params {
 	merge(params, element) {
 		let mParams = mergeDeepObject(params, this.fromElement(element));
 
-		for (let key in mParams) {
-			if (key.indexOf('-') !== -1) {
-				let keys = key.split('-'),
-					value = normalizeData(mParams[key]);
-
-				if (keys[0] in mParams) {
-					if (keys[1] in mParams[keys[0]]) {
-						mParams[keys[0]][keys[1]] = value;
-					}
+		function stringToNestedObjectWithValue(str, value, params) {
+			const keys = str.split('-');
+			let result = {};
+			let currentLevel = result;
+
+			for (let i = 0; i < keys.length; i++) {
+				const key = keys[i];
+
+				if (i < keys.length - 1) {
+					currentLevel[key] = {};
+					currentLevel = currentLevel[key];
+				} else {
+					currentLevel[key] = value;
 				}
-
-				delete mParams[key];
 			}
+
+			return mergeDeepObject(params, result);
 		}
 
-		if ('params' in mParams) {
-			mParams = mergeDeepObject(mParams, mParams.params);
-			delete mParams.params;
+		for (let key in mParams) {
+			if (key.indexOf('-') !== -1) {
+				mParams = stringToNestedObjectWithValue(key, mParams[key], mParams);
+				delete mParams[key];
+			}
 		}
 
 		return mParams;

package/app/utils/js/functions.js

@@ -345,9 +345,24 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed
 	return list[Math.max(0, Math.min(index, listLength - 1))]
 }
 
+/**
+ * Рекурсивный поиск самого глубокого последнего потомка
+ * @param element
+ * @returns {*}
+ */
+function getDeepestLastChild(element) {
+	let current = element;
+
+	while (current.lastElementChild) {
+		current = current.lastElementChild;
+	}
+
+	return current;
+}
+
 /**
  *
  */
 const isRTL = () => document.documentElement.dir === 'rtl'
 
-export {isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL, transliterate, getElement, getNextActiveElement}
+export {getDeepestLastChild, isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL, transliterate, getElement, getNextActiveElement}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vgapp",
-	"version": "0.6.9",
+	"version": "0.7.1",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",