vgapp 0.8.1 → 0.8.2

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

@@ -1,19 +1,16 @@
 import BaseModule from "../../base-module";
 import {
 	isDisabled,
-	isEmptyObj, isObject, isVisible,
+	isEmptyObj,
 	mergeDeepObject,
-	noop,
 	normalizeData,
-	transliterate
 } from "../../../utils/js/functions";
-import {Manipulator} from "../../../utils/js/dom/manipulator";
+import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
+import _handlersVGSelect from "./handlers";
+import {lang_buttons, lang_messages, lang_titles} from "../../../utils/js/components/lang";
 
-/**
- * Constants
- */
 const NAME = 'select';
 const NAME_KEY = 'vg.select';
 
@@ -28,468 +25,956 @@ const CLASS_NAME_OPTGROUP_TITLE = 'vg-select-list--optgroup-title';
 const CLASS_NAME_CURRENT        = 'vg-select-current';
 const CLASS_NAME_PLACEHOLDER    = 'vg-select-current--placeholder';
 const CLASS_NAME_SEARCH         = 'vg-select-search';
+const CLASS_NAME_TAGS           = 'vg-select-tags';
+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 EVENT_CLICK_DATA_API      = `click.${NAME_KEY}.data.api`;
-const EVENT_KEY_UP_DATA_API     = `keyup.${NAME_KEY}.data.api`;
-const EVENT_RESET_DATA_API      = `reset.${NAME_KEY}.data.api`;
 const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
 const EVENT_KEY_HIDE            = `${NAME_KEY}.hide`;
 const EVENT_KEY_HIDDEN          = `${NAME_KEY}.hidden`;
 const EVENT_KEY_SHOW            = `${NAME_KEY}.show`;
 const EVENT_KEY_SHOWN           = `${NAME_KEY}.shown`;
+const EVENT_KEY_INIT            = `${NAME_KEY}.init`;
+const EVENT_KEY_REBUILD         = `${NAME_KEY}.rebuild`;
+const EVENT_KEY_OPEN            = `${NAME_KEY}.open`;
+const EVENT_KEY_CLOSE           = `${NAME_KEY}.close`;
+const EVENT_KEY_SELECT          = `${NAME_KEY}.select`;
+const EVENT_KEY_CLEAR           = `${NAME_KEY}.clear`;
+const EVENT_KEY_ERROR           = `${NAME_KEY}.error`;
+const EVENT_KEY_LOAD_NEXT       = `${NAME_KEY}.loadNext`;
+
+const SELECTOR_DATA_TOGGLE      = '[data-vg-toggle="select"]';
+const SELECTOR_CURRENT          = `.${CLASS_NAME_CURRENT}`;
+const SELECTOR_DROPDOWN         = `.${CLASS_NAME_DROPDOWN}`;
+const SELECTOR_SEARCH_INPUT     = `.${CLASS_NAME_SEARCH} input`;
+const SELECTOR_LIST             = `.${CLASS_NAME_LIST}`;
+const SELECTOR_LOAD_MORE_BTN    = `.${CLASS_NAME_LOAD_MORE}`;
 
-const SELECTOR_DATA_TOGGLE    = '[data-vg-toggle="select"]';
-const SELECTOR_OPTION_TOGGLE  = '[data-vg-toggle="select-option"]';
-const SELECTOR_SEARCH_TOGGLE  = '[name=vg-select-search]';
-
-
-let observerTimout;
-
+/**
+ * Класс VGSelect
+ * Кастомный <select> с поддержкой поиска, мультивыбора, динамической загрузки, i18n, пагинации и обновления через MutationObserver.
+ * @extends BaseModule
+ */
 class VGSelect extends BaseModule {
+	/**
+	 * Создаёт экземпляр VGSelect
+	 * @param {HTMLSelectElement} element - Исходный <select> элемент
+	 * @param {Object} [params] - Параметры инициализации
+	 */
 	constructor(element, params = {}) {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
-			search: false,
+			lang: document.documentElement.lang || 'ru',
+			search: {
+				enabled: true,
+				route: '',
+				remote: false,
+				delay: 300,
+				minTerm: 1,
+				pagination: false,
+				pageParam: 'page',
+				termParam: 'q',
+				perPage: 20,
+				loadMoreText: 'Загрузить ещё',
+			},
 			placeholder: '',
+			onInit: null,
+			onShow: null,
+			onHide: null,
+			onChange: null,
+			onSelect: null,
+			onDeselect: null,
+			onClear: null,
+			onLoadNext: null,
 		}, params));
 
-		this._drop = Selectors.find('.' + CLASS_NAME_DROPDOWN, this._element);
-		this.refresh();
+		this._observer = null;
+		this._observerTimeout = null;
+		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._searchTerm = '';
+		this._currentPage = 1;
+		this._totalPages = null;
+		this._loading = false;
+
+		if (typeof params.search === 'object') {
+			this._params.search.loadMoreText = lang_buttons(this._params.lang, NAME)['load-more'] || 'Загрузить еще'
+		}
+
+		this._initObserver();
+		this._initLoadMoreButton();
+
+		this._triggerEvent(EVENT_KEY_INIT);
+		this._callCallback('onInit');
 	}
 
+	/**
+	 * Возвращает имя компонента
+	 * @returns {string}
+	 */
 	static get NAME() {
 		return NAME;
 	}
 
+	/**
+	 * Возвращает ключ события компонента
+	 * @returns {string}
+	 */
 	static get NAME_KEY() {
 		return NAME_KEY;
 	}
 
-	static buildListOptions(selector, drop, isPlaceholder) {
-		let options = selector.options,
+	/**
+	 * Перестраивает список опций в выпадающем меню
+	 * @param {HTMLSelectElement} selector - Исходный <select>
+	 * @param {HTMLElement} drop - Контейнер выпадающего списка
+	 * @returns {HTMLElement} - Обновлённый список
+	 */
+	static buildListOptions(selector, drop) {
+		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		if (!list) {
 			list = document.createElement('ul');
-
-		if (isPlaceholder) {
-			let isSelectedOption = [...options].filter(el => Manipulator.has(el, 'selected')).length > 0;
-
-			if (!isSelectedOption) {
-				let option = document.createElement('option');
-				Manipulator.set(option, 'hidden', '');
-				Manipulator.set(option, 'selected', '');
-				options.add(option, 0)
-			}
+			Classes.add(list, CLASS_NAME_LIST);
+			drop.appendChild(list);
+		} else {
+			list.innerHTML = '';
 		}
 
+		const optGroups = Selectors.findAll('optgroup', selector);
+		const fragment = document.createDocumentFragment();
 
-		list.classList.add(CLASS_NAME_LIST);
-
-		let optGroup = selector.querySelectorAll('optgroup');
-
-		if (optGroup.length) {
-			let isSelected = false;
-			[...optGroup].forEach(function (el) {
-				let olOptGroup = document.createElement('ol');
-				olOptGroup.classList.add(CLASS_NAME_OPTGROUP);
-
-				let liLabel = document.createElement('li');
-				liLabel.innerHTML = el.label.trim();
-				liLabel.classList.add(CLASS_NAME_OPTGROUP_TITLE)
-
-				olOptGroup.prepend(liLabel)
+		if (optGroups.length > 0) {
+			optGroups.forEach(optGroup => {
+				const ol = document.createElement('ol');
+				Classes.add(ol, CLASS_NAME_OPTGROUP);
 
-				let optGroupOptions = Selectors.findAll('option', el);
+				const label = document.createElement('li');
+				label.textContent = optGroup.label.trim();
+				Classes.add(label, CLASS_NAME_OPTGROUP_TITLE);
+				ol.appendChild(label);
 
-				createLi(optGroupOptions, olOptGroup, isSelected);
-
-				list.append(olOptGroup);
-				isSelected = true;
+				VGSelect._createListItems(Selectors.findAll('option', optGroup), ol, selector);
+				fragment.appendChild(ol);
 			});
+			list.appendChild(fragment);
 		} else {
-			let isSelected = false;
-			createLi(options, list, isSelected);
+			VGSelect._createListItems(selector.options, list, selector);
 		}
 
-		drop.append(list);
-
 		return list;
+	}
 
-		function createLi(options, list, isSelected) {
-			let i = 0;
-			for (const option of options) {
-				let li = document.createElement('li');
+	/**
+	 * Создаёт <li> элементы из списка <option>
+	 * @param {HTMLCollection|NodeList} options - Коллекция <option>
+	 * @param {HTMLElement} parent - Родительский контейнер (ul/ol)
+	 * @param {HTMLSelectElement} selector - Исходный <select>
+	 * @private
+	 */
+	static _createListItems(options, parent, selector) {
+		const frag = document.createDocumentFragment();
+		const selectedIndex = selector.selectedIndex;
 
-				li.innerHTML = option.innerHTML.trim().replace(/<\/[^>]+(>|$)/g, "")
-				li.dataset.value = Manipulator.get(option, 'value');
-				li.classList.add(CLASS_NAME_OPTION);
+		[...options].forEach((option, i) => {
+			if (option.hidden) return;
 
-				Manipulator.set(li, 'data-vg-toggle', 'select-option');
+			const value = option.value || '';
+			const text = option.textContent.trim();
+			const isEmptyOption = value === '' && text === '';
 
-				let liData = Manipulator.get(option);
-				if (!isEmptyObj(liData)) {
-					for (const key of Object.keys(liData)) {
-						Manipulator.set(li, 'data-' + key, liData[key]);
-					}
-				}
+			const li = document.createElement('li');
+			li.textContent = text;
+			li.dataset.value = value;
+			li.classList.add(CLASS_NAME_OPTION);
+			Manipulator.set(li, 'data-vg-toggle', 'select-option');
 
-				if (i === selector.selectedIndex && !isSelected) {
-					li.classList.add('selected');
-				}
+			if (i === selectedIndex) {
+				li.classList.add('selected');
+			}
 
-				if (Manipulator.has(option, 'disabled')) li.classList.add('disabled');
-				if (Manipulator.has(option, 'hidden')) li.classList.add('hidden');
+			if (option.disabled) {
+				li.classList.add('disabled');
+			}
 
-				list.append(li);
+			if (isEmptyOption) {
+				li.hidden = true;
+				li.style.display = 'none';
+			}
 
-				i++;
+			const dataAttrs = Manipulator.get(option);
+			if (!isEmptyObj(dataAttrs)) {
+				Object.keys(dataAttrs).forEach(key => {
+					Manipulator.set(li, `data-${key}`, dataAttrs[key]);
+				});
 			}
-		}
+
+			frag.appendChild(li);
+		});
+
+		parent.appendChild(frag);
 	}
 
-	static build(selector, reBuild = false) {
-		let option_selected,
-			placeholder = selector.dataset.placeholder || '',
-			isPlaceholder = !!placeholder,
-			isSearch = selector.dataset.search || false;
+	/**
+	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
+	 * @param {HTMLSelectElement} select - Элемент <select>
+	 * @param {string} value - Значение для проверки
+	 * @returns {boolean}
+	 */
+	static isPlaceholderValue(select, value) {
+		const attr = select.dataset.placeholderValue;
+		if (!attr) return value == null || String(value).trim() === '';
+		return attr.split(',').map(v => v.trim()).includes(String(value));
+	}
 
-		if (selector.dataset?.inited === 'true' || reBuild) {
-			VGSelect.destroy(selector);
-		}
+	/**
+	 * Проверяет, выбрана ли допустимая опция (не placeholder)
+	 * @param {HTMLSelectElement} select - Элемент <select>
+	 * @returns {boolean}
+	 */
+	static hasSelectedValidOption(select) {
+		const index = select.selectedIndex;
+		if (index === -1) return false;
+		return !this.isPlaceholderValue(select, select.options[index]?.value);
+	}
 
-		selector.parentElement.style.position = 'relative';
-
-		let isSelectedOption = [... selector.options].filter(el => {
-			return Manipulator.has(el, 'selected') && el.value !== ''
-		}).length > 0;
-
-		if (isPlaceholder && selector.selectedIndex === -1) {
-			option_selected = '<span class="' + CLASS_NAME_PLACEHOLDER + '">' + placeholder + '<span>';
-			Manipulator.set(selector, 'disabled', '');
-		} else if (!isPlaceholder && selector.selectedIndex === -1) {
-			option_selected = '<span class="' + CLASS_NAME_PLACEHOLDER + '">-<span>';
-			Manipulator.set(selector, 'disabled', '');
-		} else if (isPlaceholder) {
-			if (isPlaceholder && isSelectedOption) {
-				option_selected = selector.options[selector.selectedIndex].innerText;
-			} else if (isPlaceholder && !isSelectedOption) {
-				option_selected = '<span class="' + CLASS_NAME_PLACEHOLDER + '">' + placeholder + '<span>';
-			} else if(!isPlaceholder && !isSelectedOption) {
-				option_selected = selector.options[selector.selectedIndex].innerText;
-			} else {
-				option_selected = '<span class="' + CLASS_NAME_PLACEHOLDER + '">-<span>';
-			}
-		} else {
-			option_selected = selector.options[selector.selectedIndex].innerText;
+	/**
+	 * Строит кастомный UI для <select>
+	 * @param {HTMLSelectElement} selector - Исходный <select>
+	 * @param {boolean} [reBuild=false] - Пересоздать, если уже инициализирован
+	 * @returns {HTMLElement} - Обёртка (.vg-select)
+	 */
+	static build(selector, reBuild = false) {
+		if (reBuild || selector.dataset.inited === 'true') {
+			this.destroy(selector);
 		}
 
-		// Создаем основной элемент с классами селекта
-		let classes = Manipulator.get(selector,'class'),
-			element = document.createElement('div');
-
-		classes = classes.split(' ');
+		const container = document.createElement('div');
+		container.classList.add(CLASS_NAME_CONTAINER);
+		container.style.position = 'relative';
 
-		for (const _class of classes) {
-			element.classList.add(_class)
+		if (selector.classList.length) {
+			[...selector.classList].forEach(cls => container.classList.add(cls));
 		}
 
-		if (Manipulator.has(selector, 'disabled')) element.classList.add('disabled');
+		if (isDisabled(selector)) {
+			container.classList.add('disabled');
+		}
 
-		let elData = Manipulator.get(selector);
+		const elData = Manipulator.get(selector);
 		if (!isEmptyObj(elData)) {
-			for (const key of Object.keys(elData)) {
-				Manipulator.set(element,'data-' + key, elData[key]);
-			}
+			Object.keys(elData).forEach(key => {
+				Manipulator.set(container, `data-${key}`, elData[key]);
+			});
 		}
 
-		// Создаем элемент с отображением выбранного варианта
-		let current = document.createElement('div');
+		const placeholder = selector.dataset.placeholder || '';
+		const isMultiple = selector.multiple;
+
+		const current = document.createElement('div');
 		current.classList.add(CLASS_NAME_CURRENT);
-		Manipulator.set(current, 'data-vg-toggle', 'select');
-		Manipulator.set(current, 'aria-expanded', 'false');
-		current.innerHTML = option_selected.trim();
-		element.append(current);
+		current.setAttribute('data-vg-toggle', 'select');
+		current.setAttribute('aria-expanded', 'false');
+		current.setAttribute('role', 'button');
+		current.tabIndex = isMultiple ? -1 : 0;
+
+		if (isMultiple) {
+			const tags = document.createElement('div');
+			tags.classList.add(CLASS_NAME_TAGS);
+			current.appendChild(tags);
+
+			const input = document.createElement('input');
+			input.type = 'text';
+			input.className = 'vg-select-multiple-input';
+			input.style.cssText = 'border:none;outline:none;background:transparent;padding:0;margin:0;min-width:40px;font:inherit;';
+			tags.appendChild(input);
+
+			input.addEventListener('focus', () => {
+				const inst = VGSelect.getInstance(input.closest(`.${CLASS_NAME_CONTAINER}`));
+				if (inst && !inst._isShown()) inst.show();
+			});
+		} else {
+			const index = selector.selectedIndex;
+			const option = index >= 0 ? selector.options[index] : null;
+			const text = option?.textContent.trim() || '';
+			const showPlaceholder = placeholder && !this.hasSelectedValidOption(selector);
+
+			current.innerHTML = showPlaceholder
+				? `<span class="${CLASS_NAME_PLACEHOLDER}">${placeholder}</span>`
+				: text || '-';
+		}
 
-		// Создаем элемент выпадающего списка
-		let dropdown = document.createElement('div');
-		dropdown.classList.add(CLASS_NAME_DROPDOWN);
-		element.append(dropdown);
+		container.appendChild(current);
 
-		// Создаем список и варианты селекта
-		VGSelect.buildListOptions(selector, dropdown, isPlaceholder);
+		const dropdown = document.createElement('div');
+		dropdown.classList.add(CLASS_NAME_DROPDOWN);
+		container.appendChild(dropdown);
 
-		// Добавляем все созданный контейнер после селекта
-		selector.insertAdjacentElement('afterend', element);
+		this.buildListOptions(selector, dropdown);
 
-		// помечаем элемент инициализированным
+		selector.insertAdjacentElement('afterend', container);
 		selector.dataset.inited = 'true';
 
-		if (isSearch) {
-			let search_container = document.createElement('div');
-			search_container.classList.add(CLASS_NAME_SEARCH);
+		this.getOrCreateInstance(container);
+		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);
+		}
 
-			let input = document.createElement('input');
-			Manipulator.set(input, 'name', 'vg-select-search');
-			Manipulator.set(input, 'type', 'text');
-			Manipulator.set(input, 'placeholder', 'Поиск...');
-			Manipulator.set(input, 'autocomplete', 'off');
+		if (searchInput && instance) {
+			let searchTimeout;
 
-			search_container.append(input);
-			dropdown.prepend(search_container);
+			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 element;
+		return container;
 	}
 
+	/**
+	 * Переключает открытие/закрытие выпадающего списка
+	 * @param {EventTarget} [relatedTarget] - Элемент, вызвавший событие
+	 */
 	toggle(relatedTarget) {
-		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+		return this._isShown() ? this.hide() : this.show(relatedTarget);
 	}
 
+	/**
+	 * Открывает выпадающий список
+	 * @param {EventTarget} [relatedTarget] - Элемент, вызвавший событие
+	 */
 	show(relatedTarget) {
 		if (isDisabled(this._element)) return;
 
-		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
-		if (showEvent.defaultPrevented) return;
+		const e = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
+		if (e.defaultPrevented) return;
+
+		this._element.classList.add(CLASS_NAME_SHOW);
 
 		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.on(element, 'mouseover', noop);
-			}
+			document.body.style.pointerEvents = 'none';
 		}
 
-		this._element.classList.add(CLASS_NAME_SHOW);
+		const toggle = this._element.querySelector(SELECTOR_DATA_TOGGLE);
+		toggle.setAttribute('aria-expanded', 'true');
 
-		if (this._params.search) {
-			let input = Selectors.find('input', this._element);
+		if (this._params.search?.enabled) {
+			const input = this._element.querySelector(SELECTOR_SEARCH_INPUT);
 			if (input) input.focus();
 		}
 
-		const completeCallBack = () => {
+		return this._queueCallback(() => {
 			this._element.classList.add(CLASS_NAME_ACTIVE);
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
-		}
-
-		this._queueCallback(completeCallBack, this._drop, true, 50)
+			this._triggerEvent(EVENT_KEY_OPEN);
+			this._callCallback('onShow');
+		}, this._drop, true, 50);
 	}
 
+	/**
+	 * Закрывает выпадающий список
+	 */
 	hide() {
 		if (isDisabled(this._element) || !this._isShown()) return;
-
 		this._completeHide();
 	}
 
-	_completeHide() {
-		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE, {})
-		if (hideEvent.defaultPrevented) return;
+	/**
+	 * Полностью завершает процесс закрытия
+	 * @param {Object} [relatedTarget] - Доп. данные
+	 * @private
+	 */
+	_completeHide(relatedTarget = {}) {
+		const e = EventHandler.trigger(this._element, EVENT_KEY_HIDE, relatedTarget);
+		if (e.defaultPrevented) return;
 
 		this._element.classList.remove(CLASS_NAME_ACTIVE);
-		let toggle = Selectors.find(SELECTOR_DATA_TOGGLE, this._element);
-		Manipulator.set(toggle, 'aria-expanded', 'false');
+		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
 
-		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
-		}
-
-		const completeCallback = () => {
+		this._queueCallback(() => {
 			this._element.classList.remove(CLASS_NAME_SHOW);
-			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, {});
+			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
+			this._triggerEvent(EVENT_KEY_CLOSE);
+			this._callCallback('onHide');
+		}, this._drop, true, 10);
+
+		if ('ontouchstart' in document.documentElement) {
+			document.body.style.pointerEvents = '';
 		}
-		this._queueCallback(completeCallback, this._drop, true, 10);
 	}
 
+	/**
+	 * Проверяет, открыт ли список
+	 * @returns {boolean}
+	 * @private
+	 */
 	_isShown() {
 		return this._element.classList.contains(CLASS_NAME_SHOW);
 	}
 
-	refresh() {
-		const select = this._element.previousSibling;
+	/**
+	 * Инициализирует MutationObserver для отслеживания изменений в <select>
+	 * @private
+	 */
+	_initObserver() {
+		if (this._observer) {
+			this._observer.disconnect();
+		}
+
+		const select = this._element.previousElementSibling;
+		if (!select || select.tagName !== 'SELECT') return;
+
+		this._observer = new MutationObserver((mutations) => {
+			console.debug('VGSelect: Mutation detected', mutations);
+			if (select.hasAttribute('data-updating')) return;
+
+			const shouldUpdate = mutations.some(mutation => {
+				if (mutation.type === 'attributes') {
+					return ['disabled', 'required', 'style', 'hidden'].includes(mutation.attributeName);
+				}
+				return mutation.type === 'childList' || mutation.type === 'characterData';
+			});
+
+			if (!shouldUpdate) return;
+
+			const wasShown = this._isShown();
+
+			clearTimeout(this._observerTimeout);
+			this._observerTimeout = setTimeout(() => {
+				if (this._element.previousElementSibling !== select || select.hasAttribute('data-updating')) return;
 
-		let observer = new MutationObserver(() => {
-			clearTimeout(observerTimout);
-			observerTimout = setTimeout(() => {
-				VGSelect.build(select, true);
-			}, 10);
+				this._updateFromMutation();
+
+				if (wasShown) {
+					requestAnimationFrame(() => {
+						this.show();
+					});
+				}
+			}, 100);
 		});
 
-		observer.observe(select, {
-			attributeFilter: ['disabled', 'required', 'style', 'hidden', 'value', 'selected'],
+		this._observer.observe(select, {
+			attributes: true,
+			attributeFilter: ['disabled', 'required', 'style', 'hidden'],
 			childList: true,
 			subtree: true,
-			characterDataOldValue: true,
+			characterData: true
 		});
 	}
 
+	/**
+	 * Обновляет UI после изменения в DOM
+	 * @private
+	 */
+	_updateFromMutation() {
+		const select = this._element.previousElementSibling;
+		if (!select) return;
+
+		if (isDisabled(select)) {
+			this._element.classList.add('disabled');
+		} else {
+			this._element.classList.remove('disabled');
+		}
+
+		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
+		VGSelect.buildListOptions(select, drop);
+		VGSelect.updateUI(select);
+	}
+
+	/**
+	 * Освобождает ресурсы (отключает observer, очищает таймеры)
+	 */
 	dispose() {
+		if (this._observer) {
+			this._observer.disconnect();
+			this._observer = null;
+		}
+		clearTimeout(this._observerTimeout);
+		this._observerTimeout = null;
 		super.dispose();
 	}
 
+	/**
+	 * Удаляет кастомный UI
+	 * @param {HTMLSelectElement} select - Исходный <select>
+	 */
 	static destroy(select) {
-		let element = Selectors.next(select, '.' + CLASS_NAME_CONTAINER);
-		element = element.shift();
+		const container = select.nextElementSibling;
+		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
+			container.remove();
+		}
+	}
 
-		if (element) {
-			if (element.classList.contains(CLASS_NAME_CONTAINER)) {
-				element.remove();
+	/**
+	 * Обновляет отображаемое значение (текст, теги)
+	 * @param {HTMLSelectElement} select - Исходный <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);
+
+		if (isMultiple) {
+			const tags = current.querySelector(`.${CLASS_NAME_TAGS}`);
+			const input = tags.querySelector('input');
+			const prevCount = tags.querySelectorAll(`.${CLASS_NAME_TAG}`).length;
+			tags.innerHTML = '';
+			tags.appendChild(input);
+
+			const selected = Array.from(select.selectedOptions);
+			const newCount = selected.length;
+
+			if (newCount === 0 && prevCount > 0) {
+				instance?._triggerEvent(EVENT_KEY_CLEAR);
+				instance?._callCallback('onClear');
+			}
 
-				select.selectedIndex = 0;
-				[...select.querySelectorAll('option')].forEach(function (el, index) {
-					if (el.hasAttribute('selected')) {
-						select.selectedIndex = index;
-					}
+			if (selected.length === 0) {
+				input.placeholder = placeholder;
+			} else {
+				input.placeholder = '';
+				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>`;
+					tags.insertBefore(tag, input);
 				});
 			}
+		} else {
+			const index = select.selectedIndex;
+			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 oldText = current.textContent;
+			const newText = showPlaceholder ? placeholder : text || '-';
+
+			if (oldText !== newText) {
+				current.innerHTML = showPlaceholder
+					? `<span class="${CLASS_NAME_PLACEHOLDER}">${placeholder}</span>`
+					: newText;
+			}
 		}
 	}
 
-	static hideOpenToggles(event) {
-		const openToggles = Selectors.findAll('.vg-select:not(.disabled):not(:disabled).show');
-
-		for (const toggle of openToggles) {
-			const context = VGSelect.getInstance(toggle);
-			if (!context) continue;
-
-			if (event.target.closest('.' + CLASS_NAME_CONTAINER) === context._element) {
+	/**
+	 * Программно устанавливает значение <select>
+	 * @param {HTMLSelectElement} select - Исходный <select>
+	 * @param {string} value - Значение для выбора
+	 * @param {Object} [data] - Дополнительные данные
+	 */
+	static changeSelector(select, value, data = {}) {
+		const container = select.nextElementSibling;
+		const instance = container ? VGSelect.getInstance(container) : null;
+		const prevValue = select.value;
+
+		select.setAttribute('data-updating', 'true');
+		try {
+			const opt = select.querySelector(`option[value="${CSS.escape(normalizeData(value))}"]`);
+			if (!opt) {
+				instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Option not found', value });
 				return;
 			}
 
-			const composedPath = event.composedPath();
-			if (composedPath.includes(context._element)) {
-				continue
-			}
+			const oldValue = select.value;
+			const wasSelected = opt.selected;
+			const selectedText = opt.textContent.trim();
 
-			const relatedTarget = { relatedTarget: context._element }
+			[...select.options].forEach(o => o.selected = false);
+			opt.selected = true;
+			select.value = opt.value;
 
-			if (event.type === 'click') {
-				relatedTarget.clickEvent = event
-			}
+			this.updateUI(select);
 
-			context._completeHide(relatedTarget)
+			const e = new Event('change', { bubbles: true, cancelable: true });
+			select.dispatchEvent(e);
+
+			if (!wasSelected) {
+				EventHandler.trigger(select, EVENT_KEY_CHANGE, { data });
+				instance?._triggerEvent(EVENT_KEY_SELECT, { value, text: selectedText, data });
+				instance?._callCallback('onSelect', { value, text: selectedText, data });
+			}
+		} finally {
+			select.removeAttribute('data-updating');
 		}
 	}
 
-	static clearDrops(event) {
-		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
-			return
+	/**
+	 * Вызывает кастомное событие
+	 * @param {string} eventName - Имя события
+	 * @param {Object} [detail] - Данные события
+	 * @private
+	 */
+	_triggerEvent(eventName, detail = {}) {
+		EventHandler.trigger(this._element, eventName, detail);
+	}
+
+	/**
+	 * Выполняет пользовательский коллбэк
+	 * @param {string} name - Имя коллбэка
+	 * @param {*} [arg] - Аргумент
+	 * @private
+	 */
+	_callCallback(name, arg = null) {
+		const callback = this._params[name];
+		if (typeof callback === 'function') {
+			callback.call(this, this._element, arg);
 		}
+	}
 
-		VGSelect.hideOpenToggles(event)
+	/**
+	 * Инициализирует или пересоздаёт компонент
+	 * @param {HTMLSelectElement} element - <select>
+	 * @param {Object} [params] - Параметры
+	 * @param {boolean} [isRebuild=false] - Пересоздать
+	 */
+	static init(element, params = {}, isRebuild = false) {
+		this.build(element, isRebuild);
 	}
 
-	static changeSelector(select, value, data = {}) {
-		if (!isObject(data) && isEmptyObj(data)) return;
+	/**
+	 * Закрывает все открытые выпадающие списки при клике вне
+	 * @param {MouseEvent} event
+	 */
+	static clearDrops(event) {
+		const open = Selectors.find(`.${CLASS_NAME_CONTAINER}.${CLASS_NAME_SHOW}`);
+		if (!open) return;
 
-		[... select.options].forEach(el => {
-			Manipulator.remove(el, 'selected');
+		const targetIsToggle = event.target.closest(SELECTOR_DATA_TOGGLE);
+		if (targetIsToggle && targetIsToggle.closest(`.${CLASS_NAME_CONTAINER}`) === open) {
+			return;
+		}
 
-			if (el.value === value) {
-				Manipulator.set(el, 'selected', true);
-			}
-		})
+		const targetInDropdown = event.composedPath().some(el =>
+			el.classList?.contains(CLASS_NAME_DROPDOWN)
+		);
+		if (targetInDropdown) {
+			return;
+		}
 
-		select.value = normalizeData(value);
-		EventHandler.trigger(select, EVENT_KEY_CHANGE, {data: data});
-		EventHandler.trigger(select, 'change', {data: data});
+		const instance = VGSelect.getInstance(open);
+		if (instance) {
+			instance._completeHide({ relatedTarget: event.target });
+		}
 	}
 
 	/**
-	 * Инициализация
-	 * @param element
-	 * @param params
-	 * @param isRebuild
+	 * Инициализирует кнопку "Загрузить ещё"
+	 * @private
 	 */
-	static init(element, params = {}, isRebuild = false) {
-		let elm = VGSelect.build(element);
-		VGSelect.getOrCreateInstance(elm, params);
+	_initLoadMoreButton() {
+		if (!this._params.search?.pagination || !this._params.search.remote) return;
+
+		const list = this._element.querySelector(SELECTOR_LIST);
+		if (!list) 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 = '#007bff';
+		btn.style.fontSize = '14px';
+		btn.style.fontWeight = '500';
+		btn.textContent = this._params.search.loadMoreText;
+
+		btn.addEventListener('click', () => {
+			if (!this._loading && (this._totalPages === null || this._currentPage < this._totalPages)) {
+				this._loadNextPage();
+			}
+		});
+
+		list.appendChild(btn);
+		this._hideLoadMoreButton(true); // скрыта до первого запроса
 	}
-}
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, VGSelect.clearDrops);
+	/**
+	 * Показывает или скрывает кнопку "Загрузить ещё"
+	 * @param {boolean} hide
+	 * @private
+	 */
+	_hideLoadMoreButton(hide) {
+		const btn = this._element.querySelector(SELECTOR_LOAD_MORE_BTN);
+		if (btn) {
+			btn.style.display = hide ? 'none' : 'block';
+		}
+	}
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
-	const target = this.closest('.' + CLASS_NAME_CONTAINER);
+	/**
+	 * Показывает или скрывает индикатор загрузки
+	 * @param {boolean} show
+	 * @private
+	 */
+	_showLoading(show) {
+		const list = this._element.querySelector(SELECTOR_LIST);
+		let loader = list.querySelector(`.${CLASS_NAME_LOADING}`);
+		if (show && !loader) {
+			loader = document.createElement('li');
+			loader.className = CLASS_NAME_LOADING;
+			loader.style.textAlign = 'center';
+			loader.style.padding = '8px';
+			loader.textContent = lang_messages(this._params.lang, NAME)['loading'];
+			list.appendChild(loader);
+		} else if (!show && loader) {
+			loader.remove();
+		}
+	}
 
-	Manipulator.set(this, 'aria-expanded', true);
+	/**
+	 * Загружает следующую страницу данных по клику
+	 * @private
+	 */
+	async _loadNextPage() {
+		const { route, pageParam = 'page', termParam = 'q', perPage = 20 } = this._params.search;
+		const nextPage = this._currentPage + 1;
+
+		const url = new URL(route, window.location.origin);
+		url.searchParams.set(termParam, this._searchTerm);
+		url.searchParams.set(pageParam, nextPage);
+		url.searchParams.set('per_page', perPage);
+
+		this._loading = true;
+		this._showLoading(true);
+		this._hideLoadMoreButton(true);
+
+		try {
+			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+			const data = await res.json();
+
+			if (Array.isArray(data.results)) {
+				VGSelect.addOptions(this._element.previousElementSibling, data, { preserve: true });
+				this._currentPage = data.pagination?.current_page || nextPage;
+				this._totalPages = data.pagination?.total_pages || null;
+
+				// Показать кнопку снова, если есть следующая страница
+				if (this._totalPages === null || this._currentPage < this._totalPages) {
+					this._hideLoadMoreButton(false);
+				}
 
-	const alreadyOpen = Selectors.find('.vg-select.show')
-	if (alreadyOpen && alreadyOpen !== target) {
-		VGSelect.getInstance(alreadyOpen).hide();
+				this._callCallback('onLoadNext', { page: this._currentPage, data });
+				this._triggerEvent(EVENT_KEY_LOAD_NEXT, { page: this._currentPage, term: this._searchTerm });
+			}
+		} catch (err) {
+			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 {
+			this._showLoading(false);
+			this._loading = false;
+		}
 	}
 
-	const instance = VGSelect.getOrCreateInstance(target);
-	instance.toggle(this);
-});
-
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_OPTION_TOGGLE, function (e) {
-	let el = e.target;
+	/**
+	 * Выполняет удалённый запрос для поиска
+	 * @param {string} term - Поисковый запрос
+	 * @private
+	 */
+	_fetchRemoteData(term) {
+		const { route, method = 'GET', pageParam = 'page', termParam = 'q', perPage = 20 } = this._params.search;
+		const url = new URL(route, window.location.origin);
+		url.searchParams.set(termParam, term);
+		url.searchParams.set(pageParam, 1);
+		url.searchParams.set('per_page', perPage);
+
+		const searchInput = this._element.querySelector(SELECTOR_SEARCH_INPUT);
+		const wasOpen = this._isShown();
+
+		this._searchTerm = term;
+		this._currentPage = 1;
+		this._totalPages = null;
+
+		this._showLoading(true);
+		this._hideLoadMoreButton(true);
+
+		fetch(url, {
+			method,
+			headers: { 'Content-Type': 'application/json' }
+		})
+			.then(res => res.json())
+			.then(data => {
+				const select = this._element.previousElementSibling;
+				if (!select) return;
+
+				// Очистка старых опций
+				[...select.querySelectorAll('option')].forEach(opt => {
+					if (!opt.hasAttribute('data-preserve') && !opt.closest('optgroup[data-preserve]')) {
+						opt.remove();
+					}
+				});
 
-	if (!el.classList.contains('disabled')) {
-		let container = el.closest('.' + CLASS_NAME_CONTAINER),
-			options = container.querySelectorAll('.' + CLASS_NAME_OPTION);
+				VGSelect.addOptions(select, data, { preserve: true });
 
-		if (options.length) {
-			for (const option of options) {
-				option.classList.remove('selected');
-			}
-		}
+				this._callCallback('onSearch', { term, data });
+				this._triggerEvent(EVENT_KEY_REBUILD, { term, data });
 
-		el.classList.add('selected');
+				if (data.pagination) {
+					this._currentPage = data.pagination.current_page || 1;
+					this._totalPages = data.pagination.total_pages || null;
+				}
 
-		container.querySelector('.' + CLASS_NAME_CURRENT).innerText = el.innerText;
-		container.classList.remove('show');
+				// Показать кнопку "Загрузить ещё", если есть следующая страница
+				if (this._totalPages === null || this._currentPage < this._totalPages) {
+					this._hideLoadMoreButton(false);
+				}
 
-		let select = container.previousSibling;
-		VGSelect.changeSelector(select, el.dataset.value, {value: el.dataset.value, title: el.innerHTML})
+				if (wasOpen && searchInput) {
+					searchInput.value = term;
+					searchInput.focus();
+					this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_ACTIVE);
+				}
+			})
+			.catch(err => {
+				console.error('VGSelect: Remote search error', err);
+				this._triggerEvent(EVENT_KEY_ERROR, { error: 'Search request failed', term });
+				this._hideLoadMoreButton(false);
+			})
+			.finally(() => {
+				this._showLoading(false);
+			});
 	}
-});
 
-EventHandler.on(document, EVENT_KEY_UP_DATA_API, SELECTOR_SEARCH_TOGGLE, function (e) {
-	let el = this;
+	/**
+	 * Добавляет опции в <select> и обновляет UI
+	 * @param {HTMLSelectElement} select - Исходный <select>
+	 * @param {Array|Object} data - Данные (массив или { results: [...] })
+	 * @param {Object} [options] - Опции
+	 * @param {boolean} [options.preserve] - Сохранить существующие опции
+	 */
+	static addOptions(select, data, options = {}) {
+		const { preserve = false } = options;
+		const container = select.nextElementSibling;
+		const isRebuild = container && container.classList.contains(CLASS_NAME_CONTAINER);
+		const instance = isRebuild ? VGSelect.getInstance(container) : null;
+
+		let optionsData = data;
+		if (data && data.results && Array.isArray(data.results)) {
+			optionsData = data.results;
+		}
 
-	let selectList = el?.closest('.' + CLASS_NAME_DROPDOWN).querySelector('.' + CLASS_NAME_LIST);
-	if (selectList) {
-		let options = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTION)],
-			optionsGroup = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTGROUP)],
-			value = el?.value;
+		if (!Array.isArray(optionsData)) {
+			instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Invalid data format: expected array' });
+			return;
+		}
 
-		options = options.concat(optionsGroup);
+		if (!preserve) {
+			// Удаление только не помеченных как data-preserve
+			[...select.querySelectorAll('option')].forEach(option => {
+				const parentOptGroup = option.closest('optgroup');
+				if (option.value === '') return;
+				if (option.hasAttribute('data-preserve')) return;
+				if (parentOptGroup && parentOptGroup.hasAttribute('data-preserve')) return;
+				option.remove();
+			});
 
-		for (const option of options) {
-			Manipulator.show(option);
+			[...select.querySelectorAll('optgroup')].forEach(og => {
+				if (og.children.length === 0 && !og.hasAttribute('data-preserve')) {
+					og.remove();
+				}
+			});
 		}
 
-		if (value.length) {
-			value = value.trim();
-			value = value.toLowerCase();
+		optionsData.forEach(item => {
+			if (item.children && Array.isArray(item.children)) {
+				const optgroup = document.createElement('optgroup');
+				optgroup.label = item.text || '';
+				if (item.disabled) optgroup.disabled = true;
+
+				item.children.forEach(child => {
+					const option = document.createElement('option');
+					option.value = child.id || '';
+					option.textContent = child.text || '';
+					if (child.selected) option.selected = true;
+					if (child.disabled) option.disabled = true;
+
+					const dataAttrs = Object.keys(child).filter(k => !['id', 'text', 'selected', 'disabled'].includes(k));
+					dataAttrs.forEach(key => {
+						option.setAttribute(`data-${key}`, child[key]);
+					});
+
+					optgroup.appendChild(option);
+				});
 
-			let arrOptions = [];
+				select.appendChild(optgroup);
+			} else {
+				const option = document.createElement('option');
+				option.value = item.id || '';
+				option.textContent = item.text || '';
+				if (item.selected) option.selected = true;
+				if (item.disabled) option.disabled = true;
+
+				const dataAttrs = Object.keys(item).filter(k => !['id', 'text', 'selected', 'disabled'].includes(k));
+				dataAttrs.forEach(key => {
+					option.setAttribute(`data-${key}`, item[key]);
+				});
 
-			[
-				value,
-				transliterate(value),
-				transliterate(value, true),
-			].forEach(val => {
-				for (const option of options) {
-					let text = option.innerText.toLowerCase();
+				select.appendChild(option);
+			}
+		});
 
-					Manipulator.hide(option)
+		if (isRebuild) {
+			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
+			VGSelect.buildListOptions(select, drop);
+			instance?._triggerEvent(EVENT_KEY_REBUILD);
+		} else {
+			this.updateUI(select);
+		}
+	}
 
-					if (text.includes(val)) {
-						arrOptions.push(option)
-					}
-				}
-			});
+	/**
+	 * Фильтрует опции локально по введённому тексту
+	 * @param {string} term - Поисковый запрос
+	 * @private
+	 */
+	_filterLocalOptions(term) {
+		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
 
-			arrOptions.forEach(el => Manipulator.show(el))
+		if (!term) {
+			options.forEach(el => el.hidden = false);
+			return;
 		}
-	}
-});
 
-EventHandler.on(document, EVENT_RESET_DATA_API, 'form', function () {
-	Selectors.findAll('select.' + CLASS_NAME_CONTAINER, this).forEach(el => {
-		VGSelect.build(el, true)
-	});
-});
+		term = term.toLowerCase();
+		options.forEach(el => {
+			const text = el.textContent.toLowerCase();
+			el.hidden = !text.includes(term);
+		});
+	}
+}
 
+_handlersVGSelect();
 
 export default VGSelect;