vgapp 1.3.7 → 1.3.9

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

@@ -17,12 +17,12 @@ const CLASS_NAME_SHOW = 'show';
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
 class VGHideShowPass extends BaseModule{
-	constructor(el, params = {}) {
-		super(el, params);
-
-		this._params = this._getParams(el, mergeDeepObject({
-			parentClass: 'vg-form-sender--content-pass'
-		}, params));
+	constructor(el, params = {}) {
+		super(el, params);
+
+		this._params = this._getParams(el, mergeDeepObject({
+			parentClass: 'vg-form-sender--content-pass'
+		}, params));
 	}
 
 	static get NAME() {
@@ -62,15 +62,15 @@ class VGHideShowPass extends BaseModule{
 		instance.build(false);
 	}
 
-	build(isShow = false) {
-		let classes = this._params.classes.join(' '), elm = '';
-		const HTML = Html('string');
-		if (this._element.parentElement && this._params.parentClass) {
-			this._element.parentElement.classList.add(this._params.parentClass);
-		}
-
-		if (!isShow) {
-			elm = HTML.component('eye', {class: classes});
+	build(isShow = false) {
+		let classes = this._params.classes.join(' '), elm = '';
+		const HTML = Html('string');
+		if (this._element.parentElement && this._params.parentClass) {
+			this._element.parentElement.classList.add(this._params.parentClass);
+		}
+
+		if (!isShow) {
+			elm = HTML.component('eye', {class: classes});
 		} else {
 			elm = HTML.component('eye', {class: classes, type: 'hide'});
 		}
@@ -100,4 +100,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	instance.toggle(this);
 });
 
-export default VGHideShowPass
+export default VGHideShowPass

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

@@ -21,16 +21,16 @@
  *     type: 'modal',
  *     enabled: true
  *   },
- *   callback: {
- *     afterSuccess: (form, instance, event, data) => {
- *       console.log('Форма успешно отправлена');
- *     },
- *     afterValidateError: (form, instance, event, errors) => {
- *       console.log(errors);
- *     }
- *   }
- * });
- */
+ *   callback: {
+ *     afterSuccess: (form, instance, event, data) => {
+ *       console.log('Форма успешно отправлена');
+ *     },
+ *     afterValidateError: (form, instance, event, errors) => {
+ *       console.log(errors);
+ *     }
+ *   }
+ * });
+ */
 
 import BaseModule from "../../base-module";
 import VGModal from "../../vgmodal/js/vgmodal";
@@ -163,13 +163,13 @@ class VGFormSender extends BaseModule {
 				wasValidate: 'was-validated',
 				content: 'vg-form-sender--content'
 			},
-			callback: {
-				afterInit: noop,
-				afterValidateError: noop,
-				afterSuccess: noop,
-				afterError: noop,
-				afterSend: noop,
-			},
+			callback: {
+				afterInit: noop,
+				afterValidateError: noop,
+				afterSuccess: noop,
+				afterError: noop,
+				afterSend: noop,
+			},
 			interceptors: {
 				beforeSend: () => new Promise((resolve, reject) => resolve()),
 				success: false,
@@ -473,59 +473,59 @@ class VGFormSender extends BaseModule {
 	 * @param {'success'|'error'} status - Статус ответа
 	 * @private
 	 */
-	_jsonParse(data, status) {
-		const _this = this;
+	_jsonParse(data, status) {
+		const _this = this;
 
 		if (_this._params.isJsonParse) {
 			_this.alert(normalizeData(data), status);
 		} else {
 			_this.alert(data, status);
-		}
-	}
-
-	/**
-	 * Возвращает список ошибок нативной валидации формы
-	 * @returns {Array<Object>}
-	 * @private
-	 */
-	_getValidationErrors() {
-		return [...this._element.elements]
-			.filter((field) => typeof field?.checkValidity === 'function' && !field.checkValidity())
-			.map((field) => ({
-				element: field,
-				name: field.name || '',
-				id: field.id || '',
-				type: field.type || '',
-				value: field.value,
-				message: field.validationMessage || '',
-				validity: {...field.validity}
-			}));
-	}
-
-	/**
-	 * Обрабатывает неуспешную нативную валидацию перед отправкой
-	 * @param {Event} event
-	 * @returns {boolean}
-	 * @private
-	 */
-	_handleValidateError(event) {
-		event.preventDefault();
-		event.stopPropagation();
-
-		this._element.classList.add(this._params.classes.wasValidate);
-
-		execute(this._params.callback.afterValidateError, [
-			this._element,
-			this,
-			event,
-			this._getValidationErrors()
-		]);
-
-		return false;
-	}
-
-	/**
-	 * Отображение алерта в зависимости от типа (modal/collapse)
+		}
+	}
+
+	/**
+	 * Возвращает список ошибок нативной валидации формы
+	 * @returns {Array<Object>}
+	 * @private
+	 */
+	_getValidationErrors() {
+		return [...this._element.elements]
+			.filter((field) => typeof field?.checkValidity === 'function' && !field.checkValidity())
+			.map((field) => ({
+				element: field,
+				name: field.name || '',
+				id: field.id || '',
+				type: field.type || '',
+				value: field.value,
+				message: field.validationMessage || '',
+				validity: {...field.validity}
+			}));
+	}
+
+	/**
+	 * Обрабатывает неуспешную нативную валидацию перед отправкой
+	 * @param {Event} event
+	 * @returns {boolean}
+	 * @private
+	 */
+	_handleValidateError(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		this._element.classList.add(this._params.classes.wasValidate);
+
+		execute(this._params.callback.afterValidateError, [
+			this._element,
+			this,
+			event,
+			this._getValidationErrors()
+		]);
+
+		return false;
+	}
+
+	/**
+	 * Отображение алерта в зависимости от типа (modal/collapse)
 	 * @param {Object|string} data - Данные для отображения
 	 * @param {string} status - Статус: success, error, danger и т.д.
 	 */
@@ -682,8 +682,9 @@ class VGFormSender extends BaseModule {
 		// Модалка OKAUX
 		[...document.getElementsByClassName('ox-modal')].forEach((element) => {
 			if (element && element.classList.contains('is-open')) {
-				const mOX = okaux.Modal.getOrCreateInstance(element);
-				mOX.hide();
+				okaux.Modal.getOpenInstances().forEach((instance) => {
+					instance.hide();
+				});
 			}
 		});
 	}
@@ -944,11 +945,11 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 		return;
 	}
 
-	if (instance._params.validate) {
-		if (!instance._element.checkValidity()) {
-			return instance._handleValidateError(event);
-		}
-	}
+	if (instance._params.validate) {
+		if (!instance._element.checkValidity()) {
+			return instance._handleValidateError(event);
+		}
+	}
 
 	if (!instance._params.submit) {
 		event.preventDefault();

package/app/modules/vgformsender/readme.md

@@ -43,13 +43,13 @@ VGFormSender.init(document.getElementById('contactForm'), {
         enabled: true, 
         delay: 5000 // ожидание открытия, через 5 секунд 
     }, 
-    callback: { 
-        afterValidateError: (form, instance, event, errors) => {
-            console.log('Ошибки валидации:', errors);
-        },
-        afterSuccess: (form, instance, event, data) => { 
-            console.log('Форма отправлена!', data); 
-        }, 
+    callback: { 
+        afterValidateError: (form, instance, event, errors) => {
+            console.log('Ошибки валидации:', errors);
+        },
+        afterSuccess: (form, instance, event, data) => { 
+            console.log('Форма отправлена!', data); 
+        }, 
         afterError: (form, instance, event, data) => { 
             console.error('Ошибка:', data); 
         } 
@@ -97,40 +97,40 @@ VGFormSender.init(document.getElementById('contactForm'), {
 | `interceptors.beforeSend` | `Function`              | `Promise.resolve()`                | Выполняется перед отправкой                                          |
 | `interceptors.success`    | `Function\|false`       | `false`                            | Кастомная обработка успеха                                           |
 | `interceptors.error`      | `Function\|false`       | `false`                            | Кастомная обработка ошибки                                           |
-| `callback.afterInit`      | `Function`              | `noop`                             | После инициализации                                                  |
-| `callback.afterValidateError` | `Function`          | `noop`                             | После провала нативной HTML5-валидации, до отправки формы            |
-| `callback.afterSuccess`   | `Function`              | `noop`                             | После успеха                                                         |
-| `callback.afterError`     | `Function`              | `noop`                             | После ошибки                                                         |
-| `callback.afterSend`      | `Function`              | `noop`                             | После любого ответа                                                  |
-
----
-
-## Проверка валидации до отправки
-
-Если включён `validate: true`, модуль сначала вызывает нативный `checkValidity()` у формы. Если форма невалидна, отправка отменяется, форме добавляется класс `was-validated`, а затем вызывается `callback.afterValidateError`.
-
-```js
-VGFormSender.init(document.getElementById('contactForm'), {
-    validate: true,
-    callback: {
-        afterValidateError: (form, instance, event, errors) => {
-            errors.forEach((error) => {
-                console.log(error.name, error.message);
-            });
-        }
-    }
-});
-```
-
-Каждый элемент массива `errors` содержит:
-
-- `element` — ссылку на невалидное поле
-- `name` / `id` / `type`
-- `value` — текущее значение поля
-- `message` — текст из `validationMessage`
-- `validity` — слепок объекта `ValidityState`
-
----
+| `callback.afterInit`      | `Function`              | `noop`                             | После инициализации                                                  |
+| `callback.afterValidateError` | `Function`          | `noop`                             | После провала нативной HTML5-валидации, до отправки формы            |
+| `callback.afterSuccess`   | `Function`              | `noop`                             | После успеха                                                         |
+| `callback.afterError`     | `Function`              | `noop`                             | После ошибки                                                         |
+| `callback.afterSend`      | `Function`              | `noop`                             | После любого ответа                                                  |
+
+---
+
+## Проверка валидации до отправки
+
+Если включён `validate: true`, модуль сначала вызывает нативный `checkValidity()` у формы. Если форма невалидна, отправка отменяется, форме добавляется класс `was-validated`, а затем вызывается `callback.afterValidateError`.
+
+```js
+VGFormSender.init(document.getElementById('contactForm'), {
+    validate: true,
+    callback: {
+        afterValidateError: (form, instance, event, errors) => {
+            errors.forEach((error) => {
+                console.log(error.name, error.message);
+            });
+        }
+    }
+});
+```
+
+Каждый элемент массива `errors` содержит:
+
+- `element` — ссылку на невалидное поле
+- `name` / `id` / `type`
+- `value` — текущее значение поля
+- `message` — текст из `validationMessage`
+- `validity` — слепок объекта `ValidityState`
+
+---
 
 ## 🔔 События
 

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

@@ -20,21 +20,21 @@
 		}
 	}
 
-	&--content {
-		position: relative;
-
-		&-pass {
-			&:focus-within {
-				input {
-					padding-right: 5rem;
-				}
-
-				.vg-form-sender--hide-show-pass {
-					right: 44px;
-				}
-			}
-		}
-	}
+	&--content {
+		position: relative;
+
+		&-pass {
+			&:focus-within {
+				input {
+					padding-right: 5rem;
+				}
+
+				.vg-form-sender--hide-show-pass {
+					right: 44px;
+				}
+			}
+		}
+	}
 
 	&--hide-show-pass {
 		position: absolute;
@@ -52,24 +52,24 @@
 		}
 	}
 
-	&.was-validated {
-		.vg-form-sender--hide-show-pass {
-			right: 34px;
-		}
-
-		.vg-form-sender--content-pass {
-			&:focus-within {
-				input {
-					padding-right: 6.25rem;
-				}
-
-				.vg-form-sender--hide-show-pass {
-					right: 64px;
-				}
-			}
-		}
-	}
-}
+	&.was-validated {
+		.vg-form-sender--hide-show-pass {
+			right: 34px;
+		}
+
+		.vg-form-sender--content-pass {
+			&:focus-within {
+				input {
+					padding-right: 6.25rem;
+				}
+
+				.vg-form-sender--hide-show-pass {
+					right: 64px;
+				}
+			}
+		}
+	}
+}
 
 .vg-form-sender-alert {
 	@include mix-alert-color-mode($class: vg-form-sender-alert);
@@ -126,4 +126,4 @@
 .vg-form-sender-alert-content--text {
 	font-size: 1.25rem;
 	color: var(--vg-form-sender-alert-color);
-}
+}