vgapp 1.2.1 → 1.2.2

package/app/modules/vgfiles/js/vgfiles.js

@@ -51,11 +51,12 @@ class VGFiles extends VGFilesBase {
                 maxConcurrent: 1,
                 retryAttempts: 1,
                 retryDelay: 1000,
-            },
-            removes: {
-                all: { route: '', alert: true, toast: true, confirm: null },
-                single: { route: '', alert: true, toast: true, confirm: null }
-            },
+            },
+            removes: {
+                buttons: null,
+                all: { route: '', alert: true, toast: true, confirm: null, buttons: null },
+                single: { route: '', alert: true, toast: true, confirm: null, buttons: null }
+            },
             sortable: {
                 enabled: false,
                 route: '',
@@ -585,11 +586,11 @@ class VGFiles extends VGFilesBase {
         return { accepted: Boolean(result), data: null };
     }
 
-    _runDefaultRemoveConfirm(trigger, params) {
-        return new Promise((resolve) => {
-            VGAlert.confirm(trigger, {
-                lang: params.lang,
-                ajax: params.ajax,
+    _runDefaultRemoveConfirm(trigger, params) {
+        return new Promise((resolve) => {
+            VGAlert.confirm(trigger, {
+                lang: params.lang,
+                ajax: params.ajax,
                 buttons: params.buttons,
                 message: params.message
             });
@@ -600,25 +601,58 @@ class VGFiles extends VGFilesBase {
 
             EventHandler.one(trigger, 'vg.alert.reject', () => {
                 resolve({ accepted: false, data: null });
-            });
-        });
-    }
-
-    _confirmRemove(type, trigger, ajax, message) {
-        const buttons = {
-            agree: {
-                text: lang_buttons(this._params.lang, NAME)['agree'],
-                class: ["btn-danger"],
-            },
-            cancel: {
-                text: lang_buttons(this._params.lang, NAME)['cancel'],
-                class: ["btn-outline-danger"],
-            },
-        };
-
-        const confirmParams = {
-            type,
-            trigger,
+            });
+        });
+    }
+
+    _isPlainObject(value) {
+        return value && typeof value === 'object' && !Array.isArray(value);
+    }
+
+    _mergeButtonConfigs(...configs) {
+        return configs.reduce((acc, config) => {
+            if (!this._isPlainObject(config)) return acc;
+
+            Object.entries(config).forEach(([key, value]) => {
+                if (this._isPlainObject(acc[key]) && this._isPlainObject(value)) {
+                    acc[key] = this._mergeButtonConfigs(acc[key], value);
+                    return;
+                }
+
+                acc[key] = Array.isArray(value) ? value.slice() : value;
+            });
+
+            return acc;
+        }, {});
+    }
+
+    _getDefaultRemoveConfirmButtons() {
+        return {
+            agree: {
+                text: lang_buttons(this._params.lang, NAME)['agree'],
+                class: ["btn-danger"],
+            },
+            cancel: {
+                text: lang_buttons(this._params.lang, NAME)['cancel'],
+                class: ["btn-outline-danger"],
+            },
+        };
+    }
+
+    _getRemoveConfirmButtons(type) {
+        return this._mergeButtonConfigs(
+            this._getDefaultRemoveConfirmButtons(),
+            this._params?.removes?.buttons,
+            this._params?.removes?.[type]?.buttons
+        );
+    }
+
+    _confirmRemove(type, trigger, ajax, message) {
+        const buttons = this._getRemoveConfirmButtons(type);
+
+        const confirmParams = {
+            type,
+            trigger,
             lang: this._params.lang,
             ajax,
             buttons,

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

@@ -17,10 +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({}, params));
+	constructor(el, params = {}) {
+		super(el, params);
+
+		this._params = this._getParams(el, mergeDeepObject({
+			parentClass: 'vg-form-sender--content-pass'
+		}, params));
 	}
 
 	static get NAME() {
@@ -60,12 +62,15 @@ class VGHideShowPass extends BaseModule{
 		instance.build(false);
 	}
 
-	build(isShow = false) {
-		let classes = this._params.classes.join(' '), elm = '';
-		const HTML = Html('string');
-
-		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'});
 		}
@@ -95,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,7 +66,8 @@ const NAME_KEY = 'vg.fs';
  * CSS-класс для алертов
  * @type {string}
  */
-const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
+const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
+const CLASS_NAME_MODAL_STACKED = 'vg-modal-stacked';
 
 /**
  * Событие: успешная отправка формы
@@ -136,7 +137,12 @@ class VGFormSender extends BaseModule {
 				errors: true,
 				title: true,
 				delay: 0,
-				toast: {}
+				modal: {
+					closeModalsBeforeModal: true
+				},
+				toast: {
+					closeModalsBeforeToast: false
+				}
 			},
 			ajax: {
 				route: '',
@@ -525,59 +531,107 @@ class VGFormSender extends BaseModule {
 	 * @param {string} status - Статус (success/error)
 	 * @private
 	 */
-	_alertModal(data, status) {
-		const _this = this;
-
-		// Закрытие всех открытых модальных окон
-		[...document.getElementsByClassName('modal')].forEach(function (element) {
-			if (element && element.classList.contains('show')) {
-				if (typeof bootstrap !== 'undefined') {
-					let mBS = bootstrap.Modal?.getOrCreateInstance(element);
-					mBS.hide();
-				} else {
-					console.warn(lang_messages(_this._params.lang, NAME).bootstrap_not_found)
-				}
-			}
-		});
-
-		[...document.getElementsByClassName('vg-modal')].forEach(function (element) {
-			if (element && element.classList.contains('show')) {
-				const mVG = VGModal.getOrCreateInstance(element);
-				mVG.hide([mVG]);
-			}
-		});
-
-		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);
-
-				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);
-	}
+	_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
@@ -615,13 +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 (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);
@@ -635,10 +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 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',
@@ -660,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, this._params.alert.toast || {});
-	}
+		return mergeDeepObject({
+			theme: theme || 'dark',
+			type: toastType || null,
+			enableButtonClose: true,
+			autohide: this._params.alert.delay > 0,
+			delay: delay
+		}, flatToastParams, toastParams);
+	}
 
 	/**
 	 * Формирование содержимого алерта (заголовок, текст, иконка)

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

@@ -20,9 +20,21 @@
 		}
 	}
 
-	&--content {
-		position: relative;
-	}
+	&--content {
+		position: relative;
+
+		&-pass {
+			&:focus-within {
+				input {
+					padding-right: 5rem;
+				}
+
+				.vg-form-sender--hide-show-pass {
+					right: 44px;
+				}
+			}
+		}
+	}
 
 	&--hide-show-pass {
 		position: absolute;
@@ -40,12 +52,24 @@
 		}
 	}
 
-	&.was-validated {
-		.vg-form-sender--hide-show-pass {
-			right: 34px;
-		}
-	}
-}
+	&.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);
@@ -102,4 +126,4 @@
 .vg-form-sender-alert-content--text {
 	font-size: 1.25rem;
 	color: var(--vg-form-sender-alert-color);
-}
+}