vgapp 0.9.4 → 0.9.6

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

@@ -31,6 +31,8 @@ class VGFilesBase extends BaseModule {
 		};
 
 		this.template = '<li data-file="" class="file"><div class="file-image"></div><div class="file-info"></div><div class="file-remove"></div></li>';
+		this._onNativeInputChange = (e) => this.change(e?.target);
+
 		this._init();
 	}
 
@@ -51,7 +53,15 @@ class VGFilesBase extends BaseModule {
 	_init() {
 		if (!this._isInitialized) return;
 
-		this._preventOriginalInputFromSubmit();
+		const isSingle = Number(this._params?.limits?.count) === 1;
+
+		if (isSingle) {
+			this._preventOriginalInputFromSubmit(true);
+			this._cleanupFakeInputs();
+		} else {
+			this._preventOriginalInputFromSubmit();
+		}
+
 		this._addEventListener();
 	}
 
@@ -61,13 +71,19 @@ class VGFilesBase extends BaseModule {
 
 		const filesArray = Array.from(incomingFiles);
 
+		const isSingle = Number(this._params?.limits?.count) === 1;
 		const shouldReplaceOnSingle =
 			Boolean(this._params?.replace) &&
-			Number(this._params?.limits?.count) === 1;
+			isSingle;
 
 		if (shouldReplaceOnSingle) {
-			this.clear();
-			this.append(filesArray, true);
+			this._revokeUrls();
+			this._cleanupFakeInputs();
+			this._cleanupErrors();
+
+			this._files = this._filterFiles(filesArray);
+			if (this._params.prepend) this._files.reverse();
+
 			this.build();
 			return;
 		}
@@ -94,7 +110,13 @@ class VGFilesBase extends BaseModule {
 			this._renderUI(this._files);
 		} else {
 			this._renderUI(this._files);
-			this._generateHiddenInputs(this._files);
+
+			const isSingle = Number(this._params?.limits?.count) === 1;
+			if (!isSingle) {
+				this._generateHiddenInputs(this._files);
+			} else {
+				this._cleanupFakeInputs();
+			}
 		}
 	}
 
@@ -426,21 +448,18 @@ class VGFilesBase extends BaseModule {
 	_generateHiddenInputs(files) {
 		this._cleanupFakeInputs();
 		const fragment = document.createDocumentFragment();
-		const idInput = this._element.querySelector('label').getAttribute('for') || '';
-		const name = this._element.querySelector('#' + idInput)?.name || this._element.querySelector('#' + idInput)?.dataset.originalName || 'files[]';
+		const idInput =  Manipulator.get(Selectors.find('label', this._element), 'for') || '';
+		const name = Selectors.findID(idInput, this._element)?.name || Selectors.findID(idInput, this._element)?.dataset.originalName || 'files[]';
 
-		// если name уже "files[]" — убираем скобки, чтобы дальше корректно собрать имя
 		const baseName = name.endsWith('[]') ? name.slice(0, -2) : name;
 		const isSingle = Number(this._params?.limits?.count) === 1;
 
+		if (isSingle) return;
+
 		files.forEach((file, index) => {
 			const input = document.createElement('input');
 			input.type = 'file';
-
-			// count=1 => name без массива (без [] и без [0])
-			// иначе => name как массив: baseName[index]
-			input.name = isSingle ? baseName : `${baseName}[${index}]`;
-
+			input.name = `${baseName}[${index}]`;
 			input.dataset.vgFiles = 'generated';
 			Manipulator.hide(input);
 
@@ -506,7 +525,8 @@ class VGFilesBase extends BaseModule {
 
 	_addEventListener() {
 		Selectors.findAll('[data-vg-toggle="files"]', this._element).forEach(el => {
-			el.addEventListener('change', () => this.change(el));
+			el.removeEventListener('change', this._onNativeInputChange);
+			el.addEventListener('change', this._onNativeInputChange);
 		});
 	}
 

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

@@ -182,12 +182,18 @@ class VGFiles extends VGFilesBase {
 
     _addEventListenerExtended() {
         Selectors.findAll(SELECTOR_DATA_TOGGLE, this._element).forEach(el => {
-            el.removeEventListener('change', this.change.bind(this));
-            el.addEventListener('change', e => this._handleChange(e));
+            if (this._onNativeInputChange) {
+                el.removeEventListener('change', this._onNativeInputChange);
+            }
+
+            el.addEventListener('change', (e) => this._handleChange(e));
         });
     }
 
     _handleChange(e) {
+        const input = e?.target;
+        this.change(input);
+
         if (this._params.ajax) this.uploadAll(this._files);
 
         const payload = { files: this._files, input: e?.target || e?.src || '' };

package/app/utils/js/components/scrollbar.js

@@ -26,7 +26,12 @@ const PROPERTY_MARGIN = 'margin-right';
  */
 class ScrollBarHelper {
 	constructor() {
-		this._element = document.body;
+		// Не кэшируем body: при Turbo/partial navigation DOM может меняться.
+		// Актуальный body берём через геттер.
+	}
+
+	get _element() {
+		return document.body;
 	}
 
 	/**
@@ -50,7 +55,7 @@ class ScrollBarHelper {
 	 * Скрывает скроллбар и корректирует макет
 	 */
 	hide() {
-		if (this.isOverflowing && !isMobileDevice()) {
+		if (this.isOverflowing() && !isMobileDevice()) {
 			const width = this.getWidth();
 			this._disableOverflow();
 
@@ -137,13 +142,15 @@ class ScrollBarHelper {
 	 * @private
 	 */
 	_saveInitialStyle(element, property) {
+		// Сохраняем только один раз, чтобы "оригинал" не перетирался
+		// при повторных открытиях/закрытиях.
+		if (Manipulator.get(element, property) !== null) return;
+
 		const value = element.style.getPropertyValue(property);
 
-		// Важно: сохраняем даже пустую строку (если inline-стиля не было)
+		// Важно: сохраняем даже пустую строку (если inline-стиля не было),
 		// чтобы reset() мог корректно восстановить "как было".
-		if (value !== null) {
-			//Manipulator.set(element, property, value);
-		}
+		Manipulator.set(element, property, value);
 	}
 
 	/**

package/app/utils/js/dom/selectors.js

@@ -69,10 +69,33 @@ const Selectors = {
 	 * @param {Element} [container=document]
 	 * @returns {Element|null}
 	 */
+	/**
+	 * Находит элемент по ID с экранированием
+	 * @param {string} id
+	 * @param {Document|Element} [container=document]
+	 * @returns {Element|null}
+	 */
 	findID(id, container = document) {
 		try {
+			if (typeof id !== 'string' || id.trim() === '') return null;
+
+			const doc = container && container.nodeType === 9
+				? container
+				: (container?.ownerDocument || document);
+
+			const byId = doc.getElementById(id);
+			if (byId) {
+				if (container && container.nodeType !== 9) {
+					return container.contains(byId) ? byId : null;
+				}
+				return byId;
+			}
+
+			const scope = (container && container.nodeType === 9) ? container.documentElement : container;
+			if (!scope || typeof scope.querySelector !== 'function') return null;
+
 			const escaped = escapeId(id);
-			return container.getElementById(escaped) || container.querySelector(`#${escaped}`);
+			return scope.querySelector(`#${escaped}`);
 		} catch (e) {
 			console.warn('Invalid ID in findID:', id, e);
 			return null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vgapp",
-	"version": "0.9.4",
+	"version": "0.9.6",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",