vgapp 1.4.0 → 1.4.2

package/README.md

@@ -142,10 +142,38 @@ app
 - `VGSidebar` — боковые панели с управлением открытием/закрытием.
 - `VGSpy` — scroll‑spy для подсветки активных ссылок по секциям.
 - `VGTabs` — вкладки с переключением контента и поддержкой URL/hash.
-- `VGToast` — всплывающие уведомления со стеком и автозакрытием.
-- `VGTooltip` — tooltip/popover подсказки с Data API, автопозиционированием и закрытием по `Esc`/клику вне элемента.
-
-## Authors
+- `VGToast` — всплывающие уведомления со стеком и автозакрытием.
+- `VGTooltip` — tooltip/popover подсказки с Data API, автопозиционированием и закрытием по `Esc`/клику вне элемента.
+
+### VGSelect: автоматический поиск
+
+По умолчанию `autosearch: true`: поле поиска автоматически появляется, если в `<select>` больше 7 непустых видимых опций. Число вместо `true` задаёт собственный порог:
+
+```js
+VGSelect.init(select, { autosearch: 10 }); // поиск появится при 11+ опциях
+VGSelect.init(select, { autosearch: 15 }); // поиск появится при 16+ опциях
+VGSelect.init(select, { autosearch: false }); // автоматический поиск отключён
+```
+
+Ручное включение поиска не зависит от количества опций и имеет приоритет над `autosearch`:
+
+```js
+VGSelect.init(select, {
+	search: { enabled: true }, // поиск будет виден даже для двух опций
+});
+```
+
+`search.remote: true` также всегда включает поле поиска: remote-режим не зависит от количества локальных опций.
+
+Те же настройки через Data API:
+
+```html
+<select class="vg-select" data-autosearch="10">...</select>
+<select class="vg-select" data-search-enabled="true">...</select>
+<select class="vg-select" data-search-remote="true" data-search-route="/api/search">...</select>
+```
+
+## Authors
 
 [VEGAS STUDIO](https://vegas-dev.com)  Russia
 

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

@@ -1,7 +1,8 @@
-import BaseModule from "../../base-module";
-import VGModal from "../../vgmodal";
+import BaseModule from "../../base-module";
+import VGModal from "../../vgmodal";
+import VGDropdown from "../../vgdropdown";
 
-import { isElement, isVisible, makeRandomString, mergeDeepObject } from "../../../utils/js/functions";
+import { execute, isElement, isVisible, makeRandomString, mergeDeepObject, reflow } from "../../../utils/js/functions";
 import { getSVG } from "../../module-fn";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -13,9 +14,12 @@ import Params from "../../../utils/js/components/params";
 /**
  * Константы
  */
-const CLASS_NAME_ALERT = "vg-alert";
-const DATA_AGREE = "data-vg-alert-agree";
-const DATA_CANCEL = "data-vg-alert-cancel";
+const CLASS_NAME_ALERT = "vg-alert";
+const CLASS_NAME_SHOW = "show";
+const CLASS_NAME_FADE = "fade";
+const CLASS_NAME_CLOSING = "closing";
+const DATA_AGREE = "data-vg-alert-agree";
+const DATA_CANCEL = "data-vg-alert-cancel";
 
 const NAME = "alert";
 const NAME_KEY = "vg.alert";
@@ -27,11 +31,22 @@ class VGAlert {
 	constructor(params = {}, lang = 'ru') {
 		this.lang = lang;
 		this._defaultParams = {
-			render: {
-				type: "modal", // modal or overlay,
-				dismiss: false,
-			},
-			ajax: {
+			render: {
+				type: "modal", // modal, overlay or dropdown
+				dismiss: false,
+			},
+			dropdown: {
+				placement: "auto",
+				hover: false,
+				animation: {
+					fade: true,
+					enable: false,
+					in: "animate__flipInY",
+					out: "animate__flipOutY",
+					delay: 300,
+				},
+			},
+			ajax: {
 				route: "",
 				target: "",
 				method: "get",
@@ -130,55 +145,83 @@ class VGAlert {
 					render: overlay.render,
 					type: 'overlay'
 				}
-			} else if (context._params.render.type === "modal") {
-				const modal = context._buildModal();
-				return {
-					element: modal._element,
-					render: modal,
-					type: 'modal'
-				}
-			}
-		};
-
-		const {element: container, render, type} = getContainer();
-
-		if (type === 'modal') {
-			render.show();
-		}
+			} else if (context._params.render.type === "modal") {
+				const modal = context._buildModal();
+				return {
+					element: modal._element,
+					render: modal,
+					type: 'modal'
+				}
+			} else if (context._params.render.type === "dropdown") {
+				const dropdown = context._buildDropdown();
+
+				if (!dropdown.element || !dropdown.render) {
+					const modal = context._buildModal();
+					return {
+						element: modal._element,
+						render: modal,
+						type: 'modal'
+					}
+				}
+
+				return {
+					element: dropdown.element,
+					render: dropdown.render,
+					type: 'dropdown'
+				}
+			}
+		};
+
+		const {element: container, render, type} = getContainer();
+
+		if (type === 'modal' || type === 'dropdown') {
+			render.show();
+		} else if (type === 'overlay') {
+			context._showOverlay(container);
+		}
 
 		const agreeBtn = Selectors.find(`[${DATA_AGREE}]`, container);
 		const cancelBtn = Selectors.find(`[${DATA_CANCEL}]`, container);
 
-		return new Promise((resolve, reject) => {
-			const closeAlert = (isHide = true) => {
-				if (type === 'modal') {
-					render.hide();
-					return;
-				}
-
-				if (type === 'overlay') {
-					container.remove();
-
-					if (context._params.render.dismiss && isHide) {
-						render.hide();
-					}
-				}
-			};
-
-			const handleAgree = (e) => {
-				e.preventDefault();
-				cleanup();
-				resolve({
+		return new Promise((resolve, reject) => {
+			let isSettled = false;
+
+			const closeAlert = (isHide = true) => {
+				if (type === 'modal') {
+					render.hide();
+					return;
+				}
+
+				if (type === 'dropdown') {
+					render.hide();
+					return;
+				}
+
+				if (type === 'overlay') {
+					context._hideOverlay(container, () => {
+						if (context._params.render.dismiss && isHide) {
+							render.hide();
+						}
+					});
+				}
+			};
+
+			const handleAgree = (e) => {
+				e.preventDefault();
+				isSettled = true;
+				cleanup();
+				resolve({
 					accepted: true,
 					timestamp: new Date(),
 				});
 				closeAlert();
 			};
 
-			const handleCancel = (e) => {
-				e.preventDefault();
-				cleanup();
-				reject({
+			const handleCancel = (e) => {
+				e.preventDefault();
+				isSettled = true;
+				cleanup();
+				reject({
 					accepted: false,
 					timestamp: new Date(),
 				});
@@ -196,12 +239,25 @@ class VGAlert {
 				}
 			};
 
-			const cleanup = () => {
-				isAlertOpen = false;
-				document.removeEventListener("keydown", handleKeydown);
-				if (agreeBtn) agreeBtn.removeEventListener("click", handleAgree);
-				if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
-			};
+			const cleanup = () => {
+				isAlertOpen = false;
+				document.removeEventListener("keydown", handleKeydown);
+				document.removeEventListener("click", handleDropdownClickOutside);
+				if (agreeBtn) agreeBtn.removeEventListener("click", handleAgree);
+				if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
+			};
+
+			const handleDropdownClickOutside = (e) => {
+				if (type !== 'dropdown') return;
+
+				const toggle = context._params.relatedTarget;
+
+				if (container.contains(e.target) || (isElement(toggle) && toggle.contains(e.target))) {
+					return;
+				}
+
+				handleCancel(e);
+			};
 
 			if (context._params.mode === "confirm") {
 				if (agreeBtn) agreeBtn.addEventListener("click", handleAgree);
@@ -214,19 +270,42 @@ class VGAlert {
 
 			document.addEventListener("keydown", handleKeydown);
 
-			if (type === 'modal') {
-				container.addEventListener("vg.modal.hide", () => {
-					cleanup();
-					reject({
+			if (type === 'modal') {
+				container.addEventListener("vg.modal.hide", () => {
+					if (isSettled) return;
+					isSettled = true;
+					cleanup();
+					reject({
 						accepted: false,
 						timestamp: new Date(),
 					});
-				}, {once: true});
-			}
-
-			container.focus();
-		});
-	}
+				}, {once: true});
+			}
+
+			if (type === 'dropdown') {
+				document.addEventListener("click", handleDropdownClickOutside);
+
+				container.addEventListener("vg.dropdown.hidden", () => {
+					if (container._vgAlertDropdownParent && !container._vgAlertDropdownParentWasSet) {
+						container._vgAlertDropdownParent.classList.remove('vg-dropdown');
+					}
+
+					container.remove();
+
+					if (isSettled) return;
+
+					isSettled = true;
+					cleanup();
+					reject({
+						accepted: false,
+						timestamp: new Date(),
+					});
+				}, {once: true});
+			}
+
+			container.focus();
+		});
+	}
 
 	static confirm(elem, options = {}) {
 		let lang = 'ru';
@@ -339,9 +418,9 @@ class VGAlert {
 		);
 	}
 
-	_buildOverlay() {
-		const targetContainers = ['.vg-modal', '.vg-sidebar'];
-		const relatedTarget = this._params.relatedTarget;
+	_buildOverlay() {
+		const targetContainers = ['.vg-modal', '.vg-sidebar'];
+		const relatedTarget = this._params.relatedTarget;
 		const containerWrap = isElement(relatedTarget)
 			? relatedTarget.closest(targetContainers.join(', '))
 			: null;
@@ -356,20 +435,129 @@ class VGAlert {
 		const modal = VGModal.getOrCreateInstance(containerWrap);
 		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
 
-		const overlay = document.createElement('div');
-
-		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
-		overlay.append(this._buildContent());
+		const overlay = document.createElement('div');
+
+		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		overlay.append(this._buildContent());
 
 		container.append(overlay);
 
 		return {
 			element: overlay,
-			render: modal,
-		};
-	}
-
-	_createButton(container, key) {
+			render: modal,
+		};
+	}
+
+	_showOverlay(overlay) {
+		if (!overlay) return;
+
+		reflow(overlay);
+		requestAnimationFrame(() => {
+			overlay.classList.add(CLASS_NAME_SHOW);
+			reflow(overlay);
+			window.setTimeout(() => {
+				if (overlay.isConnected) {
+					overlay.classList.add(CLASS_NAME_FADE);
+				}
+			}, 15);
+		});
+	}
+
+	_hideOverlay(overlay, callback) {
+		if (!overlay) {
+			execute(callback);
+			return;
+		}
+
+		const removeOverlay = () => {
+			overlay.classList.remove(CLASS_NAME_SHOW);
+			overlay.classList.remove(CLASS_NAME_CLOSING);
+			overlay.remove();
+			execute(callback);
+		};
+
+		overlay.classList.add(CLASS_NAME_CLOSING);
+
+		const wrapper = Selectors.find(`.${CLASS_NAME_ALERT}-wrapper`, overlay);
+		const wrapperDuration = this._getElementTransitionDuration(wrapper);
+
+		window.setTimeout(() => {
+			overlay.classList.remove(CLASS_NAME_FADE);
+
+			const backdropDuration = this._getElementTransitionDuration(overlay, '::before');
+			if (!backdropDuration) {
+				removeOverlay();
+				return;
+			}
+
+			window.setTimeout(removeOverlay, backdropDuration);
+		}, wrapperDuration);
+	}
+
+	_getElementTransitionDuration(element, pseudoElement = null) {
+		if (!element || typeof window === 'undefined') return 0;
+
+		const styles = window.getComputedStyle(element, pseudoElement);
+		const durations = styles.transitionDuration.split(',');
+		const delays = styles.transitionDelay.split(',');
+
+		return Math.max(...durations.map((duration, index) => {
+			return this._parseCssTime(duration) + this._parseCssTime(delays[index] || delays[0] || '0s');
+		}));
+	}
+
+	_parseCssTime(value) {
+		const time = Number.parseFloat(value);
+		if (!Number.isFinite(time)) return 0;
+
+		return value.trim().endsWith('ms') ? time : time * 1000;
+	}
+
+	_buildDropdown() {
+		const relatedTarget = this._params.relatedTarget;
+
+		if (!isElement(relatedTarget) || !relatedTarget.parentNode) {
+			return {
+				element: null,
+				render: null,
+			};
+		}
+
+		const id = `${CLASS_NAME_ALERT}-dropdown-${makeRandomString()}`;
+		const parent = relatedTarget.parentNode;
+		const container = document.createElement('div');
+		const dropdownContainer = document.createElement('div');
+		const isDropdownParent = parent.classList.contains('vg-dropdown');
+
+		parent.classList.add('vg-dropdown');
+
+		container.id = id;
+		container.className = `vg-dropdown-content ${CLASS_NAME_ALERT}-dropdown`;
+		container.setAttribute('tabindex', '-1');
+		container.setAttribute('role', 'dialog');
+		container._vgAlertDropdownParent = parent;
+		container._vgAlertDropdownParentWasSet = isDropdownParent;
+
+		dropdownContainer.className = 'vg-dropdown-container';
+		dropdownContainer.append(this._buildContent());
+		container.append(dropdownContainer);
+
+		parent.append(container);
+
+		const dropdown = VGDropdown.getOrCreateInstance(relatedTarget, mergeDeepObject({
+			placement: 'bottom-start',
+		}, this._params.dropdown));
+
+		dropdown._drop = container;
+		dropdown._parent = parent;
+
+		return {
+			element: container,
+			render: dropdown,
+		};
+	}
+
+	_createButton(container, key) {
 		const button = this._params.buttons[key];
 		if (!button || button.element) {
 			container.insertAdjacentHTML("beforeend", button?.element || "");

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

@@ -1 +1,14 @@
-$alert-map: ();
+$alert-map: (
+	overlay-z-index: 1,
+	overlay-backdrop-bg: rgba(0, 0, 0, 0),
+	overlay-backdrop-show-bg: rgba(0, 0, 0, 0.25),
+	overlay-backdrop-transition: background-color .05s linear,
+	overlay-wrapper-bg: #fff,
+	overlay-wrapper-width: 90%,
+	overlay-wrapper-top: 1rem,
+	overlay-wrapper-start: 50%,
+	overlay-wrapper-transform: translate(-50%, -1rem),
+	overlay-wrapper-show-transform: translate(-50%, 0),
+	overlay-wrapper-transition: transform .12s ease-out,
+	buttons-bg: #F5F5F5,
+);

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

@@ -16,29 +16,103 @@
 		--vg-modal-padding: 0 !important;
 		--vg-modal-width: 520px !important;
 		--vg-modal-margin: 65px !important;
-	}
-
-	&-overlay {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-		background: rgba(0, 0, 0, 0.75);
-
-		.vg-alert-wrapper {
-			background-color: white;
-			width: 90%;
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			top: 1rem;
-		}
-	}
-
-	&-wrapper {
-		@include mix-vars('alert', $alert-map);
-		@include mix-alert-color-mode($class: vg-alert);
+	}
+
+	&-overlay {
+		@include mix-vars('alert', $alert-map);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: var(--vg-alert-overlay-z-index);
+		pointer-events: none;
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background-color: var(--vg-alert-overlay-backdrop-bg);
+			transition: var(--vg-alert-overlay-backdrop-transition);
+		}
+
+		&.fade.show {
+			pointer-events: auto;
+
+			&::before {
+				background-color: var(--vg-alert-overlay-backdrop-show-bg);
+			}
+
+			.vg-alert-wrapper {
+				transform: var(--vg-alert-overlay-wrapper-show-transform);
+			}
+
+			&.closing {
+				pointer-events: none;
+
+				.vg-alert-wrapper {
+					transform: var(--vg-alert-overlay-wrapper-transform);
+				}
+			}
+		}
+
+		.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);
+		}
+	}
+
+	&-dropdown {
+		width: 360px;
+		max-width: calc(100vw - 2rem);
+
+		.vg-dropdown-container {
+			overflow: hidden;
+		}
+
+		.vg-alert-content {
+			padding: 1rem;
+			gap: .75rem;
+			align-items: flex-start;
+
+			.vg-alert-content--title {
+				font-size: 1rem;
+				line-height: 1.25;
+			}
+
+			.vg-alert-content--description {
+				font-size: .875rem;
+				line-height: 1.4;
+			}
+
+			.vg-alert-content--icon {
+				svg {
+					width: 32px;
+					height: 32px;
+				}
+			}
+		}
+
+		.vg-alert-buttons {
+			padding: .75rem 1rem;
+
+			.btn {
+				padding: .5rem .875rem;
+				font-size: .875rem;
+				line-height: 1.25;
+			}
+		}
+	}
+
+	&-wrapper {
+		@include mix-vars('alert', $alert-map);
+		@include mix-alert-color-mode($class: vg-alert);
 		border-radius: var(--vg-border-radius);
 		overflow: hidden;
 
@@ -68,12 +142,12 @@
 					}
 				}
 			}
-		}
-
-		.vg-alert-buttons {
-			background-color: #F5F5F5;
-			padding: 1rem 1.5rem;
-			display: flex;
+		}
+
+		.vg-alert-buttons {
+			background-color: var(--vg-alert-buttons-bg);
+			padding: 1rem 1.5rem;
+			display: flex;
 			align-items: center;
 			justify-content: flex-end;
 			gap: .5rem;