vgapp 0.7.8 → 0.8.0

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

@@ -9,10 +9,22 @@
 @import "../../../utils/scss/functions";
 @import "../../../utils/scss/mixin";
 @import "../../../utils/scss/variables";
+@import "./_animations";
+@import "./_mixins";
 @import "variables";
 
 .vg-files {
 	@include mix-vars('files', $files-map);
+	position: relative;
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			outline: none;
+			text-decoration: none;
+		}
+	}
 
 	input {
 		visibility: initial;
@@ -39,7 +51,7 @@
 				width: 24px;
 
 				path {
-					fill: var(--vg-files-label-color)
+					fill: var(--vg-files-label-color);
 				}
 			}
 		}
@@ -49,101 +61,602 @@
 		}
 	}
 
-	&-info {
-		display: none;
-		margin-bottom: var(--vg-files-info-mb);
-		padding-top: var(--vg-files-info-mt);
+	&-errors {
+		padding: var(--vg-files-errors-padding-y) 0;
 
-		&.show {
+		span {
+			font-size: var(--vg-files-errors-font-size);
+			color: var(--vg-danger);
 			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
+	}
 
-		&--wrapper {
-			display: flex;
-			align-items: center;
+	&-stat {
+		padding: var(--vg-files-stat-padding);
+		border-bottom: 1px solid var(--vg-files-stat-border-color);
+		display: flex;
+		gap: var(--vg-files-stat-gap);
+		align-items: center;
+		margin-bottom: var(--vg-files-stat-mb);
 
-			&-title {
-				font-weight: var(--vg-files-info-title-fw);
-				color: var(--vg-files-info-title-color);
+		&:not(.show) {
+			display: none;
+		}
+
+		&-title {
+			color: var(--vg-success);
+			font-weight: var(--vg-files-stat-title-fw);
+		}
+
+		&-count {
+			span {
+				color: var(--vg-secondary);
+				font-weight: 400;
+				font-size: var(--vg-files-stat-count-font-size);
+				margin-left: var(--vg-files-stat-count-ms);
 			}
+		}
+
+		&-dismiss {
+			margin-left: auto;
+
+			a {
+				--vg-color-link: var(--vg-secondary);
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				line-height: 1;
+				text-decoration: none;
+				color: var(--vg-color-link);
+				font-size: var(--vg-files-stat-dismiss-font-size);
+
+				&[disabled] {
+					pointer-events: none;
+					opacity: .5;
+				}
 
-			&-count {
-				span {
-					display: inline-block;
-					font-weight: var(--vg-files-info-count-fw);
-					font-size: var(--vg-files-info-count-fs);
-					color: var(--vg-files-info-count-color);
-					margin-left: var(--vg-files-info-count-ms);
+				&:hover {
+					--vg-color-link: var(--vg-body-color);
+				}
+
+				i {
+					svg {
+						width: 18px;
+						height: 18px;
+
+						path {
+							fill: var(--vg-color-link);
+						}
+					}
 				}
 			}
+		}
+
+		&-progress {
+			&-list {
+				display: flex;
+				gap: 4px;
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				font-size: 14px;
+				color: var(--vg-secondary);
+
+				.stat-item {
+					display: flex;
+					align-items: center;
+					gap: 2px;
+
+					&.pending {
+						.stat-label {
+							svg {
+								path.dot {
+									animation: flash 1s linear infinite;
+								}
+							}
+						}
+					}
 
-			&-dismiss {
-				font-size: var(--vg-files-info-dismiss-fs);
-				margin-left: var(--vg-files-info-dismiss-ms);
+					&.pending[data-count="0"] {
+						.stat-label {
+							svg {
+								path.dot {
+									animation: none;
+								}
+							}
+						}
+					}
+
+					&.completed:not([data-count="0"]) {
+						.stat-label {
+							svg {
+								path.dot {
+									fill: var(--vg-success);
+									opacity: .72;
+								}
+							}
+						}
+					}
+
+					&.failing:not([data-count="0"]) {
+						.stat-label {
+							svg {
+								path.dot {
+									fill: var(--vg-danger);
+									opacity: .72;
+								}
+							}
+						}
+					}
+				}
+
+				.stat-label {
+					svg {
+						path {
+							fill: var(--vg-secondary-bg);
+						}
+					}
+				}
 			}
 		}
+	}
+
+	&-info {
+		margin-top: var(--vg-files-info-mt);
+		border: 1px solid var(--vg-files-info-border-color);
+		border-radius: var(--vg-files-info-radius);
+
+		&:not(.show) {
+			display: none;
+		}
 
-		&--images {
+		&--list {
+			padding: 0;
+			margin: 0;
 			display: flex;
-			flex-wrap: wrap;
+			flex-direction: column;
+			max-height: var(--vg-files-info-list-max-height);
+			overflow-y: auto;
+			overflow-x: hidden;
+			--vg-files-image-width: 0px;
+			--vg-files-image-height: 0px;
+			--vg-files-info-width: 100%;
+			--vg-files-remove-width: 0px;
+			--vg-files-remove-height: 0px;
+			--vg-files-gap: 8px;
+			--vg-files-image-gap: 0px;
+			--vg-files-remove-gap: 0px;
+
+			&.list-row {
+				--vg-files-image-width: 100px;
+				--vg-files-image-height: 100px;
+				flex-direction: row;
+				flex-wrap: wrap;
+			}
+
+			&:not(.list-row) .file {
+				&.with-image {
+					--vg-files-image-width: 48px;
+					--vg-files-image-height: 48px;
+				}
+
+				&.with-remove {
+					--vg-files-remove-width: calc(28px - var(--vg-files-gap));
+					--vg-files-remove-height: 28px;
+				}
+
+				&.with-info {
+					&.with-image {
+						--vg-files-image-gap: calc(var(--vg-files-image-width) + var(--vg-files-gap));
+					}
+
+					&.with-remove {
+						--vg-files-remove-gap: calc(var(--vg-files-remove-width) + var(--vg-files-gap));
+					}
+
+					--vg-files-info-width: calc(100% - ((var(--vg-files-image-gap) + var(--vg-files-remove-gap))));
+				}
+			}
 
-			> span {
+			.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;
-				width: var(--vg-files-info-image-width);
-				margin-right: var(--vg-files-info-image-me);
-				margin-bottom: var(--vg-files-info-image-mb);
-				padding: var(--vg-files-info-image-padding);
-				border: var(--vg-files-info-image-border);
 
-				&:after {
-					content: '';
-					display: block;
-					padding-bottom: 100%;
+				@include vgfiles-sortable();
+				@include vgfiles-state();
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				&:hover {
+					background-color: var(--vg-files-info-hover-bg);
 				}
 
 				> * {
-					height: calc(100% - 10px);
-					width: calc(100% - 10px);
-					position: absolute;
+					transition: all .2s ease-in-out;
 				}
 
-				&:last-child {
-					margin-right: 0;
+				&-image {
+					flex: 0 0 var(--vg-files-image-width);
+					width: var(--vg-files-image-width);
+					height: var(--vg-files-image-height);
+					border-radius: var(--vg-files-info-image-radius);
+					overflow: hidden;
+
+					img {
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+						object-position: center;
+					}
+
+					i {
+						display: flex;
+						align-items: center;
+						width: 100%;
+						height: 100%;
+
+						svg {
+							width: 90%;
+							height: 90%;
+
+							path {
+								fill: var(--vg-secondary);
+							}
+						}
+					}
+				}
+
+				&-info {
+					flex: 1; // 0 0 var(--vg-files-info-width)
+					max-width: var(--vg-files-info-width);
+					display: flex;
+					gap: 4px;
+					align-items: center;
+
+					.iteration {
+						color: var(--vg-secondary);
+						font-size: var(--vg-files-info-iteration-font-size);
+						display: none;
+					}
+
+					.name {
+						display: block;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						font-size: var(--vg-files-info-name-font-size);
+					}
+
+					.size {
+						color: var(--vg-secondary);
+						font-size: var(--vg-files-info-size-font-size);
+						white-space: nowrap;
+						margin-left: auto;
+					}
+				}
+
+				&-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);
+						height: var(--vg-files-remove-height);
+						border: none;
+						background: transparent;
+						cursor: pointer;
+						outline: none;
+						padding: 0;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						transition: all .2s ease-in-out;
+						position: relative;
+
+						&:hover {
+							--vg-button-color: var(--vg-danger);
+						}
+
+						i {
+							svg {
+								width: var(--vg-files-info-remove-icon-size);
+								height: var(--vg-files-info-remove-icon-size);
+								position: absolute;
+								left: 50%;
+								top: 50%;
+								transform: translate(-50%, -50%);
+
+								path {
+									fill: var(--vg-button-color);
+								}
+							}
+						}
+					}
+				}
+
+				&:not(.with-image) {
+					.file-info {
+						.iteration {
+							display: block;
+						}
+					}
+				}
+			}
+
+			&.list-row {
+				.file {
+					border: none;
+
+					.file-remove {
+						position: absolute;
+						right: 0;
+						top: 4px;
+						width: var(--vg-files-info-row-remove-size);
+						height: var(--vg-files-info-row-remove-size);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						button {
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							background: var(--vg-secondary-bg);
+							border-radius: 50%;
+
+							i {
+								display: flex;
+								width: 100%;
+								height: 100%;
+								align-items: center;
+								justify-content: center;
+
+								svg {
+									width: var(--vg-files-info-row-remove-icon-size);
+									height: var(--vg-files-info-row-remove-icon-size);
+
+									path {
+										fill: var(--vg-body-color);
+									}
+								}
+							}
+						}
+					}
 				}
+			}
+		}
+	}
+
+	&-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;
+		height: var(--vg-files-drop-height);
+		text-align: center;
+		max-width: 100%;
+		overflow: hidden;
+		position: relative;
+		width: 100%;
+		transition: var(--vg-files-drop-transition);
+		border-radius: var(--vg-files-drop-radius);
+
+		&.active {
+			border: none;
+			height: auto;
+			min-height: var(--vg-files-drop-height);
+
+			&:hover {
+				animation: none;
+				background-image: none;
+			}
+		}
+
+		&::after {
+			content: "Отпустите, чтобы загрузить";
+			position: absolute;
+			bottom: var(--vg-files-drop-after-bottom);
+			left: 0;
+			right: 0;
+			font-size: var(--vg-files-drop-after-font-size);
+			color: var(--vg-files-drop-after-color);
+			opacity: 0;
+			transition: opacity 0.2s;
+			pointer-events: none;
+		}
+
+		&:hover {
+			animation: stripes var(--vg-files-drop-stripes-duration) linear infinite;
+			background-image: linear-gradient(
+							-45deg,
+							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 25%,
+							transparent 0,
+							transparent 50%,
+							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 0,
+							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 75%,
+							transparent 0,
+							transparent
+			);
+			background-size: var(--vg-files-drop-stripes-size);
+		}
+
+		&:is(.drop-hover, .drop-active) {
+			border-color: var(--vg-files-drop-hover-border-color);
+			background-color: var(--vg-files-drop-hover-bg);
+			box-shadow: var(--vg-files-drop-hover-shadow);
+		}
+
+		&.drop-active::after {
+			opacity: 1;
+		}
 
-				img {
-					object-fit: cover;
-					object-position: center;
+		> * {
+			display: block;
+		}
+
+		&-message {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: var(--vg-files-drop-message-gap);
+			font-size: var(--vg-files-drop-message-font-size);
+			line-height: var(--vg-files-drop-message-line-height);
+			color: var(--vg-files-drop-message-color);
+
+			&:not(.show) {
+				display: none;
+			}
+
+			.icon {
+				width: var(--vg-files-drop-message-icon-size);
+				height: var(--vg-files-drop-message-icon-size);
+
+				svg {
+					width: 100%;
+					height: 100%;
+
+					path {
+						fill: var(--vg-files-drop-message-icon-color);
+					}
 				}
 			}
 		}
 
 		&--list {
-			padding: 0;
+			display: flex;
+			align-items: center;
+			gap: var(--vg-files-drop-list-gap);
+			flex-wrap: wrap;
+			margin: 0;
+			padding: var(--vg-files-drop-list-padding);
+			width: 100%;
+			height: 100%;
+			border-radius: var(--vg-files-drop-radius);
+			overflow: hidden;
 
-			li {
-				font-size: var(--vg-files-info-list-fs);
-				display: flex;
-				align-items: baseline;
+			.file {
+				--vg-button-color: var(--vg-body-color);
+				border-radius: var(--vg-files-drop-file-radius);
+				position: relative;
+				overflow: hidden;
+				flex: 0 0 var(--vg-files-drop-file-flex);
+				height: var(--vg-files-drop-file-height);
+
+				@include vgfiles-sortable();
+				@include vgfiles-state();
+
+				.file-image {
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
 
-				+ li {
-					margin-top: var(--vg-files-info-list-mt);
+					img {
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+						object-position: center;
+					}
 				}
 
-				span {
-					font-size: var(--vg-files-info-list-span-fs);
-					color: var(--vg-files-info-list-span-color);
-					display: inline-block;
-					margin-right: var(--vg-files-info-list-span-me);
+				&.single {
+					flex: 0 0 100%;
+					gap: 0;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 
-					&:nth-child(2) {
-						--vg-files-info-list-span-fs: 15px;
-						--vg-files-info-list-span-color: #000000;
+					&-image {
+						.file-image {
+							width: 100%;
+							height: 100%;
+							overflow: hidden;
+						}
 					}
 
-					&:last-child {
-						margin-left: auto;
-						white-space: nowrap;
+					&-file {
+						.file-image {
+							width: 100%;
+							height: 100%;
+							overflow: hidden;
+
+							i {
+								width: 100%;
+								height: 100%;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+
+								svg {
+									width: 50%;
+									height: 50%;
+
+									path {
+										fill: var(--vg-secondary);
+									}
+								}
+							}
+						}
+					}
+				}
+
+				&-remove {
+					position: absolute;
+					right: var(--vg-files-drop-remove-offset);
+					top: var(--vg-files-drop-remove-offset);
+
+					button {
+						background: var(--vg-body-bg);
+						color: var(--vg-body-color);
+						border: none;
+						cursor: pointer;
+						outline: none;
+						padding: 0;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						transition: all .2s ease-in-out;
+						position: relative;
+						width: var(--vg-files-drop-remove-size);
+						height: var(--vg-files-drop-remove-size);
+						border-radius: var(--vg-files-drop-remove-radius);
+
+						&:hover {
+							background-color: var(--vg-files-drop-remove-hover-bg);
+						}
+
+						i {
+							position: absolute;
+							left: 0;
+							top: 0;
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+
+							svg {
+								path {
+									fill: var(--vg-button-color);
+								}
+							}
+						}
 					}
 				}
 			}

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

@@ -356,7 +356,11 @@ class VGFormSender extends BaseModule {
 		}
 
 		_this._statusButton('before');
-		EventHandler.trigger(_this._element, EVENT_KEY_BEFORE, _this);
+		EventHandler.trigger(_this._element, EVENT_KEY_BEFORE, {
+			vgformsender: {
+				self: _this
+			}
+		});
 	}
 
 	/**