vgapp 1.1.1 → 1.1.3

package/app/modules/vgfiles/readme.md

@@ -1,224 +1,123 @@
-# VGFiles — Модуль загрузки и управления файлами
-
-`VGFiles` — это расширяемый и гибкий JavaScript-модуль для управления файлами на веб-странице, поддерживающий как локальную работу с файлами, так и асинхронную загрузку через AJAX. Модуль интегрируется с DOM-элементами, предоставляет визуальный интерфейс, поддерживает драг-н-дроп, валидацию, сортировку, отслеживание статусов и обработку событий.
-
----
-
-## 🔧 Возможности
-
-### ✅ Основные функции
-- **Добавление файлов** через `<input type="file">` или **drag & drop**.
-- **Просмотр списков файлов** с превью (если тип — изображение).
-- **Удаление отдельных файлов** и **очистка всего списка**.
-- **Интеграция с сервером** через AJAX-запросы (загрузка, удаление, сортировка).
-- **Автоматическая валидация** по типу, количеству, размеру файлов.
-- **Многоязычная поддержка** (настраиваемые кнопки и сообщения).
-
----
-
-## 📦 Установка и инициализация
-
-Модуль автоматически инициализируется на элементах с классом `.vg-files` при загрузке DOM:
-
-Или вручную:
-
-```js
-const files = new VGFiles(document.querySelector('.vg-files'), { 
-    ajax: true,
-    uploads: {
-        route: '/api/upload', 
-        mode: 'sequential'
-    }, 
-    limits: { 
-        count: 10, 
-        sizes: 5, // MB 
-        total: 50 
-    } 
-});
-```
-
----
-
-## ⚙️ Параметры конфигурации
-
-| Параметр | Тип | По умолчанию | Описание |
-|--------|------|-------------|---------|
-| `init` | `boolean` | `true` | Автоматическая инициализация |
-| `allowed` | `boolean` | `false` | Разрешить дроп файлов |
-| `lang` | `string` | `'ru'` | Язык интерфейса (поддерживается через `lang_buttons`, `lang_messages`) |
-| `limits.count` | `number` | `0` | Макс. количество файлов (0 — без ограничений) |
-| `limits.sizes` | `number` | `10` | Макс. размер одного файла (в МБ) |
-| `limits.total` | `number` | `0` | Общий лимит размера (в МБ, 0 — без ограничений) |
-| `image` | `boolean` | `false` | Отображать превью изображений |
-| `detach` | `boolean` | `true` | Откреплять файлы после загрузки |
-| `info` | `boolean` | `true` | Показывать кнопку удаления |
-| `types` | `array` | `[]` | Разрешённые MIME-типы (например, `['image/png', 'application/pdf']`) |
-| `ajax` | `boolean` | `false` | Использовать AJAX-загрузку |
-| `prepend` | `boolean` | `true` | Добавлять новые файлы в начало списка |
-| `uploads.route` | `string` | `''` | URL для загрузки файлов |
-| `uploads.mode` | `'sequential' \| 'parallel'` | `'sequential'` | Режим отправки файлов |
-| `uploads.maxParallel` | `number` | `3` | Макс. файлов при параллельной загрузке |
-| `uploads.maxConcurrent` | `number` | `1` | Макс. одновременных запросов |
-| `uploads.retryAttempts` | `number` | `1` | Кол-во попыток повтора при ошибке |
-| `uploads.retryDelay` | `number` | `1000` | Задержка между попытками (мс) |
-| `removes.single.route` | `string` | `''` | URL для удаления одного файла |
-| `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` | Колбэки на события (см. ниже) |
-
----
-
-## 📢 События и колбэки
-
-Модуль поддерживает как DOM-события, так и JS-колбэки:
-
-### DOM-события
-- `vg.files.change` — изменение списка файлов
-- `vg.files.upload.allComplete` — все файлы загружены
-- `vg.files.remove` — файл удалён
-
-### Колбэки (`callbacks`)
-| Колбэк | Параметры | Описание |
-|-------|----------|--------|
-| `onInit` | `(data)` | Инициализация завершена |
-| `onChange` | `{ files, input, inputFiles }` | Изменён список файлов (`inputFiles` — снимок исходных `input.files`) |
-| `onUploadStart` | `{ files, total }` | Началась загрузка |
-| `onUploadProgress` | `{ file, progress, bytesSent, totalBytes }` | Прогресс загрузки |
-| `onUploadComplete` | `{ file, response, status, id }` | Файл успешно загружен |
-| `onUploadError` | `{ file }` | Ошибка загрузки |
-| `onUploadAllComplete` | `{ uploaded, failed, total }` | Все файлы загружены |
-| `onRemoveFile` | `{ button, name, size, id, remaining }` | Удалён файл |
-| `onClear` | `{}` | Очищен весь список |
-| `onReload` | `{ button, file }` | Повторная попытка загрузки |
-
----
-
-## 📊 Статусы файлов
-
-Модуль отслеживает статусы в реальном времени:
-- **`pending`** — ожидает загрузки
-- **`loading`** — идёт загрузка
-- **`completed`** — успешно загружен
-- **`failing`** — ошибка загрузки
-
----
-
-## 🔁 Внешние (уже загруженные) файлы
-
-Модуль может отображать уже загруженные файлы, переданные через `data-file`:
--- TODO описать полностью
-
-## 🧹 Очистка и удаление
-
-- **Удаление одного файла**: кнопка с `data-vg-dismiss="file"` → вызов `removeFile()`.
-- **Очистка всех**: кнопка с `data-vg-dismiss="vg-files"` → `clear()`.
-
-Поддержка подтверждения через `VGAlert` и уведомлений через `VGToast`.
-
-### Кастомный confirm для удаления
-
-Если задан `removes.single.confirm` или `removes.all.confirm`, модуль вызовет вашу функцию вместо дефолтного `VGAlert`.
+# 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
-new VGFiles(document.querySelector('.vg-files'), {
+const files = 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 };
-      }
-    }
+  smartdrop: true,
+  rename: true,
+  replace: true,
+  uploads: {
+    route: '/api/upload',
+    mode: 'sequential'
+  },
+  limits: {
+    count: 10,
+    sizes: 5,
+    total: 50
   }
 });
 ```
 
-Контракт функции confirm:
-- Вход: объект `{ type, trigger, lang, ajax, buttons, message }`.
-- Выход:
-`true` или `{ accepted: true }` — подтвердить;
-`false` или `{ accepted: false }` — отменить;
-`{ accepted: true, data }` — подтвердить и передать готовый ответ удаления (если запрос уже выполнен внутри confirm).
-
----
-
-## 🧩 Расширяемость
-
-- **FileUploader** — управляет загрузкой с поддержкой retry.
-- **VGFilesTemplateRender** — рендеринг шаблонов.
-- **Sortable (сортировка)** — подключается при необходимости.
-- Поддержка кастомных иконок через `getSVG()`.
-
----
-
-## 🧰 API Методы
-
-| Метод | Описание |
-|------|--------|
-| `upload(file)` | Загрузить один файл |
-| `uploadAll(files)` | Загрузить все неотправленные файлы |
-| `reload(button)` | Повторить загрузку файла |
-| `removeFile(button)` | Удалить файл |
-| `clear(full, uiOnly)` | Очистить список |
-| `dispose()` | Полная деинициализация |
-| `_triggerCallback(name, data)` | Вызов колбэка |
-| `_route(params, cb)` | Выполнить AJAX-запрос |
-
----
-
-## 🌐 AJAX-интеграция
-
-Поддерживает:
-- Загрузку `POST /upload`
-- Удаление `DELETE /files/{id}` или `POST /clear` с `ids[]`
-- Сортировку `POST /sort` с массивом `ids`
-
----
-
-## 🛑 Ограничения и валидация
-
-- Проверка по размеру (одиночному и общему).
-- Проверка по количеству файлов.
-- Проверка MIME-типов.
-- Отображение ошибок через `VGAlert` или консоль.
-
----
-
-## 🧾 Поддержка браузеров
-
-- Современные браузеры (Chrome, Firefox, Safari, Edge)
-- Требуется поддержка: `File`, `FormData`, `ES6+`, `CustomEvent`
-
----
-
-## 📚 Зависимости
-
-- `VGFilesBase`, `VGFilesDroppable`, `VGFilesTemplateRender`, `FileUploader`
-- `VGAlert`, `VGToast` — модули уведомлений
-- `EventHandler`, `Selectors`, `Manipulator`, `Classes` — утилиты DOM
-- `getSVG`, `lang_buttons`, `lang_messages` — компоненты интерфейса
-
----
-
-✅ **Гибкий | Расширяемый | Локализуемый | Готов к production**
-
----
-
-## 📝 Лицензия
-
-MIT. Свободно использовать и модифицировать.
-
----
-
-📌 *Разработано в рамках фронтенд-системы VG Modules.*
-> 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+## Ключевые параметры
+
+- `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()`
+

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

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

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

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

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

@@ -276,8 +276,13 @@ class VGFormSender extends BaseModule {
 	request(event, data = null) {
 		const _this = this;
 		const mergeFormData = (target, source) => {
+			const replacedKeys = new Set();
 			source.forEach((value, key) => {
-				target.set(key, value);
+				if (!replacedKeys.has(key)) {
+					target.delete(key);
+					replacedKeys.add(key);
+				}
+				target.append(key, value);
 			});
 			return target;
 		}
@@ -777,4 +782,4 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 	}
 })
 
-export default VGFormSender;
+export default VGFormSender;