vgapp 1.2.2 → 1.2.3

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

@@ -66,8 +66,8 @@ const NAME_KEY = 'vg.fs';
  * CSS-класс для алертов
  * @type {string}
  */
-const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
-const CLASS_NAME_MODAL_STACKED = 'vg-modal-stacked';
+const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
+const CLASS_NAME_MODAL_STACKED = 'vg-modal-stacked';
 
 /**
  * Событие: успешная отправка формы
@@ -131,19 +131,19 @@ class VGFormSender extends BaseModule {
 				classes: ['vg-form-sender--hide-show-pass'],
 				insert: 'afterend'
 			},
-			alert: {
-				enabled: true,
-				type: 'modal',
-				errors: true,
-				title: true,
-				delay: 0,
-				modal: {
-					closeModalsBeforeModal: true
-				},
-				toast: {
-					closeModalsBeforeToast: false
-				}
-			},
+			alert: {
+				enabled: true,
+				type: 'modal',
+				errors: true,
+				title: true,
+				delay: 0,
+				modal: {
+					closeModalsBeforeModal: true
+				},
+				toast: {
+					closeModalsBeforeToast: true
+				}
+			},
 			ajax: {
 				route: '',
 				target: '',
@@ -531,107 +531,107 @@ class VGFormSender extends BaseModule {
 	 * @param {string} status - Статус (success/error)
 	 * @private
 	 */
-	_alertModal(data, status) {
-		const _this = this;
-		const closeModalsBeforeModal = _this._params.alert.modal?.closeModalsBeforeModal;
-		const isStackedModal = !closeModalsBeforeModal && _this._hasOpenedModals();
-
-		if (closeModalsBeforeModal) {
-			_this._closeOpenedModals();
-		}
-
-		let id = _this._params.classes.general + '-' + makeRandomString(),
-			$modal = Selectors.find('.' + _this._params.classes.alertModal);
-
-		if ($modal) $modal.remove();
-
-		setTimeout(() => {
-			VGModal.init(id, {
-				dismiss: true,
-				classes: {
-					alert: _this._params.classes.alertModal
-				}
-			}, function (self) {
-				let element = self._element;
-				element.classList.add(_this._params.classes.alertModal);
-				if (isStackedModal) {
-					_this._setStackedModalState(element);
-				}
-
-				let $content = Selectors.find('.vg-modal-content', element);
-				if ($content) $content.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status);
-
-				let $body = Selectors.find('.vg-modal-body', element);
-				if ($body) $body.append(_this.setDataRelationStatus(element, status, data, 'modal'));
-
-				self.toggle();
-
-				if (_this._params.alert.delay > 0) {
-					setTimeout(() => {
-						self.hide();
-					}, _this._params.alert.delay)
-				}
-			});
-		}, _this._params.timeout);
-	}
-
-	/**
-	 * Проверка наличия открытых модальных окон
-	 * @returns {boolean}
-	 * @private
-	 */
-	_hasOpenedModals() {
-		return Boolean(Selectors.find('.modal.show, .vg-modal.show'));
-	}
-
-	/**
-	 * Помечает alert-modal как вторую модалку и поднимает ее над уже открытыми
-	 * @param {HTMLElement} element
-	 * @private
-	 */
-	_setStackedModalState(element) {
-		if (!element) return;
-
-		element.classList.add(CLASS_NAME_MODAL_STACKED);
-		element.style.zIndex = this._getNextModalZIndex();
-	}
-
-	/**
-	 * Вычисление z-index выше всех открытых модалок
-	 * @returns {string}
-	 * @private
-	 */
-	_getNextModalZIndex() {
-		const indexes = Selectors.findAll('.modal.show, .vg-modal.show')
-			.map((element) => Number.parseInt(window.getComputedStyle(element).zIndex, 10))
-			.filter((index) => Number.isFinite(index));
-
-		return String((indexes.length ? Math.max(...indexes) : 1040) + 10);
-	}
-
-	/**
-	 * Закрытие всех открытых модальных окон
-	 * @private
-	 */
-	_closeOpenedModals() {
-		[...document.getElementsByClassName('modal')].forEach((element) => {
-			if (element && element.classList.contains('show')) {
-				if (typeof bootstrap !== 'undefined' && bootstrap.Modal?.getOrCreateInstance) {
-					const mBS = bootstrap.Modal.getOrCreateInstance(element);
-					mBS.hide();
-				} else {
-					console.warn(lang_messages(this._params.lang, NAME).bootstrap_not_found)
-				}
-			}
-		});
-
-		[...document.getElementsByClassName('vg-modal')].forEach((element) => {
-			if (element && element.classList.contains('show')) {
-				const mVG = VGModal.getOrCreateInstance(element);
-				mVG.hide([mVG]);
-			}
-		});
-	}
+	_alertModal(data, status) {
+		const _this = this;
+		const closeModalsBeforeModal = _this._params.alert.modal?.closeModalsBeforeModal;
+		const isStackedModal = !closeModalsBeforeModal && _this._hasOpenedModals();
+
+		if (closeModalsBeforeModal) {
+			_this._closeOpenedModals();
+		}
+
+		let id = _this._params.classes.general + '-' + makeRandomString(),
+			$modal = Selectors.find('.' + _this._params.classes.alertModal);
+
+		if ($modal) $modal.remove();
+
+		setTimeout(() => {
+			VGModal.init(id, {
+				dismiss: true,
+				classes: {
+					alert: _this._params.classes.alertModal
+				}
+			}, function (self) {
+				let element = self._element;
+				element.classList.add(_this._params.classes.alertModal);
+				if (isStackedModal) {
+					_this._setStackedModalState(element);
+				}
+
+				let $content = Selectors.find('.vg-modal-content', element);
+				if ($content) $content.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status);
+
+				let $body = Selectors.find('.vg-modal-body', element);
+				if ($body) $body.append(_this.setDataRelationStatus(element, status, data, 'modal'));
+
+				self.toggle();
+
+				if (_this._params.alert.delay > 0) {
+					setTimeout(() => {
+						self.hide();
+					}, _this._params.alert.delay)
+				}
+			});
+		}, _this._params.timeout);
+	}
+
+	/**
+	 * Проверка наличия открытых модальных окон
+	 * @returns {boolean}
+	 * @private
+	 */
+	_hasOpenedModals() {
+		return Boolean(Selectors.find('.modal.show, .vg-modal.show'));
+	}
+
+	/**
+	 * Помечает alert-modal как вторую модалку и поднимает ее над уже открытыми
+	 * @param {HTMLElement} element
+	 * @private
+	 */
+	_setStackedModalState(element) {
+		if (!element) return;
+
+		element.classList.add(CLASS_NAME_MODAL_STACKED);
+		element.style.zIndex = this._getNextModalZIndex();
+	}
+
+	/**
+	 * Вычисление z-index выше всех открытых модалок
+	 * @returns {string}
+	 * @private
+	 */
+	_getNextModalZIndex() {
+		const indexes = Selectors.findAll('.modal.show, .vg-modal.show')
+			.map((element) => Number.parseInt(window.getComputedStyle(element).zIndex, 10))
+			.filter((index) => Number.isFinite(index));
+
+		return String((indexes.length ? Math.max(...indexes) : 1040) + 10);
+	}
+
+	/**
+	 * Закрытие всех открытых модальных окон
+	 * @private
+	 */
+	_closeOpenedModals() {
+		[...document.getElementsByClassName('modal')].forEach((element) => {
+			if (element && element.classList.contains('show')) {
+				if (typeof bootstrap !== 'undefined' && bootstrap.Modal?.getOrCreateInstance) {
+					const mBS = bootstrap.Modal.getOrCreateInstance(element);
+					mBS.hide();
+				} else {
+					console.warn(lang_messages(this._params.lang, NAME).bootstrap_not_found)
+				}
+			}
+		});
+
+		[...document.getElementsByClassName('vg-modal')].forEach((element) => {
+			if (element && element.classList.contains('show')) {
+				const mVG = VGModal.getOrCreateInstance(element);
+				mVG.hide([mVG]);
+			}
+		});
+	}
 
 	/**
 	 * Показ алерта в виде collapse
@@ -669,17 +669,17 @@ class VGFormSender extends BaseModule {
 	 * @param {string} status - Статус (success/error)
 	 * @private
 	 */
-	_alertToast(data, status) {
-		const response = this._prepareAlertResponse(status, data);
-		const toastParams = this._getToastParams(status);
-
-		if (this._params.alert.toast?.closeModalsBeforeToast) {
-			this._closeOpenedModals();
-		}
-
-		if (response.title) {
-			VGToast.run([response.title, response.message], toastParams);
-			return;
+	_alertToast(data, status) {
+		const response = this._prepareAlertResponse(status, data);
+		const toastParams = this._getToastParams(status);
+
+		if (this._params.alert.toast?.closeModalsBeforeToast) {
+			this._closeOpenedModals();
+		}
+
+		if (response.title) {
+			VGToast.run([response.title, response.message], toastParams);
+			return;
 		}
 
 		VGToast.run(response.message, toastParams);
@@ -693,11 +693,11 @@ class VGFormSender extends BaseModule {
 	 */
 	_getToastParams(status) {
 		const theme = status === 'error' ? 'danger' : status;
-		const toastType = status === 'danger' ? 'error' : status;
-		const delay = this._params.alert.delay > 0 ? this._params.alert.delay : 3000;
-		const flatToastParams = {};
-		const {closeModalsBeforeToast, ...toastParams} = this._params.alert.toast || {};
-		const allowedKeys = [
+		const toastType = status === 'danger' ? 'error' : status;
+		const delay = this._params.alert.delay > 0 ? this._params.alert.delay : 3000;
+		const flatToastParams = {};
+		const {closeModalsBeforeToast, ...toastParams} = this._params.alert.toast || {};
+		const allowedKeys = [
 			'static',
 			'placement',
 			'autohide',
@@ -719,14 +719,14 @@ class VGFormSender extends BaseModule {
 			}
 		});
 
-		return mergeDeepObject({
-			theme: theme || 'dark',
-			type: toastType || null,
-			enableButtonClose: true,
-			autohide: this._params.alert.delay > 0,
-			delay: delay
-		}, flatToastParams, toastParams);
-	}
+		return mergeDeepObject({
+			theme: theme || 'dark',
+			type: toastType || null,
+			enableButtonClose: true,
+			autohide: this._params.alert.delay > 0,
+			delay: delay
+		}, flatToastParams, toastParams);
+	}
 
 	/**
 	 * Формирование содержимого алерта (заголовок, текст, иконка)
@@ -832,10 +832,10 @@ class VGFormSender extends BaseModule {
 					}, response.message);
 				}
 
-				return {
-					title: this._params.alert.title ? response.title || '' : '',
-					message: message
-				};
+				return {
+					title: this._params.alert.title ? response.title || '' : '',
+					message: message
+				};
 			}
 		}
 

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);
-}
+}