vgapp 1.5.7 → 1.5.8

package/app/modules/vgtabs/js/vgtabs.js

@@ -1,8 +1,8 @@
-/**
- * Описание: вкладки VGTabs с декларативной и ручной инициализацией.
- * Возможности: клавиатура, начальный hash, AJAX, отменяемые события и адаптивный индикатор.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: вкладки VGTabs с декларативной и ручной инициализацией.
+ * Возможности: клавиатура, начальный hash, AJAX, отменяемые события и адаптивный индикатор.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import EventHandler from "../../../utils/js/dom/event";
 import {getNextActiveElement, isDisabled, mergeDeepObject} from "../../../utils/js/functions";
@@ -136,7 +136,7 @@ class VGTabs extends BaseModule {
 				once: true,
 				output: true,
 			},
-		}, params || {});
+		}, params || {});
 
 		this._parent = this._element.closest(SELECTOR.TAB_PANEL);
 		this._main_parent = this._parent?.closest(SELECTOR.TAB_CLASS) || null;
@@ -177,19 +177,19 @@ class VGTabs extends BaseModule {
 	show() {
 		const innerElem = this._element;
 
-		if (!innerElem || isDisabled(innerElem) || this._elemIsActive(innerElem)) return;
+		if (!innerElem || isDisabled(innerElem) || this._elemIsActive(innerElem)) return;
 
 		const activeElem = this._getActiveElem();
 
 		// События hide и show
-		const hideEvent = activeElem ? EventHandler.trigger(activeElem, EVENT_HIDE, {relatedTarget: innerElem}) : null;
-		const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, {relatedTarget: activeElem});
+		const hideEvent = activeElem ? EventHandler.trigger(activeElem, EVENT_HIDE, {relatedTarget: innerElem}) : null;
+		const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, {relatedTarget: activeElem});
 
 		if (showEvent.defaultPrevented || (hideEvent && hideEvent.defaultPrevented)) return;
 
 		this._deactivate(activeElem, innerElem);
-		this._activate(innerElem, activeElem);
-		this._updateSlider(innerElem);
+		this._activate(innerElem, activeElem);
+		this._updateSlider(innerElem);
 	}
 
 	/**
@@ -222,28 +222,28 @@ class VGTabs extends BaseModule {
 		const target = Selectors.getElementFromSelector(element);
 		if (target) this._activate(target, relatedTarget);
 
-		const complete = () => {
-			if (!this._element || !element.classList.contains(CLASS_NAME.ACTIVE)) return;
+		const complete = () => {
+			if (!this._element || !element.classList.contains(CLASS_NAME.ACTIVE)) return;
 			if (element.getAttribute('role') !== 'tab') {
 				element.classList.add(CLASS_NAME.SHOW);
 				return;
 			}
 
-			if (this._params.ajax.route && !this._isLoaded && !this._isLoading) {
-				this._isLoading = true;
-				const loaded = (status, data) => {
-					if (!this._element) return;
-					this._isLoading = false;
-					EventHandler.trigger(this._element, EVENT_LOADED, { stats: status, data });
-				};
-				this._route(loaded, error => loaded('error', error));
-			}
+			if (this._params.ajax.route && !this._isLoaded && !this._isLoading) {
+				this._isLoading = true;
+				const loaded = (status, data) => {
+					if (!this._element) return;
+					this._isLoading = false;
+					EventHandler.trigger(this._element, EVENT_LOADED, { stats: status, data });
+				};
+				this._route(loaded, error => loaded('error', error));
+			}
 
 			element.removeAttribute('tabindex');
 			element.setAttribute('aria-selected', 'true');
 			this._toggleDropDown(element, true);
 
-			EventHandler.trigger(element, EVENT_SHOWN, { relatedTarget });
+			EventHandler.trigger(element, EVENT_SHOWN, { relatedTarget });
 		};
 
 		this._queueCallback(complete, element, element.classList.contains(CLASS_NAME.FADE));
@@ -263,8 +263,8 @@ class VGTabs extends BaseModule {
 		const target = Selectors.getElementFromSelector(element);
 		if (target) this._deactivate(target, relatedTarget);
 
-		const complete = () => {
-			if (!this._element || element.classList.contains(CLASS_NAME.ACTIVE)) return;
+		const complete = () => {
+			if (!this._element || element.classList.contains(CLASS_NAME.ACTIVE)) return;
 			if (element.getAttribute('role') !== 'tab') {
 				element.classList.remove(CLASS_NAME.SHOW);
 				return;
@@ -312,12 +312,12 @@ class VGTabs extends BaseModule {
 	_setTabHash() {
 		if (!this._params.hash) return;
 
-		let hash = document.location.hash;
-		if (!hash) return;
-		try { hash = decodeURIComponent(hash); } catch { return; }
-		const element = this._getChildren().find(child =>
-			!isDisabled(child) && (child.getAttribute('href') === hash || child.getAttribute('data-vg-target') === hash)
-		);
+		let hash = document.location.hash;
+		if (!hash) return;
+		try { hash = decodeURIComponent(hash); } catch { return; }
+		const element = this._getChildren().find(child =>
+			!isDisabled(child) && (child.getAttribute('href') === hash || child.getAttribute('data-vg-target') === hash)
+		);
 
 		if (element) {
 			VGTabs.getOrCreateInstance(element).show();
@@ -327,8 +327,8 @@ class VGTabs extends BaseModule {
 	/**
 	 * Инициализация слайдера-индикатора под вкладками
 	 */
-	_setInitialSlider() {
-		if (!this._params.slide || !this._main_parent) return;
+	_setInitialSlider() {
+		if (!this._params.slide || !this._main_parent) return;
 
 		let slider = Selectors.find(`.${CLASS_NAME.SLIDER}`, this._main_parent);
 		if (!slider) {
@@ -339,58 +339,58 @@ class VGTabs extends BaseModule {
 
 		this._main_parent.classList.add(CLASS_NAME.WITH_SLIDER);
 
-		this._updateSlider(this._getActiveElem());
-		this._sliderOver = event => {
-			const target = event.delegateTarget;
-			if (target.closest(SELECTOR.TAB_PANEL) === this._parent && !isDisabled(target)) this._updateSlider(target);
-		};
-		this._sliderOut = () => this._updateSlider(this._getActiveElem());
-		// Только один владелец общих обработчиков на группу вкладок.
-		const owner = this._getChildren().some(child => VGTabs.getInstance(child)?._sliderOver && child !== this._element);
-		if (owner) {
-			this._sliderOver = null;
-			this._sliderOut = null;
-			return;
-		}
-		EventHandler.on(this._main_parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
-		EventHandler.on(this._main_parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
-		this._sliderResize = () => this._updateSlider(this._getActiveElem());
-		window.addEventListener('resize', this._sliderResize);
-		if (typeof ResizeObserver !== 'undefined') {
-			this._sliderObserver = new ResizeObserver(this._sliderResize);
-			this._sliderObserver.observe(this._parent);
-			this._getChildren().forEach(child => this._sliderObserver.observe(child));
-		}
-	}
-
-	_updateSlider(target) {
-		if (!target || !this._main_parent) return;
-		const slider = this._main_parent.querySelector(`.${CLASS_NAME.SLIDER}`);
-		if (!slider) return;
-		this._getChildren().forEach(child => child.classList.toggle(CLASS_NAME.HOVER, child === target));
-		const {width, height} = window.getComputedStyle(target);
-		Object.assign(slider.style, {width, height, left: `${target.offsetLeft}px`, top: `${target.offsetTop}px`});
-	}
-
-	dispose() {
-		if (!this._element) return;
-		const parent = this._main_parent;
-		const successor = this._sliderOver && this._getChildren()
-			.map(child => VGTabs.getInstance(child))
-			.find(instance => instance && instance !== this && instance._params.slide);
-		if (this._sliderOver) {
-			EventHandler.off(parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
-			EventHandler.off(parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
-			window.removeEventListener('resize', this._sliderResize);
-			this._sliderObserver?.disconnect();
-		}
-		super.dispose();
-		if (successor) successor._setInitialSlider();
-		else if (parent && !Selectors.findAll(SELECTOR.DATA_TOGGLE, parent).some(child => VGTabs.getInstance(child)?._params.slide)) {
-			parent.querySelector(`.${CLASS_NAME.SLIDER}`)?.remove();
-			parent.classList.remove(CLASS_NAME.WITH_SLIDER);
-		}
-	}
+		this._updateSlider(this._getActiveElem());
+		this._sliderOver = event => {
+			const target = event.delegateTarget;
+			if (target.closest(SELECTOR.TAB_PANEL) === this._parent && !isDisabled(target)) this._updateSlider(target);
+		};
+		this._sliderOut = () => this._updateSlider(this._getActiveElem());
+		// Только один владелец общих обработчиков на группу вкладок.
+		const owner = this._getChildren().some(child => VGTabs.getInstance(child)?._sliderOver && child !== this._element);
+		if (owner) {
+			this._sliderOver = null;
+			this._sliderOut = null;
+			return;
+		}
+		EventHandler.on(this._main_parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
+		EventHandler.on(this._main_parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
+		this._sliderResize = () => this._updateSlider(this._getActiveElem());
+		window.addEventListener('resize', this._sliderResize);
+		if (typeof ResizeObserver !== 'undefined') {
+			this._sliderObserver = new ResizeObserver(this._sliderResize);
+			this._sliderObserver.observe(this._parent);
+			this._getChildren().forEach(child => this._sliderObserver.observe(child));
+		}
+	}
+
+	_updateSlider(target) {
+		if (!target || !this._main_parent) return;
+		const slider = this._main_parent.querySelector(`.${CLASS_NAME.SLIDER}`);
+		if (!slider) return;
+		this._getChildren().forEach(child => child.classList.toggle(CLASS_NAME.HOVER, child === target));
+		const {width, height} = window.getComputedStyle(target);
+		Object.assign(slider.style, {width, height, left: `${target.offsetLeft}px`, top: `${target.offsetTop}px`});
+	}
+
+	dispose() {
+		if (!this._element) return;
+		const parent = this._main_parent;
+		const successor = this._sliderOver && this._getChildren()
+			.map(child => VGTabs.getInstance(child))
+			.find(instance => instance && instance !== this && instance._params.slide);
+		if (this._sliderOver) {
+			EventHandler.off(parent, EVENT_MOUSEOVER_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOver);
+			EventHandler.off(parent, EVENT_MOUSEOUT_DATA_API, SELECTOR.DATA_TOGGLE, this._sliderOut);
+			window.removeEventListener('resize', this._sliderResize);
+			this._sliderObserver?.disconnect();
+		}
+		super.dispose();
+		if (successor) successor._setInitialSlider();
+		else if (parent && !Selectors.findAll(SELECTOR.DATA_TOGGLE, parent).some(child => VGTabs.getInstance(child)?._params.slide)) {
+			parent.querySelector(`.${CLASS_NAME.SLIDER}`)?.remove();
+			parent.classList.remove(CLASS_NAME.WITH_SLIDER);
+		}
+	}
 
 	/**
 	 * Устанавливает базовые ARIA-атрибуты родителю
@@ -415,9 +415,9 @@ class VGTabs extends BaseModule {
 		if (outerElem !== child) {
 			this._setAttributeIfNotExists(outerElem, 'role', 'presentation');
 		}
-		if (!isActive) {
-			child.setAttribute('tabindex', '-1');
-		} else child.removeAttribute('tabindex');
+		if (!isActive) {
+			child.setAttribute('tabindex', '-1');
+		} else child.removeAttribute('tabindex');
 		this._setAttributeIfNotExists(child, 'role', 'tab');
 		this._setInitialAttributesOnTargetPanel(child);
 	}
@@ -453,8 +453,8 @@ class VGTabs extends BaseModule {
 	 * @returns {HTMLElement[]}
 	 */
 	_getChildren() {
-		return Selectors.findAll(SELECTOR.INNER_ELEM, this._parent)
-			.filter(child => child.closest(SELECTOR.TAB_PANEL) === this._parent);
+		return Selectors.findAll(SELECTOR.INNER_ELEM, this._parent)
+			.filter(child => child.closest(SELECTOR.TAB_PANEL) === this._parent);
 	}
 
 	/**
@@ -515,4 +515,4 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
 	});
 });
 
-export default VGTabs;
+export default VGTabs;

package/app/modules/vgtabs/scss/_variables.scss

@@ -1,32 +1,32 @@
-@use "../../../utils/scss" as vg;
-
-$tabs-map: (
-		panel-gap: 10px,
-		panel-margin-bottom: 1.5rem,
-		link-border-radius: vg.$border-radius,
-		link-border-style: vg.$border-style,
-		link-border-width: vg.$border-width,
-		link-border-color: var(--vg-border-color, #{vg.$border-color}),
-		link-border-active-color: var(--vg-primary-color, #{vg.$color-active}),
-		link-border-focus-color: var(--vg-primary-color, #{vg.$color-active}),
-		link-border-disabled-color: var(--vg-border-disabled-color, #{vg.$border-color-disabled}),
-		link-color: var(--vg-text-color, #{vg.$color}),
-		link-active-color: var(--vg-primary-color, #{vg.$color-active}),
-		link-focus-color: var(--vg-primary-color, #{vg.$color-active}),
-		link-disabled-color: var(--vg-text-disabled-color, #{vg.$color-disabled}),
+@use "../../../utils/scss" as vg;
+
+$tabs-map: (
+		panel-gap: 10px,
+		panel-margin-bottom: 1.5rem,
+		link-border-radius: vg.$border-radius,
+		link-border-style: vg.$border-style,
+		link-border-width: vg.$border-width,
+		link-border-color: var(--vg-border-color, #{vg.$border-color}),
+		link-border-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-disabled-color: var(--vg-border-disabled-color, #{vg.$border-color-disabled}),
+		link-color: var(--vg-text-color, #{vg.$color}),
+		link-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-disabled-color: var(--vg-text-disabled-color, #{vg.$color-disabled}),
 		link-bg: transparent,
 		link-active-bg: transparent,
 		link-focus-bg: transparent,
 		link-disabled-bg: transparent,
 		link-padding-x: 16px,
 		link-padding-y: 8px,
-		link-transition: vg.$transition-base,
-		slider-bg: var(--vg-primary-color, #{vg.$color-active}),
-		slider-link-color: var(--vg-primary-contrast-color, #{vg.$color-inverse}),
-		slider-border-radius: vg.$border-radius,
-		slider-transition: vg.$transition-base,
+		link-transition: vg.$transition-base,
+		slider-bg: var(--vg-primary-color, #{vg.$color-active}),
+		slider-link-color: var(--vg-primary-contrast-color, #{vg.$color-inverse}),
+		slider-border-radius: vg.$border-radius,
+		slider-transition: vg.$transition-base,
 		track-slider-padding-x: 6px,
 		track-slider-padding-y: 6px,
 		track-slider-border-radius: 6px,
-		track-slider-bg: var(--vg-border-disabled-color, rgba(255, 255, 255, .1)),
-) !default;
+		track-slider-bg: var(--vg-border-disabled-color, rgba(255, 255, 255, .1)),
+) !default;

package/app/modules/vgtabs/scss/vgtabs.scss

@@ -6,12 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-tabs {
-	@include vg.mix-vars('tabs', vars.$tabs-map);
+	@include vg.mix-vars('tabs', vars.$tabs-map);
 
 	&-panel {
 		display: flex;
@@ -108,4 +108,4 @@
 	> .active {
 		display: block;
 	}
-}
+}

package/app/modules/vgtoast/js/vgtoast.js

@@ -1,7 +1,7 @@
-/**
- * Описание: уведомления VGToast через Data API и JavaScript.
- * Возможности: стек, AJAX, анимации, автоскрытие, перетаскивание и изменение размера.
- */
+/**
+ * Описание: уведомления VGToast через Data API и JavaScript.
+ * Возможности: стек, AJAX, анимации, автоскрытие, перетаскивание и изменение размера.
+ */
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import {dismissTrigger, getSVG} from "../../module-fn";

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

@@ -1,22 +1,22 @@
-@use "../../../utils/scss" as vg;
-
-$toast-map: (
+@use "../../../utils/scss" as vg;
+
+$toast-map: (
 		indent: 1rem,
 		height: auto,
 		width: auto,
-		z-index: vg.$toast-index,
+		z-index: vg.$toast-index,
 		transition: all .3s ease-in-out,
 		padding: 8px 22px,
 		font-size: 1.125rem,
-		background-color: var(--vg-surface-bg, #{vg.$surface-bg}),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-color: transparent,
-		border-style: vg.$border-style,
-		border-radius: 20px,
-		box-shadow: var(--vg-box-shadow, #{vg.$box-shadow}),
+		background-color: var(--vg-surface-bg, #{vg.$surface-bg}),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-color: transparent,
+		border-style: vg.$border-style,
+		border-radius: 20px,
+		box-shadow: var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-font-weight: 500,
 		header-font-size: .975rem,
 		body-font-size: 1rem,
-		body-font-weight: 400,
-) !default;
+		body-font-weight: 400,
+) !default;

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

@@ -6,13 +6,13 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-toast {
-	@include vg.mix-vars('toast', vars.$toast-map);
-	@include vg.mix-alert-color-mode($class: vg-toast);
+	@include vg.mix-vars('toast', vars.$toast-map);
+	@include vg.mix-alert-color-mode($class: vg-toast);
 	position: fixed;
 	width: var(--vg-toast-width);
 	height: var(--vg-toast-height);