vgapp 1.5.5 → 1.5.7

package/app/modules/vgalert/js/vgalert.js

@@ -3,7 +3,8 @@
  * Возможности: modal, overlay и dropdown-рендер, компактный размер, Data API, AJAX и Promise-сценарии.
  */
 import BaseModule from "../../base-module";
-import VGModal from "../../vgmodal";
+import VGModal from "../../vgmodal";
+import VGSidebar from "../../vgsidebar";
 import VGDropdown from "../../vgdropdown";
 
 import { execute, isElement, isVisible, makeRandomString, mergeDeepObject, reflow } from "../../../utils/js/functions";
@@ -450,8 +451,10 @@ class VGAlert {
 			};
 		}
 
-		const modal = VGModal.getOrCreateInstance(containerWrap);
-		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
+		const parent = containerWrap.classList.contains('vg-sidebar')
+			? VGSidebar.getOrCreateInstance(containerWrap)
+			: VGModal.getOrCreateInstance(containerWrap);
+		const container = Selectors.find('.vg-modal-content', containerWrap) || containerWrap;
 
 		const overlay = document.createElement('div');
 
@@ -463,7 +466,7 @@ class VGAlert {
 
 		return {
 			element: overlay,
-			render: modal,
+			render: parent,
 		};
 	}
 

package/app/modules/vgfiles/js/base.js

@@ -1,6 +1,6 @@
 /**
  * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
- * Возможности: управляет набором файлов, ошибками, списками, кастомными действиями, статистикой и скрытыми полями формы.
+ * Возможности: управляет файлами, валидацией, списками, миниатюрами и иконками, действиями, статистикой и скрытыми полями.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -8,7 +8,8 @@ import Html from "../../../utils/js/components/templater";
 import {lang_messages} from "../../../utils/js/components/lang";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
-import {getSVG} from "../../module-fn";
+import {getSVG} from "../../module-fn";
+import {resolveFileIconName} from "../../../utils/js/components/file-icon";
 import VGFilePreview from "../../vgfilepreview";
 import {extractAudioMetadata} from "../../../utils/js/components/audio-metadata";
 
@@ -813,34 +814,28 @@ class VGFilesBase extends BaseModule {
 		}
 	}
 
-	_renderUIImage(file) {
-		const $container = this._tpl.div({ class: 'file-image' });
-
-		const src = file?.src || file?.image;
-		if (src) {
-			$container.appendChild(this._tpl.img(src, file.name || '', { class: 'file-preview' }));
-			return $container;
-		}
-
-		const customData = this._getFileCustomData(file);
-		const audioCover = String(customData.audioCover || '').trim();
-		if (audioCover) {
-			$container.appendChild(this._tpl.img(audioCover, this._resolveDisplayName(file), { class: 'file-preview' }));
-			return $container;
-		}
-
-		if (file?.type && file.type.startsWith('image/')) {
-			const objectUrl = this._getFileObjectUrl(file);
-			if (!objectUrl) {
-				return $container;
-			}
-			$container.appendChild(this._tpl.img(objectUrl, file.name, { class: 'file-preview' }));
-			return $container;
-		}
-
-		const icon = this._getIconByFileType(file);
-		$container.appendChild(this._tpl.i({}, icon, { isHTML: true }));
-		return $container;
+	_renderUIImage(file) {
+		const $container = this._tpl.div({ class: 'file-image' });
+		const renderIcon = () => {
+			const icon = this._getIconByFileType(file);
+			$container.replaceChildren(this._tpl.i({}, icon, { isHTML: true }));
+		};
+		const customData = this._getFileCustomData(file);
+		let imageSrc = String(file?.image || '').trim() || String(customData.audioCover || '').trim();
+
+		if (!imageSrc && resolveFileIconName({ type: file?.type, name: file?.name || file?.src }) === 'file-image') {
+			imageSrc = String(file?.src || '').trim() || this._getFileObjectUrl(file);
+		}
+
+		if (imageSrc) {
+			const image = this._tpl.img(imageSrc, this._resolveDisplayName(file), { class: 'file-preview' });
+			image.addEventListener('error', renderIcon, { once: true });
+			$container.appendChild(image);
+		} else {
+			renderIcon();
+		}
+
+		return $container;
 	}
 
 	_resolveDisplayName(file) {

package/app/modules/vgmodal/js/vgmodal.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: модальные окна VGModal с декларативным и программным управлением.
+ * Возможности: AJAX, backdrop, геометрия окна, сворачивание и синхронизация доступности.
+ */
+import BaseModule from "../../base-module";
 import ScrollBarHelper from "../../../utils/js/components/scrollbar";
 import Backdrop from "../../../utils/js/components/backdrop";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -346,7 +350,8 @@ class VGModal extends BaseModule {
 			this._saveInteractionState();
 			this._disableInteractionHandlers();
 			this._minimized.reset();
-			this._element.style.display = 'none';
+			this._element.style.display = 'none';
+			this._element.setAttribute('aria-hidden', 'true');
 			this._element.removeAttribute('aria-modal');
 			this._element.removeAttribute('role');
 			this._isTransitioning = false;
@@ -395,7 +400,8 @@ class VGModal extends BaseModule {
 			document.body.append(this._element);
 		}
 
-		this._element.style.display = 'block';
+		this._element.style.display = 'block';
+		this._element.removeAttribute('aria-hidden');
 		this._element.setAttribute('aria-modal', true);
 		this._element.setAttribute('role', 'dialog');
 		this._element.scrollTop = 0;

package/app/modules/vgnav/js/vgnav.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
+ * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
 	execute,
@@ -29,7 +33,7 @@ const CLASS_NAME_ACTIVE    = 'active';
 /**
  * Constants toggle
  */
-const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' a';
+const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
 
 /**
  * Constants Events
@@ -215,34 +219,43 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	show(relatedTarget) {
-		let target = relatedTarget.relatedTarget;
-
-		if (!target || isDisabled(target)) return;
-
-		if (!target.closest('.dropdown-content')) {
-			target.classList.add('first');
-		}
-
-		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		let drop = Selectors.find('.dropdown-content', target),
-			link = target.firstElementChild;
+	show(relatedTarget) {
+		let target = relatedTarget.relatedTarget;
+
+		if (!target || isDisabled(target)) return;
+		const drop = Selectors.find(':scope > .dropdown-content', target);
+		if (!drop) return;
+
+		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		if (!target.closest('.dropdown-content')) {
+			target.classList.add('first');
+		}
+
+		const link = target.firstElementChild;
 
 		if (link) link.setAttribute('aria-expanded', 'true');
-		drop.classList.add(CLASS_NAME_SHOW);
-		target.classList.add(CLASS_NAME_ACTIVE);
-
-		const $placement = new Placement({
-			reference: target,
-			drop: drop,
-			placement: 'bottom-start',
-			fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
-			offset: [0, 6],
-			boundary: 'clippingParents',
-			autoFlip: true,
-			overflowProtection: true
+		drop.classList.add(CLASS_NAME_SHOW);
+		target.classList.add(CLASS_NAME_ACTIVE);
+		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
+		drop.style.bottom = 'auto';
+		drop.style.right = 'auto';
+		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
+
+		const $placement = new Placement({
+			reference: target,
+			drop: drop,
+			placement: openToSide ? 'right-start' : 'bottom-start',
+			fallbackPlacements: openToSide
+				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
+				: ['top-start', 'bottom-end', 'top-end'],
+			offset: openToSide ? [6, 0] : [0, 6],
+			boundary: 'clippingParents',
+			autoFlip: true,
+			overflowProtection: true,
+			clamp: true,
+			isMerge: false
 		});
 
 		$placement._setPlacement();
@@ -264,13 +277,8 @@ class VGNav extends BaseModule {
 		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
-	hide(relatedTarget) {
-		const _this = this;
-		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
-		}
+	hide(relatedTarget) {
+		const _this = this;
 
 		let element = relatedTarget.relatedTarget;
 
@@ -288,7 +296,7 @@ class VGNav extends BaseModule {
 				element.classList.remove('first');
 			}
 
-			[...Selectors.findAll('.' + CLASS_NAME_SHOW, element)].forEach(function (el, index) {
+			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
 				el.classList.remove(CLASS_NAME_FADE);
 
 				let parent = el.closest('.dropdown');
@@ -299,21 +307,14 @@ class VGNav extends BaseModule {
 				let link = el.previousElementSibling;
 				if (link) link.setAttribute('aria-expanded', 'false');
 
-				if (index === 0) {
-					const completeCallback = () => {
-						el.classList.remove(CLASS_NAME_SHOW);
-						EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
-					};
-
-					_this._queueCallback(completeCallback, el, true, 500);
-				}
-
-				const dropData = _this._openDrops.get(el);
-				if (dropData) {
-					window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-					window.removeEventListener('resize', dropData.resizeHandler);
-					_this._openDrops.delete(el);
-				}
+				const completeCallback = () => {
+					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
+					el.classList.remove(CLASS_NAME_SHOW);
+					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
+				};
+
+				_this._queueCallback(completeCallback, el, true, 500);
+				_this._cleanupDrop(el);
 			});
 		}
 	}
@@ -341,13 +342,16 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	_cleanupDrop(drop) {
-		const dropData = this._openDrops.get(drop);
-		if (dropData) {
-			window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-			window.removeEventListener('resize', dropData.resizeHandler);
-			this._openDrops.delete(drop);
-		}
+	_cleanupDrop(drop) {
+		const dropData = this._openDrops.get(drop);
+		if (dropData) {
+			this._openDrops.delete(drop);
+			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
+			if (!this._openDrops.size) {
+				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+				window.removeEventListener('resize', dropData.resizeHandler);
+			}
+		}
 	}
 
 	_isElementInViewport(el) {

package/app/modules/vgrangeslider/js/skins.js

@@ -1,4 +1,8 @@
-const SKIN_CLASS_DEFAULT = 'is-skin-default';
+/**
+ * Описание: визуальные режимы VGRangeSlider — default, ruler и status.
+ * Возможности: шкала с адаптивными координатами, активные отметки и пороговые цвета с текстовыми статусами.
+ */
+const SKIN_CLASS_DEFAULT = 'is-skin-default';
 const SKIN_CLASS_RULER = 'is-skin-ruler';
 const SKIN_CLASS_STATUS = 'is-skin-status';
 const SKIN_CLASS_RULER_DIM = 'is-ruler-dim-inactive';
@@ -206,8 +210,9 @@ const syncRangeSliderSkin = (skin, state, helpers) => {
 
 	const isRange = state.from !== state.to || helpers.isRange;
 
-	skin.ticks.forEach((tick, index) => {
-		const value = skin.values[index];
+	skin.ticks.forEach((tick, index) => {
+		const value = skin.values[index];
+		tick.style.left = `${helpers.toPositionPx(value)}px`;
 		const isActive = isRange
 			? value >= state.from && value <= state.to
 			: value <= state.from;

package/app/modules/vgrangeslider/js/vgrangeslider.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: одиночные и диапазонные слайдеры VGRangeSlider на нативных range-input.
+ * Возможности: Data API, шкала и статусы, форматирование, синхронизация формы, события и управление значениями.
+ */
+import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import { mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -259,9 +263,10 @@ class VGRangeSlider extends BaseModule {
 		this._dom.labelFrom = Selectors.find('.vg-range-slider__label--from', root);
 		this._dom.labelTo = Selectors.find('.vg-range-slider__label--to', root);
 		this._dom.labelSeparator = Selectors.find('.vg-range-slider__separator', root);
-		this._dom.hiddenMin = root.querySelector('input[data-vgrangeslider-hidden="min"]');
-		this._dom.hiddenMax = root.querySelector('input[data-vgrangeslider-hidden="max"]');
-		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
+		this._dom.hiddenMin ||= root.querySelector('input[data-vgrangeslider-hidden="min"]');
+		this._dom.hiddenMax ||= root.querySelector('input[data-vgrangeslider-hidden="max"]');
+		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
+			isRange: this._isRange,
 			formatValue: (value) => this._formatValue(value),
 			toPositionPx: (value) => this._toPositionPx(value),
 		});
@@ -338,11 +343,11 @@ class VGRangeSlider extends BaseModule {
 			root.appendChild(this._createLabels(this._isRange));
 		}
 
-		if (this._isRange) {
-			this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
-			this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
-		} else if (this._params.name?.min) {
-			this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
+		if (this._isRange) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
+			this._dom.hiddenMax = this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
+		} else if (this._params.name?.min) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
 		}
 
 		return root;
@@ -399,7 +404,8 @@ class VGRangeSlider extends BaseModule {
 			if (name) input.name = name;
 			root.appendChild(input);
 		}
-		input.setAttribute('data-vgrangeslider-hidden', role);
+		input.setAttribute('data-vgrangeslider-hidden', role);
+		return input;
 	}
 
 	_bindEvents() {
@@ -442,7 +448,8 @@ class VGRangeSlider extends BaseModule {
 		window.addEventListener('resize', this._handleResize);
 	}
 
-	_syncUI() {
+	_syncUI() {
+		if (!this._isRange) this._state.to = this._state.from;
 		const fromPercent = this._toPercent(this._state.from);
 		const toPercent = this._toPercent(this._isRange ? this._state.to : this._state.from);
 		const fromPosition = this._toPositionPx(this._state.from);
@@ -467,10 +474,11 @@ class VGRangeSlider extends BaseModule {
 		if (this._dom.labelSeparator) this._dom.labelSeparator.hidden = !this._isRange;
 
 		this._syncTargets();
-		syncRangeSliderSkin(this._dom.skin, this._state, {
-			isRange: this._isRange,
-			params: this._params,
-			dom: this._dom,
+		syncRangeSliderSkin(this._dom.skin, this._state, {
+			isRange: this._isRange,
+			params: this._params,
+			dom: this._dom,
+			toPositionPx: (value) => this._toPositionPx(value),
 		});
 	}
 
@@ -565,8 +573,12 @@ class VGRangeSlider extends BaseModule {
 		const numeric = Number(normalizeData(value));
 		const safeValue = Number.isFinite(numeric) ? numeric : fallback;
 		const clamped = Math.min(Math.max(safeValue, min), max);
-		const step = this._state?.step || this._params.step || 1;
-		const stepped = Math.round((clamped - min) / step) * step + min;
+		const configuredStep = Number(this._state?.step ?? this._params.step);
+		const step = Number.isFinite(configuredStep) && configuredStep > 0 ? configuredStep : 1;
+		// Округление не должно выводить значение за max или с нативной сетки шага.
+		const maxSteps = Math.floor((max - min) / step + 1e-9);
+		const steps = Math.min(Math.round((clamped - min) / step), maxSteps);
+		const stepped = steps * step + min;
 		return Number(stepped.toFixed(5));
 	}
 

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

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: сворачивание текста и списков VGRollup.
+ * Возможности: ограничение высоты, строк и количества элементов, локализация кнопок, Data API, callbacks и события.
+ */
+import BaseModule from "../../base-module";
 import { execute, isDisabled, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -98,7 +102,7 @@ class VGRollup extends BaseModule {
 			}
 		};
 
-		let lang = Manipulator.get(element, 'data-lang') || ('lang' in params) ? params.lang : defaultParams.lang;
+		const lang = Manipulator.get(element, 'data-lang') || params.lang || defaultParams.lang;
 
 		// Локализация текстов кнопок
 		defaultParams.button.more = lang_buttons(lang, NAME)['show'];
@@ -288,7 +292,8 @@ class VGRollup extends BaseModule {
 
 		if (isEllipsis && line) {
 			Classes.add(element, this.classes.ellipsis);
-			element.style.lineClamp  = Number(line);
+			element.style.lineClamp  = Number(line);
+			element.style.setProperty('-webkit-line-clamp', String(Number(line)));
 		} else if (isEllipsis) {
 			console.error("Переменная [data-line] или параметр[line] не должны быть пустыми");
 		}
@@ -377,13 +382,14 @@ class VGRollup extends BaseModule {
 
 				if (this._params.ellipsis.line) {
 					Classes.add(el, this.classes.ellipsis);
-					el.style.lineClamp = this._params.ellipsis.line;
+					el.style.lineClamp = this._params.ellipsis.line;
+					el.style.setProperty('-webkit-line-clamp', String(this._params.ellipsis.line));
 				}
 
 				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])
+				execute(this._params.callbacks.collapse, [el, this])
 			} else if (content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
 				items.forEach((item, index) => {
@@ -399,7 +405,9 @@ class VGRollup extends BaseModule {
 		} else {
 			const { hidden, ellipsis, fade } = this.classes;
 			Classes.remove(el, [hidden, ellipsis, fade]);
-			Manipulator.remove(el, 'style');
+			el.style.removeProperty('height');
+			el.style.removeProperty('line-clamp');
+			el.style.removeProperty('-webkit-line-clamp');
 
 			if (this._params.content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
@@ -455,4 +463,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	VGRollup.toggle(target, this);
 });
 
-export default VGRollup;
+export default VGRollup;

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

@@ -1,8 +1,11 @@
-import VGSelect from "./vgselect";
+/**
+ * Описание: делегированные обработчики интерфейса VGSelect.
+ * Возможности: открытие списка, выбор опций, теги, клавиатура и сброс формы.
+ */
+import VGSelect from "./vgselect";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
-import {transliterate} from "../../../utils/js/functions";
 
 const NAME_KEY = 'vg.select';
 
@@ -100,56 +103,6 @@ const _handlersVGSelect = () => {
 		}
 	});
 
-	EventHandler.on(document, EVENT_KEY_UP_DATA_API, SELECTOR_SEARCH_TOGGLE, function(e) {
-		const input = e.target;
-		const dropdown = input.closest(SELECTOR_DROPDOWN);
-		const list = dropdown?.querySelector(`.${CLASS_NAME_LIST}`);
-		if (!list) return;
-
-		const container = input.closest(`.${CLASS_NAME_CONTAINER}`);
-		const instance = VGSelect.getInstance(container);
-
-		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-		const groups = list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`);
-		const value = input.value.trim().toLowerCase();
-		const search = [value, transliterate(value), transliterate(value, true)];
-
-		options.forEach(el => { el.hidden = false; el.style.display = ''; });
-		groups.forEach(el => { el.hidden = false; el.style.display = ''; });
-
-		if (value) {
-			let visibleCount = 0;
-			groups.length ? groups.forEach(group => {
-				const items = group.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-				const visible = Array.from(items).some(item => {
-					const t = item.textContent.toLowerCase();
-					return search.some(s => t.includes(s));
-				});
-				group.hidden = !visible;
-				group.style.display = visible ? '' : 'none';
-				items.forEach(item => {
-					const t = item.textContent.toLowerCase();
-					const match = search.some(s => t.includes(s));
-					item.hidden = !match;
-					item.style.display = match ? '' : 'none';
-					if (match) visibleCount++;
-				});
-			}) : options.forEach(option => {
-				const t = option.textContent.toLowerCase();
-				const match = search.some(s => t.includes(s));
-				option.hidden = !match;
-				option.style.display = match ? '' : 'none';
-				if (match) visibleCount++;
-			});
-
-			instance?._triggerEvent(EVENT_KEY_SEARCH, { query: value, results: visibleCount });
-			instance?._callCallback('onSearch', { query: value, results: visibleCount });
-		} else {
-			instance?._triggerEvent(EVENT_KEY_SEARCH, { query: '', results: options.length });
-			instance?._callCallback('onSearch', { query: '', results: options.length });
-		}
-	});
-
 	EventHandler.on(document, EVENT_RESET_DATA_API, 'form', function() {
 		Selectors.findAll('select[data-inited="true"]', this).forEach(select => VGSelect.build(select, true));
 	});
@@ -236,4 +189,4 @@ const _handlersVGSelect = () => {
 	});
 }
 
-export default _handlersVGSelect;
+export default _handlersVGSelect;