vgapp 1.1.7 → 1.1.9

package/app/modules/vgfiles/scss/_variables.scss

@@ -70,27 +70,27 @@ $files-map: (
 	info-radius: 4px,
 	info-list-max-height: 360px,
 
-	info-gap: 8px,
-	info-padding: 8px,
-	info-border-bottom-color: var(--vg-secondary-bg),
-	info-hover-bg: rgba(var(--vg-secondary-bg-rgb), .4),
-	info-audio-progress-track: rgba(var(--vg-secondary-bg-rgb), .3),
-	info-audio-progress-fill: #000,
-	info-audio-progress-opacity: .33,
-	info-audio-row-min-height: 64px,
-	info-audio-image-size: 48px,
-
-	info-image-radius: 4px,
+	info-gap: 8px,
+	info-padding: 8px,
+	info-border-bottom-color: var(--vg-secondary-bg),
+	info-hover-bg: rgba(var(--vg-secondary-bg-rgb), .4),
+	info-audio-progress-track: rgba(var(--vg-secondary-bg-rgb), .3),
+	info-audio-progress-fill: #000,
+	info-audio-progress-opacity: .33,
+	info-audio-row-min-height: 64px,
+	info-audio-image-size: 48px,
+
+	info-image-radius: 4px,
 	info-iteration-font-size: 16px,
 	info-name-font-size: 16px,
 	info-size-font-size: 14px,
 
-	info-remove-icon-size: 16px,
-	info-row-remove-size: 22px,
-	info-row-remove-icon-size: 10px,
-	info-failing-actions-gap: 6px,
-	info-failing-actions-margin-start: 8px,
-	drop-failing-actions-gap: 6px,
+	info-remove-icon-size: 16px,
+	info-row-remove-size: 22px,
+	info-row-remove-icon-size: 10px,
+	info-failing-actions-gap: 6px,
+	info-failing-actions-margin-start: 8px,
+	drop-failing-actions-gap: 6px,
 
 	// legacy (оставлено для совместимости со старым API темы)
 	info-mb: 10px,
@@ -112,4 +112,4 @@ $files-map: (
 	info-list-span-me: 6px,
 	info-list-button-fs: 12px,
 	info-list-button-color: #999999,
-);
+);

package/app/modules/vgfiles/scss/vgfiles.scss

@@ -261,15 +261,15 @@
 				}
 			}
 
-			.file {
-				--vg-button-color: var(--vg-secondary);
-				display: flex;
-				align-items: center;
-				gap: var(--vg-files-info-gap);
-				padding: var(--vg-files-info-padding);
-				border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
-				transition: all .2s ease-in-out;
-				position: relative;
+			.file {
+				--vg-button-color: var(--vg-secondary);
+				display: flex;
+				align-items: center;
+				gap: var(--vg-files-info-gap);
+				padding: var(--vg-files-info-padding);
+				border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
+				transition: all .2s ease-in-out;
+				position: relative;
 
 				@include vgfiles-sortable();
 				@include vgfiles-state();
@@ -278,45 +278,45 @@
 					border-bottom: none;
 				}
 
-				&:hover {
-					background-color: var(--vg-files-info-hover-bg);
-				}
-
-				&[data-vg-filepreview-renderer="audio"] {
-					--vg-filepreview-audio-inline-progress: 0%;
-					position: relative;
-					overflow: hidden;
-					isolation: isolate;
-					min-height: var(--vg-files-info-audio-row-min-height);
-					background-color: var(--vg-files-info-audio-progress-track);
-
-					&::before {
-						content: '';
-						position: absolute;
-						inset: 0 auto 0 0;
-						width: var(--vg-filepreview-audio-inline-progress);
-						background: var(--vg-files-info-audio-progress-fill);
-						opacity: var(--vg-files-info-audio-progress-opacity);
-						pointer-events: none;
-						z-index: 0;
-						transition: width .12s linear;
-					}
-
-					> * {
-						position: relative;
-						z-index: 1;
-					}
-
-					.file-image {
-						flex: 0 0 var(--vg-files-info-audio-image-size);
-						width: var(--vg-files-info-audio-image-size);
-						height: var(--vg-files-info-audio-image-size);
-					}
-				}
-
-				> * {
-					transition: all .2s ease-in-out;
-				}
+				&:hover {
+					background-color: var(--vg-files-info-hover-bg);
+				}
+
+				&[data-vg-filepreview-renderer="audio"] {
+					--vg-filepreview-audio-inline-progress: 0%;
+					position: relative;
+					overflow: hidden;
+					isolation: isolate;
+					min-height: var(--vg-files-info-audio-row-min-height);
+					background-color: var(--vg-files-info-audio-progress-track);
+
+					&::before {
+						content: '';
+						position: absolute;
+						inset: 0 auto 0 0;
+						width: var(--vg-filepreview-audio-inline-progress);
+						background: var(--vg-files-info-audio-progress-fill);
+						opacity: var(--vg-files-info-audio-progress-opacity);
+						pointer-events: none;
+						z-index: 0;
+						transition: width .12s linear;
+					}
+
+					> * {
+						position: relative;
+						z-index: 1;
+					}
+
+					.file-image {
+						flex: 0 0 var(--vg-files-info-audio-image-size);
+						width: var(--vg-files-info-audio-image-size);
+						height: var(--vg-files-info-audio-image-size);
+					}
+				}
+
+				> * {
+					transition: all .2s ease-in-out;
+				}
 
 				&-image {
 					flex: 0 0 var(--vg-files-image-width);
@@ -362,63 +362,63 @@
 						display: none;
 					}
 
-					.name {
-						display: block;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						font-size: var(--vg-files-info-name-font-size);
-
-						&.vg-filepreview-audio-inline {
-							display: inline-flex;
-							gap: var(--vg-filepreview-audio-inline-gap);
-							align-items: center;
-						}
-
-						&.is-preview-action {
-							cursor: pointer;
-						}
-					}
-
-					.size {
-						color: var(--vg-secondary);
-						font-size: var(--vg-files-info-size-font-size);
-						white-space: nowrap;
-						margin-left: auto;
-					}
-
-					.download {
-						margin-left: 8px;
-
-						.vg-filepreview-download-trigger {
-							padding: 0;
-							background: transparent;
-							color: var(--vg-secondary);
-							border-radius: 0;
-							font-size: var(--vg-files-info-size-font-size);
-							font-weight: 500;
-							gap: 4px;
-
-							&:hover {
-								color: var(--vg-body-color);
-							}
-
-							&__icon svg {
-								width: 14px;
-								height: 14px;
-							}
-
-							&__text {
-								display: none;
-							}
-						}
-					}
-				}
-
-				&-remove {
-					flex: 0 0 var(--vg-files-remove-width);
-					width: var(--vg-files-remove-width);
-					margin-left: auto;
+					.name {
+						display: block;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						font-size: var(--vg-files-info-name-font-size);
+
+						&.vg-filepreview-audio-inline {
+							display: inline-flex;
+							gap: var(--vg-filepreview-audio-inline-gap);
+							align-items: center;
+						}
+
+						&.is-preview-action {
+							cursor: pointer;
+						}
+					}
+
+					.size {
+						color: var(--vg-secondary);
+						font-size: var(--vg-files-info-size-font-size);
+						white-space: nowrap;
+						margin-left: auto;
+					}
+
+					.download {
+						margin-left: 8px;
+
+						.vg-filepreview-download-trigger {
+							padding: 0;
+							background: transparent;
+							color: var(--vg-secondary);
+							border-radius: 0;
+							font-size: var(--vg-files-info-size-font-size);
+							font-weight: 500;
+							gap: 4px;
+
+							&:hover {
+								color: var(--vg-body-color);
+							}
+
+							&__icon svg {
+								width: 14px;
+								height: 14px;
+							}
+
+							&__text {
+								display: none;
+							}
+						}
+					}
+				}
+
+				&-remove {
+					flex: 0 0 var(--vg-files-remove-width);
+					width: var(--vg-files-remove-width);
+					margin-left: auto;
 
 					button {
 						width: var(--vg-files-remove-width);
@@ -451,21 +451,21 @@
 									fill: var(--vg-button-color);
 								}
 							}
-						}
-					}
-				}
-
-				&.failing {
-					.file-remove {
-						flex: 0 0 auto;
-						width: auto;
-					}
-				}
-
-				&:not(.with-image) {
-					.file-info {
-						.iteration {
-							display: block;
+						}
+					}
+				}
+
+				&.failing {
+					.file-remove {
+						flex: 0 0 auto;
+						width: auto;
+					}
+				}
+
+				&:not(.with-image) {
+					.file-info {
+						.iteration {
+							display: block;
 						}
 					}
 				}
@@ -512,26 +512,26 @@
 							}
 						}
 					}
-				}
-			}
-		}
-	}
-
-	.file-failing-actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--vg-files-info-failing-actions-gap);
-	}
-
-	&-info--list {
-		.file.failing {
-			.file-remove {
-				margin-left: var(--vg-files-info-failing-actions-margin-start);
-			}
-		}
-	}
-
-	&-drop {
+				}
+			}
+		}
+	}
+
+	.file-failing-actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--vg-files-info-failing-actions-gap);
+	}
+
+	&-info--list {
+		.file.failing {
+			.file-remove {
+				margin-left: var(--vg-files-info-failing-actions-margin-start);
+			}
+		}
+	}
+
+	&-drop {
 		background-color: var(--vg-files-drop-bg);
 		border: var(--vg-files-drop-border-width) var(--vg-files-drop-border-style) var(--vg-files-drop-border-color);
 		cursor: pointer;
@@ -711,14 +711,14 @@
 					flex-direction: column;
 					gap: 8px;
 
-					.file-remove {
-						.file-failing-actions {
-							gap: var(--vg-files-drop-failing-actions-gap);
-						}
-
-						button {
-							background: var(--vg-body-bg);
-							color: var(--vg-body-color);
+					.file-remove {
+						.file-failing-actions {
+							gap: var(--vg-files-drop-failing-actions-gap);
+						}
+
+						button {
+							background: var(--vg-body-bg);
+							color: var(--vg-body-color);
 							border: none;
 							cursor: pointer;
 							outline: none;

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

@@ -32,6 +32,7 @@
 import BaseModule from "../../base-module";
 import VGModal from "../../vgmodal/js/vgmodal";
 import VGCollapse from "../../vgcollapse/js/vgcollapse";
+import VGToast from "../../vgtoast/js/vgtoast";
 import VGHideShowPass from "./hideshowpass";
 import {lang_titles, lang_messages} from "../../../utils/js/components/lang";
 import Html from "../../../utils/js/components/templater";
@@ -133,7 +134,8 @@ class VGFormSender extends BaseModule {
 				enabled: true,
 				type: 'modal',
 				errors: true,
-				delay: 0
+				delay: 0,
+				toast: {}
 			},
 			ajax: {
 				route: '',
@@ -510,6 +512,10 @@ class VGFormSender extends BaseModule {
 		if (this._params.alert.type === 'collapse') {
 			this._alertCollapse(data, status)
 		}
+
+		if (this._params.alert.type === 'toast') {
+			this._alertToast(data, status)
+		}
 	}
 
 	/**
@@ -602,6 +608,65 @@ class VGFormSender extends BaseModule {
 		}
 	}
 
+	/**
+	 * Показ алерта в виде toast
+	 * @param {Object} data - Данные для отображения
+	 * @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;
+		}
+
+		VGToast.run(response.message, toastParams);
+	}
+
+	/**
+	 * Сборка параметров toast из alert.* и alert.toast
+	 * @param {string} status - Статус алерта
+	 * @returns {Object}
+	 * @private
+	 */
+	_getToastParams(status) {
+		const theme = status === 'error' ? 'danger' : status;
+		const delay = this._params.alert.delay > 0 ? this._params.alert.delay : 3000;
+		const flatToastParams = {};
+		const allowedKeys = [
+			'static',
+			'placement',
+			'autohide',
+			'delay',
+			'enableClickToast',
+			'enableButtonClose',
+			'keyboard',
+			'theme',
+			'type',
+			'drag',
+			'resize',
+			'stack',
+			'animation',
+			'ajax'
+		];
+
+		allowedKeys.forEach((key) => {
+			if (key in this._params.alert) {
+				flatToastParams[key] = this._params.alert[key];
+			}
+		});
+
+		return mergeDeepObject({
+			theme: theme || 'dark',
+			enableButtonClose: true,
+			autohide: this._params.alert.delay > 0,
+			delay: delay
+		}, flatToastParams, this._params.alert.toast || {});
+	}
+
 	/**
 	 * Формирование содержимого алерта (заголовок, текст, иконка)
 	 * @param {HTMLElement} $element - Родительский элемент
@@ -611,15 +676,51 @@ class VGFormSender extends BaseModule {
 	 * @returns {HTMLElement} - DOM-элемент с контентом
 	 */
 	setDataRelationStatus($element, status, data, type) {
-		let response = normalizeData(data.response) || data,
-			$alert = Selectors.find('.'+ CLASS_NAME_ALERT +'-content', $element);
+		let $alert = Selectors.find('.'+ CLASS_NAME_ALERT +'-content', $element);
+		const response = this._prepareAlertResponse(status, data);
+		const title = response.title
+			? Html('string').h4({class: CLASS_NAME_ALERT +'-content--title'}, response.title)
+			: '';
+		const content = title + response.message;
+
+		if (!$alert) {
+			const elm = Html('dom');
+
+			$alert = elm.div({
+				class: CLASS_NAME_ALERT + '-' + type
+			}, [
+				elm.div({class: CLASS_NAME_ALERT + '-content'}, [
+					elm.i({class: CLASS_NAME_ALERT + '-content--icon'}, getSVG(status), {isHTML: true}),
+					elm.div({class: CLASS_NAME_ALERT + '-content--text'}, content, {isHTML: true})
+				]),
+			]);
+		} else {
+			let text = Selectors.find('.vg-modal-body', $element);
+			text.innerHTML = content;
+		}
+
+		return $alert;
+	}
+
+	/**
+	 * Подготовка содержимого алерта
+	 * @param {string} status - Статус алерта
+	 * @param {Object|string} data - Данные ответа
+	 * @returns {{title: string, message: string}}
+	 * @private
+	 */
+	_prepareAlertResponse(status, data) {
+		let response = normalizeData(data?.response) || data;
 
 		if (isObject(data)) {
-			let view = '';
+			if (isObject(data.response) && 'view' in data.response) {
+				return {
+					title: '',
+					message: data.response.view
+				};
+			}
 
-			if ('view' in data.response) {
-				response = data.response.view
-			} else if (typeof response !== 'string') {
+			if (typeof response !== 'string') {
 				if (status === 'danger') {
 					response.title = ('title' in response) ? response.title : lang_titles(this._params.lang, 'errors').title;
 
@@ -646,7 +747,7 @@ class VGFormSender extends BaseModule {
 						if (isObject(errors)) {
 							for (const error in errors) {
 								if (Array.isArray(errors[error])) {
-									errors[error].forEach((t) => response.message.push(t))
+									errors[error].forEach((text) => response.message.push(text))
 								} else {
 									response.message.push(errors[error]);
 								}
@@ -656,42 +757,31 @@ class VGFormSender extends BaseModule {
 				}
 
 				const elm = Html('string');
-
-				view = elm.h4({class: CLASS_NAME_ALERT +'-content--title'}, response.title);
+				let message = '';
 
 				if (Array.isArray(response.message)) {
-					response.message.forEach(message => {
-						view += elm.div({
+					response.message.forEach((text) => {
+						message += elm.div({
 							class: CLASS_NAME_ALERT +'-content--message'
-						}, message);
+						}, text);
 					})
 				} else {
-					view += elm.div({
+					message = elm.div({
 						class: CLASS_NAME_ALERT +'-content--message'
 					}, response.message);
 				}
 
-				response = view;
+				return {
+					title: response.title || '',
+					message: message
+				};
 			}
 		}
 
-		if (!$alert) {
-			const elm = Html('dom');
-
-			$alert = elm.div({
-				class: CLASS_NAME_ALERT + '-' + type
-			}, [
-				elm.div({class: CLASS_NAME_ALERT + '-content'}, [
-					elm.i({class: CLASS_NAME_ALERT + '-content--icon'}, getSVG(status), {isHTML: true}),
-					elm.div({class: CLASS_NAME_ALERT + '-content--text'}, response, {isHTML: true})
-				]),
-			]);
-		} else {
-			let text = Selectors.find('.vg-modal-body', $element);
-			text.innerHTML = response;
-		}
-
-		return $alert;
+		return {
+			title: '',
+			message: typeof response === 'string' ? response : ''
+		};
 	}
 
 	/**