vgapp 1.4.4 → 1.4.6

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

@@ -4,8 +4,9 @@ import Selectors from "../../../utils/js/dom/selectors";
 import { Classes } from "../../../utils/js/dom/manipulator";
 import BaseModule from "../../base-module";
 
-const CLASS_NAME_CONTAINER = 'vg-files';
-const CLASS_NAME_DROP = `${CLASS_NAME_CONTAINER}-drop`;
+const CLASS_NAME_CONTAINER = 'vg-files';
+const CLASS_NAME_DROP = `${CLASS_NAME_CONTAINER}-drop`;
+const CLASS_NAME_DROP_LIST = `${CLASS_NAME_DROP}--list`;
 
 const CLASS_NAME_DROP_ACTIVE = 'drop-active';
 const CLASS_NAME_DROP_HOVER = 'drop-hover';
@@ -58,18 +59,27 @@ class VGFilesDroppable extends BaseModule {
     /**
      * Настройка событий перетаскивания
      */
-    _setupEvents() {
-        if (!isElement(this._element)) return;
+    _setupEvents() {
+        if (!isElement(this._element)) return;
 
-        const isSortableDrag = (e) => {
+        const isSortableDrag = (e) => {
             // 1) если sortable реально активен — на элементе есть класс dragging
             if (document.querySelector('.dragging')) return true;
 
             // 2) маркер, который ставит sortable
             let plain = '';
             try { plain = e.dataTransfer?.getData?.('text/plain') || ''; } catch (_) {}
-            return plain === 'vgsortable';
-        };
+            return plain === 'vgsortable';
+        };
+
+        EventHandler.on(this._element, `click.${NAME_KEY}`, (e) => {
+            if (this._element.tagName !== 'LABEL') return;
+
+            const fileList = e.target?.closest?.(`.${CLASS_NAME_DROP_LIST}`);
+            if (fileList && this._element.contains(fileList)) {
+                e.preventDefault();
+            }
+        });
 
         EventHandler.on(this._element, 'dragover', (e) => {
             e.preventDefault();
@@ -324,8 +334,9 @@ class VGFilesDroppable extends BaseModule {
         return this._files;
     }
 
-    dispose() {
-        EventHandler.off(this._element, 'dragover');
+    dispose() {
+        EventHandler.off(this._element, `click.${NAME_KEY}`);
+        EventHandler.off(this._element, 'dragover');
         EventHandler.off(this._element, 'dragenter');
         EventHandler.off(this._element, 'dragleave');
         EventHandler.off(this._element, 'drop');

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

@@ -1,154 +1,154 @@
-import { isElement, normalizeData } from "../../../utils/js/functions";
-import Params from "../../../utils/js/components/params";
-import Selectors from "../../../utils/js/dom/selectors";
-import { Manipulator } from "../../../utils/js/dom/manipulator";
-
-class VGFilesTemplateRender {
-	constructor(vgFilesInstance, element, params = {}) {
-		this.module = vgFilesInstance;
-		this.element = isElement(element) ? element : null;
-
-		if (!this.element) {
-			console.error('Invalid element provided:', element);
-			return;
-		}
-
-		this._params = new Params(params, element).get();
-		this._nodes = {
-			info: this.module._nodes.info,
-			drop: this.module._nodes.drop
-		};
-
-		this.bufferTemplate = '';
-		this.parsedFiles = [];
-	}
-
-	init() {
-		const $targetNode = this._nodes.info || this._nodes.drop;
-		if (!$targetNode) return false;
-
-		const area = this._nodes.info ? 'info' : 'drop';
-		return this._nativeRenderFiles(area, $targetNode);
-	}
-
-	_nativeRenderFiles(area, $node) {
-		const $list = Selectors.find(`.vg-files-${area}--list`, $node);
-		if (!$list) return false;
-
-		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;
-
-				return this._parseDataFile(rawData);
-			})
-			.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];
-
-		if (!Manipulator.has(firstItem, 'data-file')) {
-			this.bufferTemplate = firstItem.outerHTML;
-			firstItem.remove();
-		} else {
-			this.bufferTemplate = firstItem.outerHTML;
-		}
-	}
-
-	dispose() {
-		this.bufferTemplate = '';
-		this.parsedFiles = [];
-	}
-}
-
+import { isElement, normalizeData } from "../../../utils/js/functions";
+import Params from "../../../utils/js/components/params";
+import Selectors from "../../../utils/js/dom/selectors";
+import { Manipulator } from "../../../utils/js/dom/manipulator";
+
+class VGFilesTemplateRender {
+	constructor(vgFilesInstance, element, params = {}) {
+		this.module = vgFilesInstance;
+		this.element = isElement(element) ? element : null;
+
+		if (!this.element) {
+			console.error('Invalid element provided:', element);
+			return;
+		}
+
+		this._params = new Params(params, element).get();
+		this._nodes = {
+			info: this.module._nodes.info,
+			drop: this.module._nodes.drop
+		};
+
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+
+	init() {
+		const $targetNode = this._nodes.info || this._nodes.drop;
+		if (!$targetNode) return false;
+
+		const area = this._nodes.info ? 'info' : 'drop';
+		return this._nativeRenderFiles(area, $targetNode);
+	}
+
+	_nativeRenderFiles(area, $node) {
+		const $list = Selectors.find(`.vg-files-${area}--list`, $node);
+		if (!$list) return false;
+
+		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;
+
+				return this._parseDataFile(rawData);
+			})
+			.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];
+
+		if (!Manipulator.has(firstItem, 'data-file')) {
+			this.bufferTemplate = firstItem.outerHTML;
+			firstItem.remove();
+		} else {
+			this.bufferTemplate = firstItem.outerHTML;
+		}
+	}
+
+	dispose() {
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+}
+
 export default VGFilesTemplateRender;

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

@@ -51,12 +51,12 @@ class VGFiles extends VGFilesBase {
                 maxConcurrent: 1,
                 retryAttempts: 1,
                 retryDelay: 1000,
-            },
-            removes: {
-                buttons: null,
-                all: { route: '', alert: true, toast: true, confirm: null, buttons: null },
-                single: { route: '', alert: true, toast: true, confirm: null, buttons: 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: '',
@@ -483,14 +483,14 @@ class VGFiles extends VGFilesBase {
                 if (li) {
                     this._setButtonElement(file);
 
-                    const fileRemove = Selectors.find('.file-remove', li);
-                    if (fileRemove) {
-                        fileRemove.innerHTML = '';
-                        fileRemove.appendChild(this._setFailingButtons(file));
-                        Classes.add(li, CLASS_NAME_FAILING);
-                    }
-                }
-            }
+                    const fileRemove = Selectors.find('.file-remove', li);
+                    if (fileRemove) {
+                        fileRemove.innerHTML = '';
+                        fileRemove.appendChild(this._setFailingButtons(file));
+                        Classes.add(li, CLASS_NAME_FAILING);
+                    }
+                }
+            }
 
             const payload = { file: uploadData.file };
 
@@ -586,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
             });
@@ -601,58 +601,58 @@ class VGFiles extends VGFilesBase {
 
             EventHandler.one(trigger, 'vg.alert.reject', () => {
                 resolve({ accepted: false, data: null });
-            });
-        });
-    }
-
-    _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,
+            });
+        });
+    }
+
+    _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,
@@ -711,15 +711,15 @@ class VGFiles extends VGFilesBase {
             }
         });
 
-        if (this._params.ajax && this._params.removes.single.route) {
-            if (!id) {
-                this._files = this._files.filter(f => !(f.name === name && f.size === size));
-                this._updateStatsAfterRemove();
-                this._files.length ? this.build() : this.clear(true);
-                emitRemove();
-                this._resetFileInput();
-                return;
-            }
+        if (this._params.ajax && this._params.removes.single.route) {
+            if (!id) {
+                this._files = this._files.filter(f => !(f.name === name && f.size === size));
+                this._updateStatsAfterRemove();
+                this._files.length ? this.build() : this.clear(true);
+                emitRemove();
+                this._resetFileInput();
+                return;
+            }
 
             const routeBase = this._params.removes.single.route;
             const routeSeparator = routeBase.includes('?') ? '&' : '?';
@@ -809,36 +809,36 @@ class VGFiles extends VGFilesBase {
         return Selectors.find(`button[data-name="${file.name}"][data-size="${file.size}"]`, this._element);
     }
 
-    _setButtonElement(file, isAjax = false, status = '') {
-        let icon = getSVG('trash'), action = 'data-vg-dismiss';
-        if (!this._params.info) icon = getSVG('cross');
-        if (isAjax) {
-            icon = getSVG('spinner');
-            if (status === 'completed') icon = getSVG('check');
-            else action = 'data-vg-reload';
-        }
-
-        return this._tpl.button([
-            this._tpl.i({}, icon, { isHTML: true })
-        ], 'button', this._buildFileDataAttributes(file, {
+    _setButtonElement(file, isAjax = false, status = '') {
+        let icon = getSVG('trash'), action = 'data-vg-dismiss';
+        if (!this._params.info) icon = getSVG('cross');
+        if (isAjax) {
+            icon = getSVG('spinner');
+            if (status === 'completed') icon = getSVG('check');
+            else action = 'data-vg-reload';
+        }
+
+        return this._tpl.button([
+            this._tpl.i({}, icon, { isHTML: true })
+        ], 'button', this._buildFileDataAttributes(file, {
             type: 'button',
             [action]: 'file',
             'data-name': file.name,
             'data-size': file.size ?? 0,
             'data-type': file.type || '',
             'data-last-modified': file.lastModified || '',
-            'data-id': file.id || ''
-        }));
-    }
-
-    _setFailingButtons(file) {
-        const wrapper = this._tpl.div({ class: 'file-failing-actions' }, [
-            this._setButtonElement(file, true, 'failing'),
-            this._setButtonElement(file)
-        ]);
-
-        return wrapper;
-    }
+            'data-id': file.id || ''
+        }));
+    }
+
+    _setFailingButtons(file) {
+        const wrapper = this._tpl.div({ class: 'file-failing-actions' }, [
+            this._setButtonElement(file, true, 'failing'),
+            this._setButtonElement(file)
+        ]);
+
+        return wrapper;
+    }
 
     _renderStat() {
         if (!this._nodes.stat) return;