vgapp 1.5.7 → 1.5.8

package/app/modules/vgselect/js/vgselect.js

@@ -1,14 +1,14 @@
-/**
- * Описание: кастомный select с синхронизацией исходного поля и выпадающего списка.
- * Возможности: поиск, группы, дерево, теги, AJAX-пагинация, события и освобождение ресурсов.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: кастомный select с синхронизацией исходного поля и выпадающего списка.
+ * Возможности: поиск, группы, дерево, теги, ограничение высоты, AJAX-пагинация, события и освобождение ресурсов.
+ */
+import BaseModule from "../../base-module";
 import {
 	isDisabled,
 	isEmptyObj,
 	mergeDeepObject,
-	normalizeData,
-	transliterate,
+	normalizeData,
+	transliterate,
 } from "../../../utils/js/functions";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
@@ -35,7 +35,9 @@ const CLASS_NAME_TAG            = 'vg-select-tag';
 const CLASS_NAME_TAG_REMOVE     = 'vg-select-tag-remove';
 const CLASS_NAME_LOAD_MORE      = 'vg-select-load-more';
 const CLASS_NAME_LOADING        = 'vg-select-loading';
-const CLASS_NAME_DROP_UP        = 'drop-up';
+const CLASS_NAME_DROP_UP        = 'drop-up';
+
+const DEFAULT_LIST_MAX_HEIGHT   = 300;
 
 const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
 const EVENT_KEY_HIDE            = `${NAME_KEY}.hide`;
@@ -78,11 +80,12 @@ class VGSelect extends BaseModule {
 			autosearch: true,
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
-			// - auto (default): choose top/bottom based on available space in overflow ancestor/viewport
+			// - auto (default): choose top/bottom based on available space in overflow ancestor/viewport
 			// - top: force open upwards
 			// - bottom: force open downwards
 			position: 'auto',
-			search: {
+			height: true,
+			search: {
 				enabled: false,
 				route: '',
 				remote: false,
@@ -109,11 +112,12 @@ class VGSelect extends BaseModule {
 		}, params));
 
 		this._observer = null;
-		this._observerTimeout = null;
-		this._searchTimeout = null;
-		this._disposed = false;
+		this._observerTimeout = null;
+		this._searchTimeout = null;
+		this._disposed = false;
 		this._visibilityTransitionId = 0;
-		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._applyListMaxHeight();
 		this._searchTerm = '';
 		this._currentPage = 1;
 		this._totalPages = null;
@@ -159,9 +163,9 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop, params = {}) {
-		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
-		const controls = list ? [...list.querySelectorAll(`.${CLASS_NAME_LOAD_MORE}, .${CLASS_NAME_LOADING}`)] : [];
+	static buildListOptions(selector, drop, params = {}) {
+		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const controls = list ? [...list.querySelectorAll(`.${CLASS_NAME_LOAD_MORE}, .${CLASS_NAME_LOADING}`)] : [];
 		if (!list) {
 			list = document.createElement('ul');
 			Classes.add(list, CLASS_NAME_LIST);
@@ -198,8 +202,8 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		controls.forEach(control => list.appendChild(control));
-		return list;
+		controls.forEach(control => list.appendChild(control));
+		return list;
 	}
 
 	/**
@@ -237,9 +241,6 @@ class VGSelect extends BaseModule {
 				li.style.paddingLeft = `${16 + (level * 16)}px`;
 			}
 
-			// Раньше подсветка зависела от "явно выбранных" option (атрибут selected),
-			// из-за этого UI мог показывать placeholder, но DOM считал, что выбрана 1-я опция.
-			// Подсвечиваем по фактическому состоянию option.selected.
 			if (option.selected) {
 				li.classList.add('selected');
 			}
@@ -468,16 +469,16 @@ class VGSelect extends BaseModule {
 		search.appendChild(searchInput);
 		this._drop.insertBefore(search, this._drop.firstChild);
 
-		searchInput.addEventListener('input', (e) => {
+		searchInput.addEventListener('input', (e) => {
 			const term = e.target.value.trim();
 			const params = this._params;
 
 			this._callCallback('onSearch', { term });
 			if (params.search.remote && params.search.route) {
-				clearTimeout(this._searchTimeout);
-				this._remoteSearchAbortController?.abort();
-				if (term.length < (params.search.minterm || 1)) return;
-				this._searchTimeout = setTimeout(() => {
+				clearTimeout(this._searchTimeout);
+				this._remoteSearchAbortController?.abort();
+				if (term.length < (params.search.minterm || 1)) return;
+				this._searchTimeout = setTimeout(() => {
 					this._fetchRemoteData(term);
 				}, params.search.delay || 300);
 			} else {
@@ -528,7 +529,7 @@ class VGSelect extends BaseModule {
 		if (searchInput) searchInput.focus();
 
 		return this._queueCallback(() => {
-			if (this._disposed || transitionId !== this._visibilityTransitionId || !this._isShown()) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId || !this._isShown()) return;
 			this._updateDropdownPlacement();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 			this._triggerEvent(EVENT_KEY_OPEN);
@@ -560,7 +561,7 @@ class VGSelect extends BaseModule {
 		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
 
 		this._queueCallback(() => {
-			if (this._disposed || transitionId !== this._visibilityTransitionId) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId) return;
 			this._element.classList.remove(CLASS_NAME_SHOW);
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
 			this._triggerEvent(EVENT_KEY_CLOSE);
@@ -654,21 +655,21 @@ class VGSelect extends BaseModule {
 	/**
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
-	dispose() {
-		if (this._disposed) return;
+	dispose() {
+		if (this._disposed) return;
 		this._visibilityTransitionId++;
 		if (this._observer) {
 			this._observer.disconnect();
 			this._observer = null;
 		}
 		clearTimeout(this._observerTimeout);
-		this._observerTimeout = null;
-		clearTimeout(this._searchTimeout);
-		this._remoteSearchAbortController?.abort();
-		if (this._isShown() && 'ontouchstart' in document.documentElement) document.body.style.pointerEvents = '';
-		this._teardownDropdownPlacement();
-		super.dispose();
-		this._disposed = true;
+		this._observerTimeout = null;
+		clearTimeout(this._searchTimeout);
+		this._remoteSearchAbortController?.abort();
+		if (this._isShown() && 'ontouchstart' in document.documentElement) document.body.style.pointerEvents = '';
+		this._teardownDropdownPlacement();
+		super.dispose();
+		this._disposed = true;
 	}
 
 	_setupDropdownPlacement() {
@@ -688,7 +689,7 @@ class VGSelect extends BaseModule {
 		this._updateDropdownPlacement();
 	}
 
-	_teardownDropdownPlacement() {
+	_teardownDropdownPlacement() {
 		window.removeEventListener('resize', this._boundUpdateDropdownPlacement);
 		window.removeEventListener('scroll', this._boundUpdateDropdownPlacement);
 
@@ -697,16 +698,63 @@ class VGSelect extends BaseModule {
 		}
 		this._positioningScrollParent = null;
 
-		// Reset to stylesheet defaults.
-		this._element.classList.remove(CLASS_NAME_DROP_UP);
-		this._element.style.removeProperty('--vg-select-list-max-height');
-	}
+		// Restore the configured limit after a temporary viewport clamp.
+		this._element.classList.remove(CLASS_NAME_DROP_UP);
+		this._applyListMaxHeight();
+	}
+
+	/**
+	 * Возвращает пользовательское ограничение списка в пикселях.
+	 * true использует стандартные 300px, false снимает ограничение.
+	 * @returns {number|null}
+	 * @private
+	 */
+	_getListMaxHeight() {
+		const raw = this._params?.height;
+		if (raw === false || raw === null) return null;
+		if (raw === true || typeof raw === 'undefined' || raw === '') {
+			const cssHeight = parseFloat(window.getComputedStyle(this._element)
+				.getPropertyValue('--vg-select-list-max-height'));
+			return Number.isFinite(cssHeight) && cssHeight > 0 ? cssHeight : DEFAULT_LIST_MAX_HEIGHT;
+		}
+
+		const height = Number(raw);
+		return Number.isFinite(height) && height > 0 ? height : DEFAULT_LIST_MAX_HEIGHT;
+	}
+
+	/**
+	 * Применяет базовое либо уменьшенное под доступное пространство ограничение.
+	 * @param {number|null} [available=null] - Доступная высота дропа
+	 * @private
+	 */
+	_applyListMaxHeight(available = null) {
+		if (!this._element) return;
+
+		const raw = this._params?.height;
+		const usesStylesheetDefault = raw === true || typeof raw === 'undefined' || raw === '';
+		if (usesStylesheetDefault) {
+			this._element.style.removeProperty('--vg-select-list-max-height');
+			if (!Number.isFinite(available)) return;
+		}
+
+		const configured = this._getListMaxHeight();
+		if (configured === null) {
+			this._element.style.setProperty('--vg-select-list-max-height', 'none');
+			return;
+		}
+
+		const availableHeight = Number.isFinite(available)
+			? Math.max(80, Math.floor(available - 12))
+			: configured;
+		const maxHeight = Math.min(configured, availableHeight);
+		this._element.style.setProperty('--vg-select-list-max-height', `${maxHeight}px`);
+	}
 
 	_getPositionMode() {
 		const raw = this._params?.position;
-		const mode = raw == null ? 'auto' : String(raw).trim().toLowerCase();
+		const mode = raw == null ? 'auto' : String(raw).trim().toLowerCase();
 		if (mode === 'auto' || mode === 'top' || mode === 'bottom' || mode === 'none') return mode;
-		return 'auto';
+		return 'auto';
 	}
 
 	_getOverflowAncestor(startEl) {
@@ -764,12 +812,8 @@ class VGSelect extends BaseModule {
 
 		const available = openUp ? spaceAbove : spaceBelow;
 
-		// Give the dropdown some breathing room (borders/margins) and clamp.
-		const listMax = Math.max(80, Math.floor(available - 12));
-		if (Number.isFinite(listMax) && listMax > 0) {
-			this._element.style.setProperty('--vg-select-list-max-height', `${listMax}px`);
-		}
-	}
+		this._applyListMaxHeight(available);
+	}
 
 	/**
 	 * Удаляет кастомный UI
@@ -777,28 +821,28 @@ class VGSelect extends BaseModule {
 	 */
 	static destroy(select) {
 		const container = select.nextElementSibling;
-		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
-			VGSelect.getInstance(container)?.dispose();
-			container.remove();
-		}
-		delete select.dataset.inited;
+		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
+			VGSelect.getInstance(container)?.dispose();
+			container.remove();
+		}
+		delete select.dataset.inited;
 	}
 
 	/**
 	 * Обновляет отображаемое значение (текст, теги)
 	 * @param {HTMLSelectElement} select - Исходный <select>
 	 */
-	static updateUI(select) {
+	static updateUI(select) {
 		const container = select.nextElementSibling;
 		if (!container || !container.classList.contains(CLASS_NAME_CONTAINER)) return;
 
 		const current = container.querySelector(SELECTOR_CURRENT);
 		const placeholder = select.dataset.placeholder || '';
 		const isMultiple = select.multiple;
-		const instance = VGSelect.getInstance(container);
-		container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(item => {
-			item.classList.toggle('selected', !!select.options[Number(item.dataset.index)]?.selected);
-		});
+		const instance = VGSelect.getInstance(container);
+		container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(item => {
+			item.classList.toggle('selected', !!select.options[Number(item.dataset.index)]?.selected);
+		});
 
 		if (isMultiple) {
 			const tags = current.querySelector(`.${CLASS_NAME_TAGS}`);
@@ -815,12 +859,12 @@ class VGSelect extends BaseModule {
 				instance?._callCallback('onClear');
 			}
 
-			if (selected.length === 0) {
-				input.placeholder = placeholder;
-				const label = document.createElement('span');
-				label.className = CLASS_NAME_PLACEHOLDER;
-				label.textContent = placeholder;
-				tags.insertBefore(label, input);
+			if (selected.length === 0) {
+				input.placeholder = placeholder;
+				const label = document.createElement('span');
+				label.className = CLASS_NAME_PLACEHOLDER;
+				label.textContent = placeholder;
+				tags.insertBefore(label, input);
 			} else {
 				input.placeholder = '';
 				selected.forEach(opt => {
@@ -1005,16 +1049,16 @@ class VGSelect extends BaseModule {
 	_initLoadMoreButton() {
 		if (!this._params.search?.pagination || !this._params.search.remote) return;
 
-		const list = this._element.querySelector(SELECTOR_LIST);
-		if (!list) return;
-		if (list.querySelector(SELECTOR_LOAD_MORE_BTN)) return;
+		const list = this._element.querySelector(SELECTOR_LIST);
+		if (!list) return;
+		if (list.querySelector(SELECTOR_LOAD_MORE_BTN)) return;
 
 		const btn = document.createElement('li');
 		btn.className = CLASS_NAME_LOAD_MORE;
 		btn.style.textAlign = 'center';
 		btn.style.padding = '8px';
 		btn.style.cursor = 'pointer';
-		btn.style.color = 'var(--vg-primary-color, #007bff)';
+		btn.style.color = 'var(--vg-primary-color, #007bff)';
 		btn.style.fontSize = '14px';
 		btn.style.fontWeight = '500';
 		btn.textContent = this._params.search.loadMoreText;
@@ -1065,10 +1109,10 @@ class VGSelect extends BaseModule {
 	 * Загружает следующую страницу данных по клику
 	 * @private
 	 */
-	async _loadNextPage() {
+	async _loadNextPage() {
 		const { route, pageParam = 'page', termParam = 'q', perpage = 20 } = this._params.search;
-		const nextPage = this._currentPage + 1;
-		const requestId = this._remoteSearchRequestId;
+		const nextPage = this._currentPage + 1;
+		const requestId = this._remoteSearchRequestId;
 
 		const url = new URL(route, window.location.origin);
 		url.searchParams.set(termParam, this._searchTerm);
@@ -1079,11 +1123,11 @@ class VGSelect extends BaseModule {
 		this._showLoading(true);
 		this._hideLoadMoreButton(true);
 
-		try {
-			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
-			if (!res.ok) throw new Error(`HTTP ${res.status}`);
-			const data = await res.json();
-			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+		try {
+			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = await res.json();
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 
 			if (Array.isArray(data.results)) {
 				VGSelect.addOptions(this._element.previousElementSibling, data, { preserve: true });
@@ -1098,16 +1142,16 @@ class VGSelect extends BaseModule {
 				this._callCallback('onLoadNext', { page: this._currentPage, data });
 				this._triggerEvent(EVENT_KEY_LOAD_NEXT, { page: this._currentPage, term: this._searchTerm });
 			}
-		} catch (err) {
-			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+		} catch (err) {
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 			console.error('VGSelect: Failed to load next page', err);
 			this._triggerEvent(EVENT_KEY_ERROR, { error: 'Pagination fetch failed', term: this._searchTerm });
 			this._hideLoadMoreButton(false); // оставить кнопку при ошибке
-		} finally {
-			if (!this._disposed && requestId === this._remoteSearchRequestId) {
-				this._showLoading(false);
-				this._loading = false;
-			}
+		} finally {
+			if (!this._disposed && requestId === this._remoteSearchRequestId) {
+				this._showLoading(false);
+				this._loading = false;
+			}
 		}
 	}
 
@@ -1129,8 +1173,8 @@ class VGSelect extends BaseModule {
 		// Обновляем текущее "желательное" состояние
 		this._searchTerm = term;
 		this._currentPage = 1;
-		this._totalPages = null;
-		this._loading = false;
+		this._totalPages = null;
+		this._loading = false;
 
 		// Отменяем предыдущий запрос (если ещё летит)
 		if (this._remoteSearchAbortController) {
@@ -1150,14 +1194,14 @@ class VGSelect extends BaseModule {
 			headers: { 'Content-Type': 'application/json' },
 			signal
 		})
-			.then(res => {
-				if (!res.ok) throw new Error(`HTTP ${res.status}`);
-				return res.json();
-			})
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.json();
+			})
 			.then(data => {
 				// Если прилетел не самый свежий ответ — игнорируем
-				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
-				if (!Array.isArray(data.results)) throw new Error('Invalid results');
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+				if (!Array.isArray(data.results)) throw new Error('Invalid results');
 
 				// Если пользователь уже ввёл другой текст — тоже игнорируем
 				const liveTerm = searchInput ? searchInput.value.trim() : '';
@@ -1206,8 +1250,8 @@ class VGSelect extends BaseModule {
 					this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_ACTIVE);
 				}
 			})
-			.catch(err => {
-				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+			.catch(err => {
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 				// Abort — нормальная ситуация при быстром вводе
 				if (err && (err.name === 'AbortError')) return;
 
@@ -1217,7 +1261,7 @@ class VGSelect extends BaseModule {
 			})
 			.finally(() => {
 				// Лоадер убираем только для последнего актуального запроса
-				if (!this._disposed && requestId === this._remoteSearchRequestId) {
+				if (!this._disposed && requestId === this._remoteSearchRequestId) {
 					this._showLoading(false);
 				}
 			});
@@ -1316,9 +1360,9 @@ class VGSelect extends BaseModule {
 
 		if (isRebuild) {
 			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop, instance?._params || {});
-			instance?._syncSearch();
-			this.updateUI(select);
+			VGSelect.buildListOptions(select, drop, instance?._params || {});
+			instance?._syncSearch();
+			this.updateUI(select);
 			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);
@@ -1330,29 +1374,29 @@ class VGSelect extends BaseModule {
 	 * @param {string} term - Поисковый запрос
 	 * @private
 	 */
-	_filterLocalOptions(term) {
-		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
-		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-		term = term.toLowerCase();
-		const search = [term, transliterate(term), transliterate(term, true)];
-		let results = 0;
-		options.forEach(el => {
-			const text = el.textContent.toLowerCase();
-			const option = this._element.previousElementSibling.options[Number(el.dataset.index)];
-			const empty = option?.value === '' && text.trim() === '';
-			const visible = !empty && (!term || search.some(value => text.includes(value)));
-			el.hidden = !visible;
-			el.style.display = visible ? '' : 'none';
-			if (visible) results++;
-		});
-		list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`).forEach(group => {
-			const visible = [...group.querySelectorAll(`.${CLASS_NAME_OPTION}`)].some(option => !option.hidden);
-			group.hidden = !visible;
-			group.style.display = visible ? '' : 'none';
-		});
-		this._triggerEvent(`${NAME_KEY}.search`, {query: term, results});
-		this._callCallback('onSearch', {query: term, results});
-	}
+	_filterLocalOptions(term) {
+		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
+		term = term.toLowerCase();
+		const search = [term, transliterate(term), transliterate(term, true)];
+		let results = 0;
+		options.forEach(el => {
+			const text = el.textContent.toLowerCase();
+			const option = this._element.previousElementSibling.options[Number(el.dataset.index)];
+			const empty = option?.value === '' && text.trim() === '';
+			const visible = !empty && (!term || search.some(value => text.includes(value)));
+			el.hidden = !visible;
+			el.style.display = visible ? '' : 'none';
+			if (visible) results++;
+		});
+		list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`).forEach(group => {
+			const visible = [...group.querySelectorAll(`.${CLASS_NAME_OPTION}`)].some(option => !option.hidden);
+			group.hidden = !visible;
+			group.style.display = visible ? '' : 'none';
+		});
+		this._triggerEvent(`${NAME_KEY}.search`, {query: term, results});
+		this._callCallback('onSearch', {query: term, results});
+	}
 }
 
 _handlersVGSelect();

package/app/modules/vgselect/readme.md

@@ -38,11 +38,11 @@
 ```js
 js import VGSelect from './app/modules/vgselect/js/vgselect';
 // Инициализация 
-VGSelect.init(document.getElementById('mySelect'), { 
-    lang: 'ru', 
-    placeholder: 'Выберите значение', 
-	autosearch: true,
-    search: {
+VGSelect.init(document.getElementById('mySelect'), { 
+    lang: 'ru', 
+    placeholder: 'Выберите значение', 
+	autosearch: true,
+    search: {
         enabled: true, 
         remote: true, 
         route: '/api/search', 
@@ -62,11 +62,11 @@ VGSelect.init(document.getElementById('mySelect'), {
 
 | Параметр | Тип | Описание |
 |--------|-----|---------|
-| `lang` | `string` | Язык интерфейса (поддерживается i18n). По умолчанию: `ru` |
-| `placeholder` | `string` | Текст плейсхолдера |
-| `autosearch` | `boolean \| number` | Автоматически включить поиск, если опций больше порога. `true` — порог 7 (по умолчанию), число — собственный порог, `false` — отключить автоматику |
-| `search.enabled` | `boolean` | Включить поле поиска вручную при любом количестве опций |
-| `search.remote` | `boolean` | Поиск через AJAX; при `true` поле поиска включается независимо от количества локальных опций |
+| `lang` | `string` | Язык интерфейса (поддерживается i18n). По умолчанию: `ru` |
+| `placeholder` | `string` | Текст плейсхолдера |
+| `autosearch` | `boolean \| number` | Автоматически включить поиск, если опций больше порога. `true` — порог 7 (по умолчанию), число — собственный порог, `false` — отключить автоматику |
+| `search.enabled` | `boolean` | Включить поле поиска вручную при любом количестве опций |
+| `search.remote` | `boolean` | Поиск через AJAX; при `true` поле поиска включается независимо от количества локальных опций |
 | `search.route` | `string` | URL для удалённого поиска |
 | `search.delay` | `number` | Задержка перед запросом (мс) |
 | `search.minTerm` | `number` | Минимальная длина запроса |
@@ -179,4 +179,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS