vgapp 1.1.0 → 1.1.2

package/app/modules/vgformsender/js/vgformsender.js

@@ -274,13 +274,18 @@ class VGFormSender extends BaseModule {
 	 * @param {FormData|null} data - Дополнительные данные для отправки
 	 */
 	request(event, data = null) {
-		const _this = this;
-		const mergeFormData = (target, source) => {
-			source.forEach((value, key) => {
-				target.set(key, value);
-			});
-			return target;
-		}
+		const _this = this;
+		const mergeFormData = (target, source) => {
+			const replacedKeys = new Set();
+			source.forEach((value, key) => {
+				if (!replacedKeys.has(key)) {
+					target.delete(key);
+					replacedKeys.add(key);
+				}
+				target.append(key, value);
+			});
+			return target;
+		}
 
 		_this._alertBefore();
 
@@ -777,4 +782,4 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 	}
 })
 
-export default VGFormSender;
+export default VGFormSender;

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

@@ -52,6 +52,7 @@ 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,9 +88,10 @@ class VGSelect extends BaseModule {
 				perpage: 20,
 				loadMoreText: 'Загрузить ещё',
 			},
-			close: true,
-			tree: false,
-			placeholder: '',
+			close: true,
+			tree: false,
+			exclude: 'data-filter-param',
+			placeholder: '',
 			onInit: null,
 			onShow: null,
 			onHide: 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,16 +251,35 @@ class VGSelect extends BaseModule {
 			frag.appendChild(li);
 		});
 
-		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;
+		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();
 	}
 
 	/**
@@ -319,7 +340,9 @@ class VGSelect extends BaseModule {
 
 		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]);
 			});
 		}
@@ -339,11 +362,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 +391,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';
@@ -571,7 +594,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);
 	}
 
@@ -765,26 +788,28 @@ class VGSelect extends BaseModule {
 	 * @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))}"]`);
+	static changeSelector(select, value, data = {}) {
+		const container = select.nextElementSibling;
+		const instance = container ? VGSelect.getInstance(container) : null;
+
+		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 oldValue = select.value;
-			const wasSelected = opt.selected;
-			const selectedText = opt.textContent.trim();
-
-			[...select.options].forEach(o => o.selected = false);
-			opt.selected = true;
-			select.value = opt.value;
+			const wasSelected = opt.selected;
+			const selectedText = opt.textContent.trim();
+
+			if (select.multiple) {
+				opt.selected = data?.selected === false ? false : true;
+			} else {
+				[...select.options].forEach(o => o.selected = false);
+				opt.selected = true;
+				select.value = opt.value;
+			}
 
 			this.updateUI(select);
 
@@ -807,9 +832,9 @@ class VGSelect extends BaseModule {
 	 * @param {number} index
 	 * @param {Object} [data]
 	 */
-	static changeSelectorByIndex(select, index, data = {}) {
-		const container = select.nextElementSibling;
-		const instance = container ? VGSelect.getInstance(container) : null;
+	static changeSelectorByIndex(select, index, data = {}) {
+		const container = select.nextElementSibling;
+		const instance = container ? VGSelect.getInstance(container) : null;
 
 		select.setAttribute('data-updating', 'true');
 		try {
@@ -819,13 +844,17 @@ class VGSelect extends BaseModule {
 				return;
 			}
 
-			const wasSelected = opt.selected;
-			const selectedText = opt.textContent.trim();
-			const value = opt.value;
-
-			[...select.options].forEach(o => o.selected = false);
-			opt.selected = true;
-			select.value = opt.value;
+			const wasSelected = opt.selected;
+			const selectedText = opt.textContent.trim();
+			const value = opt.value;
+
+			if (select.multiple) {
+				opt.selected = data?.selected === false ? false : true;
+			} else {
+				[...select.options].forEach(o => o.selected = false);
+				opt.selected = true;
+				select.value = opt.value;
+			}
 
 			this.updateUI(select);
 
@@ -1131,13 +1160,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 +1180,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.2",
 	"description": "",
 	"author": {
 		"name": "Vegas Studio",