vgapp 1.4.8 → 1.5.0

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

@@ -1,12 +1,16 @@
+/**
+ * Описание: Управляет локальными и smartdrop-событиями файловых dropzone VGFiles.
+ * Возможности: Отличает внешнее добавление файлов от внутренней сортировки, подсвечивает активную зону и передаёт файлы input-элементу.
+ */
 import { isElement } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 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_DROP_LIST = `${CLASS_NAME_DROP}--list`;
+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';
@@ -59,34 +63,24 @@ class VGFilesDroppable extends BaseModule {
     /**
      * Настройка событий перетаскивания
      */
-    _setupEvents() {
-        if (!isElement(this._element)) return;
-
-        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';
-        };
-
-        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();
-            }
-        });
+    _setupEvents() {
+        if (!isElement(this._element)) return;
+
+        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();
             e.stopPropagation();
 
             // ✅ Сортировка: НЕ подсвечиваем dropzone
-            if (isSortableDrag(e)) {
+            if (this._isSortableDrag(e)) {
                 Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
                 VGFilesDroppable._setDropMessageTitleState(this._element, false);
                 e.dataTransfer.dropEffect = 'none';
@@ -103,7 +97,7 @@ class VGFilesDroppable extends BaseModule {
             e.stopPropagation();
 
             // ✅ Сортировка: НЕ подсвечиваем dropzone
-            if (isSortableDrag(e)) {
+            if (this._isSortableDrag(e)) {
                 Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
                 VGFilesDroppable._setDropMessageTitleState(this._element, false);
                 return;
@@ -118,7 +112,7 @@ class VGFilesDroppable extends BaseModule {
             e.stopPropagation();
 
             // ✅ Сортировка: гарантированно без подсветки
-            if (isSortableDrag(e)) {
+            if (this._isSortableDrag(e)) {
                 Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
                 VGFilesDroppable._setDropMessageTitleState(this._element, false);
                 return;
@@ -143,7 +137,7 @@ class VGFilesDroppable extends BaseModule {
             VGFilesDroppable._setDropMessageTitleState(this._element, false);
 
             // ✅ сортировка: не трогаем input
-            if (isSortableDrag(e)) {
+            if (this._isSortableDrag(e)) {
                 return;
             }
 
@@ -238,6 +232,8 @@ class VGFilesDroppable extends BaseModule {
 
     _isFileDrag(e) {
         try {
+            if (this._isSortableDrag(e)) return false;
+
             const dt = e?.dataTransfer;
             if (!dt) return false;
 
@@ -257,6 +253,16 @@ class VGFilesDroppable extends BaseModule {
         }
     }
 
+    _isSortableDrag(e) {
+        if (document.querySelector('.dragging')) return true;
+
+        try {
+            return (e?.dataTransfer?.getData?.('text/plain') || '') === 'vgsortable';
+        } catch (_) {
+            return false;
+        }
+    }
+
     _getVisibleDropZonesInViewport() {
         const dropZones = Array.from(Selectors.findAll(`.${CLASS_NAME_DROP}`) || []);
         return dropZones.filter((el) => this._isVisibleInViewport(el));
@@ -334,9 +340,9 @@ class VGFilesDroppable extends BaseModule {
         return this._files;
     }
 
-    dispose() {
-        EventHandler.off(this._element, `click.${NAME_KEY}`);
-        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/vgfiles.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: основной класс выбора, отображения и AJAX-загрузки файлов VGFiles.
+ * Возможности: управляет списками и dropzone, прогрессом, кастомными действиями, удалением, повторной загрузкой и сортировкой.
+ */
 import VGFilesBase from "./base";
 import FileUploader from "./loader";
 import VGFilesDroppable from "./droppable";
@@ -43,8 +47,11 @@ class VGFiles extends VGFilesBase {
             prepend: true,
             replace: true,
             rename: false,
-            smartdrop: false,
-            uploads: {
+            smartdrop: false,
+            customButtons: {
+                hideOnUploadState: true
+            },
+            uploads: {
                 mode: 'sequential',
                 route: '',
                 maxParallel: 3,
@@ -810,8 +817,7 @@ class VGFiles extends VGFilesBase {
     }
 
     _setButtonElement(file, isAjax = false, status = '') {
-        let icon = getSVG('trash'), action = 'data-vg-dismiss';
-        if (!this._params.info) icon = getSVG('cross');
+        let icon = getSVG('remove'), action = 'data-vg-dismiss';
         if (isAjax) {
             icon = getSVG('spinner');
             if (status === 'completed') icon = getSVG('check');

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

@@ -23,8 +23,18 @@
 	}
 }
 
-@mixin vgfiles-state() {
-	&.pending {
+@mixin vgfiles-state() {
+	&.hide-custom-buttons-on-upload-state {
+		&.pending,
+		&.loading,
+		&.failing {
+			.file-actions {
+				display: none;
+			}
+		}
+	}
+
+	&.pending {
 		> * {
 			opacity: .32;
 			pointer-events: none;

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

@@ -52,9 +52,11 @@ $files-map: (
 	drop-file-flex: calc(25% - 6px),
 
 	drop-remove-offset: 10px,
-	drop-remove-size: 36px,
+	drop-remove-size: 28px,
 	drop-remove-radius: 3px,
 	drop-remove-hover-bg: rgb(var(--vg-body-bg-rgb, 255 255 255) / .4),
+	drop-actions-gap: 4px,
+	drop-control-icon-size: 16px,
 
 	// stat
 	stat-padding: 12px 8px,

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

@@ -48,6 +48,7 @@
 
 			svg {
 				width: 24px;
+				height: 24px;
 
 				path {
 					fill: var(--vg-files-label-color);
@@ -195,7 +196,7 @@
 				.stat-label {
 					svg {
 						path {
-							fill: var(--vg-secondary-bg);
+							fill: var(--vg-text-color);
 						}
 					}
 				}
@@ -261,7 +262,7 @@
 			}
 
 			.file {
-				--vg-button-color: var(--vg-secondary);
+				--vg-button-color: var(--vg-secondary-color, var(--vg-secondary, var(--vg-text-muted-color, #6b7280)));
 				display: flex;
 				align-items: center;
 				gap: var(--vg-files-info-gap);
@@ -434,7 +435,7 @@
 						position: relative;
 
 						&:hover {
-							--vg-button-color: var(--vg-danger);
+							--vg-button-color: var(--vg-danger-color, var(--vg-danger, #ff2a2c));
 						}
 
 						i {
@@ -531,6 +532,7 @@
 	}
 
 	&-drop {
+		display: block;
 		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;
@@ -548,6 +550,14 @@
 			height: auto;
 			min-height: var(--vg-files-drop-height);
 
+			&:has(.vg-files-drop-message.has-files) {
+				cursor: default;
+			}
+
+			.vg-files-drop-message.has-files {
+				cursor: pointer;
+			}
+
 			&:hover {
 				animation: none;
 				background-image: none;
@@ -637,7 +647,7 @@
 			overflow: hidden;
 
 			.file {
-				--vg-button-color: var(--vg-body-color);
+				--vg-button-color: var(--vg-text-color, var(--vg-body-color, #000000));
 				border-radius: var(--vg-files-drop-file-radius);
 				position: relative;
 				overflow: hidden;
@@ -708,7 +718,33 @@
 					top: var(--vg-files-drop-remove-offset);
 					display: flex;
 					flex-direction: column;
-					gap: 8px;
+					align-items: flex-end;
+					gap: var(--vg-files-drop-actions-gap);
+					opacity: .2;
+					transform: var(--vg-transition-base);
+
+					.file-actions {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						gap: var(--vg-files-drop-actions-gap);
+
+						button {
+							width: var(--vg-files-drop-remove-size);
+							height: var(--vg-files-drop-remove-size);
+							min-width: var(--vg-files-drop-remove-size);
+							min-height: var(--vg-files-drop-remove-size);
+							max-width: var(--vg-files-drop-remove-size);
+							max-height: var(--vg-files-drop-remove-size);
+							padding: 0;
+							justify-content: center;
+
+							svg {
+								width: var(--vg-files-drop-control-icon-size);
+								height: var(--vg-files-drop-control-icon-size);
+							}
+						}
+					}
 
 					.file-remove {
 						.file-failing-actions {
@@ -717,7 +753,7 @@
 
 						button {
 							background: var(--vg-body-bg);
-							color: var(--vg-body-color);
+							color: var(--vg-text-color, var(--vg-body-color, #000000));
 							border: none;
 							cursor: pointer;
 							outline: none;
@@ -729,12 +765,12 @@
 							position: relative;
 							width: var(--vg-files-drop-remove-size);
 							height: var(--vg-files-drop-remove-size);
+							min-width: var(--vg-files-drop-remove-size);
+							min-height: var(--vg-files-drop-remove-size);
+							max-width: var(--vg-files-drop-remove-size);
+							max-height: var(--vg-files-drop-remove-size);
 							border-radius: var(--vg-files-drop-remove-radius);
 
-							&:hover {
-								background-color: var(--vg-files-drop-remove-hover-bg);
-							}
-
 							i {
 								position: absolute;
 								left: 0;
@@ -746,6 +782,9 @@
 								justify-content: center;
 
 								svg {
+									width: var(--vg-files-drop-control-icon-size);
+									height: var(--vg-files-drop-control-icon-size);
+
 									path {
 										fill: var(--vg-button-color);
 									}
@@ -754,6 +793,12 @@
 						}
 					}
 				}
+
+				&:hover {
+					.file-custom {
+						opacity: 1;
+					}
+				}
 			}
 		}
 	}

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

@@ -1,4 +1,4 @@
-/**
+/**
  * VGFormSender Module
  *
  * Этот модуль отвечает за отправку форм с поддержкой AJAX, валидации, отображения уведомлений
@@ -702,7 +702,10 @@ class VGFormSender extends BaseModule {
 			$collapse.classList.add(_this._params.classes.alertCollapse);
 			$collapse.classList.add('vg-collapse');
 			$collapse.id = _this._params.classes.general + '-' + makeRandomString();
-			$collapse.append(_this.setDataRelationStatus($collapse, status, data, 'collapse'));
+
+			const $alert = _this.setDataRelationStatus($collapse, status, data, 'collapse');
+			$alert.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status);
+			$collapse.append($alert);
 
 			_this._element.prepend($collapse);
 		}

package/app/modules/vgloadmore/js/vgloadmore.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: подгрузка статического и удалённого контента по кнопке или при прокрутке.
+ * Возможности: Data API, AJAX-пагинация, infinite scroll, события, анимация и автоcкрытие триггера.
+ */
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import { execute, isObject, mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -213,7 +217,7 @@ class VGLoadMore extends BaseModule {
 
 		const buttonData = {
 			limit: this._params.limit,
-			offset: this._params.offset,
+			offset: this._params.offset || this._params.limit,
 			output: this._params.output,
 			autohide: this._params.autohide,
 			animate: this._params.animate,
@@ -278,7 +282,7 @@ class VGLoadMore extends BaseModule {
 
 		this._observer.disconnect();
 
-		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const container = this._getTargetContainer();
 		const items = Selectors.findAll(`.${this._params.elements}`, container);
 		const visibleItems = items.filter(item => item.classList.contains(CLASS_NAME_SHOW));
 		const lastVisible = visibleItems[visibleItems.length - 1];
@@ -331,7 +335,10 @@ class VGLoadMore extends BaseModule {
 
 		const originalText = this._params.button.text;
 
-		this._params.ajax.data = { limit: this._params.limit, offset: this._params.offset };
+		this._params.ajax.data = mergeDeepObject(this._params.ajax.data, {
+			limit: this._params.limit,
+			offset: this._params.offset
+		});
 
 		this._route((status, data, responseTarget) => {
 			if (status === 'error' || typeof data?.response !== 'string') return;
@@ -348,7 +355,7 @@ class VGLoadMore extends BaseModule {
 			this._observeLastVisibleItem();
 
 			const noMoreData = !data.response.trim();
-			if (this._params.autohide && this._params.detach && noMoreData) {
+			if (this._params.autohide && noMoreData) {
 				this._autohideTrigger();
 			}
 
@@ -366,7 +373,7 @@ class VGLoadMore extends BaseModule {
 	 * @private
 	 */
 	staticLoad(callback) {
-		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const container = this._getTargetContainer();
 		const items = Selectors.findAll(`.${this._params.elements}`, container);
 		const start = this._params.offset;
 		const end = start + this._params.limit;
@@ -394,14 +401,32 @@ class VGLoadMore extends BaseModule {
 		this._observeLastVisibleItem();
 
 		const remaining = items.slice(end);
-		if (this._params.autohide && this._params.detach && remaining.length === 0) {
+		if (this._params.autohide && remaining.length === 0) {
 			this._autohideTrigger();
 		}
 
 		this._restoreElementState(this._params.button.text);
+		EventHandler.trigger(this._element, EVENT_KEY_LOADED, {
+			stats: 'success',
+			data: {
+				items: newItems,
+				offset: this._params.offset,
+				remaining: remaining.length
+			}
+		});
 		execute(callback, [this, this._element]);
 	}
 
+	/**
+	 * Возвращает контейнер элементов для container- и trigger-режимов.
+	 * @returns {Element|null}
+	 * @private
+	 */
+	_getTargetContainer() {
+		return Selectors.find(this._params.target)
+			|| (this._isToggleElement ? this._element.parentNode : this._element);
+	}
+
 	/**
 	 * Восстанавливает состояние кнопки (включает, устанавливает текст)
 	 * @param {string} text - Текст кнопки
@@ -425,6 +450,9 @@ class VGLoadMore extends BaseModule {
 			this._observer = null;
 		} else if (this._params.detach && this._element.parentNode) {
 			this._element.remove();
+		} else {
+			this._element.classList.add(CLASS_NAME_HIDE);
+			this._element.setAttribute('aria-hidden', 'true');
 		}
 	}
 
@@ -456,4 +484,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	VGLoadMore.getOrCreateInstance(this).toggle();
 });
 
-export default VGLoadMore;
+export default VGLoadMore;