vgapp 1.4.4 → 1.4.6

package/app/modules/vgfiles/scss/vgfiles.scss

@@ -6,14 +6,14 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "animations";
-@use "mixins" as files;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "animations";
+@use "mixins" as files;
+@use "variables" as vars;
 
 .vg-files {
-	@include vg.mix-vars('files', vars.$files-map);
+	@include vg.mix-vars('files', vars.$files-map);
 	position: relative;
 
 	a {
@@ -260,62 +260,62 @@
 				}
 			}
 
-			.file {
-				--vg-button-color: var(--vg-secondary);
-				display: flex;
-				align-items: center;
-				gap: var(--vg-files-info-gap);
-				padding: var(--vg-files-info-padding);
-				border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
-				transition: all .2s ease-in-out;
-				position: relative;
+			.file {
+				--vg-button-color: var(--vg-secondary);
+				display: flex;
+				align-items: center;
+				gap: var(--vg-files-info-gap);
+				padding: var(--vg-files-info-padding);
+				border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
+				transition: all .2s ease-in-out;
+				position: relative;
 
-				@include files.vgfiles-sortable();
-				@include files.vgfiles-state();
+				@include files.vgfiles-sortable();
+				@include files.vgfiles-state();
 
 				&:last-child {
 					border-bottom: none;
 				}
 
-				&:hover {
-					background-color: var(--vg-files-info-hover-bg);
-				}
-
-				&[data-vg-filepreview-renderer="audio"] {
-					--vg-filepreview-audio-inline-progress: 0%;
-					position: relative;
-					overflow: hidden;
-					isolation: isolate;
-					min-height: var(--vg-files-info-audio-row-min-height);
-					background-color: var(--vg-files-info-audio-progress-track);
-
-					&::before {
-						content: '';
-						position: absolute;
-						inset: 0 auto 0 0;
-						width: var(--vg-filepreview-audio-inline-progress);
-						background: var(--vg-files-info-audio-progress-fill);
-						opacity: var(--vg-files-info-audio-progress-opacity);
-						pointer-events: none;
-						z-index: 0;
-						transition: width .12s linear;
-					}
-
-					> * {
-						position: relative;
-						z-index: 1;
-					}
-
-					.file-image {
-						flex: 0 0 var(--vg-files-info-audio-image-size);
-						width: var(--vg-files-info-audio-image-size);
-						height: var(--vg-files-info-audio-image-size);
-					}
-				}
-
-				> * {
-					transition: all .2s ease-in-out;
-				}
+				&:hover {
+					background-color: var(--vg-files-info-hover-bg);
+				}
+
+				&[data-vg-filepreview-renderer="audio"] {
+					--vg-filepreview-audio-inline-progress: 0%;
+					position: relative;
+					overflow: hidden;
+					isolation: isolate;
+					min-height: var(--vg-files-info-audio-row-min-height);
+					background-color: var(--vg-files-info-audio-progress-track);
+
+					&::before {
+						content: '';
+						position: absolute;
+						inset: 0 auto 0 0;
+						width: var(--vg-filepreview-audio-inline-progress);
+						background: var(--vg-files-info-audio-progress-fill);
+						opacity: var(--vg-files-info-audio-progress-opacity);
+						pointer-events: none;
+						z-index: 0;
+						transition: width .12s linear;
+					}
+
+					> * {
+						position: relative;
+						z-index: 1;
+					}
+
+					.file-image {
+						flex: 0 0 var(--vg-files-info-audio-image-size);
+						width: var(--vg-files-info-audio-image-size);
+						height: var(--vg-files-info-audio-image-size);
+					}
+				}
+
+				> * {
+					transition: all .2s ease-in-out;
+				}
 
 				&-image {
 					flex: 0 0 var(--vg-files-image-width);
@@ -361,63 +361,63 @@
 						display: none;
 					}
 
-					.name {
-						display: block;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						font-size: var(--vg-files-info-name-font-size);
-
-						&.vg-filepreview-audio-inline {
-							display: inline-flex;
-							gap: var(--vg-filepreview-audio-inline-gap);
-							align-items: center;
-						}
-
-						&.is-preview-action {
-							cursor: pointer;
-						}
-					}
-
-					.size {
-						color: var(--vg-secondary);
-						font-size: var(--vg-files-info-size-font-size);
-						white-space: nowrap;
-						margin-left: auto;
-					}
-
-					.download {
-						margin-left: 8px;
-
-						.vg-filepreview-download-trigger {
-							padding: 0;
-							background: transparent;
-							color: var(--vg-secondary);
-							border-radius: 0;
-							font-size: var(--vg-files-info-size-font-size);
-							font-weight: 500;
-							gap: 4px;
-
-							&:hover {
-								color: var(--vg-body-color);
-							}
-
-							&__icon svg {
-								width: 14px;
-								height: 14px;
-							}
-
-							&__text {
-								display: none;
-							}
-						}
-					}
-				}
-
-				&-remove {
-					flex: 0 0 var(--vg-files-remove-width);
-					width: var(--vg-files-remove-width);
-					margin-left: auto;
+					.name {
+						display: block;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						font-size: var(--vg-files-info-name-font-size);
+
+						&.vg-filepreview-audio-inline {
+							display: inline-flex;
+							gap: var(--vg-filepreview-audio-inline-gap);
+							align-items: center;
+						}
+
+						&.is-preview-action {
+							cursor: pointer;
+						}
+					}
+
+					.size {
+						color: var(--vg-secondary);
+						font-size: var(--vg-files-info-size-font-size);
+						white-space: nowrap;
+						margin-left: auto;
+					}
+
+					.download {
+						margin-left: 8px;
+
+						.vg-filepreview-download-trigger {
+							padding: 0;
+							background: transparent;
+							color: var(--vg-secondary);
+							border-radius: 0;
+							font-size: var(--vg-files-info-size-font-size);
+							font-weight: 500;
+							gap: 4px;
+
+							&:hover {
+								color: var(--vg-body-color);
+							}
+
+							&__icon svg {
+								width: 14px;
+								height: 14px;
+							}
+
+							&__text {
+								display: none;
+							}
+						}
+					}
+				}
+
+				&-remove {
+					flex: 0 0 var(--vg-files-remove-width);
+					width: var(--vg-files-remove-width);
+					margin-left: auto;
 
 					button {
 						width: var(--vg-files-remove-width);
@@ -450,21 +450,21 @@
 									fill: var(--vg-button-color);
 								}
 							}
-						}
-					}
-				}
-
-				&.failing {
-					.file-remove {
-						flex: 0 0 auto;
-						width: auto;
-					}
-				}
-
-				&:not(.with-image) {
-					.file-info {
-						.iteration {
-							display: block;
+						}
+					}
+				}
+
+				&.failing {
+					.file-remove {
+						flex: 0 0 auto;
+						width: auto;
+					}
+				}
+
+				&:not(.with-image) {
+					.file-info {
+						.iteration {
+							display: block;
 						}
 					}
 				}
@@ -511,26 +511,26 @@
 							}
 						}
 					}
-				}
-			}
-		}
-	}
-
-	.file-failing-actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--vg-files-info-failing-actions-gap);
-	}
-
-	&-info--list {
-		.file.failing {
-			.file-remove {
-				margin-left: var(--vg-files-info-failing-actions-margin-start);
-			}
-		}
-	}
-
-	&-drop {
+				}
+			}
+		}
+	}
+
+	.file-failing-actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--vg-files-info-failing-actions-gap);
+	}
+
+	&-info--list {
+		.file.failing {
+			.file-remove {
+				margin-left: var(--vg-files-info-failing-actions-margin-start);
+			}
+		}
+	}
+
+	&-drop {
 		background-color: var(--vg-files-drop-bg);
 		border: var(--vg-files-drop-border-width) var(--vg-files-drop-border-style) var(--vg-files-drop-border-color);
 		cursor: pointer;
@@ -558,11 +558,11 @@
 			animation: stripes var(--vg-files-drop-stripes-duration) linear infinite;
 			background-image: linear-gradient(
 							-45deg,
-							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 25%,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 25%,
 							transparent 0,
 							transparent 50%,
-							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 0,
-							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 75%,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 0,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 75%,
 							transparent 0,
 							transparent
 			);
@@ -644,8 +644,8 @@
 				flex: 0 0 var(--vg-files-drop-file-flex);
 				height: var(--vg-files-drop-file-height);
 
-				@include files.vgfiles-sortable();
-				@include files.vgfiles-state();
+				@include files.vgfiles-sortable();
+				@include files.vgfiles-state();
 
 				.file-image {
 					width: 100%;
@@ -710,14 +710,14 @@
 					flex-direction: column;
 					gap: 8px;
 
-					.file-remove {
-						.file-failing-actions {
-							gap: var(--vg-files-drop-failing-actions-gap);
-						}
-
-						button {
-							background: var(--vg-body-bg);
-							color: var(--vg-body-color);
+					.file-remove {
+						.file-failing-actions {
+							gap: var(--vg-files-drop-failing-actions-gap);
+						}
+
+						button {
+							background: var(--vg-body-bg);
+							color: var(--vg-body-color);
 							border: none;
 							cursor: pointer;
 							outline: none;

package/app/modules/vgformsender/js/hideshowpass.js

@@ -13,16 +13,17 @@ const NAME_KEY = 'vg.hideshowpass';
 const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="pass"]';
 
 const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_FOCUS_OFFSET = 'vg-form-sender--content-pass-focus-offset';
 
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
 class VGHideShowPass extends BaseModule{
-	constructor(el, params = {}) {
-		super(el, params);
-
-		this._params = this._getParams(el, mergeDeepObject({
-			parentClass: 'vg-form-sender--content-pass'
-		}, params));
+	constructor(el, params = {}) {
+		super(el, params);
+
+		this._params = this._getParams(el, mergeDeepObject({
+			parentClass: 'vg-form-sender--content-pass'
+		}, params));
 	}
 
 	static get NAME() {
@@ -62,15 +63,19 @@ class VGHideShowPass extends BaseModule{
 		instance.build(false);
 	}
 
-	build(isShow = false) {
-		let classes = this._params.classes.join(' '), elm = '';
-		const HTML = Html('string');
-		if (this._element.parentElement && this._params.parentClass) {
-			this._element.parentElement.classList.add(this._params.parentClass);
-		}
-
-		if (!isShow) {
-			elm = HTML.component('eye', {class: classes});
+	build(isShow = false) {
+		let classes = this._params.classes.join(' '), elm = '';
+		const HTML = Html('string');
+		if (this._element.parentElement && this._params.parentClass) {
+			this._element.parentElement.classList.add(this._params.parentClass);
+			this._element.parentElement.classList.toggle(
+				CLASS_NAME_FOCUS_OFFSET,
+				this._params.focus === true
+			);
+		}
+
+		if (!isShow) {
+			elm = HTML.component('eye', {class: classes});
 		} else {
 			elm = HTML.component('eye', {class: classes, type: 'hide'});
 		}
@@ -100,4 +105,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	instance.toggle(this);
 });
 
-export default VGHideShowPass
+export default VGHideShowPass

package/app/modules/vgformsender/js/vgformsender.js

@@ -129,7 +129,7 @@ class VGFormSender extends BaseModule {
 			fields: [],
 			timeout: 50,
 			pass: {
-				enabled: true,
+				focus: false,
 				template: 'pass-open',
 				classes: ['vg-form-sender--hide-show-pass'],
 				insert: 'afterend'
@@ -270,11 +270,9 @@ class VGFormSender extends BaseModule {
 			this._element.classList.add(this._params.classes.validation);
 		}
 
-		if (this._params.pass.enabled) {
-			[... Selectors.findAll('input[type="password"]', this._element)].forEach((el) => {
-				VGHideShowPass.init(el, this._params.pass);
-			})
-		}
+		[... Selectors.findAll('input[type="password"]', this._element)].forEach((el) => {
+			VGHideShowPass.init(el, this._params.pass);
+		})
 
 		execute(this._params.callback.afterInit, [this._element, this]);
 

package/app/modules/vgformsender/readme.md

@@ -78,7 +78,7 @@ VGFormSender.init(document.getElementById('contactForm'), {
 | `response.enabled`        | `boolean`               | `false`                            | Нативная обработка ответа (без AJAX)                                 |
 | `submit`                  | `boolean`               | `false`                            | Отправлять нативно (без AJAX)                                        |
 | `fields`                  | `Array`                 | `[]`                               | Доп. данные для отправки                                             |
-| `pass.enabled`            | `boolean`               | `true`                             | Показывать иконку глаза у паролей                                    |
+| `pass.focus`              | `boolean`               | `false`                            | Увеличивать правый отступ поля и сдвигать иконку глаза при фокусе     |
 | `alert.enabled`           | `boolean`               | `true`                             | Показывать уведомления                                               |
 | `alert.type`              | `'modal' \| 'collapse'` | `'modal'`                          | Тип уведомления                                                      |
 | `alert.errors`            | `boolean`               | `true`                             | Показывать детали ошибок                                             |

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

@@ -1,5 +1,5 @@
-@use "../../../utils/scss" as vg;
-
-$form-sender-map: (
-		'eye-color': var(--vg-text-color, #{vg.$color})
-) !default;
+@use "../../../utils/scss" as vg;
+
+$form-sender-map: (
+		'eye-color': var(--vg-text-color, #{vg.$color})
+) !default;

package/app/modules/vgformsender/scss/vgformsender.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-form-sender {
-	@include vg.mix-vars('form-sender', vars.$form-sender-map);
+	@include vg.mix-vars('form-sender', vars.$form-sender-map);
 
 	&-modal {
 		.vg-modal-content {
@@ -19,21 +19,21 @@
 		}
 	}
 
-	&--content {
-		position: relative;
-
-		&-pass {
-			&:focus-within {
-				input {
-					padding-right: 5rem;
-				}
-
-				.vg-form-sender--hide-show-pass {
-					right: 44px;
-				}
-			}
-		}
-	}
+	&--content {
+		position: relative;
+
+		&-pass-focus-offset {
+			&:focus-within {
+				input {
+					padding-right: 5rem;
+				}
+
+				.vg-form-sender--hide-show-pass {
+					right: 44px;
+				}
+			}
+		}
+	}
 
 	&--hide-show-pass {
 		position: absolute;
@@ -42,7 +42,7 @@
 		width: 22px;
 		height: 22px;
 		cursor: pointer;
-		transition: vg.$transition-base;
+		transition: vg.$transition-base;
 
 		svg {
 			path {
@@ -51,35 +51,35 @@
 		}
 	}
 
-	&.was-validated {
-		.vg-form-sender--hide-show-pass {
-			right: 34px;
-		}
-
-		.vg-form-sender--content-pass {
-			&:focus-within {
-				input {
-					padding-right: 6.25rem;
-				}
-
-				.vg-form-sender--hide-show-pass {
-					right: 64px;
-				}
-			}
-		}
-	}
-}
+	&.was-validated {
+		.vg-form-sender--hide-show-pass {
+			right: 34px;
+		}
+
+		.vg-form-sender--content-pass-focus-offset {
+			&:focus-within {
+				input {
+					padding-right: 6.25rem;
+				}
+
+				.vg-form-sender--hide-show-pass {
+					right: 64px;
+				}
+			}
+		}
+	}
+}
 
 .vg-form-sender-alert {
-	@include vg.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, #{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);
 			}
 		}
 	}
@@ -125,4 +125,4 @@
 .vg-form-sender-alert-content--text {
 	font-size: 1.25rem;
 	color: var(--vg-form-sender-alert-color);
-}
+}

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,11 +146,13 @@ class VGLawCookie extends BaseModule {
 	}
 
 	/**
-	 * Полный сброс согласия
+	 * Сбрасывает согласие, не затрагивая остальные данные хранилища
 	 */
 	static reset() {
-		Cookies.remove(VGLawCookie.getDefaultParams().cookie.name);
-		localStorage.clear();
+		const { name } = VGLawCookie.getDefaultParams().cookie;
+
+		Cookies.remove(name);
+		localStorage.removeItem(name);
 		location.reload();
 	}
 
@@ -165,8 +166,10 @@ class VGLawCookie extends BaseModule {
 	}
 
 	dispose() {
-		Cookies.remove(VGLawCookie.getDefaultParams().cookie.name);
-		localStorage.clear();
+		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;