vgapp 1.5.1 → 1.5.2

package/app/langs/ru/messages.json

@@ -16,7 +16,7 @@
   },
   "files": {
     "is-count": "Превышен лимит по количеству файлов",
-    "is-sizes": "Превышен размер файл",
+    "is-sizes": "Превышен размер файла",
     "is-types": "Недопустимый тип файла",
     "is-total-size": "Превышен максимально разрешённый размер для выбранных файлов",
     "titles": "Удаление файлов",

package/app/modules/vgfilepreview/scss/vgfilepreview.scss

@@ -460,4 +460,4 @@
 [data-vg-filepreview-state="error"] .preview,
 [data-vg-filepreview-state="empty"] .preview {
 	opacity: .9;
-}
+}

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

@@ -26,9 +26,10 @@ class VGFilesBase extends BaseModule {
 		this._isInitialized = true;
 
 		this._tpl = Html('dom');
-		this._files = [];
-		this._errors = new Set();
-		this._fileObjectUrls = new Map();
+		this._files = [];
+		this._errors = new Set();
+		this._validationErrorsByKey = new Map();
+		this._fileObjectUrls = new Map();
 		this._audioMetaPromises = new Map();
 
 		this._nodes = {
@@ -197,9 +198,10 @@ class VGFilesBase extends BaseModule {
 			filesToProcess = this._mergeFilesByOrder(incoming, this._files, Boolean(this._params.prepend));
 		}
 
-		this._files = this._filterFiles(filesToProcess);
-
-		this._renderErrors();
+		this._files = this._filterFiles(filesToProcess);
+		this._syncSingleInputSubmission();
+
+		this._renderErrors();
 		this._enrichAudioMetadata(this._files);
 
 		return this._files;
@@ -280,47 +282,119 @@ class VGFilesBase extends BaseModule {
 		return attrs;
 	}
 
-	_filterFiles(files) {
-		this._errors.clear();
-		const { count, sizes, total } = this._params.limits;
-		const maxSize = sizes * 1024 * 1024;
-		const maxTotalSize = total * 1024 * 1024;
-
-		let currentTotalSize = 0;
-		const filtered = [];
-
-		for (const file of files) {
-			if (count > 0 && filtered.length >= count) {
-				this._errors.add('is-count');
-				break;
-			}
-
-			let isValid = true;
-
-			if (this._params.types.length && !this._params.types.includes(file.type)) {
-				this._errors.add('is-types');
-				isValid = false;
-			}
-
-			if (file.size > maxSize) {
-				this._errors.add('is-sizes');
-				isValid = false;
-			}
-
-			if (isValid && maxTotalSize > 0) {
-				if (currentTotalSize + file.size > maxTotalSize) {
-					this._errors.add('is-total-size');
-					isValid = false;
-				} else {
-					currentTotalSize += file.size;
-				}
-			}
-
-			if (isValid) filtered.push(file);
-		}
-
-		return filtered;
-	}
+	_filterFiles(files) {
+		this._errors.clear();
+		this._validationErrorsByKey.clear();
+		const { count, sizes, total } = this._params.limits;
+		const maxSize = sizes * 1024 * 1024;
+		const maxTotalSize = total * 1024 * 1024;
+
+		let currentTotalSize = 0;
+		let validCount = 0;
+		const visibleFiles = [];
+
+		for (const file of files) {
+			const fileErrors = new Set();
+
+			if (count > 0 && validCount >= count) {
+				this._errors.add('is-count');
+				continue;
+			}
+
+			if (this._params.types.length && !this._params.types.includes(file.type)) {
+				fileErrors.add('is-types');
+			}
+
+			if (file.size > maxSize) {
+				fileErrors.add('is-sizes');
+			}
+
+			if (!fileErrors.size && maxTotalSize > 0 && currentTotalSize + file.size > maxTotalSize) {
+				fileErrors.add('is-total-size');
+			}
+
+			visibleFiles.push(file);
+
+			if (fileErrors.size) {
+				fileErrors.forEach(error => this._errors.add(error));
+				this._validationErrorsByKey.set(this._getFileKey(file), fileErrors);
+				continue;
+			}
+
+			validCount += 1;
+			currentTotalSize += file.size;
+		}
+
+		return visibleFiles;
+	}
+
+	_isFileValid(file) {
+		return !this._validationErrorsByKey.has(this._getFileKey(file));
+	}
+
+	_syncSingleInputSubmission() {
+		if (Number(this._params?.limits?.count) !== 1) return;
+
+		const selectedFile = this._files[0];
+		const canSubmit = !this._params.ajax && (!selectedFile || this._isFileValid(selectedFile));
+		this._preventOriginalInputFromSubmit(canSubmit);
+	}
+
+	_getFileValidationMessages(file) {
+		const errors = this._validationErrorsByKey.get(this._getFileKey(file));
+		if (!errors?.size) return [];
+
+		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
+		return Array.from(errors, error => messages[error] || error);
+	}
+
+	_getFileValidationLabel(file) {
+		const messages = this._getFileValidationMessages(file);
+		if (!messages.length) return '';
+
+		const fileName = this._getShortValidationFileName(file?.name);
+		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
+	}
+
+	_getFullFileValidationLabel(file) {
+		const messages = this._getFileValidationMessages(file);
+		if (!messages.length) return '';
+
+		const fileName = String(file?.name || '').trim();
+		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
+	}
+
+	_getShortValidationFileName(fileName) {
+		const name = String(fileName || '').trim();
+		if (name.length <= 24) return name;
+
+		const dotIndex = name.lastIndexOf('.');
+		const hasExtension = dotIndex > 0 && name.length - dotIndex <= 10;
+		const baseName = hasExtension ? name.slice(0, dotIndex) : name;
+		const extension = hasExtension ? name.slice(dotIndex) : '';
+
+		return `${baseName.slice(0, 5)}...${extension}`;
+	}
+
+	_decorateValidationItem(item, file) {
+		if (this._isFileValid(file)) return item;
+
+		Classes.add(item, 'failing');
+		Classes.add(item, 'validation-error');
+
+		return item;
+	}
+
+	_forgetFileValidation(file) {
+		if (!file) return;
+
+		this._validationErrorsByKey.delete(this._getFileKey(file));
+		this._errors.clear();
+		this._validationErrorsByKey.forEach(errors => {
+			errors.forEach(error => this._errors.add(error));
+		});
+		this._renderErrors();
+	}
 
 	_getSizes(size, isArray = false) {
 		const totalSize = isArray ? this._files.reduce((acc, f) => acc + f.size, 0) : size;
@@ -344,8 +418,12 @@ class VGFilesBase extends BaseModule {
 		}
 	}
 
-	_renderErrors() {
-		if (!this._errors.size) return;
+	_renderErrors() {
+		if (!this._errors.size) {
+			const $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
+			if ($errorCont) $errorCont.remove();
+			return;
+		}
 
 		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
 		let $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
@@ -357,10 +435,32 @@ class VGFilesBase extends BaseModule {
 			$errorCont.innerHTML = '';
 		}
 
-		this._errors.forEach(errKey => {
-			const msg = messages[errKey] || errKey;
-			$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
-		});
+		if (this._validationErrorsByKey.size) {
+			const renderedErrors = new Set();
+			this._files.forEach(file => {
+				const msg = this._getFileValidationLabel(file);
+				if (!msg) return;
+
+				const fileErrors = this._validationErrorsByKey.get(this._getFileKey(file));
+				fileErrors?.forEach(error => renderedErrors.add(error));
+				const fullMsg = this._getFullFileValidationLabel(file);
+				const attrs = { class: 'error-item' };
+				if (fullMsg && fullMsg !== msg) attrs.title = fullMsg;
+				$errorCont.append(this._tpl.span(attrs, msg));
+			});
+
+			this._errors.forEach(errKey => {
+				if (renderedErrors.has(errKey)) return;
+				const msg = messages[errKey] || errKey;
+				$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
+			});
+			return;
+		}
+
+		this._errors.forEach(errKey => {
+			const msg = messages[errKey] || errKey;
+			$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
+		});
 	}
 
 	_getFallbackErrors() {
@@ -466,7 +566,7 @@ class VGFilesBase extends BaseModule {
 				parts
 			);
 
-			fragment.appendChild($li);
+			fragment.appendChild(this._decorateValidationItem($li, file));
 		});
 
 		$list.innerHTML = '';
@@ -641,10 +741,12 @@ class VGFilesBase extends BaseModule {
 			liAttrs['data-vg-filepreview-display-name'] = displayName || file.name || '';
 		}
 
-		return this._tpl.li(
-			this._buildFileDataAttributes(file, liAttrs),
-			parts
-		);
+		const item = this._tpl.li(
+			this._buildFileDataAttributes(file, liAttrs),
+			parts
+		);
+
+		return this._decorateValidationItem(item, file);
 	}
 
 	_renderTemplatePart(element, file, index = null, options = {}) {
@@ -926,7 +1028,7 @@ class VGFilesBase extends BaseModule {
 
 		if (isSingle) return;
 
-		files.forEach((file, index) => {
+		files.filter(file => this._isFileValid(file)).forEach((file, index) => {
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.name = `${baseName}[${index}]`;
@@ -968,9 +1070,10 @@ class VGFilesBase extends BaseModule {
 		if (resetInput) {
 			this._resetFileInput();
 		}
-		this._cleanupFakeInputs();
-		this._cleanupErrors();
-		this._files = [];
+		this._cleanupFakeInputs();
+		this._cleanupErrors();
+		this._validationErrorsByKey.clear();
+		this._files = [];
 
 		if (this._nodes.info) {
 			Classes.remove(this._nodes.info, 'show');

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

@@ -5,8 +5,9 @@
 import { isElement } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
-import { Classes } from "../../../utils/js/dom/manipulator";
-import BaseModule from "../../base-module";
+import { Classes } from "../../../utils/js/dom/manipulator";
+import BaseModule from "../../base-module";
+import {isVGFilesSortableDragActive, VG_FILES_SORTABLE_DATA_TYPE} from "./sortable";
 
 const CLASS_NAME_CONTAINER = 'vg-files';
 const CLASS_NAME_DROP = `${CLASS_NAME_CONTAINER}-drop`;
@@ -253,14 +254,20 @@ class VGFilesDroppable extends BaseModule {
         }
     }
 
-    _isSortableDrag(e) {
-        if (document.querySelector('.dragging')) return true;
-
-        try {
-            return (e?.dataTransfer?.getData?.('text/plain') || '') === 'vgsortable';
-        } catch (_) {
-            return false;
-        }
+    _isSortableDrag(e) {
+        if (isVGFilesSortableDragActive()) return true;
+        if (document.querySelector('.dragging')) return true;
+
+        try {
+			const dataTransfer = e?.dataTransfer;
+			const types = Array.from(dataTransfer?.types || []);
+			if (types.includes(VG_FILES_SORTABLE_DATA_TYPE)) return true;
+
+			return (dataTransfer?.getData?.(VG_FILES_SORTABLE_DATA_TYPE) || '') === '1' ||
+				(dataTransfer?.getData?.('text/plain') || '') === 'vgsortable';
+        } catch (_) {
+            return false;
+        }
     }
 
     _getVisibleDropZonesInViewport() {

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

@@ -1,9 +1,38 @@
-import Selectors from "../../../utils/js/dom/selectors";
-import {isElement, normalizeData} from "../../../utils/js/functions";
-import Ajax from "../../../utils/js/components/ajax";
-import VGToast from "../../vgtoast";
-
-class VGFilesSortable {
+/**
+ * Описание: управляет сортировкой уже загруженных файлов VGFiles.
+ * Возможности: меняет порядок элементов, сохраняет ID на сервере и маркирует внутренний drag для защиты dropzone.
+ */
+import Selectors from "../../../utils/js/dom/selectors";
+import {isElement, normalizeData} from "../../../utils/js/functions";
+import Ajax from "../../../utils/js/components/ajax";
+import VGToast from "../../vgtoast";
+
+export const VG_FILES_SORTABLE_DATA_TYPE = 'application/x-vg-files-sortable';
+
+let isSortableDragActive = false;
+let sortableDragClearTimer = null;
+
+export function isVGFilesSortableDragActive() {
+    return isSortableDragActive;
+}
+
+function markSortableDragActive() {
+    if (sortableDragClearTimer) {
+        clearTimeout(sortableDragClearTimer);
+        sortableDragClearTimer = null;
+    }
+    isSortableDragActive = true;
+}
+
+function scheduleSortableDragClear() {
+    if (sortableDragClearTimer) clearTimeout(sortableDragClearTimer);
+    sortableDragClearTimer = setTimeout(() => {
+        isSortableDragActive = false;
+        sortableDragClearTimer = null;
+    }, 0);
+}
+
+class VGFilesSortable {
     constructor(vgFilesInstance, options = {}) {
         this._vg = vgFilesInstance;
         this._params = {
@@ -75,10 +104,12 @@ class VGFilesSortable {
         const item = e.target.closest(this._params.itemSelector) || e.target.closest('li');
         if (!item) return;
 
-        this._draggedItem = item;
-
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', 'vgsortable');
+        this._draggedItem = item;
+		markSortableDragActive();
+
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData(VG_FILES_SORTABLE_DATA_TYPE, '1');
+        e.dataTransfer.setData('text/plain', 'vgsortable');
 
         item.classList.add('dragging');
         requestAnimationFrame(() => item.classList.add('dragging-transparent'));
@@ -87,9 +118,11 @@ class VGFilesSortable {
     _onDragEnd(e) {
         if (this._draggedItem) {
             this._draggedItem.classList.remove('dragging', 'dragging-transparent');
-            this._draggedItem = null;
-            this._saveOrder();
-        }
+            this._draggedItem = null;
+            this._saveOrder();
+        }
+
+		scheduleSortableDragClear();
     }
 
     _onDragOver(e) {
@@ -142,14 +175,15 @@ class VGFilesSortable {
             }).filter(id => id !== null);
     }
 
-    destroy() {
+    destroy() {
         this._list.removeEventListener('dragstart', this._boundOnDragStart);
         this._list.removeEventListener('dragend', this._boundOnDragEnd);
         this._list.removeEventListener('dragover', this._boundOnDragOver);
         this._list.removeEventListener('drop', this._boundOnDrop);
 
-        this._draggedItem = null;
-    }
-}
+        this._draggedItem = null;
+		scheduleSortableDragClear();
+    }
+}
 
-export default VGFilesSortable
+export default VGFilesSortable

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

@@ -273,8 +273,11 @@ class VGFiles extends VGFilesBase {
             this._failingUploadedKeys.clear();
         }
 
-        const notUploadedFiles = files.filter(f => !this._uploadedKeys.has(this._getFileKey(f)));
-        if (!notUploadedFiles.length) return;
+        const notUploadedFiles = files.filter(f =>
+            this._isFileValid(f) && !this._uploadedKeys.has(this._getFileKey(f))
+        );
+        this._setStatItem('failing', this._getFailingCount());
+        if (!notUploadedFiles.length) return;
 
         if (!this._uploader || this._uploader.isIdle()) {
             this._uploader = new FileUploader({
@@ -481,7 +484,7 @@ class VGFiles extends VGFilesBase {
             Classes.remove($item, CLASS_NAME_PENDING);
             Classes.replace($item, CLASS_NAME_LOADING, CLASS_NAME_FAILING);
 
-            this._setStatItem('failing', this._failingUploadedKeys.size);
+            this._setStatItem('failing', this._getFailingCount());
             this._setStatItem('pending', this._pendingUploadedKeys.size);
 
             const button = this._getButtonElement(file);
@@ -509,7 +512,7 @@ class VGFiles extends VGFilesBase {
             this._triggerEvent('upload.allComplete');
             this._updateStat(false);
 
-            if (!this._failingUploadedKeys.size) {
+            if (!this._getFailingCount()) {
                 if (this._params.sortable?.enabled && this._params.sortable.route) {
                     import('./sortable.js').then(module => {
                         if (this._sortable && typeof this._sortable.destroy === 'function') {
@@ -525,7 +528,7 @@ class VGFiles extends VGFilesBase {
 
             const payload = {
                 uploaded: this._uploadedKeys.size,
-                failed: this._failingUploadedKeys.size,
+                failed: this._getFailingCount(),
                 total: this._files.length
             };
 
@@ -693,12 +696,13 @@ class VGFiles extends VGFilesBase {
         };
 
         const fileToRemove = this._files.find(f => f.name === name && f.size === size);
-        if (fileToRemove) {
-            const key = this._getFileKey(fileToRemove);
-            this._uploadedKeys.delete(key);
-            this._pendingUploadedKeys.delete(key);
-            this._failingUploadedKeys.delete(key);
-        }
+        if (fileToRemove) {
+            const key = this._getFileKey(fileToRemove);
+            this._uploadedKeys.delete(key);
+            this._pendingUploadedKeys.delete(key);
+            this._failingUploadedKeys.delete(key);
+            this._forgetFileValidation(fileToRemove);
+        }
 
         this._getItemElement().forEach(el => {
             const btn = Selectors.find('button', el);
@@ -791,7 +795,7 @@ class VGFiles extends VGFilesBase {
     _updateStatsAfterRemove() {
         this._setStatItem('completed', this._uploadedKeys.size);
         this._setStatItem('pending', this._pendingUploadedKeys.size);
-        this._setStatItem('failing', this._failingUploadedKeys.size);
+        this._setStatItem('failing', this._getFailingCount());
         this._updateStat();
     }
 
@@ -897,24 +901,35 @@ class VGFiles extends VGFilesBase {
         if ($value) $value.innerHTML = count;
     }
 
-    _renderUIStatusDropInfoAjax(files) {
-        if (!this._params.ajax) return;
-
-        files.forEach(file => {
+    _renderUIStatusDropInfoAjax(files) {
+        if (!this._params.ajax) return;
+
+        files.forEach(file => {
             const $item = this._getItemElement(file);
             if (!$item) return;
 
-            const key = this._getFileKey(file);
-            if (this._uploadedKeys.has(key)) {
+            const key = this._getFileKey(file);
+            if (!this._isFileValid(file)) {
+                Classes.remove($item, CLASS_NAME_PENDING);
+                Classes.add($item, CLASS_NAME_FAILING);
+            } else if (this._uploadedKeys.has(key)) {
                 Classes.replace($item, CLASS_NAME_PENDING, CLASS_NAME_COMPLETED);
                 Classes.add($item, CLASS_NAME_LOADED);
             } else if (this._failingUploadedKeys.has(key)) {
                 Classes.replace($item, CLASS_NAME_PENDING, CLASS_NAME_FAILING);
             } else {
-                Classes.add($item, CLASS_NAME_PENDING);
-            }
-        });
-    }
+                Classes.add($item, CLASS_NAME_PENDING);
+            }
+        });
+
+        this._setStatItem('failing', this._getFailingCount());
+    }
+
+    _getFailingCount() {
+        const keys = new Set(this._failingUploadedKeys);
+        this._validationErrorsByKey.forEach((errors, key) => keys.add(key));
+        return keys.size;
+    }
 
     _triggerCallback(name, data) {
         const cb = this._params.callbacks?.[name];

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

@@ -9,9 +9,16 @@ $files-map: (
 	label-padding: 8px 24px,
 	label-padding-icon: 8px 16px,
 
-	// errors
-	errors-padding-y: 10px,
-	errors-font-size: 16px,
+	// errors
+	errors-padding-y: 10px,
+	errors-padding-x: 12px,
+	errors-font-size: 16px,
+	errors-gap: 4px,
+	errors-margin-bottom: 8px,
+	errors-bg: var(--vg-danger-subtle-bg, rgba(255, 42, 44, .06)),
+	errors-border-color: var(--vg-danger-color, var(--vg-danger, #ff2a2c)),
+	errors-border-width: 3px,
+	errors-border-radius: 6px,
 
 	// drop zone
 	drop-bg: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),

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

@@ -1,4 +1,4 @@
-/**
+/**
 *--------------------------------------------------------------------------
 * Модуль: VGFiles
 * Автор: Vegas DEV
@@ -61,12 +61,18 @@
 		}
 	}
 
-	&-errors {
-		padding: var(--vg-files-errors-padding-y) 0;
-
-		span {
-			font-size: var(--vg-files-errors-font-size);
-			color: var(--vg-danger);
+	&-errors {
+		display: grid;
+		gap: var(--vg-files-errors-gap);
+		padding: var(--vg-files-errors-padding-y) var(--vg-files-errors-padding-x);
+		margin-bottom: var(--vg-files-errors-margin-bottom);
+		border-left: var(--vg-files-errors-border-width) solid var(--vg-files-errors-border-color);
+		border-radius: var(--vg-files-errors-border-radius);
+		background: var(--vg-files-errors-bg);
+
+		span {
+			font-size: var(--vg-files-errors-font-size);
+			color: var(--vg-danger-color, var(--vg-danger, #ff2a2c));
 			display: block;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -517,14 +523,18 @@
 		}
 	}
 
-	.file-failing-actions {
+	.file-failing-actions {
 		display: inline-flex;
 		align-items: center;
 		gap: var(--vg-files-info-failing-actions-gap);
-	}
-
-	&-info--list {
-		.file.failing {
+	}
+
+	&-info--list {
+		.file.validation-error {
+			box-shadow: inset 0 0 0 2px var(--vg-danger-color, var(--vg-danger, #ff2a2c));
+		}
+
+		.file.failing {
 			.file-remove {
 				margin-left: var(--vg-files-info-failing-actions-margin-start);
 			}
@@ -634,7 +644,7 @@
 			}
 		}
 
-		&--list {
+		&--list {
 			display: flex;
 			align-items: center;
 			gap: var(--vg-files-drop-list-gap);
@@ -646,7 +656,7 @@
 			border-radius: var(--vg-files-drop-radius);
 			overflow: hidden;
 
-			.file {
+			.file {
 				--vg-button-color: var(--vg-text-color, var(--vg-body-color, #000000));
 				border-radius: var(--vg-files-drop-file-radius);
 				position: relative;
@@ -655,7 +665,11 @@
 				height: var(--vg-files-drop-file-height);
 
 				@include files.vgfiles-sortable();
-				@include files.vgfiles-state();
+				@include files.vgfiles-state();
+
+				&.validation-error {
+					box-shadow: inset 0 0 0 2px var(--vg-danger-color, var(--vg-danger, #ff2a2c));
+				}
 
 				.file-image {
 					width: 100%;