vgapp 1.3.4 → 1.3.6

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

@@ -52,7 +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'];
+const DATA_ATTR_COPY_EXCLUDE_DEFAULT = ['inited', 'updating', 'exclude'];
 
 /**
  * Класс VGSelect
@@ -90,7 +90,7 @@ class VGSelect extends BaseModule {
 			},
 			close: true,
 			tree: false,
-			exclude: 'data-filter-param',
+			exclude: 'data-filter-param',
 			placeholder: '',
 			onInit: null,
 			onShow: null,
@@ -275,12 +275,12 @@ class VGSelect extends BaseModule {
 		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
 	}
 
-	static _normalizeDataAttrKey(value) {
-		return String(value || '')
-			.trim()
-			.replace(/^data-/, '')
-			.toLowerCase();
-	}
+	static _normalizeDataAttrKey(value) {
+		return String(value || '')
+			.trim()
+			.replace(/^data-/, '')
+			.toLowerCase();
+	}
 
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
@@ -788,28 +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;
-
-		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 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;
-			}
+			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);
 
@@ -832,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 {
@@ -844,17 +844,17 @@ class VGSelect extends BaseModule {
 				return;
 			}
 
-			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;
-			}
+			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);
 

package/app/modules/vgselect/scss/vgselect.scss

@@ -25,7 +25,7 @@ select {
 	}
 }
 
-.vg-select {
+.vg-select {
 	@include mix-vars('select-current', $select-current-map);
 	@include mix-vars('select-current', $select-placeholder-map);
 	@include mix-vars('select-dropdown', $select-dropdown-map);
@@ -117,7 +117,7 @@ select {
 		}
 	}
 
-	&-dropdown {
+	&-dropdown {
 		@each $key, $value in $select-dropdown-map {
 			#{$key}: var(--vg-select-dropdown-#{$key})
 		}
@@ -135,25 +135,25 @@ select {
 		transform: scale(0.75) translateY(-11px);
 		transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
 		z-index: var(--vg-select-dropdown-z-index);
-		margin-top: .25rem;
-	}
-
-	&.drop-up {
-		.vg-select-dropdown {
-			top: auto;
-			bottom: 100%;
-			margin-top: 0;
-			margin-bottom: .25rem;
-			transform-origin: 50% 100%;
-			transform: scale(0.75) translateY(11px);
-		}
-	}
-
-	&-list {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		display: flex;
+		margin-top: .25rem;
+	}
+
+	&.drop-up {
+		.vg-select-dropdown {
+			top: auto;
+			bottom: 100%;
+			margin-top: 0;
+			margin-bottom: .25rem;
+			transform-origin: 50% 100%;
+			transform: scale(0.75) translateY(11px);
+		}
+	}
+
+	&-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
 		flex-direction: column;
 		max-height: var(--vg-select-list-max-height);
 		overflow-y: auto;
@@ -281,4 +281,4 @@ select {
 			opacity: .75;
 		}
 	}
-}
+}

package/app/modules/vgspy/readme.md

@@ -47,10 +47,10 @@
 |--------|------|-------------|----------|
 | `offset` | `number` | `null` | *(устарело)* Смещение активации (в пикселях). Используйте `rootMargin` вместо этого. |
 | `rootMargin` | `string` | `'0px 0px -25%'` | Отступы для `IntersectionObserver`. Управляет, насколько "внутрь" должна зайти секция, чтобы стать активной. |
-| `smoothScroll` | `boolean` | `true` | Включить плавную прокрутку при клике на якорные ссылки. |
-| `target` | `HTMLElement \| string` | элемент с `data-vg-toggle="spy"` | Контейнер, внутри которого происходит прокрутка. Если не указан — используется `window`. |
-| `scrollbar` | `Object \| null` | `null` | Инстанс `smooth-scrollbar` или Scrollbar API (если `smooth-scrollbar` импортирован как модуль и не лежит в `window.Scrollbar`). |
-| `threshold` | `number[] \| string` | `[0.1, 0.5, 1]` | Пороги видимости (от 0 до 1), при которых срабатывает активация. Можно передать строку: `'0.1, 0.5, 1'`. |
+| `smoothScroll` | `boolean` | `true` | Включить плавную прокрутку при клике на якорные ссылки. |
+| `target` | `HTMLElement \| string` | элемент с `data-vg-toggle="spy"` | Контейнер, внутри которого происходит прокрутка. Если не указан — используется `window`. |
+| `scrollbar` | `Object \| null` | `null` | Инстанс `smooth-scrollbar` или Scrollbar API (если `smooth-scrollbar` импортирован как модуль и не лежит в `window.Scrollbar`). |
+| `threshold` | `number[] \| string` | `[0.1, 0.5, 1]` | Пороги видимости (от 0 до 1), при которых срабатывает активация. Можно передать строку: `'0.1, 0.5, 1'`. |
 
 ---
 
@@ -86,29 +86,29 @@
 
 ---
 
-## 📚 Заметки
-
-- Убедитесь, что все целевые секции имеют `id`, соответствующий `href` ссылки.
-- Секции должны быть видимы (`display: block`, `visibility: visible`).
-- Работает с динамически добавленным контентом, но требует вызова `refresh()` после вставки.
-- Если прокрутка виртуальная (например, `smooth-scrollbar`), передайте `target` как контейнер, на который был инициализирован `smooth-scrollbar`, и при модульном импорте также передайте `scrollbar`.
-
-Пример (модульный импорт `smooth-scrollbar`):
-
-```js
-import Scrollbar from 'smooth-scrollbar';
-import VGSpy from './app/modules/vgspy';
-
-const scrollRoot = document.querySelector('.my-scroll-root');
-Scrollbar.init(scrollRoot);
-
-VGSpy.getOrCreateInstance(document.querySelector('[data-vg-toggle="spy"]'), {
-  target: scrollRoot,
-  scrollbar: Scrollbar,
-});
-```
-
----
+## 📚 Заметки
+
+- Убедитесь, что все целевые секции имеют `id`, соответствующий `href` ссылки.
+- Секции должны быть видимы (`display: block`, `visibility: visible`).
+- Работает с динамически добавленным контентом, но требует вызова `refresh()` после вставки.
+- Если прокрутка виртуальная (например, `smooth-scrollbar`), передайте `target` как контейнер, на который был инициализирован `smooth-scrollbar`, и при модульном импорте также передайте `scrollbar`.
+
+Пример (модульный импорт `smooth-scrollbar`):
+
+```js
+import Scrollbar from 'smooth-scrollbar';
+import VGSpy from './app/modules/vgspy';
+
+const scrollRoot = document.querySelector('.my-scroll-root');
+Scrollbar.init(scrollRoot);
+
+VGSpy.getOrCreateInstance(document.querySelector('[data-vg-toggle="spy"]'), {
+  target: scrollRoot,
+  scrollbar: Scrollbar,
+});
+```
+
+---
 
 
 ## 📝 Лицензия
@@ -119,4 +119,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgtoast/readme.md

@@ -66,9 +66,9 @@ VGToast.run('Ошибка подключения', {
 | `animation.enable` | `boolean` | `true` | Включить анимации |
 | `animation.in` | `string` | `'animate__backInUp'` | Анимация появления |
 | `animation.out` | `string` | `'animate__backOutDown'` | Анимация исчезновения |
-| `animation.delay` | `number` | `300` | Длительность анимации (мс) |
-| `animation.effect` | `string \| string[]` | `'none'` | Доп. CSS-эффект отображения: `none`, `fade`, `zoom`, `blur`, `slide-up`, `slide-down` или кастомный класс |
-| `ajax.route` | `string` | `''` | URL для загрузки |
+| `animation.delay` | `number` | `300` | Длительность анимации (мс) |
+| `animation.effect` | `string \| string[]` | `'none'` | Доп. CSS-эффект отображения: `none`, `fade`, `zoom`, `blur`, `slide-up`, `slide-down` или кастомный класс |
+| `ajax.route` | `string` | `''` | URL для загрузки |
 | `ajax.target` | `string` | `''` | Селектор контейнера (если используется) |
 | `ajax.method` | `string` | `'get'` | HTTP-метод |
 | `ajax.loader` | `boolean` | `false` | Показывать лоадер |
@@ -90,20 +90,20 @@ VGToast.run('Появилось!', {
 });
 ```
 
-### 2. AJAX-уведомление
-### 2.1. Дополнительные эффекты отображения
-```js
-VGToast.run('Сообщение', {
-    animation: {
-        in: 'animate__fadeIn',
-        out: 'animate__fadeOut',
-        effect: ['zoom', 'blur']
-    }
-});
-```
-
-```js
-VGToast.run('Загрузка...', { 
+### 2. AJAX-уведомление
+### 2.1. Дополнительные эффекты отображения
+```js
+VGToast.run('Сообщение', {
+    animation: {
+        in: 'animate__fadeIn',
+        out: 'animate__fadeOut',
+        effect: ['zoom', 'blur']
+    }
+});
+```
+
+```js
+VGToast.run('Загрузка...', { 
     ajax: { 
         route: '/api/notify', 
         method: 'post', 
@@ -153,4 +153,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgtoast/scss/vgtoast.scss

@@ -11,7 +11,7 @@
 @import "../../../utils/scss/variables";
 @import "variables";
 
-.vg-toast {
+.vg-toast {
 	@include mix-vars('toast', $toast-map);
 	@include mix-alert-color-mode($class: vg-toast);
 	position: fixed;
@@ -64,52 +64,52 @@
 		font-weight: var(--vg-toast-body-font-weight);
 	}
 
-	&-pointer {
-		cursor: pointer;
-	}
-
-	&[class*='vg-toast-effect-'] {
-		.vg-toast-wrapper {
-			transition: opacity .25s ease, transform .25s ease, filter .25s ease;
-			will-change: opacity, transform, filter;
-		}
-	}
-
-	&.vg-toast-effect-fade {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-		}
-	}
-
-	&.vg-toast-effect-zoom {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: scale(.92);
-		}
-	}
-
-	&.vg-toast-effect-blur {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			filter: blur(6px);
-		}
-	}
-
-	&.vg-toast-effect-slide-up {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: translateY(14px);
-		}
-	}
-
-	&.vg-toast-effect-slide-down {
-		&:not(.shown) .vg-toast-wrapper {
-			opacity: 0;
-			transform: translateY(-14px);
-		}
-	}
-
-	&-button {
+	&-pointer {
+		cursor: pointer;
+	}
+
+	&[class*='vg-toast-effect-'] {
+		.vg-toast-wrapper {
+			transition: opacity .25s ease, transform .25s ease, filter .25s ease;
+			will-change: opacity, transform, filter;
+		}
+	}
+
+	&.vg-toast-effect-fade {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+		}
+	}
+
+	&.vg-toast-effect-zoom {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: scale(.92);
+		}
+	}
+
+	&.vg-toast-effect-blur {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			filter: blur(6px);
+		}
+	}
+
+	&.vg-toast-effect-slide-up {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: translateY(14px);
+		}
+	}
+
+	&.vg-toast-effect-slide-down {
+		&:not(.shown) .vg-toast-wrapper {
+			opacity: 0;
+			transform: translateY(-14px);
+		}
+	}
+
+	&-button {
 		width: auto;
 		height: 100%;
 		display: flex;
@@ -136,4 +136,4 @@
 			}
 		}
 	}
-}
+}

package/app/modules/vgtooltip/js/vgtooltip.js

@@ -7,14 +7,14 @@ import Placement from "../../../utils/js/components/placement";
 const NAME = 'tooltip';
 const NAME_KEY = 'vg.tooltip';
 
-const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="tooltip"]';
-const SELECTOR_DATA_TOGGLE_POPOVER = '[data-vg-toggle="popover"]';
-
-const CLASS_NAME_OPEN = 'vg-tooltip-open';
-const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_SHOWN = 'shown';
-
-const SELECTOR_OPEN_TRIGGER = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}, ${SELECTOR_DATA_TOGGLE_POPOVER}.${CLASS_NAME_SHOW}`;
+const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="tooltip"]';
+const SELECTOR_DATA_TOGGLE_POPOVER = '[data-vg-toggle="popover"]';
+
+const CLASS_NAME_OPEN = 'vg-tooltip-open';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_SHOWN = 'shown';
+
+const SELECTOR_OPEN_TRIGGER = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}, ${SELECTOR_DATA_TOGGLE_POPOVER}.${CLASS_NAME_SHOW}`;
 
 const EVENT_KEY_HIDE = `${NAME_KEY}.hide`;
 const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
@@ -24,23 +24,23 @@ const EVENT_KEY_SHOWN = `${NAME_KEY}.shown`;
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 const EVENT_KEY_MOUSEENTER = `mouseenter.${NAME_KEY}`;
 const EVENT_KEY_MOUSELEAVE = `mouseleave.${NAME_KEY}`;
-const EVENT_KEY_CLICK_DISMISS = `click.dismiss.${NAME_KEY}`;
-const EVENT_KEY_KEYDOWN = `keydown.dismiss.${NAME_KEY}`;
-
-const PLACEMENT_CLASSES = [
-	'top',
-	'top-start',
-	'top-end',
-	'bottom',
-	'bottom-start',
-	'bottom-end',
-	'left',
-	'left-start',
-	'left-end',
-	'right',
-	'right-start',
-	'right-end'
-];
+const EVENT_KEY_CLICK_DISMISS = `click.dismiss.${NAME_KEY}`;
+const EVENT_KEY_KEYDOWN = `keydown.dismiss.${NAME_KEY}`;
+
+const PLACEMENT_CLASSES = [
+	'top',
+	'top-start',
+	'top-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+	'right',
+	'right-start',
+	'right-end'
+];
 
 const defaultParams = {
 	title: '',
@@ -86,14 +86,14 @@ class VGTooltip extends BaseModule {
 		this._showTimeout = null;
 		this._hideTimeout = null;
 
-		this._fixTitle();
+		this._fixTitle();
 
-		this._handleUpdate = () => {
-			if (this._isShown()) {
-				this._setPlacement();
-			}
-		};
-	}
+		this._handleUpdate = () => {
+			if (this._isShown()) {
+				this._setPlacement();
+			}
+		};
+	}
 
 	static get NAME() {
 		return NAME;
@@ -370,17 +370,17 @@ class VGTooltip extends BaseModule {
 		}
 	}
 
-	_syncPlacementClass() {
-		if (!this._tooltip) return;
-
-		const placement = this._tooltip.getAttribute('data-vg-placement');
-
-		this._tooltip.classList.remove(...PLACEMENT_CLASSES);
-
-		if (placement) {
-			this._tooltip.classList.add(placement);
-		}
-	}
+	_syncPlacementClass() {
+		if (!this._tooltip) return;
+
+		const placement = this._tooltip.getAttribute('data-vg-placement');
+
+		this._tooltip.classList.remove(...PLACEMENT_CLASSES);
+
+		if (placement) {
+			this._tooltip.classList.add(placement);
+		}
+	}
 
 	_hideOpenedTooltips() {
 		Selectors.findAll('.vg-tooltip.show').forEach(tooltip => {
@@ -404,54 +404,54 @@ class VGTooltip extends BaseModule {
 		window.removeEventListener('scroll', this._handleUpdate, true);
 	}
 
-	_clearTimeouts() {
-		if (this._showTimeout) {
-			clearTimeout(this._showTimeout);
-			this._showTimeout = null;
+	_clearTimeouts() {
+		if (this._showTimeout) {
+			clearTimeout(this._showTimeout);
+			this._showTimeout = null;
 		}
 
 		if (this._hideTimeout) {
-			clearTimeout(this._hideTimeout);
-			this._hideTimeout = null;
-		}
-	}
-}
-
-const getShownInstances = () => {
-	return Selectors.findAll(SELECTOR_OPEN_TRIGGER)
-		.map(element => VGTooltip.getInstance(element))
-		.filter(Boolean);
-};
-
-EventHandler.on(document, EVENT_KEY_KEYDOWN, event => {
-	if (event.key !== 'Escape') return;
-
-	getShownInstances().forEach(instance => {
-		if (!instance._params.keyboard || !instance._isShown()) return;
-
-		instance.hide();
-	});
-});
-
-EventHandler.on(document, EVENT_KEY_CLICK_DISMISS, event => {
-	getShownInstances().forEach(instance => {
-		if (!instance._params.closeOnOutsideClick) return;
-		if (!instance._params.trigger.includes('click') && !instance._params.popover) return;
-		if (!instance._isShown()) return;
-
-		if (
-			instance._tooltip?.contains(event.target) ||
-			instance._element.contains(event.target)
-		) {
-			return;
-		}
-
-		instance.hide();
-	});
-});
-
-EventHandler.on(document, EVENT_KEY_MOUSEENTER, SELECTOR_DATA_TOGGLE, function () {
-	const instance = VGTooltip.getOrCreateInstance(this);
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+	}
+}
+
+const getShownInstances = () => {
+	return Selectors.findAll(SELECTOR_OPEN_TRIGGER)
+		.map(element => VGTooltip.getInstance(element))
+		.filter(Boolean);
+};
+
+EventHandler.on(document, EVENT_KEY_KEYDOWN, event => {
+	if (event.key !== 'Escape') return;
+
+	getShownInstances().forEach(instance => {
+		if (!instance._params.keyboard || !instance._isShown()) return;
+
+		instance.hide();
+	});
+});
+
+EventHandler.on(document, EVENT_KEY_CLICK_DISMISS, event => {
+	getShownInstances().forEach(instance => {
+		if (!instance._params.closeOnOutsideClick) return;
+		if (!instance._params.trigger.includes('click') && !instance._params.popover) return;
+		if (!instance._isShown()) return;
+
+		if (
+			instance._tooltip?.contains(event.target) ||
+			instance._element.contains(event.target)
+		) {
+			return;
+		}
+
+		instance.hide();
+	});
+});
+
+EventHandler.on(document, EVENT_KEY_MOUSEENTER, SELECTOR_DATA_TOGGLE, function () {
+	const instance = VGTooltip.getOrCreateInstance(this);
 
 	if (instance._params.trigger.includes('hover')) {
 		instance.show(this);
@@ -490,4 +490,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_POPOVER
 	instance.toggle(this);
 });
 
-export default VGTooltip;
+export default VGTooltip;