vgapp 1.4.4 → 1.4.6

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

@@ -6,9 +6,9 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 select {
 	&.vg-select {
@@ -24,21 +24,21 @@ select {
 	}
 }
 
-.vg-select {
-	@include vg.mix-vars('select-current', vars.$select-current-map);
-	@include vg.mix-vars('select-current', vars.$select-placeholder-map);
-	@include vg.mix-vars('select-dropdown', vars.$select-dropdown-map);
-	@include vg.mix-vars('select-list', vars.$select-list-map);
-	@include vg.mix-vars('select-optgroup', vars.$select-optgroup-map);
-	@include vg.mix-vars('select-optgroup-hover', vars.$select-optgroup-hover-map);
-	@include vg.mix-vars('select-list-hover', vars.$select-list-hover-map);
-	@include vg.mix-vars('select-search', vars.$select-search-map);
-	@include vg.mix-vars('select-tags', vars.$select-tags-map);
-	@include vg.mix-vars('select-tag', vars.$select-tag-map);
-	--vg-select-list-max-height: #{vars.$select-list-max-height};
-	--vg-select-list-scrollbar-width: #{vars.$select-list-scrollbar-width};
-	--vg-select-list-scrollbar-bg: #{vars.$select-list-scrollbar-bg};
-	--vg-select-list-scrollbar-thumb: #{vars.$select-list-scrollbar-thumb};
+.vg-select {
+	@include vg.mix-vars('select-current', vars.$select-current-map);
+	@include vg.mix-vars('select-current', vars.$select-placeholder-map);
+	@include vg.mix-vars('select-dropdown', vars.$select-dropdown-map);
+	@include vg.mix-vars('select-list', vars.$select-list-map);
+	@include vg.mix-vars('select-optgroup', vars.$select-optgroup-map);
+	@include vg.mix-vars('select-optgroup-hover', vars.$select-optgroup-hover-map);
+	@include vg.mix-vars('select-list-hover', vars.$select-list-hover-map);
+	@include vg.mix-vars('select-search', vars.$select-search-map);
+	@include vg.mix-vars('select-tags', vars.$select-tags-map);
+	@include vg.mix-vars('select-tag', vars.$select-tag-map);
+	--vg-select-list-max-height: #{vars.$select-list-max-height};
+	--vg-select-list-scrollbar-width: #{vars.$select-list-scrollbar-width};
+	--vg-select-list-scrollbar-bg: #{vars.$select-list-scrollbar-bg};
+	--vg-select-list-scrollbar-thumb: #{vars.$select-list-scrollbar-thumb};
 	position: relative;
 
 	&:not(.show) {
@@ -86,7 +86,7 @@ select {
 	}
 
 	&-current {
-		@each $key, $value in vars.$select-current-map {
+		@each $key, $value in vars.$select-current-map {
 			#{$key}: var(--vg-select-current-#{$key})
 		}
 		box-sizing: border-box;
@@ -104,7 +104,7 @@ select {
 			top: 50%;
 			transform: translateY(-50%);
 			transition: all .4s ease-in-out;
-			background-image: url("data:image/svg+xml, " + vars.$select-current-svg);
+			background-image: url("data:image/svg+xml, " + vars.$select-current-svg);
 			background-repeat: no-repeat;
 			width: 16px;
 			height: 16px;
@@ -116,8 +116,8 @@ select {
 		}
 	}
 
-	&-dropdown {
-		@each $key, $value in vars.$select-dropdown-map {
+	&-dropdown {
+		@each $key, $value in vars.$select-dropdown-map {
 			#{$key}: var(--vg-select-dropdown-#{$key})
 		}
 		position: absolute;
@@ -134,31 +134,31 @@ 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;
 
-		&::-webkit-scrollbar-track {
-			-webkit-box-shadow: inset 0 0 6px var(--vg-shadow-color, rgba(0, 0, 0, .3));
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px var(--vg-shadow-color, rgba(0, 0, 0, .3));
 			background-color: var(--vg-select-list-scrollbar-bg);
 		}
 
@@ -174,7 +174,7 @@ select {
 		}
 
 		&--option {
-			@each $key, $value in vars.$select-list-map {
+			@each $key, $value in vars.$select-list-map {
 				#{$key}: var(--vg-select-list-#{$key})
 			}
 			display: block;
@@ -187,7 +187,7 @@ select {
 			}
 
 			&:hover, &.selected {
-				@each $key, $value in vars.$select-list-hover-map {
+				@each $key, $value in vars.$select-list-hover-map {
 					#{$key}: var(--vg-select-list-hover-#{$key})
 				}
 			}
@@ -217,7 +217,7 @@ select {
 			}
 
 			&-title {
-				@each $key, $value in vars.$select-optgroup-map {
+				@each $key, $value in vars.$select-optgroup-map {
 					#{$key}: var(--vg-select-optgroup-#{$key})
 				}
 			}
@@ -226,7 +226,7 @@ select {
 
 	&-search {
 		input {
-			@each $key, $value in vars.$select-search-map {
+			@each $key, $value in vars.$select-search-map {
 				#{$key}: var(--vg-select-search-#{$key})
 			}
 			padding: 8px;
@@ -280,4 +280,4 @@ select {
 			opacity: .75;
 		}
 	}
-}
+}

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -19,10 +19,10 @@ const NAME_KEY = 'vg.sidebar';
 /**
  * @constant {string} SELECTOR_DATA_TOGGLE - Селектор для элементов активации сайдбара.
  */
-const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="sidebar"]';
-const OPEN_SELECTOR = '.vg-sidebar.show';
-const BACKDROP_OWNER_ATTR = 'data-vg-backdrop-owner';
-const BACKDROP_OWNER_VALUE = 'sidebar';
+const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="sidebar"]';
+const OPEN_SELECTOR = '.vg-sidebar.show';
+const BACKDROP_OWNER_ATTR = 'data-vg-backdrop-owner';
+const BACKDROP_OWNER_VALUE = 'sidebar';
 
 /**
  * @constant {string} CLASS_NAME_SHOW - Класс, отвечающий за отображение сайдбара.
@@ -107,9 +107,9 @@ class VGSidebar extends BaseModule {
 			}
 		}, params));
 
-		this._scrollBar = new ScrollBarHelper();
-		this._backdropElement = null;
-		this._params.animation.delay = this._params.animation.enable ? this._params.animation.delay : 0;
+		this._scrollBar = new ScrollBarHelper();
+		this._backdropElement = null;
+		this._params.animation.delay = this._params.animation.enable ? this._params.animation.delay : 0;
 
 		this._addEventListeners();
 		this._dismissElement();
@@ -128,18 +128,18 @@ class VGSidebar extends BaseModule {
 	 * Статическое свойство: ключ для событий и данных.
 	 * @returns {string}
 	 */
-	static get NAME_KEY() {
-		return NAME_KEY;
-	}
-
-	static getOpenSidebars(excludeElement = null) {
-		return Selectors.findAll(OPEN_SELECTOR).filter(sidebar => sidebar !== excludeElement);
-	}
-
-	static getBackdropElement() {
-		const sidebarBackdrops = Selectors.findAll(`.vg-backdrop[${BACKDROP_OWNER_ATTR}="${BACKDROP_OWNER_VALUE}"]`);
-		return sidebarBackdrops.length ? sidebarBackdrops[sidebarBackdrops.length - 1] : null;
-	}
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	static getOpenSidebars(excludeElement = null) {
+		return Selectors.findAll(OPEN_SELECTOR).filter(sidebar => sidebar !== excludeElement);
+	}
+
+	static getBackdropElement() {
+		const sidebarBackdrops = Selectors.findAll(`.vg-backdrop[${BACKDROP_OWNER_ATTR}="${BACKDROP_OWNER_VALUE}"]`);
+		return sidebarBackdrops.length ? sidebarBackdrops[sidebarBackdrops.length - 1] : null;
+	}
 
 	/**
 	 * Переключает состояние сайдбара (открыть/закрыть).
@@ -158,8 +158,8 @@ class VGSidebar extends BaseModule {
 	 * @param {HTMLElement} [relatedTarget] - Элемент, инициировавший открытие.
 	 * @returns {void}
 	 */
-	show(relatedTarget) {
-		if (isDisabled(this._element) || this._isShown()) return;
+	show(relatedTarget) {
+		if (isDisabled(this._element) || this._isShown()) return;
 
 		if (relatedTarget) {
 			this._params = this._getParams(relatedTarget, this._params);
@@ -172,33 +172,33 @@ class VGSidebar extends BaseModule {
 		const showEvent = EventHandler.trigger(this._element, EVENT_KEYS.SHOW, { relatedTarget });
 		if (showEvent.defaultPrevented) return;
 
-		const alreadyOpenSidebars = VGSidebar.getOpenSidebars(this._element);
-		const hasOpenSidebar = alreadyOpenSidebars.length > 0;
-		let currentBackdrop = null;
-		if (this._params.backdrop) {
-			if (hasOpenSidebar) {
-				currentBackdrop = VGSidebar.getBackdropElement();
-				if (currentBackdrop) {
-					this._backdropElement = currentBackdrop;
-				} else {
-					Backdrop.show((backdrop) => {
-						currentBackdrop = backdrop;
-						this._backdropElement = backdrop;
-						backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
-					});
-				}
-			} else {
-				Backdrop.show((backdrop) => {
-					currentBackdrop = backdrop;
-					this._backdropElement = backdrop;
-					backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
-				});
-			}
-		}
-
-		if (this._params.overflow && !hasOpenSidebar) {
-			this._scrollBar.hide();
-		}
+		const alreadyOpenSidebars = VGSidebar.getOpenSidebars(this._element);
+		const hasOpenSidebar = alreadyOpenSidebars.length > 0;
+		let currentBackdrop = null;
+		if (this._params.backdrop) {
+			if (hasOpenSidebar) {
+				currentBackdrop = VGSidebar.getBackdropElement();
+				if (currentBackdrop) {
+					this._backdropElement = currentBackdrop;
+				} else {
+					Backdrop.show((backdrop) => {
+						currentBackdrop = backdrop;
+						this._backdropElement = backdrop;
+						backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
+					});
+				}
+			} else {
+				Backdrop.show((backdrop) => {
+					currentBackdrop = backdrop;
+					this._backdropElement = backdrop;
+					backdrop.setAttribute(BACKDROP_OWNER_ATTR, BACKDROP_OWNER_VALUE);
+				});
+			}
+		}
+
+		if (this._params.overflow && !hasOpenSidebar) {
+			this._scrollBar.hide();
+		}
 
 		if (this._params.hash) {
 			history.pushState(null, '', `#${this._element.id}`);
@@ -212,13 +212,13 @@ class VGSidebar extends BaseModule {
 		}
 
 		this._element.classList.add(CLASS_NAME_SHOW);
-		document.body.classList.add(CLASS_NAME_OPEN);
-
-		const completeCallback = () => {
-			const backdrop = this._params.backdrop ? (currentBackdrop || VGSidebar.getBackdropElement()) : null;
-			if (backdrop) {
-				EventHandler.on(backdrop, 'mousedown.vg.backdrop', () => this.hide());
-			}
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		const completeCallback = () => {
+			const backdrop = this._params.backdrop ? (currentBackdrop || VGSidebar.getBackdropElement()) : null;
+			if (backdrop) {
+				EventHandler.on(backdrop, 'mousedown.vg.backdrop', () => this.hide());
+			}
 			EventHandler.trigger(this._element, EVENT_KEYS.SHOWN, { relatedTarget });
 		};
 
@@ -231,37 +231,37 @@ class VGSidebar extends BaseModule {
 	 * @param {boolean} [isLeaveBackDrop=false] - Не убирать подложку.
 	 * @returns {void}
 	 */
-	hide(isLeaveBackDrop = false) {
-		if (isDisabled(this._element) || !this._isShown()) return;
+	hide(isLeaveBackDrop = false) {
+		if (isDisabled(this._element) || !this._isShown()) return;
 
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
-		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
-		if (!remainingOpenSidebars.length) {
-			document.body.classList.remove(CLASS_NAME_OPEN);
-		}
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
+		if (!remainingOpenSidebars.length) {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+		}
 
 		setTimeout(() => {
 			this._element.setAttribute('aria-expanded', 'false');
 
 			const completeCallback = () => {
-				if (!isLeaveBackDrop) {
-					if (this._params.backdrop && !remainingOpenSidebars.length) {
-						Backdrop.hide(() => {
-							this._backdropElement = null;
-							if (this._params.overflow && !Backdrop.isActive()) {
-								this._scrollBar.reset();
-							}
-						}, this._backdropElement || VGSidebar.getBackdropElement());
-					} else if (this._params.backdrop) {
-						this._backdropElement = null;
-					} else if (this._params.overflow) {
-						if (!remainingOpenSidebars.length && !Backdrop.isActive()) {
-							this._scrollBar.reset();
-						}
-					}
+				if (!isLeaveBackDrop) {
+					if (this._params.backdrop && !remainingOpenSidebars.length) {
+						Backdrop.hide(() => {
+							this._backdropElement = null;
+							if (this._params.overflow && !Backdrop.isActive()) {
+								this._scrollBar.reset();
+							}
+						}, this._backdropElement || VGSidebar.getBackdropElement());
+					} else if (this._params.backdrop) {
+						this._backdropElement = null;
+					} else if (this._params.overflow) {
+						if (!remainingOpenSidebars.length && !Backdrop.isActive()) {
+							this._scrollBar.reset();
+						}
+					}
 
 					if (this._params.hash && window.location.hash === `#${this._element.id}`) {
 						history.replaceState(
@@ -346,7 +346,7 @@ EventHandler.on(document, EVENT_KEYS.CLICK_DATA_API, SELECTOR_DATA_TOGGLE, funct
 		this.setAttribute('aria-expanded', 'false');
 	});
 
-	const instance = VGSidebar.getOrCreateInstance(target);
+	const instance = VGSidebar.getOrCreateInstance(target);
 	instance.toggle(this);
 });
 
@@ -367,4 +367,4 @@ EventHandler.on(document, EVENT_KEYS.DOM_LOADED_DATA_API, function () {
 	}
 });
 
-export default VGSidebar;
+export default VGSidebar;

package/app/modules/vgsidebar/scss/_variables.scss

@@ -1,6 +1,6 @@
-@use "../../../utils/scss" as vg;
-
-$sidebar-map: (
+@use "../../../utils/scss" as vg;
+
+$sidebar-map: (
 		horizontal: (
 				width: 400px,
 				height: 100vh,
@@ -9,13 +9,13 @@ $sidebar-map: (
 				width: 100vw,
 				height: 30vh,
 		),
-		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
-		color:                     var(--vg-text-color, #{vg.$color}),
-		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
+		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-height:             60px,
 		footer-height:             70px,
 		padding:                   1rem,
-		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
-		z-index:                   vg.$sidebar-index,
-		transition:                vg.$transition-base,
-) !default;
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		z-index:                   vg.$sidebar-index,
+		transition:                vg.$transition-base,
+) !default;

package/app/modules/vgsidebar/scss/vgsidebar.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-sidebar {
-	@include vg.mix-vars('sidebar', vars.$sidebar-map);
+	@include vg.mix-vars('sidebar', vars.$sidebar-map);
 	position: fixed;
 	width: auto;
 	height: auto;
@@ -90,4 +90,4 @@
 		padding: var(--vg-sidebar-padding);
 		border-top: var(--vg-sidebar-border);
 	}
-}
+}

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/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);