vgapp 1.4.0 → 1.4.2

package/app/modules/vgnestable/scss/vgnestable.scss

@@ -39,7 +39,7 @@
 		}
 	}
 
-	&-item {
+	&-item {
 		margin: var(--vg-nestable-item-margin);
 		position: relative;
 		transition: var(--vg-nestable-item-transition);
@@ -48,10 +48,43 @@
 			opacity: var(--vg-nestable-item-dragging-opacity);
 		}
 
-		&.is-drag-ghost {
-			opacity: var(--vg-nestable-item-ghost-opacity);
-		}
-	}
+		&.is-drag-ghost {
+			opacity: var(--vg-nestable-item-ghost-opacity);
+		}
+
+		&.is-drop-before > .vg-nestable-inner {
+			box-shadow: inset 0 3px 0 var(--vg-nestable-item-drop-line);
+		}
+
+		&.is-drop-after > .vg-nestable-inner {
+			box-shadow: inset 0 -3px 0 var(--vg-nestable-item-drop-line);
+		}
+
+		&.is-drop-attachable > .vg-nestable-inner {
+			outline: var(--vg-nestable-item-drop-attachable-outline);
+			outline-offset: 2px;
+		}
+
+		&.is-drop-inside > .vg-nestable-inner {
+			border-color: var(--vg-nestable-item-drop-inside-border);
+			background: var(--vg-nestable-item-drop-inside-bg);
+			box-shadow: 0 0 0 3px var(--vg-nestable-item-drop-inside-bg);
+		}
+
+		&.is-drop-denied > .vg-nestable-inner {
+			border-color: var(--vg-nestable-item-drop-denied);
+			box-shadow: 0 0 0 2px rgba(220, 53, 69, .12);
+		}
+
+		&.is-drag-disabled > .vg-nestable-inner {
+			background: var(--vg-nestable-item-disabled-bg);
+		}
+
+		&.is-drag-disabled > .vg-nestable-inner > .vg-nestable-handle {
+			color: var(--vg-nestable-item-disabled-handle-color);
+			cursor: not-allowed;
+		}
+	}
 
 	&-inner {
 		display: flex;
@@ -75,8 +108,9 @@
 		border: var(--vg-nestable-handle-border);
 		background: var(--vg-nestable-handle-bg);
 		border-radius: var(--vg-nestable-handle-border-radius);
-		cursor: var(--vg-nestable-handle-cursor);
-		user-select: none;
+		cursor: var(--vg-nestable-handle-cursor);
+		user-select: none;
+		touch-action: none;
 
 		&:active {
 			cursor: var(--vg-nestable-handle-active-cursor);
@@ -155,9 +189,13 @@
 		height: 0 !important;
 	}
 
-	&-drag-element {
-		opacity: var(--vg-nestable-drag-element-opacity);
-		transform: var(--vg-nestable-drag-element-transform);
-		box-shadow: var(--vg-nestable-drag-element-shadow);
-	}
-}
+	&-item.is-drag-ghost#{&}-drag-element {
+		opacity: var(--vg-nestable-drag-element-opacity);
+		transform: var(--vg-nestable-drag-element-transform);
+		box-shadow: var(--vg-nestable-drag-element-shadow);
+
+		> .vg-nestable-inner {
+			background: var(--vg-nestable-inner-bg);
+		}
+	}
+}

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

@@ -68,16 +68,17 @@ class VGSelect extends BaseModule {
 	constructor(element, params = {}) {
 		super(element, params);
 
-		this._params = this._getParams(element, mergeDeepObject({
-			lang: document.documentElement.lang || 'ru',
+		this._params = this._getParams(element, mergeDeepObject({
+			lang: document.documentElement.lang || 'ru',
+			autosearch: true,
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
 			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
 			// - top: force open upwards
 			// - bottom: force open downwards
 			position: 'none',
-			search: {
-				enabled: true,
+			search: {
+				enabled: false,
 				route: '',
 				remote: false,
 				delay: 300,
@@ -102,9 +103,10 @@ class VGSelect extends BaseModule {
 			onLoadNext: null,
 		}, params));
 
-		this._observer = null;
-		this._observerTimeout = null;
-		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._observer = null;
+		this._observerTimeout = null;
+		this._visibilityTransitionId = 0;
+		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
 		this._searchTerm = '';
 		this._currentPage = 1;
 		this._totalPages = null;
@@ -120,8 +122,9 @@ class VGSelect extends BaseModule {
 		this._positioningScrollParent = null;
 		this._boundUpdateDropdownPlacement = () => this._updateDropdownPlacement();
 
-		this._initObserver();
-		this._initLoadMoreButton();
+		this._initObserver();
+		this._syncSearch();
+		this._initLoadMoreButton();
 
 		this._triggerEvent(EVENT_KEY_INIT);
 		this._callCallback('onInit');
@@ -275,12 +278,39 @@ class VGSelect extends BaseModule {
 		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
 	}
 
-	static _normalizeDataAttrKey(value) {
+	static _normalizeDataAttrKey(value) {
 		return String(value || '')
 			.trim()
 			.replace(/^data-/, '')
 			.toLowerCase();
-	}
+	}
+
+	/**
+	 * Определяет, нужно ли показывать поиск.
+	 * search.enabled и search.remote включают его при любом количестве опций.
+	 * autosearch: true использует порог 7, число задаёт собственный порог.
+	 * @param {HTMLSelectElement} selector
+	 * @param {Object} params
+	 * @returns {boolean}
+	 * @private
+	 */
+	static _isSearchEnabled(selector, params = {}) {
+		if (params.search?.enabled === true || params.search?.remote === true) return true;
+
+		const autosearch = params.autosearch;
+		if (autosearch === false) return false;
+
+		const numericThreshold = Number(autosearch);
+		const threshold = autosearch !== true && Number.isFinite(numericThreshold) && numericThreshold >= 0
+			? numericThreshold
+			: 7;
+		const optionCount = Array.from(selector?.options || []).filter(option => {
+			if (option.hidden) return false;
+			return option.value !== '' || option.textContent.trim() !== '';
+		}).length;
+
+		return optionCount > threshold;
+	}
 
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
@@ -396,48 +426,57 @@ class VGSelect extends BaseModule {
 		selector.insertAdjacentElement('afterend', container);
 		selector.dataset.inited = 'true';
 
-		this.getOrCreateInstance(container, params);
-		this.updateUI(selector);
-		const instance = VGSelect.getInstance(container);
-
-		let searchInput = null;
-		if (Manipulator.has(selector, 'data-search-enabled')) {
-			const search = document.createElement('div');
-			search.classList.add(CLASS_NAME_SEARCH);
-			searchInput = document.createElement('input');
-			searchInput.name = 'vg-select-search';
-			searchInput.type = 'text';
-			searchInput.placeholder = lang_titles(instance._params.lang, NAME)['search'];
-			searchInput.autocomplete = 'off';
-			searchInput.setAttribute('role', 'searchbox');
-			search.appendChild(searchInput);
-			dropdown.insertBefore(search, dropdown.firstChild);
-		}
-
-		if (searchInput && instance) {
-			let searchTimeout;
-
-			searchInput.addEventListener('input', (e) => {
-				const term = e.target.value.trim();
-				const params = instance._params;
-
-				instance._callCallback('onSearch', { term });
-
-				if (params.search.remote && params.search.route) {
-					if (term.length < (params.search.minterm || 1)) return;
-
-					clearTimeout(searchTimeout);
-					searchTimeout = setTimeout(() => {
-						instance._fetchRemoteData(term);
-					}, params.search.delay || 300);
-				} else {
-					instance._filterLocalOptions(term);
-				}
-			});
-		}
-
-		return container;
-	}
+		this.getOrCreateInstance(container, params);
+		this.updateUI(selector);
+
+		return container;
+	}
+
+	/**
+	 * Добавляет или убирает поле поиска согласно search.enabled/autosearch.
+	 * @private
+	 */
+	_syncSearch() {
+		const selector = this._element.previousElementSibling;
+		if (!selector || selector.tagName !== 'SELECT' || !this._drop) return;
+
+		const enabled = VGSelect._isSearchEnabled(selector, this._params);
+		const currentSearch = this._drop.querySelector(`.${CLASS_NAME_SEARCH}`);
+		if (!enabled) {
+			currentSearch?.remove();
+			return;
+		}
+		if (currentSearch) return;
+
+		const search = document.createElement('div');
+		search.classList.add(CLASS_NAME_SEARCH);
+		const searchInput = document.createElement('input');
+		searchInput.name = 'vg-select-search';
+		searchInput.type = 'text';
+		searchInput.placeholder = lang_titles(this._params.lang, NAME)['search'];
+		searchInput.autocomplete = 'off';
+		searchInput.setAttribute('role', 'searchbox');
+		search.appendChild(searchInput);
+		this._drop.insertBefore(search, this._drop.firstChild);
+
+		let searchTimeout;
+		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) {
+				if (term.length < (params.search.minterm || 1)) return;
+
+				clearTimeout(searchTimeout);
+				searchTimeout = setTimeout(() => {
+					this._fetchRemoteData(term);
+				}, params.search.delay || 300);
+			} else {
+				this._filterLocalOptions(term);
+			}
+		});
+	}
 
 	/**
 	 * Переключает открытие/закрытие выпадающего списка
@@ -454,11 +493,16 @@ class VGSelect extends BaseModule {
 	show(relatedTarget) {
 		if (isDisabled(this._element)) return;
 
-		const e = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
-		if (e.defaultPrevented) return;
-
-		this._element.classList.add(CLASS_NAME_SHOW);
-		if (this._getPositionMode() !== 'none') {
+		const e = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
+		if (e.defaultPrevented) return;
+
+		const transitionId = ++this._visibilityTransitionId;
+		this._element.classList.add(CLASS_NAME_SHOW);
+		// active задаёт видимое состояние dropdown (opacity/height). Оно не должно
+		// зависеть от таймера: под нагрузкой отложенный callback оставлял уже
+		// открытый dropdown прозрачным и с height: 0.
+		this._element.classList.add(CLASS_NAME_ACTIVE);
+		if (this._getPositionMode() !== 'none') {
 			this._setupDropdownPlacement();
 		} else {
 			// Ensure no leftovers if the instance had JS positioning before.
@@ -472,14 +516,12 @@ class VGSelect extends BaseModule {
 		const toggle = this._element.querySelector(SELECTOR_DATA_TOGGLE);
 		toggle.setAttribute('aria-expanded', 'true');
 
-		if (this._params.search?.enabled) {
-			const input = this._element.querySelector(SELECTOR_SEARCH_INPUT);
-			if (input) input.focus();
-		}
-
-		return this._queueCallback(() => {
-			this._element.classList.add(CLASS_NAME_ACTIVE);
-			this._updateDropdownPlacement();
+		const searchInput = this._element.querySelector(SELECTOR_SEARCH_INPUT);
+		if (searchInput) searchInput.focus();
+
+		return this._queueCallback(() => {
+			if (transitionId !== this._visibilityTransitionId || !this._isShown()) return;
+			this._updateDropdownPlacement();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 			this._triggerEvent(EVENT_KEY_OPEN);
 			this._callCallback('onShow');
@@ -500,16 +542,18 @@ class VGSelect extends BaseModule {
 	 * @private
 	 */
 	_completeHide(relatedTarget = {}) {
-		const e = EventHandler.trigger(this._element, EVENT_KEY_HIDE, relatedTarget);
-		if (e.defaultPrevented) return;
-
-		this._teardownDropdownPlacement();
+		const e = EventHandler.trigger(this._element, EVENT_KEY_HIDE, relatedTarget);
+		if (e.defaultPrevented) return;
+
+		const transitionId = ++this._visibilityTransitionId;
+		this._teardownDropdownPlacement();
 
 		this._element.classList.remove(CLASS_NAME_ACTIVE);
 		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
-
-		this._queueCallback(() => {
-			this._element.classList.remove(CLASS_NAME_SHOW);
+
+		this._queueCallback(() => {
+			if (transitionId !== this._visibilityTransitionId) return;
+			this._element.classList.remove(CLASS_NAME_SHOW);
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
 			this._triggerEvent(EVENT_KEY_CLOSE);
 			this._callCallback('onHide');
@@ -593,16 +637,18 @@ class VGSelect extends BaseModule {
 			this._element.classList.remove('disabled');
 		}
 
-		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
-		VGSelect.buildListOptions(select, drop, this._params);
-		VGSelect.updateUI(select);
+		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
+		VGSelect.buildListOptions(select, drop, this._params);
+		this._syncSearch();
+		VGSelect.updateUI(select);
 	}
 
 	/**
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
-	dispose() {
-		if (this._observer) {
+	dispose() {
+		this._visibilityTransitionId++;
+		if (this._observer) {
 			this._observer.disconnect();
 			this._observer = null;
 		}
@@ -1233,10 +1279,11 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		if (isRebuild) {
-			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop, instance?._params || {});
-			instance?._triggerEvent(EVENT_KEY_REBUILD);
+		if (isRebuild) {
+			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
+			VGSelect.buildListOptions(select, drop, instance?._params || {});
+			instance?._syncSearch();
+			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);
 		}

package/app/modules/vgselect/readme.md

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

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -19,7 +19,10 @@ const NAME_KEY = 'vg.sidebar';
 /**
  * @constant {string} SELECTOR_DATA_TOGGLE - Селектор для элементов активации сайдбара.
  */
-const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="sidebar"]';
+const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="sidebar"]';
+const OPEN_SELECTOR = '.vg-sidebar.show';
+const BACKDROP_OWNER_ATTR = 'data-vg-backdrop-owner';
+const BACKDROP_OWNER_VALUE = 'sidebar';
 
 /**
  * @constant {string} CLASS_NAME_SHOW - Класс, отвечающий за отображение сайдбара.
@@ -104,8 +107,9 @@ class VGSidebar extends BaseModule {
 			}
 		}, params));
 
-		this._scrollBar = new ScrollBarHelper();
-		this._params.animation.delay = this._params.animation.enable ? this._params.animation.delay : 0;
+		this._scrollBar = new ScrollBarHelper();
+		this._backdropElement = null;
+		this._params.animation.delay = this._params.animation.enable ? this._params.animation.delay : 0;
 
 		this._addEventListeners();
 		this._dismissElement();
@@ -124,9 +128,18 @@ class VGSidebar extends BaseModule {
 	 * Статическое свойство: ключ для событий и данных.
 	 * @returns {string}
 	 */
-	static get NAME_KEY() {
-		return NAME_KEY;
-	}
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	static getOpenSidebars(excludeElement = null) {
+		return Selectors.findAll(OPEN_SELECTOR).filter(sidebar => sidebar !== excludeElement);
+	}
+
+	static getBackdropElement() {
+		const sidebarBackdrops = Selectors.findAll(`.vg-backdrop[${BACKDROP_OWNER_ATTR}="${BACKDROP_OWNER_VALUE}"]`);
+		return sidebarBackdrops.length ? sidebarBackdrops[sidebarBackdrops.length - 1] : null;
+	}
 
 	/**
 	 * Переключает состояние сайдбара (открыть/закрыть).
@@ -145,8 +158,8 @@ class VGSidebar extends BaseModule {
 	 * @param {HTMLElement} [relatedTarget] - Элемент, инициировавший открытие.
 	 * @returns {void}
 	 */
-	show(relatedTarget) {
-		if (isDisabled(this._element)) return;
+	show(relatedTarget) {
+		if (isDisabled(this._element) || this._isShown()) return;
 
 		if (relatedTarget) {
 			this._params = this._getParams(relatedTarget, this._params);
@@ -159,13 +172,33 @@ class VGSidebar extends BaseModule {
 		const showEvent = EventHandler.trigger(this._element, EVENT_KEYS.SHOW, { relatedTarget });
 		if (showEvent.defaultPrevented) return;
 
-		if (this._params.backdrop) {
-			Backdrop.show();
-		}
-
-		if (this._params.overflow) {
-			this._scrollBar.hide();
-		}
+		const alreadyOpenSidebars = VGSidebar.getOpenSidebars(this._element);
+		const hasOpenSidebar = alreadyOpenSidebars.length > 0;
+		let currentBackdrop = null;
+		if (this._params.backdrop) {
+			if (hasOpenSidebar) {
+				currentBackdrop = VGSidebar.getBackdropElement();
+				if (currentBackdrop) {
+					this._backdropElement = currentBackdrop;
+				} else {
+					Backdrop.show((backdrop) => {
+						currentBackdrop = backdrop;
+						this._backdropElement = backdrop;
+						backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
+					});
+				}
+			} else {
+				Backdrop.show((backdrop) => {
+					currentBackdrop = backdrop;
+					this._backdropElement = backdrop;
+					backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
+				});
+			}
+		}
+
+		if (this._params.overflow && !hasOpenSidebar) {
+			this._scrollBar.hide();
+		}
 
 		if (this._params.hash) {
 			history.pushState(null, '', `#${this._element.id}`);
@@ -179,13 +212,13 @@ class VGSidebar extends BaseModule {
 		}
 
 		this._element.classList.add(CLASS_NAME_SHOW);
-		document.body.classList.add(CLASS_NAME_OPEN);
-
-		const completeCallback = () => {
-			const backdrop = Selectors.find('.vg-backdrop');
-			if (backdrop) {
-				EventHandler.on(backdrop, 'mousedown.vg.backdrop', () => this.hide());
-			}
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		const completeCallback = () => {
+			const backdrop = this._params.backdrop ? (currentBackdrop || VGSidebar.getBackdropElement()) : null;
+			if (backdrop) {
+				EventHandler.on(backdrop, 'mousedown.vg.backdrop', () => this.hide());
+			}
 			EventHandler.trigger(this._element, EVENT_KEYS.SHOWN, { relatedTarget });
 		};
 
@@ -198,29 +231,37 @@ class VGSidebar extends BaseModule {
 	 * @param {boolean} [isLeaveBackDrop=false] - Не убирать подложку.
 	 * @returns {void}
 	 */
-	hide(isLeaveBackDrop = false) {
-		if (isDisabled(this._element)) return;
+	hide(isLeaveBackDrop = false) {
+		if (isDisabled(this._element) || !this._isShown()) return;
 
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		document.body.classList.remove(CLASS_NAME_OPEN);
-		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
+		if (!remainingOpenSidebars.length) {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+		}
 
 		setTimeout(() => {
 			this._element.setAttribute('aria-expanded', 'false');
 
 			const completeCallback = () => {
-				if (!isLeaveBackDrop) {
-					if (this._params.backdrop) {
-						Backdrop.hide(() => {
-							if (this._params.overflow) {
-								this._scrollBar.reset();
-							}
-						});
-					} else if (this._params.overflow) {
-						this._scrollBar.reset();
-					}
+				if (!isLeaveBackDrop) {
+					if (this._params.backdrop && !remainingOpenSidebars.length) {
+						Backdrop.hide(() => {
+							this._backdropElement = null;
+							if (this._params.overflow && !Backdrop.isActive()) {
+								this._scrollBar.reset();
+							}
+						}, this._backdropElement || VGSidebar.getBackdropElement());
+					} else if (this._params.backdrop) {
+						this._backdropElement = null;
+					} else if (this._params.overflow) {
+						if (!remainingOpenSidebars.length && !Backdrop.isActive()) {
+							this._scrollBar.reset();
+						}
+					}
 
 					if (this._params.hash && window.location.hash === `#${this._element.id}`) {
 						history.replaceState(
@@ -305,13 +346,7 @@ EventHandler.on(document, EVENT_KEYS.CLICK_DATA_API, SELECTOR_DATA_TOGGLE, funct
 		this.setAttribute('aria-expanded', 'false');
 	});
 
-	// Закрываем уже открытый сайдбар
-	const alreadyOpen = Selectors.find('.vg-sidebar.show');
-	if (alreadyOpen && alreadyOpen !== target) {
-		VGSidebar.getInstance(alreadyOpen).hide();
-	}
-
-	const instance = VGSidebar.getOrCreateInstance(target);
+	const instance = VGSidebar.getOrCreateInstance(target);
 	instance.toggle(this);
 });
 
@@ -332,4 +367,4 @@ EventHandler.on(document, EVENT_KEYS.DOM_LOADED_DATA_API, function () {
 	}
 });
 
-export default VGSidebar;
+export default VGSidebar;