vgapp 1.4.4 → 1.4.6

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

@@ -68,17 +68,17 @@ class VGSelect extends BaseModule {
 	constructor(element, params = {}) {
 		super(element, params);
 
-		this._params = this._getParams(element, mergeDeepObject({
-			lang: document.documentElement.lang || 'ru',
-			autosearch: true,
+		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: false,
+			search: {
+				enabled: false,
 				route: '',
 				remote: false,
 				delay: 300,
@@ -103,10 +103,10 @@ class VGSelect extends BaseModule {
 			onLoadNext: null,
 		}, params));
 
-		this._observer = null;
-		this._observerTimeout = null;
-		this._visibilityTransitionId = 0;
-		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;
@@ -122,9 +122,9 @@ class VGSelect extends BaseModule {
 		this._positioningScrollParent = null;
 		this._boundUpdateDropdownPlacement = () => this._updateDropdownPlacement();
 
-		this._initObserver();
-		this._syncSearch();
-		this._initLoadMoreButton();
+		this._initObserver();
+		this._syncSearch();
+		this._initLoadMoreButton();
 
 		this._triggerEvent(EVENT_KEY_INIT);
 		this._callCallback('onInit');
@@ -278,39 +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;
-	}
+	}
+
+	/**
+	 * Определяет, нужно ли показывать поиск.
+	 * 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)
@@ -426,57 +426,57 @@ class VGSelect extends BaseModule {
 		selector.insertAdjacentElement('afterend', container);
 		selector.dataset.inited = 'true';
 
-		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);
-			}
-		});
-	}
+		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);
+			}
+		});
+	}
 
 	/**
 	 * Переключает открытие/закрытие выпадающего списка
@@ -493,16 +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;
-
-		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') {
+		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.
@@ -516,12 +516,12 @@ class VGSelect extends BaseModule {
 		const toggle = this._element.querySelector(SELECTOR_DATA_TOGGLE);
 		toggle.setAttribute('aria-expanded', 'true');
 
-		const searchInput = this._element.querySelector(SELECTOR_SEARCH_INPUT);
-		if (searchInput) searchInput.focus();
-
-		return this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId || !this._isShown()) return;
-			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');
@@ -542,18 +542,18 @@ class VGSelect extends BaseModule {
 	 * @private
 	 */
 	_completeHide(relatedTarget = {}) {
-		const e = EventHandler.trigger(this._element, EVENT_KEY_HIDE, relatedTarget);
-		if (e.defaultPrevented) return;
-
-		const transitionId = ++this._visibilityTransitionId;
-		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(() => {
-			if (transitionId !== this._visibilityTransitionId) return;
-			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');
@@ -637,18 +637,18 @@ class VGSelect extends BaseModule {
 			this._element.classList.remove('disabled');
 		}
 
-		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
-		VGSelect.buildListOptions(select, drop, this._params);
-		this._syncSearch();
-		VGSelect.updateUI(select);
+		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
+		VGSelect.buildListOptions(select, drop, this._params);
+		this._syncSearch();
+		VGSelect.updateUI(select);
 	}
 
 	/**
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
-	dispose() {
-		this._visibilityTransitionId++;
-		if (this._observer) {
+	dispose() {
+		this._visibilityTransitionId++;
+		if (this._observer) {
 			this._observer.disconnect();
 			this._observer = null;
 		}
@@ -1279,11 +1279,11 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		if (isRebuild) {
-			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop, instance?._params || {});
-			instance?._syncSearch();
-			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,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

package/app/modules/vgselect/scss/_variables.scss

@@ -1,11 +1,11 @@
-@use "../../../utils/scss" as vg;
-
-$select-current-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
+@use "../../../utils/scss" as vg;
+
+$select-current-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
 		border-radius: 5px,
 		padding-left: 16px,
 		padding-right: 40px,
@@ -16,69 +16,69 @@ $select-current-map: (
 		z-index: 10,
 ) !default;
 
-$select-placeholder-map: (
-		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
-		placehoder-font-size: 16px,
-) !default;
+$select-placeholder-map: (
+		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
+		placehoder-font-size: 16px,
+) !default;
 
 $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
 
-$select-dropdown-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
-		border-radius: vg.$border-radius,
-		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
+$select-dropdown-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
+		border-radius: vg.$border-radius,
+		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
 		z-index: 15,
 ) !default;
 
-$select-list-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-list-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-optgroup-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-strong-color, #838383),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-strong-color, #838383),
 		font-weight: 500,
 ) !default;
 
 $select-list-max-height: 286px !default;
 $select-list-scrollbar-width: 6px !default;
-$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
-$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
+$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
+$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
 
-$select-list-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-list-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-optgroup-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-search-map: (
-		background-color: var(--vg-control-muted-bg, #f2f2f2),
-		color: var(--vg-text-color, #{vg.$color})
+$select-search-map: (
+		background-color: var(--vg-control-muted-bg, #f2f2f2),
+		color: var(--vg-text-color, #{vg.$color})
 ) !default;
 
 $select-tags-map: (
@@ -88,15 +88,15 @@ $select-tags-map: (
 		padding: 2px 0
 ) !default;
 
-$select-tag-map: (
-		gap: 4px,
-		background: var(--vg-primary-color, #0d6efd),
-		color: var(--vg-primary-contrast-color, #ffffff),
+$select-tag-map: (
+		gap: 4px,
+		background: var(--vg-primary-color, #0d6efd),
+		color: var(--vg-primary-contrast-color, #ffffff),
 		padding: 2px 6px,
 		border-radius: 4px,
 		font-size: 14px,
 		remove-width: 12px,
 		remove-height: 12px,
-		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
+		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
 		remove-stroke-width: 2
 ) !default;