vgapp 1.0.9 → 1.1.0

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

@@ -67,8 +67,8 @@ 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',
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
 			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
@@ -87,8 +87,9 @@ class VGSelect extends BaseModule {
 				perpage: 20,
 				loadMoreText: 'Загрузить ещё',
 			},
-			close: true,
-			placeholder: '',
+			close: true,
+			tree: false,
+			placeholder: '',
 			onInit: null,
 			onShow: null,
 			onHide: null,
@@ -146,39 +147,46 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop) {
-		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
-		if (!list) {
-			list = document.createElement('ul');
+	static buildListOptions(selector, drop, params = {}) {
+		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		if (!list) {
+			list = document.createElement('ul');
 			Classes.add(list, CLASS_NAME_LIST);
 			drop.appendChild(list);
 		} else {
 			list.innerHTML = '';
 		}
 
-		const optGroups = Selectors.findAll('optgroup', selector);
-		const fragment = document.createDocumentFragment();
-
-		if (optGroups.length > 0) {
-			optGroups.forEach(optGroup => {
-				const ol = document.createElement('ol');
-				Classes.add(ol, CLASS_NAME_OPTGROUP);
+		const optGroups = Selectors.findAll('optgroup', selector);
+		const fragment = document.createDocumentFragment();
+		const isTree = this._isTreeEnabled(selector, params);
+
+		if (optGroups.length > 0) {
+			optGroups.forEach(optGroup => {
+				const ol = document.createElement('ol');
+				Classes.add(ol, CLASS_NAME_OPTGROUP);
 
 				const label = document.createElement('li');
-				label.textContent = optGroup.label.trim();
-				Classes.add(label, CLASS_NAME_OPTGROUP_TITLE);
-				ol.appendChild(label);
-
-				VGSelect._createListItems(Selectors.findAll('option', optGroup), ol, selector);
-				fragment.appendChild(ol);
-			});
-			list.appendChild(fragment);
-		} else {
-			VGSelect._createListItems(selector.options, list, selector);
-		}
-
-		return list;
-	}
+				label.textContent = optGroup.label.trim();
+				Classes.add(label, CLASS_NAME_OPTGROUP_TITLE);
+				ol.appendChild(label);
+
+				VGSelect._createListItems(Selectors.findAll('option', optGroup), ol, selector, {
+					tree: isTree,
+					depth: isTree ? 1 : 0,
+				});
+				fragment.appendChild(ol);
+			});
+			list.appendChild(fragment);
+		} else {
+			VGSelect._createListItems(selector.options, list, selector, {
+				tree: isTree,
+				depth: 0,
+			});
+		}
+
+		return list;
+	}
 
 	/**
 	 * Создаёт <li> элементы из списка <option>
@@ -187,13 +195,13 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLSelectElement} selector - Исходный <select>
 	 * @private
 	 */
-	static _createListItems(options, parent, selector) {
-		const frag = document.createDocumentFragment();
-		const selectedIndex = selector.selectedIndex;
-		const hasExplicitSelected = VGSelect.hasExplicitSelectedOption(selector);
-
-		[...options].forEach((option) => {
-			if (option.hidden) return;
+	static _createListItems(options, parent, selector, config = {}) {
+		const frag = document.createDocumentFragment();
+		const baseDepth = Number.isInteger(config.depth) ? config.depth : 0;
+		const treeEnabled = !!config.tree;
+
+		[...options].forEach((option) => {
+			if (option.hidden) return;
 
 			// value атрибута может не быть или он может быть пустым -> для маппинга используем индекс
 			const rawValueAttr = option.getAttribute('value'); // null если атрибута нет
@@ -204,9 +212,16 @@ class VGSelect extends BaseModule {
 			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');
+			li.dataset.value = value;
+			li.classList.add(CLASS_NAME_OPTION);
+			Manipulator.set(li, 'data-vg-toggle', 'select-option');
+			if (treeEnabled) {
+				const optionLevelRaw = option.dataset.level;
+				const optionLevel = Number.isFinite(Number(optionLevelRaw)) ? parseInt(optionLevelRaw, 10) : null;
+				const level = Math.max(0, optionLevel == null ? baseDepth : optionLevel);
+				li.dataset.level = String(level);
+				li.style.paddingLeft = `${16 + (level * 16)}px`;
+			}
 
 			// Раньше подсветка зависела от "явно выбранных" option (атрибут selected),
 			// из-за этого UI мог показывать placeholder, но DOM считал, что выбрана 1-я опция.
@@ -234,8 +249,17 @@ class VGSelect extends BaseModule {
 			frag.appendChild(li);
 		});
 
-		parent.appendChild(frag);
-	}
+		parent.appendChild(frag);
+	}
+
+	static _isTreeEnabled(selector, params = {}) {
+		if (typeof params.tree === 'boolean') return params.tree;
+		if (selector?.dataset && typeof selector.dataset.tree !== 'undefined') {
+			return normalizeData(selector.dataset.tree) === true;
+		}
+
+		return false;
+	}
 
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
@@ -315,11 +339,11 @@ class VGSelect extends BaseModule {
 			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);
+			const input = document.createElement('input');
+			input.type = 'text';
+			input.className = 'vg-select-multiple-input';
+			input.style.cssText = 'border:0;outline:none;background:transparent;padding:0;margin:0;min-width:1px;width:1px;height:1px;line-height:1;font:inherit;opacity:0;';
+			tags.appendChild(input);
 
 			input.addEventListener('focus', () => {
 				const inst = VGSelect.getInstance(input.closest(`.${CLASS_NAME_CONTAINER}`));
@@ -344,7 +368,7 @@ class VGSelect extends BaseModule {
 		dropdown.classList.add(CLASS_NAME_DROPDOWN);
 		container.appendChild(dropdown);
 
-		this.buildListOptions(selector, dropdown);
+		this.buildListOptions(selector, dropdown, params);
 
 		selector.insertAdjacentElement('afterend', container);
 		selector.dataset.inited = 'true';
@@ -547,7 +571,7 @@ class VGSelect extends BaseModule {
 		}
 
 		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
-		VGSelect.buildListOptions(select, drop);
+		VGSelect.buildListOptions(select, drop, this._params);
 		VGSelect.updateUI(select);
 	}
 
@@ -1107,12 +1131,13 @@ class VGSelect extends BaseModule {
 			optionsData = data.results;
 		}
 
-		if (!Array.isArray(optionsData)) {
-			instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Invalid data format: expected array' });
-			return;
-		}
-
-		if (!preserve) {
+		if (!Array.isArray(optionsData)) {
+			instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Invalid data format: expected array' });
+			return;
+		}
+		const treeEnabled = this._isTreeEnabled(select, instance?._params || {});
+
+		if (!preserve) {
 			// Удаление только не помеченных как data-preserve
 			[...select.querySelectorAll('option')].forEach(option => {
 				const parentOptGroup = option.closest('optgroup');
@@ -1126,50 +1151,62 @@ class VGSelect extends BaseModule {
 				if (og.children.length === 0 && !og.hasAttribute('data-preserve')) {
 					og.remove();
 				}
-			});
-		}
-
-		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);
-				});
-
-				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]);
-				});
-
-				select.appendChild(option);
-			}
-		});
+			});
+		}
+
+		const appendOption = (item, parent, level = null) => {
+			const option = document.createElement('option');
+			const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+
+			option.value = item.id || '';
+			option.textContent = item.text || '';
+			if (item.selected) option.selected = true;
+			if (item.disabled) option.disabled = true;
+			if (treeEnabled && Number.isInteger(level)) {
+				option.setAttribute('data-level', String(level));
+				if (hasChildren && !option.value) {
+					option.disabled = true;
+				}
+			}
+
+			const dataAttrs = Object.keys(item).filter(k => !['id', 'text', 'selected', 'disabled', 'children'].includes(k));
+			dataAttrs.forEach(key => {
+				option.setAttribute(`data-${key}`, item[key]);
+			});
+
+			parent.appendChild(option);
+		};
+
+		const appendTreeOptions = (items, parent, level = 0) => {
+			items.forEach(item => {
+				appendOption(item, parent, level);
+				if (Array.isArray(item.children) && item.children.length > 0) {
+					appendTreeOptions(item.children, parent, level + 1);
+				}
+			});
+		};
+
+		if (treeEnabled) {
+			appendTreeOptions(optionsData, select, 0);
+		} else {
+			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 => appendOption(child, optgroup));
+
+					select.appendChild(optgroup);
+				} else {
+					appendOption(item, select);
+				}
+			});
+		}
 
 		if (isRebuild) {
 			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop);
+			VGSelect.buildListOptions(select, drop, instance?._params || {});
 			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);

package/package.json

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