vgapp 1.0.3 → 1.0.5

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

@@ -137,12 +137,12 @@ class VGFilesBase extends BaseModule {
 			Boolean(this._params?.replace) &&
 			isSingle;
 
-		if (shouldReplaceOnSingle) {
-			this.clear(false);
-			this.append(filesArray, true);
-			this._revokeUrls();
-			this._cleanupFakeInputs();
-			this._cleanupErrors();
+		if (shouldReplaceOnSingle) {
+			this.clear(false);
+			this.append(filesArray, true);
+			this._revokeUrls();
+			this._cleanupFakeInputs();
+			this._cleanupErrors();
 
 			this._files = this._filterFiles(filesArray);
 			if (this._params.prepend) this._files.reverse();
@@ -209,6 +209,56 @@ class VGFilesBase extends BaseModule {
 		return `${file.name}-${file.size}-${file.type}`;
 	}
 
+	_getFileCustomData(file) {
+		const customData = file?.customData;
+		if (!customData || typeof customData !== 'object' || Array.isArray(customData)) return {};
+		return customData;
+	}
+
+	_toDataAttributeKey(key) {
+		if (!key) return '';
+
+		return String(key)
+			.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+			.replace(/[_\s]+/g, '-')
+			.replace(/[^a-zA-Z0-9-]/g, '')
+			.replace(/-+/g, '-')
+			.replace(/^-|-$/g, '')
+			.toLowerCase();
+	}
+
+	_toDataAttributeValue(value) {
+		if (value === undefined || value === null || value === '') return null;
+		if (typeof value === 'object') {
+			try {
+				return JSON.stringify(value);
+			} catch (e) {
+				return String(value);
+			}
+		}
+		return value;
+	}
+
+	_buildFileDataAttributes(file, baseAttrs = {}) {
+		const attrs = { ...baseAttrs };
+		const customData = this._getFileCustomData(file);
+
+		Object.entries(customData).forEach(([key, value]) => {
+			const attrKey = this._toDataAttributeKey(key);
+			if (!attrKey) return;
+
+			const attrName = `data-${attrKey}`;
+			if (Object.prototype.hasOwnProperty.call(attrs, attrName)) return;
+
+			const attrValue = this._toDataAttributeValue(value);
+			if (attrValue === null) return;
+
+			attrs[attrName] = attrValue;
+		});
+
+		return attrs;
+	}
+
 	_filterFiles(files) {
 		this._errors.clear();
 		const { count, sizes, total } = this._params.limits;
@@ -378,14 +428,20 @@ class VGFilesBase extends BaseModule {
 				}
 			}
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				const part = this._renderTemplatePart(tmpl.element, file, null, { isDrop: true });
-				if (part) parts.push(part);
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, null, { isDrop: true });
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
-				{ 'data-name': file.name, 'data-size': file.size, 'data-id': file.id || '', class: 'file ' + classes.join(' ') }, parts
+				this._buildFileDataAttributes(file, {
+					'data-name': file.name,
+					'data-size': file.size ?? 0,
+					'data-id': file.id || '',
+					class: 'file ' + classes.join(' ')
+				}),
+				parts
 			);
 
 			fragment.appendChild($li);
@@ -394,17 +450,17 @@ class VGFilesBase extends BaseModule {
 		$list.innerHTML = '';
 		$list.appendChild(fragment);
 
-		const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._nodes.drop);
-		if ($message) {
-			if (files.length) Classes.add($message, 'has-files');
-			else Classes.remove($message, 'has-files');
-
-			const isSingle = Number(this._params?.limits?.count) === 1;
-			if (isSingle) {
-				if (files.length) Classes.remove($message, 'show');
-				else Classes.add($message, 'show');
-			}
-		}
+		const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._nodes.drop);
+		if ($message) {
+			if (files.length) Classes.add($message, 'has-files');
+			else Classes.remove($message, 'has-files');
+
+			const isSingle = Number(this._params?.limits?.count) === 1;
+			if (isSingle) {
+				if (files.length) Classes.remove($message, 'show');
+				else Classes.add($message, 'show');
+			}
+		}
 
 		this._nodes.drop.appendChild($list);
 		Classes.add(this._nodes.drop, 'active');
@@ -435,14 +491,21 @@ class VGFilesBase extends BaseModule {
 			if (this._params.detach) classes.push('with-remove')
 			if (this._params.sortable.enabled) classes.push('with-sortable');
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				const part = this._renderTemplatePart(tmpl.element, file, i);
-				if (part) parts.push(part);
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, i);
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
-				{ 'data-name': file.name, 'data-size': file.size, 'data-type': file.type, 'data-id': file.id || '', class: 'file ' + classes.join(' ') + ' ' }, parts
+				this._buildFileDataAttributes(file, {
+					'data-name': file.name,
+					'data-size': file.size ?? 0,
+					'data-type': file.type || '',
+					'data-id': file.id || '',
+					class: 'file ' + classes.join(' ') + ' '
+				}),
+				parts
 			);
 			fragment.appendChild($li);
 		});
@@ -451,38 +514,38 @@ class VGFilesBase extends BaseModule {
 		Classes.add(this._nodes.info, 'show')
 	}
 
-	_renderTemplatePart(element, file, index = null, options = {}) {
-		if (!element) return null;
-		const { isDrop = false } = options;
-
-		const classList = element?.classList;
-
-		if (classList?.contains('file-image')) return this._renderUIImage(file);
-		if (classList?.contains('file-info')) {
-			if (isDrop) return null;
-			return this._renderUIInfo(file, index);
-		}
-		if (classList?.contains('file-remove')) return this._wrapInFileCustom(this._renderUIDetach(file));
-
-		const $part = element.cloneNode(true);
-
-		this._replaceTemplateSlot($part, '.file-image', () => this._renderUIImage(file));
-		this._replaceTemplateSlot($part, '.file-info', () => isDrop ? null : this._renderUIInfo(file, index));
-		this._replaceTemplateSlot($part, '.file-remove', () => this._renderUIDetach(file));
-
-		return this._wrapInFileCustom($part);
-	}
-
-	_wrapInFileCustom(node) {
-		if (!node) return null;
-		if (node.classList?.contains('file-custom')) return node;
-
-		const wrapper = document.createElement('div');
-		wrapper.className = 'file-custom';
-		wrapper.appendChild(node);
-
-		return wrapper;
-	}
+	_renderTemplatePart(element, file, index = null, options = {}) {
+		if (!element) return null;
+		const { isDrop = false } = options;
+
+		const classList = element?.classList;
+
+		if (classList?.contains('file-image')) return this._renderUIImage(file);
+		if (classList?.contains('file-info')) {
+			if (isDrop) return null;
+			return this._renderUIInfo(file, index);
+		}
+		if (classList?.contains('file-remove')) return this._wrapInFileCustom(this._renderUIDetach(file));
+
+		const $part = element.cloneNode(true);
+
+		this._replaceTemplateSlot($part, '.file-image', () => this._renderUIImage(file));
+		this._replaceTemplateSlot($part, '.file-info', () => isDrop ? null : this._renderUIInfo(file, index));
+		this._replaceTemplateSlot($part, '.file-remove', () => this._renderUIDetach(file));
+
+		return this._wrapInFileCustom($part);
+	}
+
+	_wrapInFileCustom(node) {
+		if (!node) return null;
+		if (node.classList?.contains('file-custom')) return node;
+
+		const wrapper = document.createElement('div');
+		wrapper.className = 'file-custom';
+		wrapper.appendChild(node);
+
+		return wrapper;
+	}
 
 	_replaceTemplateSlot(container, selector, renderer) {
 		const isMatchSelf = container?.matches && container.matches(selector);
@@ -586,14 +649,14 @@ class VGFilesBase extends BaseModule {
 		Selectors.findAll('[data-vg-files="generated"]', this._element).forEach(el => el.remove());
 	}
 
-	clear(resetInput = true) {
-		this._revokeUrls();
-		if (resetInput) {
-			this._resetFileInput();
-		}
-		this._cleanupFakeInputs();
-		this._cleanupErrors();
-		this._files = [];
+	clear(resetInput = true) {
+		this._revokeUrls();
+		if (resetInput) {
+			this._resetFileInput();
+		}
+		this._cleanupFakeInputs();
+		this._cleanupErrors();
+		this._files = [];
 
 		if (this._nodes.info) {
 			Classes.remove(this._nodes.info, 'show');
@@ -604,15 +667,15 @@ class VGFilesBase extends BaseModule {
 			const $list = Selectors.find(`.${this._getClass('drop-list')}`, this._element);
 			if ($list) $list.innerHTML = '';
 
-			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
-			if ($message) {
-				Classes.remove($message, 'has-files');
-
-				const isSingle = Number(this._params?.limits?.count) === 1;
-				if (isSingle) {
-					Classes.add($message, 'show');
-				}
-			}
+			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
+			if ($message) {
+				Classes.remove($message, 'has-files');
+
+				const isSingle = Number(this._params?.limits?.count) === 1;
+				if (isSingle) {
+					Classes.add($message, 'show');
+				}
+			}
 
 			Classes.remove(this._nodes.drop, 'active');
 		}

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

@@ -1,7 +1,7 @@
 import { isElement, normalizeData } from "../../../utils/js/functions";
 import Params from "../../../utils/js/components/params";
 import Selectors from "../../../utils/js/dom/selectors";
-import { Classes, Manipulator } from "../../../utils/js/dom/manipulator";
+import { Manipulator } from "../../../utils/js/dom/manipulator";
 
 class VGFilesTemplateRender {
 	constructor(vgFilesInstance, element, params = {}) {
@@ -38,34 +38,105 @@ class VGFilesTemplateRender {
 		const $items = Array.from($list.children).filter(li => li.tagName === 'LI');
 		if ($items.length === 0) return false;
 
-		// Сохраняем шаблон только один раз
 		this._setTemplateInBuffer($items);
-
 		if (!this.bufferTemplate) return false;
 
-		// Парсим данные файлов
 		this.parsedFiles = $items
 			.map(li => {
 				const rawData = Manipulator.get(li, 'data-file');
 				if (!rawData) return null;
 
-				const dataFile = normalizeData(rawData);
-				const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
-				const isValid = requiredKeys.every(key => dataFile.hasOwnProperty(key));
-
-				return isValid ? dataFile : null;
+				return this._parseDataFile(rawData);
 			})
-			.filter(Boolean); // Убираем null
+			.filter(Boolean);
 
 		return true;
 	}
 
+	_parseDataFile(rawData) {
+		const dataFile = normalizeData(rawData);
+		if (!dataFile || typeof dataFile !== 'object' || Array.isArray(dataFile)) return null;
+
+		const binaryMeta = this._extractBinaryMeta(dataFile);
+		const name = this._toStringOrNull(dataFile.name);
+		const id = this._toStringOrNull(dataFile.id);
+		const src = this._toStringOrNull(dataFile.src);
+		const type = this._toStringOrNull(dataFile.type) || binaryMeta.type || 'application/octet-stream';
+		const size = this._toNumberOrNull(dataFile.size) ?? binaryMeta.size ?? 0;
+		const lastModified = this._toNumberOrNull(dataFile.lastModified ?? dataFile['last-modified']) ?? binaryMeta.lastModified ?? Date.now();
+
+		const result = {
+			id,
+			name,
+			size,
+			type,
+			src,
+			lastModified
+		};
+
+		if (dataFile.image !== undefined && dataFile.image !== null && dataFile.image !== '') {
+			result.image = dataFile.image;
+		}
+
+		const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
+		const isValid = requiredKeys.every((key) => {
+			const value = result[key];
+			if (key === 'size') return Number.isFinite(value);
+			return value !== undefined && value !== null && value !== '';
+		});
+
+		if (!isValid) return null;
+
+		const customData = {};
+		const reserved = new Set(['id', 'name', 'size', 'type', 'src', 'image', 'lastModified', 'last-modified']);
+
+		Object.entries(dataFile).forEach(([key, value]) => {
+			if (reserved.has(key)) return;
+			if (value === undefined || value === null || value === '') return;
+			customData[key] = value;
+		});
+
+		if (Object.keys(customData).length) {
+			result.customData = customData;
+		}
+
+		return result;
+	}
+
+	_extractBinaryMeta(dataFile) {
+		const binary = dataFile.file || dataFile.blob || dataFile.originFile || null;
+		if (!(binary instanceof Blob)) return {};
+
+		const size = this._toNumberOrNull(binary.size);
+		const type = this._toStringOrNull(binary.type);
+		const lastModified = (binary instanceof File)
+			? this._toNumberOrNull(binary.lastModified)
+			: null;
+
+		return {
+			size: size ?? null,
+			type: type || null,
+			lastModified: lastModified ?? null
+		};
+	}
+
+	_toStringOrNull(value) {
+		if (value === undefined || value === null) return null;
+		const normalized = String(value).trim();
+		return normalized ? normalized : null;
+	}
+
+	_toNumberOrNull(value) {
+		if (value === undefined || value === null || value === '') return null;
+		const normalized = Number(value);
+		return Number.isFinite(normalized) ? normalized : null;
+	}
+
 	_setTemplateInBuffer($items) {
 		if (this.bufferTemplate || $items.length === 0) return;
 
 		const firstItem = $items[0];
 
-		// Если нет data-file — шаблон извлекается и элемент удаляется
 		if (!Manipulator.has(firstItem, 'data-file')) {
 			this.bufferTemplate = firstItem.outerHTML;
 			firstItem.remove();
@@ -80,4 +151,4 @@ class VGFilesTemplateRender {
 	}
 }
 
-export default VGFilesTemplateRender;
+export default VGFilesTemplateRender;

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

@@ -41,21 +41,21 @@ class VGFiles extends VGFilesBase {
             types: [],
             ajax: false,
             prepend: true,
-            replace: true,
-            rename: false,
-            smartdrop: false,
-            uploads: {
-                mode: 'sequential',
-                route: '',
+            replace: true,
+            rename: false,
+            smartdrop: false,
+            uploads: {
+                mode: 'sequential',
+                route: '',
                 maxParallel: 3,
                 maxConcurrent: 1,
                 retryAttempts: 1,
                 retryDelay: 1000,
             },
-            removes: {
-                all: { route: '', alert: true, toast: true },
-                single: { route: '', alert: true, toast: true }
-            },
+            removes: {
+                all: { route: '', alert: true, toast: true, confirm: null },
+                single: { route: '', alert: true, toast: true, confirm: null }
+            },
             sortable: {
                 enabled: false,
                 route: '',
@@ -106,67 +106,91 @@ class VGFiles extends VGFilesBase {
         if (this.isRenderNonInit) return;
         this.isRenderNonInit = this._render.init();
 
-        if (this._render.parsedFiles.length) {
-            this._addExternalFiles(this._render.parsedFiles);
+        const parsedFiles = this._render.parsedFiles;
+
+        if (parsedFiles.length) {
+            this._addExternalFiles(parsedFiles);
         }
 
-        if (this._params.allowed && !this._params.ajax) this._params.detach = false;
-        if (this._nodes.drop) {
-            this._params.image = true;
-            this._params.detach = true;
-            this._setDropActiveText();
-
-            VGFilesDroppable.getOrCreateInstance(this._nodes.drop, this._params).init();
-        }
+        if (this._params.allowed && !this._params.ajax) this._params.detach = false;
+        if (this._nodes.drop) {
+            this._params.image = true;
+            this._params.detach = true;
+            this._setDropActiveText();
 
-        this._addEventListenerExtended();
-        this._renderStat();
-        this._triggerCallback('onInit', { element: this._element });
-    }
-
-    _setDropActiveText() {
-        if (!this._nodes.drop) return;
-
-        const messages = lang_messages(this._params.lang, NAME) || {};
-        const activeText = (this._nodes.drop.getAttribute('data-drop-active-text') || '').trim() || messages['drop-active'] || 'Release to upload';
-        this._nodes.drop.setAttribute('data-drop-active-text', activeText);
-
-        const title = Selectors.find('.vg-files-drop-message .title', this._nodes.drop);
-        if (!title) return;
-
-        const originalText = (title.getAttribute('data-drop-original-text') || '').trim() || (title.textContent || '').trim();
-        title.setAttribute('data-drop-original-text', originalText);
-    }
+            VGFilesDroppable.getOrCreateInstance(this._nodes.drop, this._params).init();
+        }
+
+        this._addEventListenerExtended();
+        this._renderStat();
+        this._triggerCallback('onInit', { element: this._element, files: parsedFiles || [] });
+    }
+
+    _setDropActiveText() {
+        if (!this._nodes.drop) return;
+
+        const messages = lang_messages(this._params.lang, NAME) || {};
+        const activeText = (this._nodes.drop.getAttribute('data-drop-active-text') || '').trim() || messages['drop-active'] || 'Release to upload';
+        this._nodes.drop.setAttribute('data-drop-active-text', activeText);
+
+        const title = Selectors.find('.vg-files-drop-message .title', this._nodes.drop);
+        if (!title) return;
+
+        const originalText = (title.getAttribute('data-drop-original-text') || '').trim() || (title.textContent || '').trim();
+        title.setAttribute('data-drop-original-text', originalText);
+    }
 
     _addExternalFiles(files) {
         if (!Array.isArray(files) || !files.length) return;
 
         files.forEach(fileData => {
-            const file = new File([""], fileData.name, {
-                type: fileData.type || "application/octet-stream",
-                lastModified: fileData.lastModified || Date.now()
-            });
+            if (!fileData?.name) return;
 
-            // Добавляем ID, если он есть
-            Object.defineProperty(file, 'id', {
-                value: fileData.id,
-                writable: true,
-                enumerable: true
-            });
+            const fileOptions = {};
+            if (typeof fileData.type === 'string') fileOptions.type = fileData.type;
+            if (Number.isFinite(fileData.lastModified)) fileOptions.lastModified = fileData.lastModified;
 
-            // Добавляем Size, если он есть
-            Object.defineProperty(file, 'size', {
-                value: fileData.size,
-                writable: true,
-                enumerable: true
-            });
+            const file = new File([""], fileData.name, fileOptions);
 
-            // Добавляем Src, если он есть
-            Object.defineProperty(file, 'src', {
-                value: fileData.src,
-                writable: true,
-                enumerable: true
-            });
+            if (fileData.id !== undefined && fileData.id !== null && fileData.id !== '') {
+                Object.defineProperty(file, 'id', {
+                    value: fileData.id,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (Number.isFinite(fileData.size)) {
+                Object.defineProperty(file, 'size', {
+                    value: fileData.size,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.src !== undefined && fileData.src !== null && fileData.src !== '') {
+                Object.defineProperty(file, 'src', {
+                    value: fileData.src,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.image !== undefined && fileData.image !== null && fileData.image !== '') {
+                Object.defineProperty(file, 'image', {
+                    value: fileData.image,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.customData && typeof fileData.customData === 'object' && !Array.isArray(fileData.customData)) {
+                Object.defineProperty(file, 'customData', {
+                    value: fileData.customData,
+                    writable: true,
+                    enumerable: true
+                });
+            }
 
             const fileKey = this._getFileKey(file);
 
@@ -207,32 +231,32 @@ class VGFiles extends VGFilesBase {
         });
     }
 
-    _handleChange(e) {
-        const input = e?.target;
-        const inputFiles = this._snapshotInputFiles(input);
-        this.change(input);
-
-        if (this._params.ajax) this.uploadAll(this._files);
-
-        const payload = {
-            files: this._files,
-            input: e?.target || e?.src || '',
-            inputFiles
-        };
-
-        this._triggerCallback('onChange', payload);
-        this._triggerEvent('change', {
-            files: this._files,
-            input: payload.input,
-            inputFiles: payload.inputFiles
-        });
-    }
-
-    _snapshotInputFiles(input) {
-        const files = input?.files;
-        if (!files?.length) return [];
-        return Array.from(files);
-    }
+    _handleChange(e) {
+        const input = e?.target;
+        const inputFiles = this._snapshotInputFiles(input);
+        this.change(input);
+
+        if (this._params.ajax) this.uploadAll(this._files);
+
+        const payload = {
+            files: this._files,
+            input: e?.target || e?.src || '',
+            inputFiles
+        };
+
+        this._triggerCallback('onChange', payload);
+        this._triggerEvent('change', {
+            files: this._files,
+            input: payload.input,
+            inputFiles: payload.inputFiles
+        });
+    }
+
+    _snapshotInputFiles(input) {
+        const files = input?.files;
+        if (!files?.length) return [];
+        return Array.from(files);
+    }
 
     async uploadAll(files) {
         if (!this._params.ajax || !this._params.uploads.route) return;
@@ -501,8 +525,8 @@ class VGFiles extends VGFilesBase {
         });
     }
 
-    reload(button) {
-        if (!this._params.ajax || !this._params.uploads.route) return;
+    reload(button) {
+        if (!this._params.ajax || !this._params.uploads.route) return;
 
         const dataButton = Manipulator.get(button, 'data');
         const fileData = {
@@ -532,10 +556,85 @@ class VGFiles extends VGFilesBase {
         this._triggerCallback('onReload', payload);
         this._triggerEvent('reload', payload);
 
-        this.upload(fileToRetry);
-    }
-
-    removeFile(button) {
+        this.upload(fileToRetry);
+    }
+
+    _runAjaxRequest(paramsAjax, callback) {
+        const previousAjax = this._params.ajax;
+        this._params.ajax = paramsAjax;
+
+        this._route((status, data) => {
+            this._params.ajax = previousAjax;
+            callback(status, data);
+        });
+    }
+
+    _normalizeConfirmResult(result) {
+        if (result === true) return { accepted: true, data: null };
+        if (result === false || result == null) return { accepted: false, data: null };
+
+        if (typeof result === 'object') {
+            if (typeof result.accepted === 'boolean') {
+                return { accepted: result.accepted, data: result.data ?? null };
+            }
+            if (Object.prototype.hasOwnProperty.call(result, 'data')) {
+                return { accepted: true, data: result.data ?? null };
+            }
+        }
+
+        return { accepted: Boolean(result), data: null };
+    }
+
+    _runDefaultRemoveConfirm(trigger, params) {
+        return new Promise((resolve) => {
+            VGAlert.confirm(trigger, {
+                lang: params.lang,
+                ajax: params.ajax,
+                buttons: params.buttons,
+                message: params.message
+            });
+
+            EventHandler.one(trigger, 'vg.alert.accept', (event) => {
+                resolve({ accepted: true, data: event?.vgalert?.data ?? null });
+            });
+
+            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,
+            lang: this._params.lang,
+            ajax,
+            buttons,
+            message
+        };
+
+        const customConfirm = this._params?.removes?.[type]?.confirm;
+        if (typeof customConfirm === 'function') {
+            return Promise.resolve(customConfirm(confirmParams, this))
+                .then((result) => this._normalizeConfirmResult(result));
+        }
+
+        return this._runDefaultRemoveConfirm(trigger, confirmParams);
+    }
+
+    removeFile(button) {
         const name = normalizeData(Manipulator.get(button, 'data-name'));
         const size = normalizeData(Manipulator.get(button, 'data-size'));
         const id = normalizeData(Manipulator.get(button, 'data-id'));
@@ -569,7 +668,9 @@ class VGFiles extends VGFilesBase {
         if (this._params.ajax && this._params.removes.single.route) {
             if (!id) return;
 
-            const route = this._params.removes.single.route + '/' + encodeURIComponent(id);
+            const routeBase = this._params.removes.single.route;
+            const routeSeparator = routeBase.includes('?') ? '&' : '?';
+            const route = `${routeBase}${routeSeparator}id=${encodeURIComponent(id)}`;
             const paramsAjax = {
                 route: route,
                 method: 'delete'
@@ -590,35 +691,31 @@ class VGFiles extends VGFilesBase {
                 }
             };
 
-            if (this._params.removes.single.alert) {
-                VGAlert.confirm(button, {
-                    lang: this._params.lang,
-                    ajax: paramsAjax,
-                    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"],
-                        },
-                    },
-                    message: {
-                        title: lang_messages(this._params.lang, NAME)['title'],
-                        description: lang_messages(this._params.lang, NAME)['description']
-                    }
-                });
-
-                EventHandler.one(button, 'vg.alert.accept', (event) => {
-                    _completeRemoveFile(event.vgalert.data);
-                });
-            } else {
-                this._params.ajax = paramsAjax;
-                this._route((status, data) => {
-                    _completeRemoveFile(data);
-                });
-            }
+            if (this._params.removes.single.alert) {
+                const message = {
+                    title: lang_messages(this._params.lang, NAME)['title'],
+                    description: lang_messages(this._params.lang, NAME)['description']
+                };
+
+                this._confirmRemove('single', button, paramsAjax, message)
+                    .then((result) => {
+                        if (!result.accepted) return;
+
+                        if (result.data) {
+                            _completeRemoveFile(result.data);
+                            return;
+                        }
+
+                        this._runAjaxRequest(paramsAjax, (status, data) => {
+                            _completeRemoveFile(data);
+                        });
+                    })
+                    .catch(() => {});
+            } else {
+                this._runAjaxRequest(paramsAjax, (status, data) => {
+                    _completeRemoveFile(data);
+                });
+            }
         } else {
             this._files = this._files.filter(f => !(f.name === name && f.size === size));
             this._updateStatsAfterRemove();
@@ -682,15 +779,15 @@ class VGFiles extends VGFilesBase {
 
         return this._tpl.button([
             this._tpl.i({}, icon, { isHTML: true })
-        ], 'button', {
+        ], 'button', this._buildFileDataAttributes(file, {
             type: 'button',
             [action]: 'file',
             'data-name': file.name,
-            'data-size': file.size,
-            'data-type': file.type,
-            'data-last-modified': file.lastModified,
+            'data-size': file.size ?? 0,
+            'data-type': file.type || '',
+            'data-last-modified': file.lastModified || '',
             'data-id': file.id || ''
-        });
+        }));
     }
 
     _renderStat() {
@@ -835,37 +932,37 @@ EventHandler.on(document, `click.${NAME_KEY}.data.api`, SELECTOR_DATA_DISMISS_AL
             instance.clear(true, true);
         };
 
-        if (instance._params.removes.all.alert) {
-            VGAlert.confirm(e.target, {
-                lang: instance._params.lang,
-                ajax: paramsAjax,
-                buttons: {
-                    agree: {
-                        text: lang_buttons(instance._params.lang, NAME)['agree'],
-                        class: ["btn-danger"],
-                    },
-                    cancel: {
-                        text: lang_buttons(instance._params.lang, NAME)['cancel'],
-                        class: ["btn-outline-danger"],
-                    },
-                },
-                message: {
-                    title: lang_messages(instance._params.lang, NAME)['title'],
-                    description: lang_messages(instance._params.lang, NAME)['descriptions']
-                }
-            });
-
-            EventHandler.one(e.target, 'vg.alert.accept', (event) => {
-                if (instance._params.removes.all.toast) {
-                    VGToast.run(event.vgalert.data?.response?.message);
-                }
-                _completeClearAll();
-            });
-        } else {
-            instance._route(paramsAjax, (status, data) => {
-                if (instance._params.removes.all.toast && data?.response?.message) {
-                    VGToast.run(data.response.message);
-                }
+        if (instance._params.removes.all.alert) {
+            const message = {
+                title: lang_messages(instance._params.lang, NAME)['title'],
+                description: lang_messages(instance._params.lang, NAME)['descriptions']
+            };
+
+            instance._confirmRemove('all', e.target, paramsAjax, message)
+                .then((result) => {
+                    if (!result.accepted) return;
+
+                    if (result.data) {
+                        if (instance._params.removes.all.toast) {
+                            VGToast.run(result.data?.response?.message);
+                        }
+                        _completeClearAll();
+                        return;
+                    }
+
+                    instance._runAjaxRequest(paramsAjax, (status, data) => {
+                        if (instance._params.removes.all.toast && data?.response?.message) {
+                            VGToast.run(data.response.message);
+                        }
+                        _completeClearAll();
+                    });
+                })
+                .catch(() => {});
+        } else {
+            instance._runAjaxRequest(paramsAjax, (status, data) => {
+                if (instance._params.removes.all.toast && data?.response?.message) {
+                    VGToast.run(data.response.message);
+                }
                 _completeClearAll();
             });
         }
@@ -874,4 +971,4 @@ EventHandler.on(document, `click.${NAME_KEY}.data.api`, SELECTOR_DATA_DISMISS_AL
     }
 });
 
-export default VGFiles;
+export default VGFiles;

package/app/modules/vgfiles/readme.md

@@ -62,9 +62,13 @@ const files = new VGFiles(document.querySelector('.vg-files'), {
 | `uploads.retryAttempts` | `number` | `1` | Кол-во попыток повтора при ошибке |
 | `uploads.retryDelay` | `number` | `1000` | Задержка между попытками (мс) |
 | `removes.single.route` | `string` | `''` | URL для удаления одного файла |
-| `removes.all.route` | `string` | `''` | URL для удаления всех файлов |
-| `removes.single.alert` | `boolean` | `true` | Показывать подтверждение при удалении |
-| `removes.single.toast` | `boolean` | `true` | Показывать уведомление после удаления |
+| `removes.all.route` | `string` | `''` | URL для удаления всех файлов |
+| `removes.all.alert` | `boolean` | `true` | Показывать подтверждение при удалении всех файлов |
+| `removes.all.toast` | `boolean` | `true` | Показывать уведомление после удаления всех файлов |
+| `removes.all.confirm` | `function \| null` | `null` | Кастомный confirm-обработчик для удаления всех файлов |
+| `removes.single.alert` | `boolean` | `true` | Показывать подтверждение при удалении |
+| `removes.single.toast` | `boolean` | `true` | Показывать уведомление после удаления |
+| `removes.single.confirm` | `function \| null` | `null` | Кастомный confirm-обработчик для удаления одного файла |
 | `sortable.enabled` | `boolean` | `false` | Включить сортировку |
 | `sortable.route` | `string` | `''` | URL для сохранения порядка файлов |
 | `callbacks` | `object` | `null` | Колбэки на события (см. ниже) |
@@ -116,7 +120,34 @@ const files = new VGFiles(document.querySelector('.vg-files'), {
 - **Удаление одного файла**: кнопка с `data-vg-dismiss="file"` → вызов `removeFile()`.
 - **Очистка всех**: кнопка с `data-vg-dismiss="vg-files"` → `clear()`.
 
-Поддержка подтверждения через `VGAlert` и уведомлений через `VGToast`.
+Поддержка подтверждения через `VGAlert` и уведомлений через `VGToast`.
+
+### Кастомный confirm для удаления
+
+Если задан `removes.single.confirm` или `removes.all.confirm`, модуль вызовет вашу функцию вместо дефолтного `VGAlert`.
+
+```js
+new VGFiles(document.querySelector('.vg-files'), {
+  ajax: true,
+  removes: {
+    single: {
+      route: '/api/file/remove',
+      alert: true,
+      confirm: async ({ message }) => {
+        const accepted = window.confirm(`${message.title}\n${message.description}`);
+        return { accepted };
+      }
+    }
+  }
+});
+```
+
+Контракт функции confirm:
+- Вход: объект `{ type, trigger, lang, ajax, buttons, message }`.
+- Выход:
+`true` или `{ accepted: true }` — подтвердить;
+`false` или `{ accepted: false }` — отменить;
+`{ accepted: true, data }` — подтвердить и передать готовый ответ удаления (если запрос уже выполнен внутри confirm).
 
 ---
 

package/app/modules/vgnav/js/vgnav.js

@@ -52,6 +52,10 @@ class VGNav extends BaseModule {
 			breakpoint: 'lg',
 			placement: 'horizontal',
 			hover: true,
+			hoversmoothfirstlevel: {
+				enable: false,
+				horizontalOnly: true
+			},
 			animation: {
 				enable: true,
 				timeout: 700
@@ -98,6 +102,7 @@ class VGNav extends BaseModule {
 		}
 
 		this._openDrops = new Map();
+		this._pointerPosition = null;
 		this._handleScroll = this._handleScroll.bind(this);
 		this._handleResize = this._handleResize.bind(this);
 	}
@@ -333,6 +338,50 @@ class VGNav extends BaseModule {
 		return vertInView && horInView;
 	}
 
+	_updatePointerPosition(event) {
+		if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
+		this._pointerPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+
+	_isHorizontalPointerMove(event) {
+		if (!this._pointerPosition || !event) return false;
+
+		const dx = event.clientX - this._pointerPosition.x;
+		const dy = event.clientY - this._pointerPosition.y;
+
+		return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
+	}
+
+	_isFirstLevelDropdown(drop) {
+		return !!drop && !drop.closest('.dropdown-content');
+	}
+
+	_hasDirectDropdownContent(drop) {
+		if (!drop || !drop.children) return false;
+		return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
+	}
+
+	_isAdjacentDropdown(drop, relatedDrop) {
+		if (!drop || !relatedDrop) return false;
+		if (drop.parentElement !== relatedDrop.parentElement) return false;
+		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
+	}
+
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+		const smoothParams = this._params.hoversmoothfirstlevel || {};
+		if (!smoothParams.enable) return false;
+		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
+		if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
+		if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
+		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
+		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
+
+		return true;
+	}
+
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
 		instance.build();
@@ -340,12 +389,15 @@ class VGNav extends BaseModule {
 		let drops = Selectors.findAll('.dropdown', instance.navigation);
 
 		if (instance._params.hover && !isMobileDevice()) {
+			EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
+				instance._updatePointerPosition(event);
+			});
+
 			[...drops].forEach(function (el) {
 				let currentElem = null;
 
 				EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
 					if (currentElem) return;
-					VGNav.hideOpenDrops(event);
 
 					let target = event.target.closest('.dropdown');
 					if (!target) return;
@@ -353,17 +405,31 @@ class VGNav extends BaseModule {
 					if (!instance.navigation.contains(target)) return;
 					currentElem = target;
 
+					const previousDrop = event.relatedTarget?.closest('.dropdown');
+					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
+
+					if (!useSmoothSwitch) {
+						VGNav.hideOpenDrops(event);
+					}
+
 					let relatedTarget = {
 						relatedTarget: target
 					};
 
 					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						instance.hide({ relatedTarget: previousDrop });
+					}
+
+					instance._updatePointerPosition(event);
 				});
 
 				EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
 					if (!currentElem) return;
 
-					let relatedTarget = event.relatedTarget?.closest('.dropdown'),
+					let nextDrop = event.relatedTarget?.closest('.dropdown'),
+						relatedTarget = nextDrop,
 						elm = currentElem;
 
 					while (relatedTarget) {
@@ -371,8 +437,15 @@ class VGNav extends BaseModule {
 						relatedTarget = relatedTarget.parentNode;
 					}
 
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						instance._updatePointerPosition(event);
+						return;
+					}
+
 					currentElem = null;
 					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+					instance._updatePointerPosition(event);
 				});
 			});
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vgapp",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",