vgapp 1.4.0 → 1.4.2

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

@@ -0,0 +1,227 @@
+import Backdrop from "../../../utils/js/components/backdrop";
+import Selectors from "../../../utils/js/dom/selectors";
+import EventHandler from "../../../utils/js/dom/event";
+import {reflow} from "../../../utils/js/functions";
+
+const NAME_KEY = 'vg.modal';
+
+const OPEN_SELECTOR = '.vg-modal.show:not([data-vg-persistent="true"])';
+
+const CLASS_NAME_OPEN = 'vg-modal-open';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_MINIMIZED = 'vg-modal-minimized-state';
+const CLASS_NAME_MINIMIZE_BUTTON = 'vg-btn-minimize';
+const CLASS_NAME_MINIMIZED_CONTAINER = 'vg-modal-minimized-container';
+const CLASS_NAME_MINIMIZED_ITEM = 'vg-modal-minimized';
+
+const EVENT_KEY_MINIMIZE = `${NAME_KEY}.minimize`;
+const EVENT_KEY_MINIMIZED = `${NAME_KEY}.minimized`;
+const EVENT_KEY_RESTORE = `${NAME_KEY}.restore`;
+const EVENT_KEY_RESTORED = `${NAME_KEY}.restored`;
+
+class VGModalMinimized {
+	constructor(modal) {
+		this._modal = modal;
+		this._element = modal._element;
+		this._dialog = modal._dialog;
+		this._content = modal._content;
+		this._minimizedElement = null;
+		this._isMinimized = false;
+	}
+
+	setup() {
+		const minimizeConfig = this._getConfig();
+		if (!minimizeConfig.enable || !this._content) return;
+		if (Selectors.find(`.${CLASS_NAME_MINIMIZE_BUTTON}`, this._content)) return;
+
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.className = CLASS_NAME_MINIMIZE_BUTTON;
+		button.setAttribute('aria-label', minimizeConfig.label || 'Minimize');
+		button.innerHTML = '<span aria-hidden="true"></span>';
+
+		const closeButton = Selectors.find('.vg-btn-close', this._content);
+		if (closeButton && closeButton.parentNode) {
+			closeButton.parentNode.insertBefore(button, closeButton);
+		} else {
+			this._content.prepend(button);
+		}
+
+		EventHandler.on(button, `click.${NAME_KEY}.minimize`, (event) => {
+			event.preventDefault();
+			this.minimize(button);
+		});
+	}
+
+	isMinimized() {
+		return this._isMinimized;
+	}
+
+	minimize(relatedTarget) {
+		if (!this._getConfig().enable || !this._modal._isShown || this._isMinimized || this._modal._isTransitioning) return;
+
+		const minimizeEvent = EventHandler.trigger(this._element, EVENT_KEY_MINIMIZE, { relatedTarget });
+		if (minimizeEvent.defaultPrevented) return;
+
+		this._isMinimized = true;
+		this._modal._disableInteractionHandlers();
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.classList.add(CLASS_NAME_MINIMIZED);
+		this._element.style.display = 'none';
+		this._element.removeAttribute('aria-modal');
+		this._element.removeAttribute('role');
+
+		const remainingOpenModals = Selectors.findAll(OPEN_SELECTOR).filter(modal => modal !== this._element);
+		if (!remainingOpenModals.length) {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+		}
+
+		const finish = () => {
+			if (!Backdrop.isActive()) {
+				this._modal._scrollBar.reset();
+			}
+
+			this._ensureElement(relatedTarget);
+			EventHandler.trigger(this._element, EVENT_KEY_MINIMIZED, { relatedTarget });
+		};
+
+		if (this._modal._backdropElement) {
+			this._modal._hideBackdrop(finish);
+			return;
+		}
+
+		finish();
+	}
+
+	restore(relatedTarget) {
+		if (!this._isMinimized || this._modal._isTransitioning) return;
+
+		const restoreEvent = EventHandler.trigger(this._element, EVENT_KEY_RESTORE, { relatedTarget });
+		if (restoreEvent.defaultPrevented) return;
+
+		const restoreElement = () => {
+			this.removeElement();
+			this._isMinimized = false;
+			this._element.classList.remove(CLASS_NAME_MINIMIZED);
+			this._element.style.display = 'block';
+			this._element.setAttribute('aria-modal', true);
+			this._element.setAttribute('role', 'dialog');
+			document.body.classList.add(CLASS_NAME_OPEN);
+
+			reflow(this._element);
+			this._element.classList.add(CLASS_NAME_SHOW);
+			this._modal._toggleInteractionHandlers();
+			this._modal._syncInteractiveBounds();
+			EventHandler.trigger(this._element, EVENT_KEY_RESTORED, { relatedTarget });
+		};
+
+		if (this._modal._params.backdrop) {
+			this._modal._scrollBar.hide();
+			this._modal._showBackdrop(restoreElement);
+			return;
+		}
+
+		restoreElement();
+	}
+
+	reset() {
+		this.removeElement();
+		this._isMinimized = false;
+		this._element.classList.remove(CLASS_NAME_MINIMIZED);
+	}
+
+	dispose() {
+		this.removeElement();
+	}
+
+	_getConfig() {
+		const value = this._modal._params.minimize;
+		const defaults = {
+			enable: false,
+			title: '',
+			text: '',
+			label: 'Minimize',
+		};
+
+		if (typeof value === 'boolean') {
+			return {...defaults, enable: value};
+		}
+
+		if (value && typeof value === 'object') {
+			const hasEnable = Object.prototype.hasOwnProperty.call(value, 'enable');
+			return {
+				...defaults,
+				...value,
+				enable: hasEnable ? Boolean(value.enable) : true,
+			};
+		}
+
+		return defaults;
+	}
+
+	_ensureElement(relatedTarget) {
+		if (this._minimizedElement && this._minimizedElement.isConnected) return this._minimizedElement;
+
+		const minimizeConfig = this._getConfig();
+		const container = VGModalMinimized.getContainer();
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.className = CLASS_NAME_MINIMIZED_ITEM;
+		button.setAttribute('data-vg-modal-target', `#${this._element.id}`);
+
+		const title = document.createElement('span');
+		title.className = `${CLASS_NAME_MINIMIZED_ITEM}__title`;
+		title.textContent = this._getTitle(minimizeConfig);
+		button.append(title);
+
+		const text = String(minimizeConfig.text || '').trim();
+		if (text) {
+			const description = document.createElement('span');
+			description.className = `${CLASS_NAME_MINIMIZED_ITEM}__text`;
+			description.textContent = text;
+			button.append(description);
+		}
+
+		EventHandler.on(button, `click.${NAME_KEY}.restore`, (event) => {
+			event.preventDefault();
+			this.restore(button || relatedTarget);
+		});
+
+		container.append(button);
+		this._minimizedElement = button;
+		return button;
+	}
+
+	_getTitle(minimizeConfig) {
+		const configuredTitle = String(minimizeConfig.title || '').trim();
+		if (configuredTitle) return configuredTitle;
+
+		const titleElement = Selectors.find('.vg-modal-title, .vg-modal-chat__name, [data-vg-modal-title]', this._element);
+		const title = String(titleElement ? titleElement.textContent : '').trim();
+		return title || this._element.id || 'Modal';
+	}
+
+	removeElement() {
+		if (this._minimizedElement) {
+			this._minimizedElement.remove();
+			this._minimizedElement = null;
+		}
+
+		const container = Selectors.find(`.${CLASS_NAME_MINIMIZED_CONTAINER}`);
+		if (container && !container.children.length) {
+			container.remove();
+		}
+	}
+
+	static getContainer() {
+		let container = Selectors.find(`.${CLASS_NAME_MINIMIZED_CONTAINER}`);
+		if (container) return container;
+
+		container = document.createElement('div');
+		container.className = CLASS_NAME_MINIMIZED_CONTAINER;
+		document.body.append(container);
+		return container;
+	}
+}
+
+export default VGModalMinimized;

package/app/modules/vgmodal/scss/vgmodal.scss

@@ -91,10 +91,74 @@
 			border: 0;
 			border-radius: 0;
 		}
-	}
-}
-
-@media screen and (min-width: 576px){
+	}
+}
+
+.vg-btn-minimize {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	right: 55px;
+	top: 15px;
+	border: none;
+	background: transparent;
+	border-radius: 50%;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	z-index: 2;
+
+	span {
+		width: 14px;
+		height: 2px;
+		background: currentColor;
+		display: block;
+	}
+}
+
+.vg-modal-minimized-container {
+	position: fixed;
+	right: 20px;
+	bottom: 20px;
+	z-index: calc(var(--vg-modal-z-index, #{$modal-index}) + 1);
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 10px;
+	pointer-events: none;
+}
+
+.vg-modal-minimized {
+	min-width: 220px;
+	max-width: 320px;
+	border: var(--vg-modal-border-width) var(--vg-modal-border-style) var(--vg-modal-border-color);
+	border-radius: var(--vg-modal-border-radius);
+	background: var(--vg-modal-background-color);
+	color: var(--vg-modal-color);
+	box-shadow: var(--vg-modal-box-shadow);
+	padding: .75rem 1rem;
+	cursor: pointer;
+	pointer-events: auto;
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+
+	&__title {
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+	&__text {
+		font-size: .875rem;
+		opacity: .75;
+		line-height: 1.2;
+	}
+}
+
+@media screen and (min-width: 576px){
 	.vg-modal {
 		--vg-modal-margin: #{$modal-dialog-margin-y-sm-up};
 		--vg-modal-box-shadow: #{$modal-content-box-shadow-sm-up};

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

@@ -49,38 +49,60 @@ class VGNav extends BaseModule {
 		super(element);
 
 		this._params = this._getParams(element, mergeDeepObject({
+			// Брейкпоинт, с которого навигация отображается в расширенном виде.
 			breakpoint: 'lg',
+			// Направление меню: влияет на классы и поведение позиционирования.
 			placement: 'horizontal',
+			// Включает открытие выпадающих пунктов при наведении на десктопе.
 			hover: true,
+			// Включает ограничение высоты и overflow для списка внутри выпадающего меню.
+			dropListScroll: true,
+			// Настройки плавного переключения между соседними пунктами первого уровня.
 			hoversmoothfirstlevel: {
+				// Включает режим плавного перехода без мгновенного закрытия соседнего дропа.
 				enable: false,
+				// Ограничивает плавное переключение только горизонтальным движением курсора.
 				horizontalOnly: true
 			},
+			// Настройки анимации открытия и закрытия выпадающих пунктов.
 			animation: {
+				// Включает анимацию переходов.
 				enable: true,
+				// Длительность ожидания завершения анимации перед финальным состоянием.
 				timeout: 700
 			},
-			toggle: '<span class="default"></span>',
-			hamburger: {
-				enable: true,
-				always: false,
-				title: '',
-				body: null,
-				target: '#sidebar-nav'
-			},
-			callbacks: {
-				afterInit: noop,
-				afterClick: noop,
-			}
-		}, params));
+			// HTML-разметка иконки-указателя для пунктов с выпадающим меню.
+			toggle: '<span class="default"></span>',
+			// Настройки кнопки-гамбургера для мобильной/адаптивной навигации.
+			hamburger: {
+				// Разрешает создавать и использовать кнопку-гамбургер.
+				enable: true,
+				// Принудительно показывает гамбургер всегда, независимо от брейкпоинта.
+				always: false,
+				// Текстовый заголовок рядом с иконкой гамбургера.
+				title: '',
+				// Пользовательская HTML-разметка тела гамбургера вместо стандартных линий.
+				body: null,
+				// CSS-селектор сайдбара, который открывает кнопка-гамбургер.
+				target: '#sidebar-nav'
+			},
+			// Пользовательские обработчики жизненного цикла навигации.
+			callbacks: {
+				// Вызывается после построения навигации.
+				afterInit: noop,
+				// Вызывается после клика по пункту навигации.
+				afterClick: noop,
+			}
+		}, params));
 
 		this._classes = {
 			hamburgerActive: 'vg-nav-hamburger-active',
 			hamburgerAlways: 'vg-nav-hamburger-always',
-			hamburger: 'vg-nav-hamburger',
-			container: 'vg-nav-container',
-			wrapper: 'vg-nav-wrapper',
-			active: 'vg-nav-active',
+			hamburger: 'vg-nav-hamburger',
+			container: 'vg-nav-container',
+			wrapper: 'vg-nav-wrapper',
+			dropListScroll: 'vg-nav-drop-list-scroll',
+			active: 'vg-nav-active',
 			expand: 'vg-nav-expand',
 			cloned: 'vg-nav-cloned',
 			hover: 'vg-nav-hover',
@@ -131,11 +153,12 @@ class VGNav extends BaseModule {
 		let params = this._params,
 			classes = this._classes;
 
-		// Вешаем основные классы
-		this._element.classList.add(classes.container);
-		this._element.classList.add('vg-nav-' + params.placement);
-
-		if (!params.hamburger.always) {
+		// Вешаем основные классы
+		this._element.classList.add(classes.container);
+		this._element.classList.add('vg-nav-' + params.placement);
+		this._element.classList.toggle(classes.dropListScroll, !!params.dropListScroll);
+
+		if (!params.hamburger.always) {
 			if (!params.breakpoint) {
 				this._element.classList.add(classes.expand);
 			} else if (params.breakpoint !== false) {

package/app/modules/vgnav/scss/vgnav.scss

@@ -70,15 +70,9 @@
 				background-color: var(--vg-nav-drop-bg);
 				overflow: visible;
 
-				> .vg-nav-drop-list {
-					max-height: var(--vg-nav-drop-max-height);
-					overflow-y: var(--vg-nav-drop-overflow-y);
-					overflow-x: var(--vg-nav-drop-overflow-x);
-				}
-
-				&:not(.show) {
-					display: none;
-				}
+				&:not(.show) {
+					display: none;
+				}
 
 				&.fade {
 					visibility: visible;
@@ -135,11 +129,25 @@
 					}
 				}
 			}
-		}
-	}
-
-	/** set placement **/
-	@import "placement";
+		}
+	}
+
+	&.vg-nav-drop-list-scroll {
+		.vg-nav-wrapper {
+			.dropdown {
+				.dropdown-content {
+					> .vg-nav-drop-list {
+						max-height: var(--vg-nav-drop-max-height);
+						overflow-y: var(--vg-nav-drop-overflow-y);
+						overflow-x: var(--vg-nav-drop-overflow-x);
+					}
+				}
+			}
+		}
+	}
+
+	/** set placement **/
+	@import "placement";
 
 	/** set hamburger **/
 	@import "hamburger";

package/app/modules/vgnestable/README.md

@@ -69,16 +69,18 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 Значения по умолчанию:
 
 ```js
-{
-  listselector: ".vg-nestable-list",
+{
+  disabled: false,
+  disabledattribute: "data-disabled",
+  listselector: ".vg-nestable-list",
   itemselector: ".vg-nestable-item",
   handleselector: ".vg-nestable-handle",
   idattribute: "data-id",
   childlistclass: "vg-nestable-list",
   handleicon: "",
-  indent: 28,
+  indent: 18,
   maxdepth: 6,
-  hoverthreshold: 0.18,
+  hoverthreshold: 0.25,
   neighborchangethreshold: 0,
   showplaceholder: true,
   group: "",
@@ -117,22 +119,49 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 }
 ```
 
-### Пояснение параметров
-
-- `listselector`: селектор корневого/вложенных списков.
+### Пояснение параметров
+
+- `disabled`: полностью отключает изменение дерева мышью, touch и клавиатурой. Также читается из `data-disabled="true"` корневого элемента.
+- `disabledattribute`: атрибут блокировки отдельных элементов и вложенных списков (`data-disabled` по умолчанию).
+- `listselector`: селектор корневого/вложенных списков.
 - `itemselector`: селектор sortable-элемента.
 - `handleselector`: селектор зоны, за которую можно начинать drag.
 - `idattribute`: атрибут, из которого берется `id` в `serialize()`.
 - `childlistclass`: классы для автосозданного дочернего списка.
 - `handleicon`: HTML/SVG иконки хэндла (проходит SVG-санитизацию).
-- `indent`: смещение по X (px), после которого режим дропа переключается в вложение (`child`).
+- `indent`: ширина одного горизонтального шага вложенности. Каждый следующий шаг вправо переносит элемент ещё на один доступный уровень под предыдущий элемент.
 - `maxdepth`: максимальная глубина дерева.
-- `hoverthreshold`: вертикальный порог (0.05..0.45 фактически), определяет зоны `before/after/keep`.
+- `hoverthreshold`: половина высоты центральной зоны (0.05..0.45), используемой для вложения; выше и ниже неё находятся зоны `before/after`.
 - `neighborchangethreshold`: порог в процентах (0..49), альтернативная логика смены позиции по краям элемента.
 - `showplaceholder`: показывать/скрывать placeholder во время drag.
 - `group`: имя группы списков для межспискового dnd.
 - `connect`: включить связь списков внутри группы.
-- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
+- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
+
+### Блокировка перетаскивания
+
+Заблокировать всё дерево, в том числе запретить перенос в него из связанного списка:
+
+```html
+<div class="vg-nestable" data-vg-toggle="nestable" data-disabled="true">
+  <ol class="vg-nestable-list">...</ol>
+</div>
+```
+
+Заблокировать только конкретный элемент. Другие элементы по-прежнему могут вставляться до/после него, поэтому его индекс в результате может измениться:
+
+```html
+<li class="vg-nestable-item" data-id="2" data-disabled="true">...</li>
+```
+
+Заблокировать внутреннюю группу. Её элементы нельзя переносить отдельно или добавлять в эту группу, но родительскую ветку можно перемещать целиком:
+
+```html
+<li class="vg-nestable-item" data-id="1">
+  <div class="vg-nestable-inner">...</div>
+  <ol class="vg-nestable-list" data-disabled="true">...</ol>
+</li>
+```
 
 #### `collapse`