vgapp 1.1.0 → 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
@@ -89,6 +90,7 @@ class VGSelect extends BaseModule {
 			},
 			close: true,
 			tree: false,
+			exclude: '',
 			placeholder: '',
 			onInit: null,
 			onShow: null,
@@ -147,46 +149,46 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop, params = {}) {
-		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();
-		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 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, {
-					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;
-	}
+				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>
@@ -195,13 +197,13 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLSelectElement} selector - Исходный <select>
 	 * @private
 	 */
-	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;
+	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 если атрибута нет
@@ -212,16 +214,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');
-			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`;
-			}
+			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-я опция.
@@ -249,9 +251,9 @@ 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') {
@@ -260,6 +262,26 @@ class VGSelect extends BaseModule {
 
 		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)
@@ -317,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;
@@ -339,11 +363,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: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);
+			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}`));
@@ -368,7 +392,7 @@ class VGSelect extends BaseModule {
 		dropdown.classList.add(CLASS_NAME_DROPDOWN);
 		container.appendChild(dropdown);
 
-		this.buildListOptions(selector, dropdown, params);
+		this.buildListOptions(selector, dropdown, params);
 
 		selector.insertAdjacentElement('afterend', container);
 		selector.dataset.inited = 'true';
@@ -377,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');
@@ -571,7 +597,7 @@ class VGSelect extends BaseModule {
 		}
 
 		const drop = this._element.querySelector(SELECTOR_DROPDOWN);
-		VGSelect.buildListOptions(select, drop, this._params);
+		VGSelect.buildListOptions(select, drop, this._params);
 		VGSelect.updateUI(select);
 	}
 
@@ -1131,13 +1157,13 @@ class VGSelect extends BaseModule {
 			optionsData = data.results;
 		}
 
-		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) {
+		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');
@@ -1151,62 +1177,62 @@ class VGSelect extends BaseModule {
 				if (og.children.length === 0 && !og.hasAttribute('data-preserve')) {
 					og.remove();
 				}
-			});
-		}
-
-		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);
-				}
-			});
-		}
+			});
+		}
+
+		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, instance?._params || {});
+			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.1.0",
+	"version": "1.1.1",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",