vgapp 1.0.2 → 1.0.4

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

@@ -138,7 +138,7 @@ class VGFilesBase extends BaseModule {
 			isSingle;
 
 		if (shouldReplaceOnSingle) {
-			this.clear();
+			this.clear(false);
 			this.append(filesArray, true);
 			this._revokeUrls();
 			this._cleanupFakeInputs();
@@ -209,6 +209,56 @@ class VGFilesBase extends BaseModule {
 		return `${file.name}-${file.size}-${file.type}`;
 	}
 
+	_getFileCustomData(file) {
+		const customData = file?.customData;
+		if (!customData || typeof customData !== 'object' || Array.isArray(customData)) return {};
+		return customData;
+	}
+
+	_toDataAttributeKey(key) {
+		if (!key) return '';
+
+		return String(key)
+			.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+			.replace(/[_\s]+/g, '-')
+			.replace(/[^a-zA-Z0-9-]/g, '')
+			.replace(/-+/g, '-')
+			.replace(/^-|-$/g, '')
+			.toLowerCase();
+	}
+
+	_toDataAttributeValue(value) {
+		if (value === undefined || value === null || value === '') return null;
+		if (typeof value === 'object') {
+			try {
+				return JSON.stringify(value);
+			} catch (e) {
+				return String(value);
+			}
+		}
+		return value;
+	}
+
+	_buildFileDataAttributes(file, baseAttrs = {}) {
+		const attrs = { ...baseAttrs };
+		const customData = this._getFileCustomData(file);
+
+		Object.entries(customData).forEach(([key, value]) => {
+			const attrKey = this._toDataAttributeKey(key);
+			if (!attrKey) return;
+
+			const attrName = `data-${attrKey}`;
+			if (Object.prototype.hasOwnProperty.call(attrs, attrName)) return;
+
+			const attrValue = this._toDataAttributeValue(value);
+			if (attrValue === null) return;
+
+			attrs[attrName] = attrValue;
+		});
+
+		return attrs;
+	}
+
 	_filterFiles(files) {
 		this._errors.clear();
 		const { count, sizes, total } = this._params.limits;
@@ -378,14 +428,20 @@ class VGFilesBase extends BaseModule {
 				}
 			}
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				const part = this._renderTemplatePart(tmpl.element, file, null, { isDrop: true });
-				if (part) parts.push(part);
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, null, { isDrop: true });
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
-				{ 'data-name': file.name, 'data-size': file.size, 'data-id': file.id || '', class: 'file ' + classes.join(' ') }, parts
+				this._buildFileDataAttributes(file, {
+					'data-name': file.name,
+					'data-size': file.size ?? 0,
+					'data-id': file.id || '',
+					class: 'file ' + classes.join(' ')
+				}),
+				parts
 			);
 
 			fragment.appendChild($li);
@@ -398,6 +454,12 @@ class VGFilesBase extends BaseModule {
 		if ($message) {
 			if (files.length) Classes.add($message, 'has-files');
 			else Classes.remove($message, 'has-files');
+
+			const isSingle = Number(this._params?.limits?.count) === 1;
+			if (isSingle) {
+				if (files.length) Classes.remove($message, 'show');
+				else Classes.add($message, 'show');
+			}
 		}
 
 		this._nodes.drop.appendChild($list);
@@ -429,14 +491,21 @@ class VGFilesBase extends BaseModule {
 			if (this._params.detach) classes.push('with-remove')
 			if (this._params.sortable.enabled) classes.push('with-sortable');
 
-			let parts = [];
-			$itemsTemplate.forEach(tmpl => {
-				const part = this._renderTemplatePart(tmpl.element, file, i);
-				if (part) parts.push(part);
-			});
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				const part = this._renderTemplatePart(tmpl.element, file, i);
+				if (part) parts.push(part);
+			});
 
 			const $li = this._tpl.li(
-				{ 'data-name': file.name, 'data-size': file.size, 'data-type': file.type, 'data-id': file.id || '', class: 'file ' + classes.join(' ') + ' ' }, parts
+				this._buildFileDataAttributes(file, {
+					'data-name': file.name,
+					'data-size': file.size ?? 0,
+					'data-type': file.type || '',
+					'data-id': file.id || '',
+					class: 'file ' + classes.join(' ') + ' '
+				}),
+				parts
 			);
 			fragment.appendChild($li);
 		});
@@ -445,38 +514,38 @@ class VGFilesBase extends BaseModule {
 		Classes.add(this._nodes.info, 'show')
 	}
 
-	_renderTemplatePart(element, file, index = null, options = {}) {
-		if (!element) return null;
-		const { isDrop = false } = options;
-
-		const classList = element?.classList;
-
-		if (classList?.contains('file-image')) return this._renderUIImage(file);
-		if (classList?.contains('file-info')) {
-			if (isDrop) return null;
-			return this._renderUIInfo(file, index);
-		}
-		if (classList?.contains('file-remove')) return this._wrapInFileCustom(this._renderUIDetach(file));
-
-		const $part = element.cloneNode(true);
-
-		this._replaceTemplateSlot($part, '.file-image', () => this._renderUIImage(file));
-		this._replaceTemplateSlot($part, '.file-info', () => isDrop ? null : this._renderUIInfo(file, index));
-		this._replaceTemplateSlot($part, '.file-remove', () => this._renderUIDetach(file));
-
-		return this._wrapInFileCustom($part);
-	}
-
-	_wrapInFileCustom(node) {
-		if (!node) return null;
-		if (node.classList?.contains('file-custom')) return node;
-
-		const wrapper = document.createElement('div');
-		wrapper.className = 'file-custom';
-		wrapper.appendChild(node);
-
-		return wrapper;
-	}
+	_renderTemplatePart(element, file, index = null, options = {}) {
+		if (!element) return null;
+		const { isDrop = false } = options;
+
+		const classList = element?.classList;
+
+		if (classList?.contains('file-image')) return this._renderUIImage(file);
+		if (classList?.contains('file-info')) {
+			if (isDrop) return null;
+			return this._renderUIInfo(file, index);
+		}
+		if (classList?.contains('file-remove')) return this._wrapInFileCustom(this._renderUIDetach(file));
+
+		const $part = element.cloneNode(true);
+
+		this._replaceTemplateSlot($part, '.file-image', () => this._renderUIImage(file));
+		this._replaceTemplateSlot($part, '.file-info', () => isDrop ? null : this._renderUIInfo(file, index));
+		this._replaceTemplateSlot($part, '.file-remove', () => this._renderUIDetach(file));
+
+		return this._wrapInFileCustom($part);
+	}
+
+	_wrapInFileCustom(node) {
+		if (!node) return null;
+		if (node.classList?.contains('file-custom')) return node;
+
+		const wrapper = document.createElement('div');
+		wrapper.className = 'file-custom';
+		wrapper.appendChild(node);
+
+		return wrapper;
+	}
 
 	_replaceTemplateSlot(container, selector, renderer) {
 		const isMatchSelf = container?.matches && container.matches(selector);
@@ -580,9 +649,11 @@ class VGFilesBase extends BaseModule {
 		Selectors.findAll('[data-vg-files="generated"]', this._element).forEach(el => el.remove());
 	}
 
-	clear() {
+	clear(resetInput = true) {
 		this._revokeUrls();
-		this._resetFileInput();
+		if (resetInput) {
+			this._resetFileInput();
+		}
 		this._cleanupFakeInputs();
 		this._cleanupErrors();
 		this._files = [];
@@ -597,7 +668,14 @@ class VGFilesBase extends BaseModule {
 			if ($list) $list.innerHTML = '';
 
 			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
-			if ($message) Classes.remove($message, 'has-files');
+			if ($message) {
+				Classes.remove($message, 'has-files');
+
+				const isSingle = Number(this._params?.limits?.count) === 1;
+				if (isSingle) {
+					Classes.add($message, 'show');
+				}
+			}
 
 			Classes.remove(this._nodes.drop, 'active');
 		}

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

@@ -1,7 +1,7 @@
 import { isElement, normalizeData } from "../../../utils/js/functions";
 import Params from "../../../utils/js/components/params";
 import Selectors from "../../../utils/js/dom/selectors";
-import { Classes, Manipulator } from "../../../utils/js/dom/manipulator";
+import { Manipulator } from "../../../utils/js/dom/manipulator";
 
 class VGFilesTemplateRender {
 	constructor(vgFilesInstance, element, params = {}) {
@@ -38,34 +38,105 @@ class VGFilesTemplateRender {
 		const $items = Array.from($list.children).filter(li => li.tagName === 'LI');
 		if ($items.length === 0) return false;
 
-		// Сохраняем шаблон только один раз
 		this._setTemplateInBuffer($items);
-
 		if (!this.bufferTemplate) return false;
 
-		// Парсим данные файлов
 		this.parsedFiles = $items
 			.map(li => {
 				const rawData = Manipulator.get(li, 'data-file');
 				if (!rawData) return null;
 
-				const dataFile = normalizeData(rawData);
-				const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
-				const isValid = requiredKeys.every(key => dataFile.hasOwnProperty(key));
-
-				return isValid ? dataFile : null;
+				return this._parseDataFile(rawData);
 			})
-			.filter(Boolean); // Убираем null
+			.filter(Boolean);
 
 		return true;
 	}
 
+	_parseDataFile(rawData) {
+		const dataFile = normalizeData(rawData);
+		if (!dataFile || typeof dataFile !== 'object' || Array.isArray(dataFile)) return null;
+
+		const binaryMeta = this._extractBinaryMeta(dataFile);
+		const name = this._toStringOrNull(dataFile.name);
+		const id = this._toStringOrNull(dataFile.id);
+		const src = this._toStringOrNull(dataFile.src);
+		const type = this._toStringOrNull(dataFile.type) || binaryMeta.type || 'application/octet-stream';
+		const size = this._toNumberOrNull(dataFile.size) ?? binaryMeta.size ?? 0;
+		const lastModified = this._toNumberOrNull(dataFile.lastModified ?? dataFile['last-modified']) ?? binaryMeta.lastModified ?? Date.now();
+
+		const result = {
+			id,
+			name,
+			size,
+			type,
+			src,
+			lastModified
+		};
+
+		if (dataFile.image !== undefined && dataFile.image !== null && dataFile.image !== '') {
+			result.image = dataFile.image;
+		}
+
+		const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
+		const isValid = requiredKeys.every((key) => {
+			const value = result[key];
+			if (key === 'size') return Number.isFinite(value);
+			return value !== undefined && value !== null && value !== '';
+		});
+
+		if (!isValid) return null;
+
+		const customData = {};
+		const reserved = new Set(['id', 'name', 'size', 'type', 'src', 'image', 'lastModified', 'last-modified']);
+
+		Object.entries(dataFile).forEach(([key, value]) => {
+			if (reserved.has(key)) return;
+			if (value === undefined || value === null || value === '') return;
+			customData[key] = value;
+		});
+
+		if (Object.keys(customData).length) {
+			result.customData = customData;
+		}
+
+		return result;
+	}
+
+	_extractBinaryMeta(dataFile) {
+		const binary = dataFile.file || dataFile.blob || dataFile.originFile || null;
+		if (!(binary instanceof Blob)) return {};
+
+		const size = this._toNumberOrNull(binary.size);
+		const type = this._toStringOrNull(binary.type);
+		const lastModified = (binary instanceof File)
+			? this._toNumberOrNull(binary.lastModified)
+			: null;
+
+		return {
+			size: size ?? null,
+			type: type || null,
+			lastModified: lastModified ?? null
+		};
+	}
+
+	_toStringOrNull(value) {
+		if (value === undefined || value === null) return null;
+		const normalized = String(value).trim();
+		return normalized ? normalized : null;
+	}
+
+	_toNumberOrNull(value) {
+		if (value === undefined || value === null || value === '') return null;
+		const normalized = Number(value);
+		return Number.isFinite(normalized) ? normalized : null;
+	}
+
 	_setTemplateInBuffer($items) {
 		if (this.bufferTemplate || $items.length === 0) return;
 
 		const firstItem = $items[0];
 
-		// Если нет data-file — шаблон извлекается и элемент удаляется
 		if (!Manipulator.has(firstItem, 'data-file')) {
 			this.bufferTemplate = firstItem.outerHTML;
 			firstItem.remove();
@@ -80,4 +151,4 @@ class VGFilesTemplateRender {
 	}
 }
 
-export default VGFilesTemplateRender;
+export default VGFilesTemplateRender;

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

@@ -41,12 +41,12 @@ class VGFiles extends VGFilesBase {
             types: [],
             ajax: false,
             prepend: true,
-            replace: true,
-            rename: false,
-            smartdrop: false,
-            uploads: {
-                mode: 'sequential',
-                route: '',
+            replace: true,
+            rename: false,
+            smartdrop: false,
+            uploads: {
+                mode: 'sequential',
+                route: '',
                 maxParallel: 3,
                 maxConcurrent: 1,
                 retryAttempts: 1,
@@ -106,67 +106,91 @@ class VGFiles extends VGFilesBase {
         if (this.isRenderNonInit) return;
         this.isRenderNonInit = this._render.init();
 
-        if (this._render.parsedFiles.length) {
-            this._addExternalFiles(this._render.parsedFiles);
+        const parsedFiles = this._render.parsedFiles;
+
+        if (parsedFiles.length) {
+            this._addExternalFiles(parsedFiles);
+        }
+
+        if (this._params.allowed && !this._params.ajax) this._params.detach = false;
+        if (this._nodes.drop) {
+            this._params.image = true;
+            this._params.detach = true;
+            this._setDropActiveText();
+
+            VGFilesDroppable.getOrCreateInstance(this._nodes.drop, this._params).init();
         }
 
-        if (this._params.allowed && !this._params.ajax) this._params.detach = false;
-        if (this._nodes.drop) {
-            this._params.image = true;
-            this._params.detach = true;
-            this._setDropActiveText();
-
-            VGFilesDroppable.getOrCreateInstance(this._nodes.drop, this._params).init();
-        }
-
-        this._addEventListenerExtended();
-        this._renderStat();
-        this._triggerCallback('onInit', { element: this._element });
-    }
-
-    _setDropActiveText() {
-        if (!this._nodes.drop) return;
-
-        const messages = lang_messages(this._params.lang, NAME) || {};
-        const activeText = (this._nodes.drop.getAttribute('data-drop-active-text') || '').trim() || messages['drop-active'] || 'Release to upload';
-        this._nodes.drop.setAttribute('data-drop-active-text', activeText);
-
-        const title = Selectors.find('.vg-files-drop-message .title', this._nodes.drop);
-        if (!title) return;
-
-        const originalText = (title.getAttribute('data-drop-original-text') || '').trim() || (title.textContent || '').trim();
-        title.setAttribute('data-drop-original-text', originalText);
-    }
+        this._addEventListenerExtended();
+        this._renderStat();
+        this._triggerCallback('onInit', { element: this._element, files: parsedFiles || [] });
+    }
+
+    _setDropActiveText() {
+        if (!this._nodes.drop) return;
+
+        const messages = lang_messages(this._params.lang, NAME) || {};
+        const activeText = (this._nodes.drop.getAttribute('data-drop-active-text') || '').trim() || messages['drop-active'] || 'Release to upload';
+        this._nodes.drop.setAttribute('data-drop-active-text', activeText);
+
+        const title = Selectors.find('.vg-files-drop-message .title', this._nodes.drop);
+        if (!title) return;
+
+        const originalText = (title.getAttribute('data-drop-original-text') || '').trim() || (title.textContent || '').trim();
+        title.setAttribute('data-drop-original-text', originalText);
+    }
 
     _addExternalFiles(files) {
         if (!Array.isArray(files) || !files.length) return;
 
         files.forEach(fileData => {
-            const file = new File([""], fileData.name, {
-                type: fileData.type || "application/octet-stream",
-                lastModified: fileData.lastModified || Date.now()
-            });
+            if (!fileData?.name) return;
 
-            // Добавляем ID, если он есть
-            Object.defineProperty(file, 'id', {
-                value: fileData.id,
-                writable: true,
-                enumerable: true
-            });
+            const fileOptions = {};
+            if (typeof fileData.type === 'string') fileOptions.type = fileData.type;
+            if (Number.isFinite(fileData.lastModified)) fileOptions.lastModified = fileData.lastModified;
 
-            // Добавляем Size, если он есть
-            Object.defineProperty(file, 'size', {
-                value: fileData.size,
-                writable: true,
-                enumerable: true
-            });
+            const file = new File([""], fileData.name, fileOptions);
 
-            // Добавляем Src, если он есть
-            Object.defineProperty(file, 'src', {
-                value: fileData.src,
-                writable: true,
-                enumerable: true
-            });
+            if (fileData.id !== undefined && fileData.id !== null && fileData.id !== '') {
+                Object.defineProperty(file, 'id', {
+                    value: fileData.id,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (Number.isFinite(fileData.size)) {
+                Object.defineProperty(file, 'size', {
+                    value: fileData.size,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.src !== undefined && fileData.src !== null && fileData.src !== '') {
+                Object.defineProperty(file, 'src', {
+                    value: fileData.src,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.image !== undefined && fileData.image !== null && fileData.image !== '') {
+                Object.defineProperty(file, 'image', {
+                    value: fileData.image,
+                    writable: true,
+                    enumerable: true
+                });
+            }
+
+            if (fileData.customData && typeof fileData.customData === 'object' && !Array.isArray(fileData.customData)) {
+                Object.defineProperty(file, 'customData', {
+                    value: fileData.customData,
+                    writable: true,
+                    enumerable: true
+                });
+            }
 
             const fileKey = this._getFileKey(file);
 
@@ -209,14 +233,29 @@ class VGFiles extends VGFilesBase {
 
     _handleChange(e) {
         const input = e?.target;
+        const inputFiles = this._snapshotInputFiles(input);
         this.change(input);
 
         if (this._params.ajax) this.uploadAll(this._files);
 
-        const payload = { files: this._files, input: e?.target || e?.src || '' };
+        const payload = {
+            files: this._files,
+            input: e?.target || e?.src || '',
+            inputFiles
+        };
 
         this._triggerCallback('onChange', payload);
-        this._triggerEvent('change', { files: this._files, input: payload.input });
+        this._triggerEvent('change', {
+            files: this._files,
+            input: payload.input,
+            inputFiles: payload.inputFiles
+        });
+    }
+
+    _snapshotInputFiles(input) {
+        const files = input?.files;
+        if (!files?.length) return [];
+        return Array.from(files);
     }
 
     async uploadAll(files) {
@@ -667,15 +706,15 @@ class VGFiles extends VGFilesBase {
 
         return this._tpl.button([
             this._tpl.i({}, icon, { isHTML: true })
-        ], 'button', {
+        ], 'button', this._buildFileDataAttributes(file, {
             type: 'button',
             [action]: 'file',
             'data-name': file.name,
-            'data-size': file.size,
-            'data-type': file.type,
-            'data-last-modified': file.lastModified,
+            'data-size': file.size ?? 0,
+            'data-type': file.type || '',
+            'data-last-modified': file.lastModified || '',
             'data-id': file.id || ''
-        });
+        }));
     }
 
     _renderStat() {
@@ -859,4 +898,4 @@ EventHandler.on(document, `click.${NAME_KEY}.data.api`, SELECTOR_DATA_DISMISS_AL
     }
 });
 
-export default VGFiles;
+export default VGFiles;

package/app/modules/vgfiles/readme.md

@@ -84,7 +84,7 @@ const files = new VGFiles(document.querySelector('.vg-files'), {
 | Колбэк | Параметры | Описание |
 |-------|----------|--------|
 | `onInit` | `(data)` | Инициализация завершена |
-| `onChange` | `{ files, input }` | Изменён список файлов |
+| `onChange` | `{ files, input, inputFiles }` | Изменён список файлов (`inputFiles` — снимок исходных `input.files`) |
 | `onUploadStart` | `{ files, total }` | Началась загрузка |
 | `onUploadProgress` | `{ file, progress, bytesSent, totalBytes }` | Прогресс загрузки |
 | `onUploadComplete` | `{ file, response, status, id }` | Файл успешно загружен |
@@ -190,4 +190,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgnav/js/vgnav.js

@@ -52,6 +52,10 @@ class VGNav extends BaseModule {
 			breakpoint: 'lg',
 			placement: 'horizontal',
 			hover: true,
+			hoversmoothfirstlevel: {
+				enable: false,
+				horizontalOnly: true
+			},
 			animation: {
 				enable: true,
 				timeout: 700
@@ -98,6 +102,7 @@ class VGNav extends BaseModule {
 		}
 
 		this._openDrops = new Map();
+		this._pointerPosition = null;
 		this._handleScroll = this._handleScroll.bind(this);
 		this._handleResize = this._handleResize.bind(this);
 	}
@@ -333,6 +338,50 @@ class VGNav extends BaseModule {
 		return vertInView && horInView;
 	}
 
+	_updatePointerPosition(event) {
+		if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
+		this._pointerPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+
+	_isHorizontalPointerMove(event) {
+		if (!this._pointerPosition || !event) return false;
+
+		const dx = event.clientX - this._pointerPosition.x;
+		const dy = event.clientY - this._pointerPosition.y;
+
+		return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
+	}
+
+	_isFirstLevelDropdown(drop) {
+		return !!drop && !drop.closest('.dropdown-content');
+	}
+
+	_hasDirectDropdownContent(drop) {
+		if (!drop || !drop.children) return false;
+		return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
+	}
+
+	_isAdjacentDropdown(drop, relatedDrop) {
+		if (!drop || !relatedDrop) return false;
+		if (drop.parentElement !== relatedDrop.parentElement) return false;
+		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
+	}
+
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+		const smoothParams = this._params.hoversmoothfirstlevel || {};
+		if (!smoothParams.enable) return false;
+		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
+		if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
+		if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
+		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
+		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
+
+		return true;
+	}
+
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
 		instance.build();
@@ -340,12 +389,15 @@ class VGNav extends BaseModule {
 		let drops = Selectors.findAll('.dropdown', instance.navigation);
 
 		if (instance._params.hover && !isMobileDevice()) {
+			EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
+				instance._updatePointerPosition(event);
+			});
+
 			[...drops].forEach(function (el) {
 				let currentElem = null;
 
 				EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
 					if (currentElem) return;
-					VGNav.hideOpenDrops(event);
 
 					let target = event.target.closest('.dropdown');
 					if (!target) return;
@@ -353,17 +405,31 @@ class VGNav extends BaseModule {
 					if (!instance.navigation.contains(target)) return;
 					currentElem = target;
 
+					const previousDrop = event.relatedTarget?.closest('.dropdown');
+					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
+
+					if (!useSmoothSwitch) {
+						VGNav.hideOpenDrops(event);
+					}
+
 					let relatedTarget = {
 						relatedTarget: target
 					};
 
 					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						instance.hide({ relatedTarget: previousDrop });
+					}
+
+					instance._updatePointerPosition(event);
 				});
 
 				EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
 					if (!currentElem) return;
 
-					let relatedTarget = event.relatedTarget?.closest('.dropdown'),
+					let nextDrop = event.relatedTarget?.closest('.dropdown'),
+						relatedTarget = nextDrop,
 						elm = currentElem;
 
 					while (relatedTarget) {
@@ -371,8 +437,15 @@ class VGNav extends BaseModule {
 						relatedTarget = relatedTarget.parentNode;
 					}
 
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						instance._updatePointerPosition(event);
+						return;
+					}
+
 					currentElem = null;
 					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+					instance._updatePointerPosition(event);
 				});
 			});
 		}

package/package.json

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