vgapp 0.8.8 → 0.9.0

package/CHANGELOG.md

@@ -1,9 +1,14 @@
-# VEGAS-APP 0.8.3 - 0.8.6 (Январь, 4, 2025)
+# VEGAS-APP 0.8.7 - 0.9.0 (Февраль, 10, 2026)
 * Исправлены ошибки в разных модулях
 
 ---
 
-# VEGAS-APP 0.8.2 (Январь, 4, 2025)
+# VEGAS-APP 0.8.3 - 0.8.6 (Январь, 4, 2026)
+* Исправлены ошибки в разных модулях
+
+---
+
+# VEGAS-APP 0.8.2 (Январь, 4, 2026)
 * Оптимизирован модуль VGRollup, см. файл readme.md
 * Оптимизирован модуль VGSidebar, см. файл readme.md
 * Оптимизирован модуль VGTabs, см. файл readme.md
@@ -13,7 +18,7 @@
 
 ---
 
-# VEGAS-APP 0.8.1 (Январь, 2, 2025)
+# VEGAS-APP 0.8.1 (Январь, 2, 2026)
 * Оптимизирован и дополнен модуль VGLoadMore, см. файл readme.md
 
 ---

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

@@ -54,13 +54,18 @@ const _handlersVGSelect = () => {
 		const container = option.closest(`.${CLASS_NAME_CONTAINER}`);
 		const select = container.previousElementSibling;
 		const isMultiple = select.multiple;
-		const value = option.dataset.value;
-		const realOpt = select.querySelector(`option[value="${CSS.escape(value)}"]`);
+
+		// value у option может отсутствовать/быть пустым -> работаем по индексу
+		const indexStr = option.dataset.index;
+		const idx = Number.isFinite(Number(indexStr)) ? parseInt(indexStr, 10) : NaN;
+		const realOpt = Number.isInteger(idx) ? select.options[idx] : null;
 		if (!realOpt) return;
 
 		const instance = VGSelect.getInstance(container);
 		const wasSelected = realOpt.selected;
 
+		const value = realOpt.value;
+
 		if (isMultiple) {
 			realOpt.selected = !realOpt.selected;
 			option.classList.toggle('selected', realOpt.selected);
@@ -87,7 +92,9 @@ const _handlersVGSelect = () => {
 				title: option.textContent,
 				...Manipulator.get(option)
 			});
-			instance?.hide();
+
+			const closeOnSelect = instance?._params?.close !== false;
+			if (closeOnSelect) instance?.hide();
 		}
 	});
 
@@ -171,9 +178,14 @@ const _handlersVGSelect = () => {
 		e.stopPropagation();
 		const container = this.closest(`.${CLASS_NAME_CONTAINER}`);
 		const select = container.previousElementSibling;
-		const value = btn.dataset.value;
-		const opt = select.querySelector(`option[value="${CSS.escape(value)}"]`);
-		const item = container.querySelector(`.${CLASS_NAME_OPTION}[data-value="${CSS.escape(value)}"]`);
+
+		const indexStr = btn.dataset.index;
+		const idx = Number.isFinite(Number(indexStr)) ? parseInt(indexStr, 10) : NaN;
+		const opt = Number.isInteger(idx) ? select.options[idx] : null;
+		const item = Number.isInteger(idx)
+			? container.querySelector(`.${CLASS_NAME_OPTION}[data-index="${idx}"]`)
+			: null;
+
 		const instance = VGSelect.getInstance(container);
 
 		if (opt) {
@@ -181,10 +193,10 @@ const _handlersVGSelect = () => {
 			if (item) item.classList.remove('selected');
 			VGSelect.updateUI(select);
 			select.dispatchEvent(new Event('change', { bubbles: true }));
-			EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value } });
+			EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value: opt.value } });
 
-			instance?._triggerEvent(EVENT_KEY_DESELECT, { value });
-			instance?._callCallback('onDeselect', { value });
+			instance?._triggerEvent(EVENT_KEY_DESELECT, { value: opt.value });
+			instance?._callCallback('onDeselect', { value: opt.value });
 		}
 	});
 
@@ -195,10 +207,16 @@ const _handlersVGSelect = () => {
 			const tags = tagsContainer.querySelectorAll(`.${CLASS_NAME_TAG}`);
 			if (tags.length > 0) {
 				const lastTag = tags[tags.length - 1];
-				const value = lastTag.querySelector('svg')?.dataset.value;
+				const svg = lastTag.querySelector('svg');
+				const indexStr = svg?.dataset.index;
+				const idx = Number.isFinite(Number(indexStr)) ? parseInt(indexStr, 10) : NaN;
+
 				const select = input.closest(`.${CLASS_NAME_CONTAINER}`).previousElementSibling;
-				const option = select.querySelector(`option[value="${CSS.escape(value)}"]`);
-				const listItem = select.closest(`.${CLASS_NAME_CONTAINER}`).querySelector(`.${CLASS_NAME_OPTION}[data-value="${CSS.escape(value)}"]`);
+				const option = Number.isInteger(idx) ? select.options[idx] : null;
+				const listItem = Number.isInteger(idx)
+					? input.closest(`.${CLASS_NAME_CONTAINER}`).querySelector(`.${CLASS_NAME_OPTION}[data-index="${idx}"]`)
+					: null;
+
 				const instance = VGSelect.getInstance(input.closest(`.${CLASS_NAME_CONTAINER}`));
 
 				if (option) {
@@ -206,15 +224,14 @@ const _handlersVGSelect = () => {
 					if (listItem) listItem.classList.remove('selected');
 					VGSelect.updateUI(select);
 					select.dispatchEvent(new Event('change', { bubbles: true }));
-					EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value } });
+					EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value: option.value } });
 
-					instance?._triggerEvent(EVENT_KEY_DESELECT, { value });
-					instance?._callCallback('onDeselect', { value });
+					instance?._triggerEvent(EVENT_KEY_DESELECT, { value: option.value });
+					instance?._callCallback('onDeselect', { value: option.value });
 				}
 			}
 		}
 	});
-
 }
 
 export default _handlersVGSelect;

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

@@ -80,6 +80,7 @@ class VGSelect extends BaseModule {
 				perPage: 20,
 				loadMoreText: 'Загрузить ещё',
 			},
+			close: true,
 			placeholder: '',
 			onInit: null,
 			onShow: null,
@@ -103,6 +104,9 @@ class VGSelect extends BaseModule {
 			this._params.search.loadMoreText = lang_buttons(this._params.lang, NAME)['load-more'] || 'Загрузить еще'
 		}
 
+		this._remoteSearchRequestId = 0;
+		this._remoteSearchAbortController = null;
+
 		this._initObserver();
 		this._initLoadMoreButton();
 
@@ -176,21 +180,26 @@ class VGSelect extends BaseModule {
 	static _createListItems(options, parent, selector) {
 		const frag = document.createDocumentFragment();
 		const selectedIndex = selector.selectedIndex;
+		const hasExplicitSelected = VGSelect.hasExplicitSelectedOption(selector);
 
-		[...options].forEach((option, i) => {
+		[...options].forEach((option) => {
 			if (option.hidden) return;
 
-			const value = option.value || '';
+			// value атрибута может не быть или он может быть пустым -> для маппинга используем индекс
+			const rawValueAttr = option.getAttribute('value'); // null если атрибута нет
+			const value = rawValueAttr == null ? '' : rawValueAttr;
 			const text = option.textContent.trim();
 			const isEmptyOption = value === '' && text === '';
 
 			const li = document.createElement('li');
 			li.textContent = text;
+			li.dataset.index = String(option.index);
 			li.dataset.value = value;
 			li.classList.add(CLASS_NAME_OPTION);
 			Manipulator.set(li, 'data-vg-toggle', 'select-option');
 
-			if (i === selectedIndex) {
+			// Если нет явно выбранных option — ничего не подсвечиваем при открытии списка
+			if (hasExplicitSelected && option.index === selectedIndex) {
 				li.classList.add('selected');
 			}
 
@@ -228,6 +237,15 @@ class VGSelect extends BaseModule {
 		return attr.split(',').map(v => v.trim()).includes(String(value));
 	}
 
+	/**
+	 * Есть ли в <select> явно отмеченные selected (именно атрибутом selected, а не браузерным дефолтом)
+	 * @param {HTMLSelectElement} select
+	 * @returns {boolean}
+	 */
+	static hasExplicitSelectedOption(select) {
+		return Array.from(select.options).some(opt => opt.hasAttribute('selected'));
+	}
+
 	/**
 	 * Проверяет, выбрана ли допустимая опция (не placeholder)
 	 * @param {HTMLSelectElement} select - Элемент <select>
@@ -298,7 +316,8 @@ class VGSelect extends BaseModule {
 			const index = selector.selectedIndex;
 			const option = index >= 0 ? selector.options[index] : null;
 			const text = option?.textContent.trim() || '';
-			const showPlaceholder = placeholder && !this.hasSelectedValidOption(selector);
+			const hasExplicitSelected = this.hasExplicitSelectedOption(selector);
+			const showPlaceholder = placeholder && (!hasExplicitSelected || !this.hasSelectedValidOption(selector));
 
 			current.innerHTML = showPlaceholder
 				? `<span class="${CLASS_NAME_PLACEHOLDER}">${placeholder}</span>`
@@ -568,7 +587,8 @@ class VGSelect extends BaseModule {
 				selected.forEach(opt => {
 					const tag = document.createElement('div');
 					tag.classList.add(CLASS_NAME_TAG);
-					tag.innerHTML = `<span>${opt.textContent}</span><svg class="${CLASS_NAME_TAG_REMOVE}" data-value="${opt.value}" width="14" height="14" viewBox="0 0 14 14"><line x1="2" y1="2" x2="12" y2="12" stroke="currentColor"/><line x1="12" y1="2" x2="2" y2="12" stroke="currentColor"/></svg>`;
+					// data-index — основной ключ (работает даже если у option нет value атрибута)
+					tag.innerHTML = `<span>${opt.textContent}</span><svg class="${CLASS_NAME_TAG_REMOVE}" data-index="${opt.index}" data-value="${opt.getAttribute('value') ?? ''}" width="14" height="14" viewBox="0 0 14 14"><line x1="2" y1="2" x2="12" y2="12" stroke="currentColor"/><line x1="12" y1="2" x2="2" y2="12" stroke="currentColor"/></svg>`;
 					tags.insertBefore(tag, input);
 				});
 			}
@@ -577,7 +597,9 @@ class VGSelect extends BaseModule {
 			const option = index >= 0 ? select.options[index] : null;
 			const text = option?.textContent.trim() || '';
 			const value = option?.value;
-			const showPlaceholder = placeholder && (!value || this.isPlaceholderValue(select, value) || !text);
+
+			const hasExplicitSelected = this.hasExplicitSelectedOption(select);
+			const showPlaceholder = placeholder && (!hasExplicitSelected || !value || this.isPlaceholderValue(select, value) || !text);
 
 			const oldText = current.textContent;
 			const newText = showPlaceholder ? placeholder : text || '-';
@@ -812,19 +834,38 @@ class VGSelect extends BaseModule {
 		const searchInput = this._element.querySelector(SELECTOR_SEARCH_INPUT);
 		const wasOpen = this._isShown();
 
+		// Обновляем текущее "желательное" состояние
 		this._searchTerm = term;
 		this._currentPage = 1;
 		this._totalPages = null;
 
+		// Отменяем предыдущий запрос (если ещё летит)
+		if (this._remoteSearchAbortController) {
+			this._remoteSearchAbortController.abort();
+		}
+		this._remoteSearchAbortController = new AbortController();
+
+		// Метим этот запрос как "последний"
+		const requestId = ++this._remoteSearchRequestId;
+		const signal = this._remoteSearchAbortController.signal;
+
 		this._showLoading(true);
 		this._hideLoadMoreButton(true);
 
 		fetch(url, {
 			method,
-			headers: { 'Content-Type': 'application/json' }
+			headers: { 'Content-Type': 'application/json' },
+			signal
 		})
 			.then(res => res.json())
 			.then(data => {
+				// Если прилетел не самый свежий ответ — игнорируем
+				if (requestId !== this._remoteSearchRequestId) return;
+
+				// Если пользователь уже ввёл другой текст — тоже игнорируем
+				const liveTerm = searchInput ? searchInput.value.trim() : '';
+				if (liveTerm !== term) return;
+
 				const select = this._element.previousElementSibling;
 				if (!select) return;
 
@@ -850,19 +891,25 @@ class VGSelect extends BaseModule {
 					this._hideLoadMoreButton(false);
 				}
 
+				// Важно: НЕ перетираем searchInput.value "term"-ом — это и вызывает глюк при гонках.
 				if (wasOpen && searchInput) {
-					searchInput.value = term;
 					searchInput.focus();
 					this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_ACTIVE);
 				}
 			})
 			.catch(err => {
+				// Abort — нормальная ситуация при быстром вводе
+				if (err && (err.name === 'AbortError')) return;
+
 				console.error('VGSelect: Remote search error', err);
 				this._triggerEvent(EVENT_KEY_ERROR, { error: 'Search request failed', term });
 				this._hideLoadMoreButton(false);
 			})
 			.finally(() => {
-				this._showLoading(false);
+				// Лоадер убираем только для последнего актуального запроса
+				if (requestId === this._remoteSearchRequestId) {
+					this._showLoading(false);
+				}
 			});
 	}
 

package/app/utils/js/functions.js

@@ -168,6 +168,11 @@ const MILLISECONDS_MULTIPLIER = 1000;
  * @param {number} [timeoutMs]
  */
 const executeAfterTransition = (callback, element, waitForTransition = true, timeoutMs) => {
+	if (!element) {
+		execute(callback);
+		return;
+	}
+
 	if (!waitForTransition) {
 		execute(callback);
 		return;
@@ -213,6 +218,7 @@ const getTransitionDurationFromElement = (element) => {
  * @param {Element} element
  */
 const triggerTransitionEnd = (element) => {
+	if (!element) return;
 	element.dispatchEvent(new Event(TRANSITION_END));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vgapp",
-	"version": "0.8.8",
+	"version": "0.9.0",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",