vgapp 0.7.3 → 0.7.5

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

@@ -16,12 +16,6 @@ import VGCollapse from "../../vgcollapse/js/vgcollapse";
 import {getSVG} from "../../module-fn";
 import VGHideShowPass from "./hideshowpass";
 
-/**
- * TODO
- * доделай динамическое добавление полей в форму,
- * но не меняй место их получения (их нужно получить прямо перед отправкой, после того как выполнился промис beforeSend)
- */
-
 /**
  * Constants
  */
@@ -31,6 +25,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';
@@ -100,13 +96,15 @@ class VGFormSender extends BaseModule {
 				spinner: {
 					enabled: false,
 					element: '<span class="spinner-border spinner-border-sm me-2"></span>'
-				}
+				},
+				click: noop,
 			},
 		}, params));
 
+		this._button = Selectors.find('[type="submit"]', this._element) || Selectors.find('[form="' + this._element.id + '"]') || null;
+
 		this._params.ajax.route = Manipulator.get(this._element, 'action').toLowerCase();
 		this._params.ajax.method = Manipulator.get(this._element, 'method').toLowerCase();
-		this._button = Selectors.find('[type="submit"]', this._element) || Selectors.find('[form="' + this._element.id + '"]') || null;
 
 		this._params.isBtnText   = Manipulator.get(this._element, 'data-btn-text') !== 'false';
 		this._params.isJsonParse = Manipulator.get(this._element, 'data-json-parse') !== 'false';
@@ -149,13 +147,23 @@ class VGFormSender extends BaseModule {
 		return this
 	}
 
-	request(data, event) {
+	request(event, data = null) {
 		const _this = this;
+		const mergeFormData = (target, source) => {
+			source.forEach((value, key) => {
+				target.set(key, value);
+			});
+			return target;
+		}
 
 		_this._alertBefore();
 
 		const submit = () => {
-			_this._params.ajax.data = new FormData(_this._element);
+			let formData = new FormData(_this._element);
+
+			if (data) _this._params.ajax.data = mergeFormData(data, formData);
+			else _this._params.ajax.data = formData;
+
 			_this._route(function (status, data) {
 				_this._element.classList.remove('was-validated');
 
@@ -227,11 +235,23 @@ class VGFormSender extends BaseModule {
 		EventHandler.trigger(_this._element, EVENT_KEY_SUCCESS, [event, _this, data]);
 	}
 
+	static buttonClick(formID, callback, status = 'before') {
+		const form = Selectors.find(formID);
+		if (form) {
+			const instance = VGFormSender.getOrCreateInstance(formID);
+			form.addEventListener('vg.fs.' + status, e => {
+				execute(callback, [form, instance])
+			})
+		}
+	}
+
 	_statusButton(status) {
 		if (!this._button) return;
 
 		if (status === 'before') {
-			const button = getDeepestLastChild(this._button) || this._button;
+			const button = this._button;
+
+			this._params.button.initial = this._button.innerHTML.trim();
 
 			if (this._params.button.spinner.enabled) {
 				this._button.insertAdjacentHTML('afterbegin', this._params.button.spinner.element);
@@ -244,19 +264,25 @@ class VGFormSender extends BaseModule {
 			if (this._params.button.disabled) {
 				Manipulator.set(this._button,'disabled', 'disabled');
 			}
+
+			execute(this._params.button.click, [this, this._button, 'before'])
 		}
 
 		if (status === 'after') {
 			if (this._params.button.enabled) {
 				this._button.innerHTML = this._params.button.initial;
 			}
+
 			if (this._params.button.disabled) {
 				Manipulator.remove(this._button,'disabled');
 			}
+
 			if (this._params.button.spinner.enabled) {
 				let spinner = this._button.querySelector('.spinner-border');
 				if (spinner) spinner.remove();
 			}
+
+			execute(this._params.button.click, [this, this._button, 'after'])
 		}
 	}
 
@@ -297,7 +323,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 +414,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 +463,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 +497,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 +512,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;
 		}
 
@@ -529,34 +557,36 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 		}
 	}
 
-	/*const collectData = function(data, fields) {
-		for (let name in fields) {
-			if (typeof fields[name] === 'object') {
-				for (let key in fields[name]) {
-					let arr = Object.keys(fields[name][key]).map(function (i) {
-						return fields[name][key][i];
+	if (!instance._params.submit) {
+		event.preventDefault();
+
+		const collectData = function(data, fields) {
+			fields.forEach(function(field) {
+				if (isObject(field)) {
+					let keys = Object.keys(field);
+					keys.forEach(function(key) {
+						let value = normalizeData(field[key]);
+
+						if (Array.isArray(value) || isObject(value)) {
+							data.append(key, JSON.stringify(value));
+						} else {
+							data.append(key, value);
+						}
 					});
-					data.append(name, arr);
 				}
-			} else {
-				data.append(name, fields[name]);
-			}
-		}
-
-		return data;
-	}*/
+			});
 
-	if (!instance._params.submit) {
-		event.preventDefault();
+			return data;
+		}
 
-		//let data = new FormData(instance._element);
+		let data = new FormData(instance._element),
+			fields = instance._params.fields;
 
-		// TODO доделать
-		/*if (Array.isArray(instance._params.ajax.fields) && instance._params.ajax.fields.length) {
-			data = collectData(data, instance._params.ajax.fields);
-		}*/
+		if (Array.isArray(fields) && fields.length) {
+			data = collectData(data, fields);
+		}
 
-		return instance.request(event);
+		return instance.request(event, data);
 	}
 })
 

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

@@ -308,7 +308,6 @@ class VGSelect extends BaseModule {
 		let observer = new MutationObserver(() => {
 			clearTimeout(observerTimout);
 			observerTimout = setTimeout(() => {
-				console.log('asdas')
 				VGSelect.build(select, true);
 			}, 10);
 		});

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

@@ -54,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;
@@ -80,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