vgapp 1.4.4 → 1.4.6

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()`
+

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

@@ -35,8 +35,8 @@
 		}
 	}
 
-	&.loading {
-		--vg-button-color: var(--vg-text-color, var(--vg-body-color));
+	&.loading {
+		--vg-button-color: var(--vg-text-color, var(--vg-body-color));
 
 		> *:not(.file-remove) {
 			opacity: .52;
@@ -55,12 +55,12 @@
 		}
 	}
 
-	&.completed {
-		--vg-button-color: var(--vg-success-color, var(--vg-success));
-	}
-
-	&.failing {
-		--vg-button-color: var(--vg-danger-color, var(--vg-danger));
+	&.completed {
+		--vg-button-color: var(--vg-success-color, var(--vg-success));
+	}
+
+	&.failing {
+		--vg-button-color: var(--vg-danger-color, var(--vg-danger));
 
 		> * {
 			opacity: .62;
@@ -70,4 +70,4 @@
 			opacity: 1;
 		}
 	}
-}
+}

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

@@ -1,10 +1,10 @@
-@use "../../../utils/scss" as vg;
-
-$files-map: (
-	// label (уже используется в vgfiles.scss)
-	label-bg: var(--vg-surface-inverse-bg, #242424),
-	label-color: var(--vg-text-inverse-color, #ffffff),
-	label-border-color: var(--vg-border-strong-color, #343434),
+@use "../../../utils/scss" as vg;
+
+$files-map: (
+	// label (уже используется в vgfiles.scss)
+	label-bg: var(--vg-surface-inverse-bg, #242424),
+	label-color: var(--vg-text-inverse-color, #ffffff),
+	label-border-color: var(--vg-border-strong-color, #343434),
 	label-border-radius: 4px,
 	label-padding: 8px 24px,
 	label-padding-icon: 8px 16px,
@@ -14,21 +14,21 @@ $files-map: (
 	errors-font-size: 16px,
 
 	// drop zone
-	drop-bg: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
+	drop-bg: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	drop-border-width: 2px,
 	drop-border-style: dashed,
-	drop-border-color: var(--vg-secondary-color, var(--vg-secondary, #{vg.$color-muted})),
+	drop-border-color: var(--vg-secondary-color, var(--vg-secondary, #{vg.$color-muted})),
 	drop-radius: 8px,
 	drop-height: 250px,
 	drop-transition: all 0.2s ease,
 
 	drop-after-font-size: 14px,
-	drop-after-color: var(--vg-primary-color, #007bff),
+	drop-after-color: var(--vg-primary-color, #007bff),
 	drop-after-bottom: 10px,
 
-	drop-hover-border-color: var(--vg-primary-color, #007bff),
-	drop-hover-bg: var(--vg-primary-subtle-bg, #e3f2fd),
-	drop-hover-shadow: 0 0 10px var(--vg-primary-outline-color, rgba(0, 123, 255, .2)),
+	drop-hover-border-color: var(--vg-primary-color, #007bff),
+	drop-hover-bg: var(--vg-primary-subtle-bg, #e3f2fd),
+	drop-hover-shadow: 0 0 10px var(--vg-primary-outline-color, rgba(0, 123, 255, .2)),
 
 	drop-stripes-alpha: 0.03,
 	drop-stripes-size: 30px 30px,
@@ -38,9 +38,9 @@ $files-map: (
 	drop-message-gap: 8px,
 	drop-message-font-size: 14px,
 	drop-message-line-height: 22px,
-	drop-message-color: var(--vg-text-muted-color, #999999),
+	drop-message-color: var(--vg-text-muted-color, #999999),
 	drop-message-icon-size: 48px,
-	drop-message-icon-color: var(--vg-text-muted-color, #999999),
+	drop-message-icon-color: var(--vg-text-muted-color, #999999),
 	drop-message-padding: 1rem,
 	drop-message-margin: 0 0 1rem,
 
@@ -54,13 +54,13 @@ $files-map: (
 	drop-remove-offset: 10px,
 	drop-remove-size: 36px,
 	drop-remove-radius: 3px,
-	drop-remove-hover-bg: rgb(var(--vg-body-bg-rgb, 255 255 255) / .4),
+	drop-remove-hover-bg: rgb(var(--vg-body-bg-rgb, 255 255 255) / .4),
 
 	// stat
 	stat-padding: 12px 8px,
 	stat-gap: 1rem,
 	stat-mb: 1rem,
-	stat-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
+	stat-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	stat-title-fw: 600,
 	stat-count-font-size: 14px,
 	stat-count-ms: 6px,
@@ -68,50 +68,50 @@ $files-map: (
 
 	// info
 	info-mt: 1rem,
-	info-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
+	info-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	info-radius: 4px,
 	info-list-max-height: 360px,
 
-	info-gap: 8px,
-	info-padding: 8px,
-	info-border-bottom-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
-	info-hover-bg: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .4),
-	info-audio-progress-track: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .3),
-	info-audio-progress-fill: var(--vg-text-color, #{vg.$color}),
-	info-audio-progress-opacity: .33,
-	info-audio-row-min-height: 64px,
-	info-audio-image-size: 48px,
-
-	info-image-radius: 4px,
+	info-gap: 8px,
+	info-padding: 8px,
+	info-border-bottom-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
+	info-hover-bg: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .4),
+	info-audio-progress-track: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .3),
+	info-audio-progress-fill: var(--vg-text-color, #{vg.$color}),
+	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-failing-actions-gap: 6px,
-	info-failing-actions-margin-start: 8px,
-	drop-failing-actions-gap: 6px,
+	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,
-	info-title-color: var(--vg-success-text-color, darkgreen),
+	info-title-color: var(--vg-success-text-color, darkgreen),
 	info-count-fw: 400,
 	info-count-fs: 14px,
-	info-count-color: var(--vg-text-muted-color, #999999),
+	info-count-color: var(--vg-text-muted-color, #999999),
 	info-dismiss-fs: 14px,
 	info-dismiss-ms: 10px,
 	info-image-width: 100px,
 	info-image-me: 15px,
 	info-image-mb: 15px,
 	info-image-padding: 5px,
-	info-image-border: vg.$border-width vg.$border-style var(--vg-control-border-color, #e0e0e0),
+	info-image-border: vg.$border-width vg.$border-style var(--vg-control-border-color, #e0e0e0),
 	info-list-fs: 15px,
 	info-list-mt: 7px,
 	info-list-span-fs: 12px,
-	info-list-span-color: var(--vg-text-muted-color, #999999),
+	info-list-span-color: var(--vg-text-muted-color, #999999),
 	info-list-span-me: 6px,
 	info-list-button-fs: 12px,
-	info-list-button-color: var(--vg-text-muted-color, #999999),
-) !default;
+	info-list-button-color: var(--vg-text-muted-color, #999999),
+) !default;