vgapp 1.1.3 → 1.1.5

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

@@ -482,14 +482,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 };
 
@@ -677,15 +677,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('?') ? '&' : '?';
@@ -775,36 +775,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;

package/app/modules/vgfiles/readme.md

@@ -1,123 +1,123 @@
-# VGFiles
-
-`VGFiles` — модуль загрузки и управления файлами с поддержкой локального режима и AJAX.
-
-## Новые фичи
-
-- Поддержка `replace` для single-mode (`limits.count = 1`): новый файл заменяет предыдущий без накопления.
-- Переименование входящих файлов через `rename: true | (file, index) => string`.
-- `smartdrop`: глобальная подсветка dropzone, если на экране только одна видимая зона дропа.
-- Расширенный lifecycle для внешних файлов из `data-file`: парсинг `customData`, `src/image`, бинарных метаданных.
-- Интеграция с `VGFilePreview` в info-списке (`ui.nameOnly: true`) для inline-аудио, скачивания и предпросмотра по клику.
-- Авто-обогащение аудиофайлов метаданными (title/cover) через `extractAudioMetadata`.
-- Гибкие confirm-хуки для удаления (`removes.single.confirm`, `removes.all.confirm`) с контрактом `accepted/data`.
-- Повторная загрузка упавших файлов через `data-vg-reload="file"` и кнопки retry.
-- Проброс `customData` файла в `data-*` атрибуты элементов списка.
-
-## Базовые возможности
-
-- Выбор файлов через `<input type="file">` и drag&drop.
-- Лимиты: количество, размер файла, общий размер, MIME-типы.
-- Режимы загрузки: `sequential` и `parallel`.
-- Автоматическая/ручная инициализация.
-- Сортировка загруженных файлов с сохранением порядка на сервере.
-- Удаление одного файла и очистка всего списка.
-
-## Инициализация
-
-```js
-const files = new VGFiles(document.querySelector('.vg-files'), {
-  ajax: true,
-  smartdrop: true,
-  rename: true,
-  replace: true,
-  uploads: {
-    route: '/api/upload',
-    mode: 'sequential'
-  },
-  limits: {
-    count: 10,
-    sizes: 5,
-    total: 50
-  }
-});
-```
-
-## Ключевые параметры
-
-- `allowed` — разрешить drag-drop режим и особенности drop-зоны.
-- `ajax` — включить серверную загрузку.
-- `replace` (`default: true`) — замена файла в single-mode.
-- `rename` (`default: false`) — переименование файлов до добавления в список.
-- `smartdrop` (`default: false`) — глобальная логика подсказки drop-зоны.
-- `prepend` (`default: true`) — добавление новых файлов в начало.
-- `uploads.mode` — `'sequential' | 'parallel'`.
-- `uploads.maxParallel`, `uploads.maxConcurrent`, `uploads.retryAttempts`, `uploads.retryDelay`.
-- `removes.single.confirm`, `removes.all.confirm` — кастомные confirm-обработчики.
-- `sortable.enabled`, `sortable.route`, `sortable.handle`, `sortable.lists`.
-
-## Внешние (уже загруженные) файлы
-
-Модуль может стартовать с предзаполненным списком через `data-file` в `<li>`.
-
-Поддерживаемые поля объекта:
-
-- `id`, `name`, `size`, `type`, `src` (обязательный набор для валидного внешнего файла)
-- `image` (опционально)
-- `lastModified` / `last-modified` (опционально)
-- любые дополнительные поля -> попадают в `customData`
-
-`customData` дальше пробрасывается в `data-*` атрибуты элементов файла и может использоваться в шаблонах/интеграциях.
-
-## AJAX-события и callbacks
-
-DOM-события:
-
-- `vg.files.change`
-- `vg.files.upload.start`
-- `vg.files.upload.progress`
-- `vg.files.upload.complete`
-- `vg.files.upload.error`
-- `vg.files.upload.allComplete`
-- `vg.files.remove`
-- `vg.files.reload`
-
-Callbacks (`params.callbacks`):
-
-- `onInit`
-- `onChange` (`{ files, input, inputFiles }`)
-- `onUploadStart`
-- `onUploadProgress`
-- `onUploadComplete`
-- `onUploadError`
-- `onUploadAllComplete`
-- `onRemoveFile`
-- `onClear`
-- `onReload`
-
-## Удаление с кастомным confirm
-
-Если передан `removes.single.confirm` или `removes.all.confirm`, модуль вызывает вашу функцию вместо стандартного `VGAlert`.
-
-Контракт результата:
-
-- `true` или `{ accepted: true }` — подтвердить.
-- `false` или `{ accepted: false }` — отменить.
-- `{ accepted: true, data }` — подтвердить и использовать готовый ответ удаления (без дополнительного AJAX-запроса).
-
-## Статусы файлов
-
-- `pending` — ожидает загрузки.
-- `loading` — идет загрузка.
-- `completed` — успешно загружен.
-- `failing` — ошибка загрузки (доступен reload).
-
-## Методы API
-
-- `upload(file)`
-- `uploadAll(files)`
-- `reload(button)`
-- `removeFile(button)`
-- `clear(resetInput, uiOnly)`
-- `dispose()`
-
+# VGFiles
+
+`VGFiles` — модуль загрузки и управления файлами с поддержкой локального режима и AJAX.
+
+## Новые фичи
+
+- Поддержка `replace` для single-mode (`limits.count = 1`): новый файл заменяет предыдущий без накопления.
+- Переименование входящих файлов через `rename: true | (file, index) => string`.
+- `smartdrop`: глобальная подсветка dropzone, если на экране только одна видимая зона дропа.
+- Расширенный lifecycle для внешних файлов из `data-file`: парсинг `customData`, `src/image`, бинарных метаданных.
+- Интеграция с `VGFilePreview` в info-списке (`ui.nameOnly: true`) для inline-аудио, скачивания и предпросмотра по клику.
+- Авто-обогащение аудиофайлов метаданными (title/cover) через `extractAudioMetadata`.
+- Гибкие confirm-хуки для удаления (`removes.single.confirm`, `removes.all.confirm`) с контрактом `accepted/data`.
+- Повторная загрузка упавших файлов через `data-vg-reload="file"` и кнопки retry.
+- Проброс `customData` файла в `data-*` атрибуты элементов списка.
+
+## Базовые возможности
+
+- Выбор файлов через `<input type="file">` и drag&drop.
+- Лимиты: количество, размер файла, общий размер, MIME-типы.
+- Режимы загрузки: `sequential` и `parallel`.
+- Автоматическая/ручная инициализация.
+- Сортировка загруженных файлов с сохранением порядка на сервере.
+- Удаление одного файла и очистка всего списка.
+
+## Инициализация
+
+```js
+const files = new VGFiles(document.querySelector('.vg-files'), {
+  ajax: true,
+  smartdrop: true,
+  rename: true,
+  replace: true,
+  uploads: {
+    route: '/api/upload',
+    mode: 'sequential'
+  },
+  limits: {
+    count: 10,
+    sizes: 5,
+    total: 50
+  }
+});
+```
+
+## Ключевые параметры
+
+- `allowed` — разрешить drag-drop режим и особенности drop-зоны.
+- `ajax` — включить серверную загрузку.
+- `replace` (`default: true`) — замена файла в single-mode.
+- `rename` (`default: false`) — переименование файлов до добавления в список.
+- `smartdrop` (`default: false`) — глобальная логика подсказки drop-зоны.
+- `prepend` (`default: true`) — добавление новых файлов в начало.
+- `uploads.mode` — `'sequential' | 'parallel'`.
+- `uploads.maxParallel`, `uploads.maxConcurrent`, `uploads.retryAttempts`, `uploads.retryDelay`.
+- `removes.single.confirm`, `removes.all.confirm` — кастомные confirm-обработчики.
+- `sortable.enabled`, `sortable.route`, `sortable.handle`, `sortable.lists`.
+
+## Внешние (уже загруженные) файлы
+
+Модуль может стартовать с предзаполненным списком через `data-file` в `<li>`.
+
+Поддерживаемые поля объекта:
+
+- `id`, `name`, `size`, `type`, `src` (обязательный набор для валидного внешнего файла)
+- `image` (опционально)
+- `lastModified` / `last-modified` (опционально)
+- любые дополнительные поля -> попадают в `customData`
+
+`customData` дальше пробрасывается в `data-*` атрибуты элементов файла и может использоваться в шаблонах/интеграциях.
+
+## AJAX-события и callbacks
+
+DOM-события:
+
+- `vg.files.change`
+- `vg.files.upload.start`
+- `vg.files.upload.progress`
+- `vg.files.upload.complete`
+- `vg.files.upload.error`
+- `vg.files.upload.allComplete`
+- `vg.files.remove`
+- `vg.files.reload`
+
+Callbacks (`params.callbacks`):
+
+- `onInit`
+- `onChange` (`{ files, input, inputFiles }`)
+- `onUploadStart`
+- `onUploadProgress`
+- `onUploadComplete`
+- `onUploadError`
+- `onUploadAllComplete`
+- `onRemoveFile`
+- `onClear`
+- `onReload`
+
+## Удаление с кастомным confirm
+
+Если передан `removes.single.confirm` или `removes.all.confirm`, модуль вызывает вашу функцию вместо стандартного `VGAlert`.
+
+Контракт результата:
+
+- `true` или `{ accepted: true }` — подтвердить.
+- `false` или `{ accepted: false }` — отменить.
+- `{ accepted: true, data }` — подтвердить и использовать готовый ответ удаления (без дополнительного AJAX-запроса).
+
+## Статусы файлов
+
+- `pending` — ожидает загрузки.
+- `loading` — идет загрузка.
+- `completed` — успешно загружен.
+- `failing` — ошибка загрузки (доступен reload).
+
+## Методы API
+
+- `upload(file)`
+- `uploadAll(files)`
+- `reload(button)`
+- `removeFile(button)`
+- `clear(resetInput, uiOnly)`
+- `dispose()`
+