vgapp 1.0.9 → 1.1.1

package/app/modules/vgrollup/js/vgrollup.js

@@ -88,7 +88,13 @@ class VGRollup extends BaseModule {
 			button: {
 				enabled: true,
 				more: "Показать",
-				less: "Свернуть"
+				less: "Свернуть",
+				classes: ''
+			},
+			callbacks: {
+				init: () => {},
+				expand: () => {},
+				collapse: () => {}
 			}
 		}, params));
 
@@ -255,6 +261,8 @@ class VGRollup extends BaseModule {
 		} else if (content === 'elements') {
 			this._setupElementsContent(element, elementClass, cnt, fade, transition, isEllipsis, isButton, showNum);
 		}
+
+		execute(this._params.callbacks.init, [element, this])
 	}
 
 	/**
@@ -336,7 +344,7 @@ class VGRollup extends BaseModule {
 
 		const btnTextMore = this._params.button.more;
 		const btnHTML = `<div class="${this.classes.button}">
-            <a href="#" aria-expanded="false" data-vg-toggle="rollup" data-vg-target="#${element.id}">
+            <a href="#" aria-expanded="false" data-vg-toggle="rollup" class="${this._params.button.classes}" data-vg-target="#${element.id}">
                 ${btnTextMore}${textNum}
             </a>
         </div>`;
@@ -369,6 +377,8 @@ class VGRollup extends BaseModule {
 
 				if (this._params.fade) Classes.add(el, this.classes.fade);
 				if (this._params.transition) Classes.add(el, this.classes.transition);
+
+				execute(this._params.callbacks.expand, [el, this])
 			} else if (content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
 				items.forEach((item, index) => {
@@ -376,6 +386,8 @@ class VGRollup extends BaseModule {
 						Classes.add(item, CLASS_NAME_HIDE);
 					}
 				});
+
+				execute(this._params.callbacks.collapse, [el, items, this])
 			}
 
 			Classes.add(el, this.classes.container);
@@ -388,6 +400,8 @@ class VGRollup extends BaseModule {
 				const items = Selectors.findAll('.' + this._params.elements, el);
 				items.forEach(item => Classes.remove(item, CLASS_NAME_HIDE));
 			}
+
+			execute(this._params.callbacks.expand, [el, this])
 		}
 	}
 

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

@@ -46,12 +46,13 @@ 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_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 DATA_ATTR_COPY_EXCLUDE_DEFAULT = ['inited', 'updating', 'exclude'];
 
 /**
  * Класс VGSelect
@@ -67,8 +68,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 +88,10 @@ class VGSelect extends BaseModule {
 				perpage: 20,
 				loadMoreText: 'Загрузить ещё',
 			},
-			close: true,
-			placeholder: '',
+			close: true,
+			tree: false,
+			exclude: '',
+			placeholder: '',
 			onInit: null,
 			onShow: null,
 			onHide: null,
@@ -146,7 +149,7 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop) {
+	static buildListOptions(selector, drop, params = {}) {
 		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
 		if (!list) {
 			list = document.createElement('ul');
@@ -158,6 +161,7 @@ class VGSelect extends BaseModule {
 
 		const optGroups = Selectors.findAll('optgroup', selector);
 		const fragment = document.createDocumentFragment();
+		const isTree = this._isTreeEnabled(selector, params);
 
 		if (optGroups.length > 0) {
 			optGroups.forEach(optGroup => {
@@ -169,12 +173,18 @@ class VGSelect extends BaseModule {
 				Classes.add(label, CLASS_NAME_OPTGROUP_TITLE);
 				ol.appendChild(label);
 
-				VGSelect._createListItems(Selectors.findAll('option', optGroup), ol, selector);
+				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);
+			VGSelect._createListItems(selector.options, list, selector, {
+				tree: isTree,
+				depth: 0,
+			});
 		}
 
 		return list;
@@ -187,10 +197,10 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLSelectElement} selector - Исходный <select>
 	 * @private
 	 */
-	static _createListItems(options, parent, selector) {
+	static _createListItems(options, parent, selector, config = {}) {
 		const frag = document.createDocumentFragment();
-		const selectedIndex = selector.selectedIndex;
-		const hasExplicitSelected = VGSelect.hasExplicitSelectedOption(selector);
+		const baseDepth = Number.isInteger(config.depth) ? config.depth : 0;
+		const treeEnabled = !!config.tree;
 
 		[...options].forEach((option) => {
 			if (option.hidden) return;
@@ -207,6 +217,13 @@ class VGSelect extends BaseModule {
 			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-я опция.
@@ -237,6 +254,35 @@ class VGSelect extends BaseModule {
 		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;
+	}
+
+	static _getDataAttrCopyExclusions(selector, params = {}) {
+		const rawExclude = typeof params.exclude === 'string'
+			? params.exclude
+			: (selector.dataset.exclude || '');
+		const customExcluded = rawExclude
+			.split(',')
+			.map(item => this._normalizeDataAttrKey(item))
+			.filter(Boolean);
+
+		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
+	}
+
+	static _normalizeDataAttrKey(value) {
+		return String(value || '')
+			.trim()
+			.replace(/^data-/, '')
+			.toLowerCase()
+			.replace(/-([a-z0-9])/g, (_, chr) => chr.toUpperCase());
+	}
+
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
 	 * @param {HTMLSelectElement} select - Элемент <select>
@@ -293,12 +339,14 @@ class VGSelect extends BaseModule {
 			container.classList.add('disabled');
 		}
 
-		const elData = Manipulator.get(selector);
-		if (!isEmptyObj(elData)) {
-			Object.keys(elData).forEach(key => {
-				Manipulator.set(container, `data-${key}`, elData[key]);
-			});
-		}
+		const elData = Manipulator.get(selector);
+		if (!isEmptyObj(elData)) {
+			const excludeDataAttrs = this._getDataAttrCopyExclusions(selector, params);
+			Object.keys(elData).forEach(key => {
+				if (excludeDataAttrs.has(key)) return;
+				Manipulator.set(container, `data-${key}`, elData[key]);
+			});
+		}
 
 		const placeholder = selector.dataset.placeholder || '';
 		const isMultiple = selector.multiple;
@@ -318,7 +366,7 @@ class VGSelect extends BaseModule {
 			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;';
+			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', () => {
@@ -344,7 +392,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';
@@ -353,6 +401,8 @@ class VGSelect extends BaseModule {
 		this.updateUI(selector);
 		const instance = VGSelect.getInstance(container);
 
+		console.log(instance);
+
 		let searchInput = null;
 		if (Manipulator.has(selector, 'data-search-enabled')) {
 			const search = document.createElement('div');
@@ -547,7 +597,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);
 	}
 
@@ -1111,6 +1161,7 @@ class VGSelect extends BaseModule {
 			instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Invalid data format: expected array' });
 			return;
 		}
+		const treeEnabled = this._isTreeEnabled(select, instance?._params || {});
 
 		if (!preserve) {
 			// Удаление только не помеченных как data-preserve
@@ -1129,47 +1180,59 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		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]);
-					});
+		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;
+				}
+			}
 
-					optgroup.appendChild(option);
-				});
+			const dataAttrs = Object.keys(item).filter(k => !['id', 'text', 'selected', 'disabled', 'children'].includes(k));
+			dataAttrs.forEach(key => {
+				option.setAttribute(`data-${key}`, item[key]);
+			});
 
-				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]);
-				});
+			parent.appendChild(option);
+		};
 
-				select.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.1",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",