vgapp 1.5.8 → 1.5.9

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

@@ -456,10 +456,13 @@ class VGAlert {
 			: VGModal.getOrCreateInstance(containerWrap);
 		const container = Selectors.find('.vg-modal-content', containerWrap) || containerWrap;
 
-		const overlay = document.createElement('div');
-
-		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
-		this._applySizeClass(overlay);
+		const overlay = document.createElement('div');
+
+		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		if (containerWrap.classList.contains('vg-modal')) {
+			overlay.classList.add(`${CLASS_NAME_ALERT}-overlay--modal`);
+		}
+		this._applySizeClass(overlay);
 		overlay.append(this._buildContent());
 
 		container.append(overlay);

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

@@ -55,17 +55,24 @@
 			}
 		}
 
-		.vg-alert-wrapper {
-			background-color: var(--vg-alert-overlay-wrapper-bg);
-			width: var(--vg-alert-overlay-wrapper-width);
+		.vg-alert-wrapper {
+			background-color: var(--vg-alert-overlay-wrapper-bg);
+			width: var(--vg-alert-overlay-wrapper-width);
 			position: absolute;
 			left: var(--vg-alert-overlay-wrapper-start);
 			z-index: 1;
 			transform: var(--vg-alert-overlay-wrapper-transform);
 			top: var(--vg-alert-overlay-wrapper-top);
-			transition: var(--vg-alert-overlay-wrapper-transition);
-		}
-	}
+			transition: var(--vg-alert-overlay-wrapper-transition);
+		}
+
+		&--modal {
+			.vg-alert-wrapper {
+				position: sticky;
+				top: calc(var(--vg-alert-overlay-wrapper-top) + 1rem);
+			}
+		}
+	}
 
 	&-dropdown {
 		width: 360px;

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

@@ -5,8 +5,9 @@
 import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
-	execute,
-	isDisabled,
+	execute,
+	getTransitionDurationFromElement,
+	isDisabled,
 	isMobileDevice,
 	isVisible,
 	mergeDeepObject,
@@ -127,8 +128,9 @@ class VGNav extends BaseModule {
 			this._params.animation.timeout = 10;
 		}
 
-		this._openDrops = new Map();
-		this._pointerPosition = null;
+		this._openDrops = new Map();
+		this._pointerPosition = null;
+		this._smoothSwitch = null;
 		this._handleScroll = this._handleScroll.bind(this);
 		this._handleResize = this._handleResize.bind(this);
 	}
@@ -397,7 +399,7 @@ class VGNav extends BaseModule {
 		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
 	}
 
-	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
 		const smoothParams = this._params.hoversmoothfirstlevel || {};
 		if (!smoothParams.enable) return false;
 		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
@@ -406,8 +408,52 @@ class VGNav extends BaseModule {
 		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
 		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
 
-		return true;
-	}
+		return true;
+	}
+
+	_scheduleSmoothSwitchCompletion(dropContent, callback) {
+		const duration = getTransitionDurationFromElement(dropContent);
+		if (!duration) {
+			callback();
+			return;
+		}
+
+		window.setTimeout(callback, duration);
+	}
+
+	_startSmoothSwitch(currentDrop, previousDrop, dropContent) {
+		const staleSwitch = this._smoothSwitch;
+		const transfer = { currentDrop, previousDrop };
+		this._smoothSwitch = transfer;
+
+		if (
+			staleSwitch?.previousDrop
+			&& staleSwitch.previousDrop !== currentDrop
+			&& staleSwitch.previousDrop !== previousDrop
+			&& staleSwitch.previousDrop.classList.contains(CLASS_NAME_ACTIVE)
+		) {
+			this.hide({ relatedTarget: staleSwitch.previousDrop });
+		}
+
+		this._scheduleSmoothSwitchCompletion(dropContent, () => {
+			if (this._smoothSwitch !== transfer) return;
+			this._smoothSwitch = null;
+			if (!currentDrop.isConnected || !previousDrop.isConnected) return;
+			if (!currentDrop.classList.contains(CLASS_NAME_ACTIVE)) return;
+			if (previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+				this.hide({ relatedTarget: previousDrop });
+			}
+		});
+	}
+
+	_cancelSmoothSwitch(exceptDrop = null) {
+		const transfer = this._smoothSwitch;
+		this._smoothSwitch = null;
+		if (!transfer?.previousDrop || transfer.previousDrop === exceptDrop) return;
+		if (transfer.previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+			this.hide({ relatedTarget: transfer.previousDrop });
+		}
+	}
 
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
@@ -435,19 +481,24 @@ class VGNav extends BaseModule {
 					const previousDrop = event.relatedTarget?.closest('.dropdown');
 					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
 
-					if (!useSmoothSwitch) {
-						VGNav.hideOpenDrops(event);
+					if (!useSmoothSwitch) {
+						instance._cancelSmoothSwitch(target);
+						VGNav.hideOpenDrops(event);
 					}
 
 					let relatedTarget = {
 						relatedTarget: target
 					};
 
-					instance.show(relatedTarget);
-
-					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
-						instance.hide({ relatedTarget: previousDrop });
-					}
+					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						const nextDropContent = Selectors.find(':scope > .dropdown-content', target);
+						if (nextDropContent) {
+							nextDropContent.classList.add(CLASS_NAME_FADE);
+							instance._startSmoothSwitch(target, previousDrop, nextDropContent);
+						}
+					}
 
 					instance._updatePointerPosition(event);
 				});
@@ -464,14 +515,16 @@ 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 });
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						// Сохраняем предыдущую точку до mouseover соседнего пункта:
+						// она нужна повторной проверке направления и передаче открытого состояния.
+						return;
+					}
+
+					currentElem = null;
+					instance._cancelSmoothSwitch(elm);
+					instance.hide({ relatedTarget: relatedTarget, elm: elm });
 					instance._updatePointerPosition(event);
 				});
 			});

package/app/modules/vgtable/scss/_fixed-columns.scss

@@ -54,31 +54,29 @@
 		inset-inline-end: var(--vg-table-fixed-offset);
 	}
 
-	tbody tr > [data-vg-table-fixed-side],
-	tfoot tr > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: none;
-	}
-
-	.vg-table-striped tbody tr:nth-child(even) > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-tbody-bg-striped), var(--vg-table-tbody-bg-striped));
-	}
-
-	.vg-table-hovered tbody tr:hover > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-tbody-bg-hovered), var(--vg-table-tbody-bg-hovered));
-	}
-
-	tbody tr.vg-table-row-selected > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-selection-row-background), var(--vg-table-selection-row-background));
-	}
-
-	tbody tr.vg-table-row-selected:hover > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-selection-row-background-hovered), var(--vg-table-selection-row-background-hovered));
-	}
+	tbody tr > [data-vg-table-fixed-side],
+	tfoot tr > [data-vg-table-fixed-side] {
+		background-color: var(--vg-table-fixed-cell-bg);
+		background-image: none;
+		box-shadow: inset 0 0 0 100vmax transparent;
+		transition: box-shadow var(--vg-table-transition);
+	}
+
+	.vg-table-striped tbody tr:nth-child(even) > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-tbody-bg-striped);
+	}
+
+	.vg-table-hovered tbody tr:hover > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-tbody-bg-hovered);
+	}
+
+	tbody tr.vg-table-row-selected > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-selection-row-background);
+	}
+
+	tbody tr.vg-table-row-selected:hover > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-selection-row-background-hovered);
+	}
 
 	[data-vg-table-fixed-edge]::after {
 		content: "";