vgapp 1.4.8 → 1.5.0

package/README.md

@@ -1,4 +1,4 @@
-# VEGAS APP (VGApp)
+# VEGAS APP (VGApp)
 [FUNC.TRUE?!](http://func-true.ru)
 
 VGApp — набор фронтенд‑модулей (UI‑компонентов и утилит) на чистом JavaScript от Vegas Studio.  
@@ -20,7 +20,6 @@ VGApp — набор фронтенд‑модулей (UI‑компонент
 - `VGAlert` — диалоги подтверждения и уведомления с поддержкой AJAX‑сценариев.
 - `VGCollapse` — сворачиваемые секции и аккордеоны с анимацией.
 - `VGDropdown` — выпадающие меню с гибким открытием и позиционированием.
-- `VGDynamicTable` — интерактивные таблицы с сортировкой, фильтрацией, remote-режимом и состоянием.
 - `VGFiles` — загрузка и управление файлами (dropzone, валидация, AJAX, сортировка).
 - `VGFilePreview` — предпросмотр файлов разных типов и действия по файлу (preview/download).
 - `VGFormSender` — отправка форм (AJAX/нативно), обработка состояний и ответов.
@@ -35,6 +34,7 @@ VGApp — набор фронтенд‑модулей (UI‑компонент
 - `VGSidebar` — боковые панели с управлением открытием/закрытием.
 - `VGSpy` — scroll‑spy для подсветки активных ссылок по секциям.
 - `VGTabs` — вкладки с переключением контента и поддержкой URL/hash.
+- `VGTable` — базовый модуль таблиц.
 - `VGToast` — всплывающие уведомления со стеком и автозакрытием.
 - `VGTooltip` — tooltip/popover подсказки с Data API, автопозиционированием и закрытием по `Esc`/клику вне элемента.
 
@@ -268,3 +268,25 @@ CSS-переменные темы генерируются в `app/utils/scss/_t
 
 ## License
 Is published under the [MIT license](http://www.opensource.org/licenses/mit-license)
+
+## Проекты на VGApp
+
+Используете VGApp в публичном сайте, внутреннем сервисе или open-source проекте? Расскажите об этом сообществу — создайте Pull Request или Issue и укажите:
+
+- название проекта;
+- ссылку, если проект публичный;
+- используемые модули VGApp;
+- короткое описание или отзыв;
+- можно ли публиковать название, ссылку и логотип.
+
+Для закрытого проекта ссылку раскрывать не обязательно: его можно указать без названия, например «Внутренняя CRM автосервиса».
+
+```md
+| Проект | Сайт | Модули VGApp | Описание |
+|---|---|---|---|
+| Название проекта | https://example.com | VGModal, VGSelect | Короткое описание проекта |
+```
+
+Список формируется добровольно. VGApp не использует скрытую телеметрию и не собирает адреса сайтов. Статистика скачиваний npm публикуется отдельно и не считается количеством проектов или сайтов.
+
+Спасибо за интерес к VGApp, использование библиотеки в своих проектах, обратную связь и вклад в её развитие. Каждый новый проект помогает делать VGApp полезнее, надёжнее и удобнее для всего сообщества.

package/app/modules/base-module.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: базовый класс модулей VGApp с общими параметрами, жизненным циклом и сетевыми запросами.
+ * Возможности: хранит экземпляры, нормализует Data API, управляет событиями и выполняет AJAX-запросы.
+ */
 import {
 	execute,
 	executeAfterTransition,
@@ -54,7 +58,7 @@ class BaseModule {
 	 * - timeout = задержка перед отправкой, по умолчанию 0
 	 * @param callback
 	 */
-	_route(callback) {
+	_route(callback, errorCallback) {
 		if (typeof callback !== 'function') {
 			return this._requestRoute(callback);
 		}
@@ -121,13 +125,21 @@ class BaseModule {
 				completeAjaxRequest(data, 'success')
 			},
 			onError: (err) => {
+				if ('loader' in this._params.ajax && this._params.ajax.loader) setData('');
+
+				if (typeof errorCallback === 'function') {
+					execute(errorCallback, [err]);
+					return;
+				}
+
 				completeAjaxRequest(err, 'error')
 			}
 		}
 
 		setTimeout(() => {
 			if (this._params.ajax.method.toLowerCase() === 'get') {
-				ajax.get(this._params.ajax.route, ajaxData);
+				const route = this._buildRouteUrl(this._params.ajax.data, this._params.ajax.route);
+				ajax.get(route.toString(), ajaxData);
 			}
 
 			if (this._params.ajax.method.toLowerCase() === 'post') {

package/app/modules/module-fn.js

@@ -1,12 +1,12 @@
+/**
+ * Описание: общие SVG-ресурсы и вспомогательные функции Data API модулей VGApp.
+ * Возможности: выдаёт системные и файловые иконки и подключает обработчики dismiss.
+ */
 import EventHandler from "../utils/js/dom/event";
 import {isDisabled, isEmptyObj} from "../utils/js/functions";
 import Selectors from "../utils/js/dom/selectors";
 import {getSVG as resolveSVGByFile} from "../utils/js/components/file-icon";
 
-/**
- * Тут собраны вспомогательные скрипты для работы модулей
- */
-
 /**
  * Набор svg элементов
  * @param name
@@ -24,6 +24,7 @@ const getSVG = (name) => {
 		warning:             '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.5 5C44.8543 5 52.8665 8.31874 58.7739 14.2261C64.6813 20.1335 68 28.1457 68 36.5C68 44.8543 64.6813 52.8665 58.7739 58.7739C52.8665 64.6813 44.8543 68 36.5 68C28.1457 68 20.1335 64.6813 14.2261 58.7739C8.31874 52.8665 5 44.8543 5 36.5C5 28.1457 8.31874 20.1335 14.2261 14.2261C20.1335 8.31874 28.1457 5 36.5 5ZM36.5 18.5C35.9287 18.4995 35.3635 18.6181 34.8406 18.8484C34.3178 19.0786 33.8487 19.4154 33.4633 19.8372C33.0779 20.259 32.7848 20.7565 32.6025 21.298C32.4203 21.8395 32.353 22.413 32.405 22.982L34.0475 41.009C34.1112 41.6151 34.397 42.1761 34.8499 42.5839C35.3028 42.9917 35.8906 43.2173 36.5 43.2173C37.1094 43.2173 37.6972 42.9917 38.1501 42.5839C38.603 42.1761 38.8888 41.6151 38.9525 41.009L40.5905 22.982C40.6424 22.4134 40.5753 21.8403 40.3933 21.2991C40.2114 20.7579 39.9186 20.2606 39.5337 19.8389C39.1488 19.4171 38.6803 19.0803 38.1579 18.8498C37.6356 18.6192 37.0709 18.5001 36.5 18.5ZM36.5 54.5C37.4548 54.5 38.3705 54.1207 39.0456 53.4456C39.7207 52.7705 40.1 51.8548 40.1 50.9C40.1 49.9452 39.7207 49.0295 39.0456 48.3544C38.3705 47.6793 37.4548 47.3 36.5 47.3C35.5452 47.3 34.6295 47.6793 33.9544 48.3544C33.2793 49.0295 32.9 49.9452 32.9 50.9C32.9 51.8548 33.2793 52.7705 33.9544 53.4456C34.6295 54.1207 35.5452 54.5 36.5 54.5Z" fill="#000000"/></svg>',
 		info:                '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM33.75 20.8125C33.75 20.5031 34.0031 20.25 34.3125 20.25H37.6875C37.9969 20.25 38.25 20.5031 38.25 20.8125V39.9375C38.25 40.2469 37.9969 40.5 37.6875 40.5H34.3125C34.0031 40.5 33.75 40.2469 33.75 39.9375V20.8125ZM36 51.75C35.1168 51.732 34.2759 51.3685 33.6577 50.7375C33.0395 50.1065 32.6932 49.2584 32.6932 48.375C32.6932 47.4916 33.0395 46.6435 33.6577 46.0125C34.2759 45.3815 35.1168 45.018 36 45C36.8832 45.018 37.7241 45.3815 38.3423 46.0125C38.9605 46.6435 39.3068 47.4916 39.3068 48.375C39.3068 49.2584 38.9605 50.1065 38.3423 50.7375C37.7241 51.3685 36.8832 51.732 36 51.75Z" fill="#000000"/></svg>',
 		dots:                '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17C11.1046 17 12 16.1046 12 15C12 13.8954 11.1046 13 10 13C8.89543 13 8 13.8954 8 15C8 16.1046 8.89543 17 10 17Z" fill="black"/><path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" fill="black"/><path d="M10 7C11.1046 7 12 6.10457 12 5C12 3.89543 11.1046 3 10 3C8.89543 3 8 3.89543 8 5C8 6.10457 8.89543 7 10 7Z" fill="black"/></svg>',
+		remove:              '<svg class="vg-icon-remove" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.05 5.636 12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414L12 13.414l-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636Z" fill="currentColor"/></svg>',
 		cross:               '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.3149 0.340332C15.4478 0.20752 15.6027 0.118978 15.7798 0.074707C15.9569 0.0249023 16.134 0.0249023 16.311 0.074707C16.4881 0.118978 16.6431 0.20752 16.7759 0.340332C16.9142 0.473145 17.0055 0.630859 17.0498 0.813477C17.0941 0.99056 17.0941 1.16764 17.0498 1.34473C17.0055 1.52181 16.917 1.67676 16.7842 1.80957L1.80127 16.8008C1.67399 16.9281 1.52181 17.0111 1.34473 17.0498C1.16764 17.0941 0.987793 17.0941 0.805176 17.0498C0.628092 17.0111 0.470378 16.9253 0.332031 16.7925C0.199219 16.6597 0.110677 16.502 0.0664062 16.3193C0.0221354 16.1423 0.0221354 15.9652 0.0664062 15.7881C0.110677 15.611 0.196452 15.4588 0.32373 15.3315L15.3149 0.340332ZM16.7842 15.3232C16.917 15.4561 17.0028 15.6082 17.0415 15.7798C17.0858 15.9569 17.0858 16.134 17.0415 16.311C17.0028 16.4937 16.9142 16.6541 16.7759 16.7925C16.6431 16.9253 16.4881 17.0138 16.311 17.0581C16.134 17.1024 15.9569 17.1024 15.7798 17.0581C15.6027 17.0138 15.4478 16.9253 15.3149 16.7925L0.32373 1.80127C0.201986 1.67952 0.116211 1.53011 0.0664062 1.35303C0.0221354 1.17594 0.0221354 0.996094 0.0664062 0.813477C0.116211 0.630859 0.204753 0.473145 0.332031 0.340332C0.464844 0.20752 0.622559 0.118978 0.805176 0.074707C0.987793 0.0304362 1.16488 0.0304362 1.33643 0.074707C1.51351 0.118978 1.66846 0.204753 1.80127 0.332031L16.7842 15.3232Z" fill="#000"/></svg>',
 		'eye-open':          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>',
 		'eye-hide':          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg>',

package/app/modules/vgalert/js/vgalert.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: компонент подтверждений и информационных сообщений VGAlert.
+ * Возможности: modal, overlay и dropdown-рендер, компактный размер, Data API, AJAX и Promise-сценарии.
+ */
 import BaseModule from "../../base-module";
 import VGModal from "../../vgmodal";
 import VGDropdown from "../../vgdropdown";
@@ -18,6 +22,7 @@ const CLASS_NAME_ALERT = "vg-alert";
 const CLASS_NAME_SHOW = "show";
 const CLASS_NAME_FADE = "fade";
 const CLASS_NAME_CLOSING = "closing";
+const CLASS_NAME_COMPACT = `${CLASS_NAME_ALERT}-compact`;
 const DATA_AGREE = "data-vg-alert-agree";
 const DATA_CANCEL = "data-vg-alert-cancel";
 
@@ -31,6 +36,7 @@ class VGAlert {
 	constructor(params = {}, lang = 'ru') {
 		this.lang = lang;
 		this._defaultParams = {
+			size: "default", // default or compact
 			render: {
 				type: "modal", // modal, overlay or dropdown
 				dismiss: false,
@@ -349,6 +355,7 @@ class VGAlert {
 
 	_setParams(params) {
 		const merged = mergeDeepObject(this._defaultParams, params);
+		merged.size = merged.size === "compact" ? "compact" : "default";
 		merged.buttons = mergeDeepObject(this._elementsDefault.buttons, merged.buttons);
 		merged.message = mergeDeepObject(this._elementsDefault.message, merged.message);
 		merged.icon = this._elementsDefault.icons[merged.theme];
@@ -356,11 +363,20 @@ class VGAlert {
 		return merged;
 	}
 
+	_applySizeClass(element) {
+		if (this._params.size === "compact") {
+			element?.classList.add(CLASS_NAME_COMPACT);
+		}
+
+		return element;
+	}
+
 	_buildModal() {
 		const id = `${CLASS_NAME_ALERT}-${makeRandomString()}`;
 
 		return VGModal.build(id, this._params.modal, (modal) => {
 			modal._element.classList.add(`${CLASS_NAME_ALERT}-modal`);
+			this._applySizeClass(modal._element);
 			const body = Selectors.find(".vg-modal-body", modal._element);
 			body.append(this._buildContent());
 		});
@@ -391,8 +407,10 @@ class VGAlert {
 			this._createButton(buttons, "cancel");
 		}
 
+		const sizeClass = this._params.size === "compact" ? ` ${CLASS_NAME_COMPACT}` : "";
+
 		return html.div(
-			{class: `${CLASS_NAME_ALERT}-wrapper ${CLASS_NAME_ALERT}-${this._params.theme}`},
+			{class: `${CLASS_NAME_ALERT}-wrapper ${CLASS_NAME_ALERT}-${this._params.theme}${sizeClass}`},
 			[
 				html.div(
 					{class: `${CLASS_NAME_ALERT}-content`},
@@ -438,6 +456,7 @@ class VGAlert {
 		const overlay = document.createElement('div');
 
 		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		this._applySizeClass(overlay);
 		overlay.append(this._buildContent());
 
 		container.append(overlay);
@@ -533,6 +552,7 @@ class VGAlert {
 
 		container.id = id;
 		container.className = `vg-dropdown-content ${CLASS_NAME_ALERT}-dropdown`;
+		this._applySizeClass(container);
 		container.setAttribute('tabindex', '-1');
 		container.setAttribute('role', 'dialog');
 		container._vgAlertDropdownParent = parent;

package/app/modules/vgalert/scss/vgalert.scss

@@ -154,3 +154,51 @@
 	}
 }
 
+.vg-alert-modal.vg-alert-compact {
+	--vg-modal-width: 420px !important;
+}
+
+.vg-alert-overlay.vg-alert-compact {
+	.vg-alert-wrapper {
+		width: min(420px, calc(100% - 2rem));
+	}
+}
+
+.vg-alert-dropdown.vg-alert-compact {
+	width: 280px;
+}
+
+.vg-alert-wrapper.vg-alert-compact {
+	.vg-alert-content {
+		padding: .75rem;
+		gap: .75rem;
+
+		.vg-alert-content--title {
+			font-size: 1rem;
+			line-height: 1.25;
+		}
+
+		.vg-alert-content--description {
+			font-size: .8125rem;
+			line-height: 1.35;
+		}
+
+		.vg-alert-content--icon {
+			svg {
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+
+	.vg-alert-buttons {
+		padding: .5rem .75rem;
+
+		.btn {
+			padding: .375rem .75rem;
+			font-size: .8125rem;
+			line-height: 1.25;
+		}
+	}
+}
+

package/app/modules/vgdropdown/js/vgdropdown.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: выпадающее меню VGDropdown с управлением мышью и клавиатурой.
+ * Возможности: автоматическое размещение, hover/click режимы, outside-click, анимация и AJAX-контент.
+ */
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -45,6 +49,8 @@ const EVENT_CLICK_DATA_API     = `click.${NAME_KEY}.data.api`;
 const EVENT_MOUSEOVER_DATA_API = `mouseover.${NAME_KEY}.data.api`;
 const EVENT_MOUSEOUT_DATA_API  = `mouseout.${NAME_KEY}.data.api`;
 
+let isDocumentDataApiInitialized = false;
+
 /**
  * Компонент выпадающего списка (Dropdown).
  *
@@ -179,6 +185,7 @@ class VGDropdown extends BaseModule {
 		this._setPlacement();
 
 		const completeCallback = () => {
+			if (!this._element || !this._drop || !this._params) return;
 			this._route((status, data) => {
 				EventHandler.trigger(this._element, EVENT_KEY_LOADED, { stats: status, data });
 			});
@@ -210,6 +217,13 @@ class VGDropdown extends BaseModule {
 	 * @return {void}
 	 */
 	dispose() {
+		if (this._element) {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+			this._element.setAttribute('aria-expanded', 'false');
+		}
+		if (this._drop) {
+			this._drop.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_FADE, CLASS_NAME_OPEN);
+		}
 		super.dispose();
 	}
 
@@ -247,7 +261,9 @@ class VGDropdown extends BaseModule {
 		}
 
 		setTimeout(() => {
+			if (!this._element || !this._drop || !this._params) return;
 			const completeCallback = () => {
+				if (!this._element || !this._drop) return;
 				this._drop.classList.remove(CLASS_NAME_SHOW);
 				EventHandler.trigger(this._drop, EVENT_KEY_HIDDEN, relatedTarget);
 			};
@@ -262,30 +278,28 @@ class VGDropdown extends BaseModule {
 	_setPlacement() {
 		if (!this._drop) return;
 
-		if (!this._isPlacement) {
-			let placementDefault = 'bottom-start',
-				autoFlip = false,
-				overflowProtection = false;
+		let placementDefault = 'bottom-start',
+			autoFlip = false,
+			overflowProtection = false;
 
-			if (this._params.placement === 'auto') {
-				autoFlip = true;
-				overflowProtection = true;
-			} else {
-				placementDefault = this._params.placement
-			}
+		if (this._params.placement === 'auto') {
+			autoFlip = true;
+			overflowProtection = true;
+		} else {
+			placementDefault = this._params.placement
+		}
 
-			const placement = new Placement({
-				reference: this._element,
-				drop: this._drop,
-				placement: placementDefault,
-				boundary: 'clippingParents',
-				autoFlip: autoFlip,
-				overflowProtection: overflowProtection,
-				fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
-			});
+		const placement = new Placement({
+			reference: this._element,
+			drop: this._drop,
+			placement: placementDefault,
+			boundary: 'clippingParents',
+			autoFlip: autoFlip,
+			overflowProtection: overflowProtection,
+			fallbackPlacements: ['bottom-end', 'top-start', 'top-end', 'right-start', 'left-start', 'right-end', 'left-end'],
+		});
 
-			placement._setPlacement(); // позиционируем
-		}
+		placement._setPlacement(); // позиционируем при каждом открытии
 
 		this._isPlacement = true;
 	}
@@ -298,6 +312,9 @@ class VGDropdown extends BaseModule {
 	 */
 	static init(element, params = {}) {
 		const instance = VGDropdown.getOrCreateInstance(element, params);
+		if (instance._isDataApiInitialized) return instance;
+
+		instance._isDataApiInitialized = true;
 
 		if (instance._params.hover && !isMobileDevice()) {
 			let currentElem = null;
@@ -329,11 +346,14 @@ class VGDropdown extends BaseModule {
 			});
 		}
 
-		// Клавиатурные события
-		EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_DATA_TOGGLE, VGDropdown.keydownHandler);
-		EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `.${TARGET_CONTAINER}`, VGDropdown.keydownHandler);
-		EventHandler.on(document, EVENT_KEYUP_DATA_API, VGDropdown.clearDrops);
-		EventHandler.on(document, EVENT_CLICK_DATA_API, VGDropdown.clearDrops);
+		if (!isDocumentDataApiInitialized) {
+			// Клавиатура и outside-click подключаются один раз для всех экземпляров.
+			EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_DATA_TOGGLE, VGDropdown.keydownHandler);
+			EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `.${TARGET_CONTAINER}`, VGDropdown.keydownHandler);
+			EventHandler.on(document, EVENT_KEYUP_DATA_API, VGDropdown.clearDrops);
+			EventHandler.on(document, EVENT_CLICK_DATA_API, VGDropdown.clearDrops);
+			isDocumentDataApiInitialized = true;
+		}
 
 		// Клик по тоглу
 		EventHandler.on(element, EVENT_CLICK_DATA_API, (event) => {
@@ -344,6 +364,17 @@ class VGDropdown extends BaseModule {
 		return instance;
 	}
 
+	/**
+	 * Инициализирует все Dropdown-триггеры в документе.
+	 * Повторный вызов безопасен и возвращает уже созданные экземпляры.
+	 * @param {Object} [params] - Общие параметры для найденных элементов.
+	 * @return {VGDropdown[]} Экземпляры найденных Dropdown.
+	 */
+	static initAll(params = {}) {
+		return Selectors.findAll(SELECTOR_DATA_TOGGLE)
+			.map(element => VGDropdown.init(element, params));
+	}
+
 	/**
 	 * Скрывает все открытые выпадающие списки.
 	 * @param {Event} event - Событие, инициировавшее скрытие.
@@ -419,4 +450,4 @@ class VGDropdown extends BaseModule {
 	}
 }
 
-export default VGDropdown;
+export default VGDropdown;

package/app/modules/vgfilepreview/js/renderers/video-modal.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: модальное окно видеопредпросмотра VGFilePreview.
+ * Возможности: воспроизводит видео и переключает соседние записи плейлиста кнопками и горячими клавишами.
+ */
 import VGModal from "../../../vgmodal";
 
 class VideoModal {
@@ -139,7 +143,7 @@ class VideoModal {
 			this._video.addEventListener('ended', () => this._goNext(true));
 
 			header.appendChild(this._title);
-			//header.appendChild(navigation);
+			header.appendChild(navigation);
 			body.appendChild(this._video);
 
 			this._bindEvents(element);

package/app/modules/vgfilepreview/js/renderers/video.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: рендерер видеофайлов для VGFilePreview.
+ * Возможности: создаёт действие предпросмотра и собирает актуальный плейлист соседних видео при открытии.
+ */
 import VideoModal from "./video-modal";
 import { buildMediaPlaylist } from "./playlist";
 
@@ -31,7 +35,6 @@ class VideoFilePreviewRenderer {
 			return false;
 		}
 
-		const playlist = buildMediaPlaylist(context?.element, (ext) => VIDEO_EXTENSIONS.has(ext));
 		const labels = {
 			prev: i18n?.button('prev') || '',
 			next: i18n?.button('next') || ''
@@ -42,6 +45,8 @@ class VideoFilePreviewRenderer {
 				event.preventDefault();
 			}
 
+			const playlist = buildMediaPlaylist(context?.element, (ext) => VIDEO_EXTENSIONS.has(ext));
+
 			this._modal.open({
 				src,
 				title: context?.fileMeta?.name || i18n?.message('video_title') || '',

package/app/modules/vgfilepreview/js/vgfilepreview.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: основной контроллер предпросмотра файлов и синхронизации полей карточки.
+ * Возможности: валидирует путь, выбирает рендерер, управляет медиа, скачиванием, состояниями и публичным API.
+ */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
 import FilePreviewHelper from "../../../utils/js/components/file-preview";
@@ -761,7 +765,7 @@ class VGFilePreview extends BaseModule {
 		}
 
 		if (this._isImageFile()) {
-			return false;
+			return this._isPreviewGroupEnabled('image');
 		}
 
 		if (this._isOfficeFile()) {

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

@@ -1,3 +1,7 @@
+/**
+ * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
+ * Возможности: управляет набором файлов, ошибками, списками, кастомными действиями, статистикой и скрытыми полями формы.
+ */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
 import Html from "../../../utils/js/components/templater";
@@ -140,14 +144,14 @@ class VGFilesBase extends BaseModule {
 			Boolean(this._params?.replace) &&
 			isSingle;
 
-		if (shouldReplaceOnSingle) {
-			this.clear(false);
-			this.append(filesArray, true);
-			this._revokeUrls();
-			this._cleanupFakeInputs();
-			if (this._params.prepend) this._files.reverse();
-
-			this.build();
+		if (shouldReplaceOnSingle) {
+			this.clear(false);
+			this.append(filesArray, true);
+			this._revokeUrls();
+			this._cleanupFakeInputs();
+			if (this._params.prepend) this._files.reverse();
+
+			this.build();
 			return;
 		}
 
@@ -418,7 +422,7 @@ class VGFilesBase extends BaseModule {
 		};
 	}
 
-	_renderUIDropList(files) {
+	_renderUIDropList(files) {
 		if (!this._nodes.drop) return;
 
 		let $list = Selectors.find(`.${this._getClass('drop-list')}`, this._nodes.drop);
@@ -431,9 +435,10 @@ class VGFilesBase extends BaseModule {
 		const fragment = document.createDocumentFragment();
 
 		files.forEach((file) => {
-			let classes = $itemsTemplateClasses;
+			let classes = [...$itemsTemplateClasses];
 
-			if (this._params.detach) classes.push('with-remove')
+			if (this._params.detach) classes.push('with-remove')
+			if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 			if (this._params.sortable.enabled) classes.push('with-sortable')
 			if (this._params.limits.count === 1) {
 				classes.push('single');
@@ -547,7 +552,11 @@ class VGFilesBase extends BaseModule {
 
 		this._initFilePreviewInInfo($list);
 
-		Classes.add(this._nodes.info, 'show')
+		if (files.length) {
+			Classes.add(this._nodes.info, 'show');
+		} else {
+			Classes.remove(this._nodes.info, 'show');
+		}
 	}
 
 	_getInfoItemSignature(file, index) {
@@ -598,12 +607,13 @@ class VGFilesBase extends BaseModule {
 		return '';
 	}
 
-	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
+	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
 		let classes = [...itemTemplateClasses];
 
 		if (this._params.image) classes.push('with-image');
 		if (this._params.info) classes.push('with-info');
-		if (this._params.detach) classes.push('with-remove')
+		if (this._params.detach) classes.push('with-remove')
+		if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 		if (this._params.sortable.enabled) classes.push('with-sortable');
 		const previewPath = this._resolveFilePreviewPath(file);
 		const displayName = this._resolveDisplayName(file);
@@ -898,7 +908,11 @@ class VGFilesBase extends BaseModule {
 			$count.innerHTML = this._files.length ? `${this._files.length}<span>[${totalSize}]</span>` : '';
 		}
 
-		Classes.add(this._nodes.stat, 'show');
+		if (this._files.length) {
+			Classes.add(this._nodes.stat, 'show');
+		} else {
+			Classes.remove(this._nodes.stat, 'show');
+		}
 	}
 
 	_generateHiddenInputs(files) {