vgapp 0.7.2 → 0.7.4

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

@@ -31,6 +31,8 @@ const NAME_KEY = 'vg.fs';
 /**
  * Constants Events
  */
+const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
+
 const EVENT_KEY_SUCCESS = 'vg.fs.success';
 const EVENT_KEY_ERROR   = 'vg.fs.error';
 const EVENT_KEY_BEFORE  = 'vg.fs.before';
@@ -297,7 +299,7 @@ class VGFormSender extends BaseModule {
 						}
 					} else {
 						if ('errors' in response && normalizeData(response.errors)) {
-							status = normalizeData(response.errors) ? 'error' : 'success';
+							status = normalizeData(response.errors) ? 'danger' : 'success';
 						}
 					}
 				}
@@ -388,7 +390,9 @@ class VGFormSender extends BaseModule {
 	}
 
 	setDataRelationStatus($element, status, data, type) {
-		let $alert = Selectors.find('.vg-alert-' + status, $element);
+		if (status === 'error') status = 'danger';
+
+		let $alert = Selectors.find('.'+ CLASS_NAME_ALERT +'-' + status, $element);
 
 		if (isObject(data)) {
 			if (status === 'error') {
@@ -435,11 +439,11 @@ class VGFormSender extends BaseModule {
 							code = ' ' + data.text + ' (' + data.code + ')';
 						}
 
-						if (!title) txt += '<h4 class="vg-alert-content--title">' + code + '</h4>';
-						else txt += '<h4 class="vg-alert-content--title">' + title + '</h4>';
+						if (!title) txt += '<h4 class="'+ CLASS_NAME_ALERT +'-content--title">' + code + '</h4>';
+						else txt += '<h4 class="'+ CLASS_NAME_ALERT +'-content--title">' + title + '</h4>';
 
 						if ('message' in response) {
-							txt += '<div class="vg-alert-content--message">' + response.message + '</div>'
+							txt += '<div class="'+ CLASS_NAME_ALERT +'-content--message">' + response.message + '</div>'
 						}
 
 						if ('errors' in response && this._params.alert.errors) {
@@ -469,13 +473,13 @@ class VGFormSender extends BaseModule {
 
 		if (!$alert) {
 			$alert = document.createElement('div');
-			$alert.classList.add('vg-alert', 'vg-alert-' + status, 'vg-alert-' + type);
+			$alert.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status, CLASS_NAME_ALERT + '-' + type);
 
 			let content = document.createElement('div');
-			content.classList.add('vg-alert-content');
+			content.classList.add(CLASS_NAME_ALERT + '-content');
 
 			let icon = document.createElement('div');
-			icon.classList.add('vg-alert-content--icon');
+			icon.classList.add(CLASS_NAME_ALERT + '-content--icon');
 
 			let i = document.createElement('i');
 			i.innerHTML = getSVG(status);
@@ -484,13 +488,13 @@ class VGFormSender extends BaseModule {
 			content.append(icon);
 
 			let text = document.createElement('div');
-			text.classList.add('vg-alert-content--text');
+			text.classList.add(CLASS_NAME_ALERT + '-content--text');
 			text.innerHTML = data.view;
 
 			content.append(text);
 			$alert.append(content);
 		} else {
-			let text = Selectors.find('.vg-alert-content--text', $alert);
+			let text = Selectors.find('.'+ CLASS_NAME_ALERT +'-content--text', $alert);
 			text.innerHTML = data.view;
 		}
 

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

@@ -1,3 +1,3 @@
 $form-sender-map: (
 		'eye-color': $color
-);
+);

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

@@ -6,10 +6,10 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@import '../../../utils/scss/functions';
+@import '../../../utils/scss/mixin';
+@import '../../../utils/scss/variables';
+@import 'variables';
 
 .vg-form-sender {
 	@include mix-vars('form-sender', $form-sender-map);
@@ -45,4 +45,53 @@
 			right: 34px;
 		}
 	}
+}
+
+.vg-form-sender-alert {
+	@include 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-form-sender-alert-modal {
+		height: 260px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.vg-form-sender-alert-content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 1.5rem;
+		}
+
+		.vg-form-sender-alert-content--text {
+			text-align: center;
+		}
+	}
+
+	&.vg-form-sender-alert-collapse {
+		margin-bottom: 2rem;
+		padding: 2rem;
+
+		.vg-form-sender-alert-content {
+			display: flex;
+			gap: 2rem;
+		}
+	}
+}
+
+.vg-form-sender-alert-content--icon {
+	svg {
+		path {
+			fill: var(--vg-form-sender-alert-icon);
+		}
+	}
+}
+
+.vg-form-sender-alert-content--text {
+	font-size: 1.25rem;
+	color: var(--vg-form-sender-alert-color);
 }

package/app/modules/vgloadmore/js/vgloadmore.js

@@ -70,12 +70,12 @@ class VGLoadMore extends BaseModule{
 			buttonParams = normalizeData(el.dataset.button);
 
 		if (!isObject(buttonParams)) {
-			console.log('Дата атрибут data-button должен быть в формате json и передавать объект');
+			console.error('Дата атрибут data-button должен быть в формате json и передавать объект');
 			return;
 		}
 
 		if (limit < offset) {
-			console.log('Параметр offset должен быть меньше или равен параметру limit');
+			console.error('Параметр offset должен быть меньше или равен параметру limit');
 			return;
 		}
 

package/app/modules/vgmodal/js/vgmodal.js

@@ -51,6 +51,7 @@ class VGModal extends BaseModule {
 			fields: [],
 			hash: false,
 			centered: false,
+			dismiss: true,
 			ajax: {
 				route: '',
 				target: '',
@@ -106,8 +107,11 @@ class VGModal extends BaseModule {
 		if (typeof id !== "string") return;
 
 		let _element = document.createElement('div');
-		_element.classList.add('vg-modal', 'fade');
-		_element.id = id;let dialog = document.createElement('div');
+		_element.classList.add('vg-modal');
+		_element.classList.add('fade');
+		_element.id = id;
+
+		let dialog = document.createElement('div');
 		dialog.classList.add('vg-modal-dialog');
 
 		if ('centered' in params && params.centered) {
@@ -117,14 +121,16 @@ class VGModal extends BaseModule {
 		let content = document.createElement('div');
 		content.classList.add('vg-modal-content');
 
-		let btnClose = document.createElement('button');
-		Manipulator.set(btnClose, 'type', 'button');
-		Manipulator.set(btnClose, 'data-vg-dismiss', 'modal');
-		Manipulator.set(btnClose, 'data-vg-target', '#' + id);
-		Manipulator.set(btnClose, 'aria-label', 'close');
-		btnClose.classList.add('vg-btn-close');
+		if ('dismiss' in params && params.dismiss) {
+			let btnClose = document.createElement('button');
+			Manipulator.set(btnClose, 'type', 'button');
+			Manipulator.set(btnClose, 'data-vg-dismiss', 'modal');
+			Manipulator.set(btnClose, 'data-vg-target', '#' + id);
+			Manipulator.set(btnClose, 'aria-label', 'close');
+			btnClose.classList.add('vg-btn-close');
 
-		content.append(btnClose);
+			content.append(btnClose);
+		}
 
 		let body = document.createElement('div');
 		body.classList.add('vg-modal-body');
@@ -136,6 +142,9 @@ class VGModal extends BaseModule {
 		document.body.append(_element);
 
 		const modal = VGModal.getOrCreateInstance(_element, params);
+		if ('animation' in params) {
+			modal._animation(_element, VGModal.NAME_KEY, params.animation);
+		}
 
 		execute(callback, [modal]);
 

package/app/modules/vgrollup/js/vgrollup.js

@@ -167,7 +167,7 @@ class VGRollup  extends BaseModule {
 					element.classList.add(_this.classes.ellipsis);
 					element.style.webkitLineClamp = line;
 				} else {
-					console.log("Переменная [data-line] или параметр[line] не должны быть пустыми");
+					console.error("Переменная [data-line] или параметр[line] не должны быть пустыми");
 				}
 			}
 		}

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

@@ -313,7 +313,7 @@ class VGSelect extends BaseModule {
 		});
 
 		observer.observe(select, {
-			attributeFilter: ['disabled', 'required', 'style', 'hidden'],
+			attributeFilter: ['disabled', 'required', 'style', 'hidden', 'value', 'selected'],
 			childList: true,
 			subtree: true,
 			characterDataOldValue: true,

package/app/modules/vgspy/js/vgspy.js

@@ -51,7 +51,6 @@ class VGSpy extends BaseModule {
 			parentScrollTop: 0
 		}
 		this._params = this._configAfterMerge(this._params);
-		console.log(this._params)
 
 		this.refresh();
 	}

package/app/utils/js/components/animation.js

@@ -30,6 +30,8 @@ class Animation {
 
 		this._element.classList.add(this.classes.duration);
 
+		if (this._element.classList.contains('fade')) this._element.classList.remove('fade');
+
 		this._triggers();
 	}
 
@@ -37,6 +39,8 @@ class Animation {
 		EventHandler.on(this._element, this._name_key + '.show', () => {
 			this._element.classList.remove(this._params.out);
 			this._element.classList.add(this._params.in);
+		});
+		EventHandler.on(this._element, this._name_key + '.shown', () => {
 			this._element.classList.add(this.classes.animated);
 		});
 
@@ -46,8 +50,11 @@ class Animation {
 		});
 
 		EventHandler.on(this._element, this._name_key + '.hidden', () => {
-			this._element.classList.remove(this._params.out);
-			this._element.classList.remove(this.classes.animated);
+			[... this._element.classList].forEach((cl) => {
+				if (cl.indexOf('animate__') !== -1) {
+					this._element.classList.remove(cl);
+				}
+			})
 		});
 	}
 }

package/app/utils/scss/animation.scss

@@ -0,0 +1,11 @@
+/**
+* Animation Loader
+ */
+@keyframes vgLoader {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/app/utils/scss/default.scss

@@ -1,6 +1,7 @@
 @import "../../utils/scss/functions";
-@import "../../utils/scss/mixin";
 @import "../../utils/scss/variables";
+@import "../../utils/scss/mixin";
+@import "../../utils/scss/animation";
 
 .vg-backdrop {
 	@include mix-vars('backdrop', $backdrop-map);
@@ -60,6 +61,7 @@
 	width: 7em;
 	height: 7em;
 }
+
 .vg-loader {
 	@include mix-vars('loader', $loader-map);
 	margin: var(--vg-loader-margin);
@@ -72,144 +74,4 @@
 	border-left: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-color);
 	transform: var(--vg-loader-transform);
 	animation: var(--vg-loader-animation);
-}
-
-/**
-* UI before Animation
- */
-.ui-success {
-	&-circle {
-		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
-		stroke-dashoffset: 270.75219024795285px;
-		transform: rotate(0);
-		transform-origin: center center;
-		stroke-linecap: round;
-		animation: ani-success-circle 1s ease-in both;
-	}
-	&-path {
-		stroke-dasharray: 60px 64px;
-		stroke-dashoffset: 62px;
-		stroke-linecap: round;
-		animation: ani-success-path 0.4s 1s ease-in both;
-	}
-}
-
-.ui-error {
-	&-circle {
-		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
-		stroke-dashoffset: 260.75219024795285px;
-		animation: ani-error-circle 1.2s linear;
-	}
-	&-line1 {
-		stroke-dasharray: 54px 55px;
-		stroke-dashoffset: 55px;
-		stroke-linecap: round;
-		animation: ani-error-line 0.15s 1.2s linear both;
-	}
-	&-line2 {
-		stroke-dasharray: 54px 55px;
-		stroke-dashoffset: 55px;
-		stroke-linecap: round;
-		animation: ani-error-line 0.2s 0.9s linear both;
-	}
-}
-
-.ui-waiting {
-	&-circle {
-		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
-		stroke-dashoffset: 260.75219024795285px;
-		animation: ani-waiting-circle 1.2s linear;
-	}
-	&-line1 {
-		stroke-dasharray: 280.75219024795285px, 200.75219024795285px;
-		stroke-dashoffset: 280.75219024795285px;
-		animation: ani-waiting-line 0.8s 0.3s linear both;
-		transform: rotate(0);
-		transform-origin: center center;
-	}
-	&-line2 {
-		stroke-dasharray: 54px 55px;
-		stroke-dashoffset: 55px;
-		animation: ani-waiting-line2 0.85s .6s ease-in both;
-		transform: rotate(0) scale(0.9);
-		transform-origin: center center;
-	}
-}
-
-/**
-* Animation Loader
- */
-@keyframes vgLoader {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-// success animation
-@keyframes ani-success-circle {
-	to {
-		stroke-dashoffset: 782.2565707438586px;
-	}
-}
-
-@keyframes ani-success-path {
-	0% {
-		stroke-dashoffset: 62px;
-	}
-	65% {
-		stroke-dashoffset: -5px;
-	}
-	84% {
-		stroke-dashoffset: 4px;
-	}
-	100% {
-		stroke-dashoffset: -2px;
-	}
-}
-
-// error animation
-@keyframes ani-error-line {
-	to {
-		stroke-dashoffset: 0;
-	}
-}
-
-@keyframes ani-error-circle {
-	0% {
-		stroke-dasharray: 0, 260.75219024795285px;
-		stroke-dashoffset: 0;
-	}
-	35% {
-		stroke-dasharray: 120px, 120px;
-		stroke-dashoffset: -120px;
-	}
-	70% {
-		stroke-dasharray: 0, 260.75219024795285px;
-		stroke-dashoffset: -260.75219024795285px;
-	}
-	100% {
-		stroke-dasharray: 260.75219024795285px, 0;
-		stroke-dashoffset: -260.75219024795285px;
-	}
-}
-
-// waiting animation
-@keyframes ani-waiting-circle {
-	to {
-		stroke-dashoffset: 782.2565707438586px;
-	}
-}
-@keyframes ani-waiting-line {
-	to {
-		stroke-dashoffset: 0;
-	}
-}
-@keyframes ani-waiting-line2 {
-	to {
-		stroke-dashoffset: 0;
-		transform: rotate(360deg) scale(1);
-	}
 }

package/app/utils/scss/functions.scss

@@ -19,4 +19,22 @@
 
 @function tint-color($color, $weight) {
 	@return mix(white, $color, $weight);
+}
+
+@function get-alert-color($type) {
+	@if $type == success {
+		@return $success-map;
+	}
+
+	@if $type == danger {
+		@return $danger-map;
+	}
+
+	@if $type == warning {
+		@return $warning-map;
+	}
+
+	@if $type == info {
+		@return $info-map;
+	}
 }

package/app/utils/scss/mixin.scss

@@ -8,4 +8,16 @@
 			--vg-#{$module}-#{$key}: #{$value}
 		}
 	}
+}
+
+@mixin mix-alert-color-mode($class) {
+	$colors: ['success', 'info', 'warning', 'danger'];
+
+	@each $value in $colors {
+		&.#{$class}-#{$value} {
+			@each $property, $val in get-alert-color($value) {
+				--#{$class}-#{$property}: #{$val};
+			}
+		}
+	}
 }

package/app/utils/scss/variables.scss

@@ -4,6 +4,7 @@ $bg-color-active:    #c7dcf6 !default;
 
 // -- Colors
 $color:              #000000 !default;
+$color-emphasis:     #3c3c3c !default;
 $color-active:       #0065ff !default;
 $color-disabled:     rgba(#000000, .5) !default;
 
@@ -53,25 +54,25 @@ $loader-map: (
 );
 
 // Colors Status
-$danger:        #dc3545 !default;
-$danger-border: tint-color($danger, 60%) !default;
-$danger-text:   shade-color($danger, 60%) !default;
-$danger-bg:     tint-color($danger, 80%) !default;
+$danger:        #FF2A2C !default;
+$danger-border: #FFCCC7 !default;
+$danger-text:   #DF0306 !default;
+$danger-bg:     #FFF2F0 !default;
 
-$success: #198754;
-$success-border: tint-color($success, 60%) !default;
-$success-text:   shade-color($success, 60%) !default;
-$success-bg:     tint-color($success, 80%) !default;
+$success: #4FD90B;
+$success-border: #BAF98A !default;
+$success-text:   #40BE02 !default;
+$success-bg:     #F6FFED !default;
 
 $warning: #FFC107;
-$warning-border: tint-color($warning, 60%) !default;
-$warning-text:   shade-color($warning, 60%) !default;
-$warning-bg:     tint-color($warning, 80%) !default;
+$warning-border: #FFDE79 !default;
+$warning-text:   #FFC107 !default;
+$warning-bg:     #FFF6DA !default;
 
-$info: #0DCAF0;
-$info-border: tint-color($info, 60%) !default;
-$info-text:   shade-color($info, 60%) !default;
-$info-bg:     tint-color($info, 80%) !default;
+$info: #1F8BFF;
+$info-border: #F0FAFF !default;
+$info-text:   #0471E5 !default;
+$info-bg:     #ADDDFF !default;
 
 $dark: #232323;
 $dark-border: shade-color($dark, 60%) !default;
@@ -79,24 +80,28 @@ $dark-text:   tint-color($dark, 60%) !default;
 $dark-bg:     shade-color($dark, 80%) !default;
 
 $success-map: (
+		icon: $success,
 		color: $success-text,
 		border-color: $success-border,
 		background-color: $success-bg
 );
 
 $danger-map: (
+		icon: $danger,
 		color: $danger-text,
 		border-color: $danger-border,
 		background-color: $danger-bg
 );
 
 $warning-map: (
+		icon: $warning,
 		color: $warning-text,
 		border-color: $warning-border,
 		background-color: $warning-bg
 );
 
 $info-map: (
+		icon: $info,
 		color: $info-text,
 		border-color: $info-border,
 		background-color: $info-bg