vgapp 1.4.3 → 1.4.5

package/app/modules/vgformsender/scss/vgformsender.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import '../../../utils/scss/functions';
-@import '../../../utils/scss/mixin';
-@import '../../../utils/scss/variables';
-@import 'variables';
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-form-sender {
-	@include mix-vars('form-sender', $form-sender-map);
+	@include vg.mix-vars('form-sender', vars.$form-sender-map);
 
 	&-modal {
 		.vg-modal-content {
@@ -23,7 +22,7 @@
 	&--content {
 		position: relative;
 
-		&-pass {
+		&-pass-focus-offset {
 			&:focus-within {
 				input {
 					padding-right: 5rem;
@@ -43,7 +42,7 @@
 		width: 22px;
 		height: 22px;
 		cursor: pointer;
-		transition: $transition-base;
+		transition: vg.$transition-base;
 
 		svg {
 			path {
@@ -57,7 +56,7 @@
 			right: 34px;
 		}
 
-		.vg-form-sender--content-pass {
+		.vg-form-sender--content-pass-focus-offset {
 			&:focus-within {
 				input {
 					padding-right: 6.25rem;
@@ -72,15 +71,15 @@
 }
 
 .vg-form-sender-alert {
-	@include mix-alert-color-mode($class: vg-form-sender-alert);
+	@include vg.mix-alert-color-mode($class: vg-form-sender-alert);
 	background-color: var(--vg-form-sender-alert-background-color);
 	border: 1px solid var(--vg-form-sender-alert-border-color) ;
-	border-radius: var(--vg-border-radius);
+	border-radius: var(--vg-border-radius, #{vg.$border-radius});
 
 	.vg-btn-close {
 		svg {
 			path {
-				fill: var(--vg-form-sender-alert-close)
+				fill: var(--vg-form-sender-alert-close);
 			}
 		}
 	}

package/app/modules/vglawcookie/js/vglawcookie.js

@@ -23,7 +23,6 @@ const SELECTOR_DATA_TOGGLE_CLEAR = '[data-vg-toggle="lawcookie-clear"]';
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
 class VGLawCookie extends BaseModule {
-	// Убрано статическое sParams — избыточно и небезопасно
 
 	constructor(element, params = {}) {
 		super(element, params);
@@ -147,13 +146,15 @@ class VGLawCookie extends BaseModule {
 	}
 
 	/**
-	 * Полный сброс согласия
-	 */
-	static reset() {
-		Cookies.remove(VGLawCookie.getDefaultParams().cookie.name);
-		localStorage.clear();
-		location.reload();
-	}
+	 * Сбрасывает согласие, не затрагивая остальные данные хранилища
+	 */
+	static reset() {
+		const { name } = VGLawCookie.getDefaultParams().cookie;
+
+		Cookies.remove(name);
+		localStorage.removeItem(name);
+		location.reload();
+	}
 
 	/**
 	 * Возвращает дефолтные параметры (для доступа без инстанса)
@@ -164,11 +165,13 @@ class VGLawCookie extends BaseModule {
 		}, {});
 	}
 
-	dispose() {
-		Cookies.remove(VGLawCookie.getDefaultParams().cookie.name);
-		localStorage.clear();
-		super.dispose();
-	}
+	dispose() {
+		const { name } = this._params.cookie;
+
+		Cookies.remove(name);
+		localStorage.removeItem(name);
+		super.dispose();
+	}
 
 	/**
 	 * Инициализация модуля
@@ -213,7 +216,7 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CLEAR,
 
 	const instance = VGLawCookie.getOrCreateInstance(element);
 	instance.dispose();
-	VGLawCookie.reset(); // Полный сброс
-});
+	VGLawCookie.reset(); // Сброс согласия
+});
 
-export default VGLawCookie;
+export default VGLawCookie;

package/app/modules/vglawcookie/scss/_variables.scss

@@ -1,14 +1,16 @@
-$lawcookie-map: (
-		background-color:          $bg-color,
-		color:                     $color,
-		box-shadow:                $box-shadow,
-		padding:                   1rem,
-		border:                    1px solid #{$border-color},
-		border-radius:             $border-radius,
-		z-index:                   $lawcookie-index,
-		transition:                $transition-base,
+@use "../../../utils/scss" as vg;
+
+$lawcookie-map: (
+		background-color:          var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
+		padding:                   1rem,
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		border-radius:             vg.$border-radius,
+		z-index:                   vg.$lawcookie-index,
+		transition:                vg.$transition-base,
 		max-width:                 50%,
 		padding-outer:             1rem,
 		font-size:                 14px,
-		title-font-size:           16px
-);
+		title-font-size:           16px
+) !default;

package/app/modules/vglawcookie/scss/vglawcookie.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-lawcookie {
-	@include mix-vars('lawcookie', $lawcookie-map);
+	@include vg.mix-vars('lawcookie', vars.$lawcookie-map);
 	position: fixed;
 	display: none;
 	padding: var(--vg-lawcookie-padding-outer);
@@ -88,4 +87,4 @@
 			font-size: var(--vg-lawcookie-title-font-size);
 		}
 	}
-}
+}

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

@@ -1,25 +1,27 @@
-$modal-sm: 300px !default;
+@use "../../../utils/scss" as vg;
+
+$modal-sm: 300px !default;
 $modal-md: 500px !default;
 $modal-lg: 800px !default;
 $modal-xl: 1140px !default;
 
 $modal-dialog-margin-y-sm-up: 1.75rem !default;
-$modal-content-box-shadow-sm-up: $box-shadow !default;
-
-$modal-map: (
-		z-index: $modal-index,
+$modal-content-box-shadow-sm-up: var(--vg-box-shadow, #{vg.$box-shadow}) !default;
+
+$modal-map: (
+		z-index: vg.$modal-index,
 		margin: .5rem,
 		padding: 1rem,
 		width: $modal-md,
-		color: $color,
-		background-color: $bg-color,
-		border-width: $border-width,
-		border-color: transparent,
-		border-style: $border-style,
-		border-radius: $border-radius,
-		box-shadow: $box-shadow,
-		transition: $transition-base,
+		color: var(--vg-text-color, #{vg.$color}),
+		background-color: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-width: vg.$border-width,
+		border-color: transparent,
+		border-style: vg.$border-style,
+		border-radius: vg.$border-radius,
+		box-shadow: var(--vg-box-shadow, #{vg.$box-shadow}),
+		transition: vg.$transition-base,
 		fade-transform:  translate(0, -50px),
 		show-transform:  none,
-		scale-transform: scale(1.02),
-);
+		scale-transform: scale(1.02),
+) !default;

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

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-modal {
-	@include mix-vars('modal', $modal-map);
+	@include vg.mix-vars('modal', vars.$modal-map);
 	position: fixed;
 	left: 0;
 	top: 0;
@@ -122,7 +121,7 @@
 	position: fixed;
 	right: 20px;
 	bottom: 20px;
-	z-index: calc(var(--vg-modal-z-index, #{$modal-index}) + 1);
+	z-index: calc(var(--vg-modal-z-index, #{vg.$modal-index}) + 1);
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
@@ -160,8 +159,8 @@
 
 @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};
+		--vg-modal-margin: #{vars.$modal-dialog-margin-y-sm-up};
+		--vg-modal-box-shadow: #{vars.$modal-content-box-shadow-sm-up};
 	}
 
 	.vg-modal-dialog {
@@ -171,18 +170,18 @@
 	}
 
 	.vg-modal-sm {
-		--vg-modal-width: #{$modal-sm};
+		--vg-modal-width: #{vars.$modal-sm};
 	}
 }
 
 @media screen and (min-width: 992px){
 	.vg-modal-lg, .vg-modal-xl {
-		--vg-modal-width: #{$modal-lg};
+		--vg-modal-width: #{vars.$modal-lg};
 	}
 }
 
 @media screen and (min-width: 1399px) {
 	.vg-modal-xl {
-		--vg-modal-width: #{$modal-xl};
+		--vg-modal-width: #{vars.$modal-xl};
 	}
 }

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

@@ -1,4 +1,8 @@
-// Breakpoint viewport sizes and media queries.
+@use "sass:list";
+@use "sass:map";
+@use "variables" as vars;
+
+// Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
@@ -14,21 +18,27 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: $nav-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-	$n: index($breakpoint-names, $name);
-	@if not $n {
-		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-	}
-	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+	$n: list.index($breakpoint-names, $name);
+	@if not $n {
+		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+	}
+	@if $n < list.length($breakpoint-names) {
+		@return list.nth($breakpoint-names, $n + 1);
+	}
+	@return null;
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
-@function breakpoint-min($name, $breakpoints: $nav-breakpoints) {
-	$min: map-get($breakpoints, $name);
-	@return if($min != 0, $min, null);
+@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
+	$min: map.get($breakpoints, $name);
+	@if $min != 0 {
+		@return $min;
+	}
+	@return null;
 }
 
 // Maximum breakpoint width.
@@ -40,9 +50,12 @@
 //
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
-@function breakpoint-max($name, $breakpoints: $nav-breakpoints) {
-	$max: map-get($breakpoints, $name);
-	@return if($max and $max > 0, $max - .02, null);
+@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
+	$max: map.get($breakpoints, $name);
+	@if $max and $max > 0 {
+		@return $max - .02;
+	}
+	@return null;
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -52,13 +65,16 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: $nav-breakpoints) {
-	@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
+	@if breakpoint-min($name, $breakpoints) == null {
+		@return "";
+	}
+	@return "-#{$name}";
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	@if $min {
 		@media (min-width: $min) {
@@ -71,7 +87,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
 	$max: breakpoint-max($name, $breakpoints);
 	@if $max {
 		@media (max-width: $max) {
@@ -84,7 +100,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($lower, $breakpoints);
 	$max: breakpoint-max($upper, $breakpoints);
 
@@ -106,7 +122,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	$next: breakpoint-next($name, $breakpoints);
 	$max: breakpoint-max($next, $breakpoints);
@@ -124,4 +140,4 @@
 			@content;
 		}
 	}
-}
+}

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

@@ -1,4 +1,5 @@
-.vg-nav-hamburger {
+@mixin hamburger() {
+.vg-nav-hamburger {
 	display: none;
 	align-items: flex-start;
 
@@ -59,4 +60,6 @@
 			}
 		}
 	}
-}
+}
+
+}

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

@@ -1,4 +1,5 @@
-&.vg-nav-horizontal {
+@mixin placement() {
+&.vg-nav-horizontal {
 	.vg-nav-wrapper {
 		flex-direction: row;
 	}
@@ -22,4 +23,6 @@
 			}
 		}
 	}
-}
+}
+
+}

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

@@ -1,4 +1,5 @@
-.toggle {
+@mixin toggle() {
+.toggle {
 	transition: var(--vg-nav-transition);
 	transform: rotate(0);
 
@@ -17,4 +18,6 @@
 			vertical-align: .255em;
 		}
 	}
-}
+}
+
+}

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

@@ -1,6 +1,9 @@
-$nav-map: (
-		transition: all .2s ease-in-out,
-);
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+
+$nav-map: (
+		transition: all .2s ease-in-out,
+) !default;
 
 $nav-item-map: (
 		margin: 0,
@@ -8,39 +11,39 @@ $nav-item-map: (
 		font-size: 1rem,
 		font-weight: 400,
 		line-height: 1.4,
-		color: #212529,
+		color: var(--vg-text-color, #212529),
 		decoration: none,
 		display: inline-block,
 		border: none,
 		border-radius: 0,
 		white-space: nowrap,
-		position: relative,
-);
+		position: relative,
+) !default;
 
 $nav-drop-map: (
 		z-index: 10,
-		transition: map-get($nav-map, transition),
+		transition: map.get($nav-map, transition),
 		width: 200px,
 		max-height: 650px,
-		border-color: $border-color,
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 0,
-		bg: $bg-color,
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 		overflow-y: auto,
-		overflow-x: visible,
-);
+		overflow-x: visible,
+) !default;
 
 $nav-drop-mega-map: (
 		width: 100%,
 		min-height: 300px,
-		bg: $bg-color,
-		border-color: $border-color,
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 1rem,
 		z-index: 10,
-		transition: map-get($nav-map, transition),
-		max-height: 600px,
-);
+		transition: map.get($nav-map, transition),
+		max-height: 600px,
+) !default;
 
 $nav-drop-item-map: (
 		padding: .75rem 1rem,
@@ -50,16 +53,16 @@ $nav-drop-item-map: (
 		bg-hover: transparent,
 		color: inherit,
 		color-hover: inherit,
-		transition: map-get($nav-map, transition),
-);
+		transition: map.get($nav-map, transition),
+) !default;
 
 $hamburger-map: (
 		height: 27px,
 		line-width: 35px,
-		line-color: #333333,
+		line-color: var(--vg-text-emphasis-color, #333333),
 		line-height: 3px,
-		line-indent-top: 7px
-);
+		line-indent-top: 7px
+) !default;
 
 $grid-breakpoints: (
 		xs: 576px,
@@ -68,5 +71,5 @@ $grid-breakpoints: (
 		lg: 1200px,
 		xl: 1400px,
 		xxl: 1600px,
-		xxxl: 1800px
-);
+		xxxl: 1800px
+) !default;

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

@@ -6,19 +6,23 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
-@import "breakpoints";
+@forward "variables";
+@forward "breakpoints";
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+@use "breakpoints";
+@use "hamburger";
+@use "placement";
+@use "toggle";
+@use "variables" as vars;
 
 .vg-nav {
-	@include mix-vars('nav', $nav-map);
-	@include mix-vars('nav-item', $nav-item-map);
-	@include mix-vars('nav-drop', $nav-drop-map);
-	@include mix-vars('nav-drop-mega', $nav-drop-mega-map);
-	@include mix-vars('nav-drop-item', $nav-drop-item-map);
-	@include mix-vars('nav-hamburger', $hamburger-map);
+	@include vg.mix-vars('nav', vars.$nav-map);
+	@include vg.mix-vars('nav-item', vars.$nav-item-map);
+	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
+	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
+	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
+	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
 
 	.vg-nav-wrapper {
 		display: flex;
@@ -48,7 +52,7 @@
 		li {
 			a {
 				/** set toggle **/
-				@import "toggle";
+				@include toggle.toggle();
 			}
 		}
 
@@ -147,14 +151,14 @@
 	}
 
 	/** set placement **/
-	@import "placement";
+	@include placement.placement();
 
 	/** set hamburger **/
-	@import "hamburger";
+	@include hamburger.hamburger();
 
 	&:not(.vg-nav-expand) {
-		@each $breakpoint in map-keys($grid-breakpoints) {
-			@include media-breakpoint-down($breakpoint, $grid-breakpoints) {
+		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
+			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
 				&.vg-nav-#{$breakpoint} {
 					.vg-nav-hamburger {
 						display: flex;